[Javascript] 05-3 함수 스코프 개념 이해

 

함수 스코프란?

 

 

1. 의미 : 스코프의 사전적 의미는 '범위'이다. 변수 또는 유효 범위를 말한다.

2. 기본형

<script>
  function outerFunction() {
      var 변수명; // 지역 변수
      function innerFunction() { // 지역 함수
      	자바스크립트 코드; 
      } // 보안 철저함
  } 
  innerFunction(); // 접근 금지
</script>

 

3. 지역 변수란 ?

- 스코프 영역에서 선언한 변수, 스코프 영역에서만 사용 가능

 

4. 지역 함수란?

- 스코프 영역에서 선언한 함수, 스코프 영역에서만 사용 가능

 

전역변수와 지역변수의 개념과 차이

 

1. 의미 : 전역변수는 자바스크립트 어디에서든 사용할 수 있는 변수이고, 지역변수는 함수 스코프에서만 사용할 수 있는 변수이다.

 

2. 기본형 

<script>
  var 변수명; // 전역 변수
  function 함수명() {
      var 변수명; // 지역 변수
  } 
</script>

 

3. 예제 - 전역변수와 지역변수

<script>
        var score = 10; // 전역 변수
        function fnc() {
            var score = 50; // 지역 변수
            alert(score); // 50
        }
        fnc();
        alert(score); // 10
</script>

 

 

전역함수와 지역함수의 차이

 

1. 의미 : 전역함수는 자바스크립트 어디에서든 사용할 수 있는 함수이고, 지역함수는 함수 스코프에서만 사용할 수 있는 함수이다.

 

2. 기본형 

<script>
  function 함수명1() { // 전역 함수
      자바스크립트 코드;
  } 
  
  function 함수명2() {
      function 함수명3() { // 지역 함수
      	자바스크립트 코드;
	} 
  } 
</script>

 

3. 예제 - 전역함수와 지역함수

<script>
        function myFnc() {
            alert("전역 함수");
        }

        function outerFnc() {
            function myFnc() {
                alert("지역 함수");
            }
            myFnc(); // 지역 함수 호출
        }

        outerFnc(); 
        myFnc(); // 전역 함수 호출
</script>

 

 

전역과 지역을 나누는 이유

 

1. 이유 : 프로그램을 개발할 때 전역(Global)과 지역(Local)을 나누면 충돌을 피할 수 있기 때문

예를 들어, 다른 개발자가 이미 개발해 놓은 라이브로리나 플러그인의 변수나 함수의 이름이 겹치면 충돌이 발생할 수 있기 때문에 전역과 지역을 나눈다.

 

2. 예제 - 두 개발자가 동일한 함수명을 사용한 경우

<script>
        var num = 100;
        function menu() { // 개발자 A가 작성한 코드
            num += 100;
            alert(num);
        } 
        menu(); // 100
        // 100이 출력되는 이유 : 두 개발자가 작성한 함수의 이름이 겹쳐서
        // 먼저 만들어진 개발자 A의 코드가 제거되고 개발자 B의 함수가 호출됨 
        function menu() { // 개발자 B가 작성한 코드
            alert(num);
        }
</script>

 

 

즉시 실행 함수 

 

1. 의미 : 위 예제와 같은 불상사를 막기 위해서는 지역 함수를 사용하여 함수를 선언하면 된다. 즉시 실행 함수는 지역 함수 선언에 사용하면 함수 선언과 동시에 함수를 호출할 수 있게 된다.

 

2. 기본형

<script>
	(function() {
		var 변수명; // 지역 변수
        function() 함수명() { // 지역 함수
        	자바스크립트 코드;
        }
	}());
</script>

 

3. 예제 - 즉시 실행 함수에 지역 변수와 지역 함수 선언하여 충돌 방지

    <script>
        //즉시 실행 함수 a
        (function() {
            //즉시 실행 함수 a내에서만 유효한 지역 변수 및 지역 함수
            var num = 100;
            function menu() {
                num += 100;
                alert(num);
            }
            menu();
        }());   

        //동일한 메소드 명이 존재할 때 나중에 선언된 메소드가 호출됨
        //즉시 실행 함수 b
        (function() {
            //즉시 실행 함수 b내에서만 유효한 지역 변수 및 지역 함수
            var num = 100;
            function menu() {
            alert(num);
            }
            menu();
        }());  
    </script>