[JavaScrpit] 함수 스코프(Function Scope)

스코프의 사전적인 의미는 '범위'이다.

프로그래밍에서 스코프는 변수나 함수의 유효 범위를 나타내며 크게 지역과 전역의 범위로 구분할 수 있다.

• 스코프 : 변수 또는 함수의 범위
• 지역 변수 : 스코프 안에서 선언된 변수 스코프 안에서만 사용이 가능
• 지역 함수 : 스코프 안에서 선언된 함수 스코프 안에서만 사용이 가능 

 

위 사진에서 맨 위의 num = 100;이 전역 변수이고 outFunc( ){} 이 전역 함수이다.

innerFun( )이 지역 함수이고 innerFun( ) 안에 var num = 10;은 지역 변수이다.

innerFun( )은 지역 함수여서 밖에서 접근할 수 없다.

 

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

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

      outerFnc();  //지역 함수
      myFnc();    //전역 함수

위 코드를 보면 myFnc( ) 함수가 두 번 선언되는데 하나는 전역 함수이고 하나는 outerFnc( ) 안에 지역 함수이다.

함수를 호출하면 outerFnc( ) 안에 함수 myFnc( )은 지역 함수이기 때문에 스코프 안에서만 사용할 수 있어서 myFnc( ) 함수를 호출했을 때 전역 함수라는 경고창이 나오게 된다. 

 

 

---

전역과 지역을 나누는 이유는 충돌을 피하기 위해서이다.

프로젝트의 규모가 커지면 여러 명의 개발자가 투입되어 개발이 진행되는데 같은 전역 변수나 전역 함수를 사용하게 되면 충돌이 발생한다. 또한 다른 개발자가 이미 개발해 놓은 라이브러리나 플러그인의 변수 또는 함수의 이름과 자신이 선언한 변수나 함수의 이름이 똑같다면 충돌이 발생할 수도 있다.

그럴 경우 지역 함수나 변수를 사용하여 선언한다면 충돌하는 불상사를 막을 수 있다.

이 때 효율적으로 사용 가능한 것이 '즉시 실행 함수'이다.

(function() {
    자바스크립트 코드;
 }());

위 코드는 즉시 실행 함수의 기본형으로 함수의 끝에 ( )를 붙여 선언과 동시에 호출이 이루어지게 된다.

 

(function() {
    var num = 100;
    function menu() {
    	num += 100;
        alert(num);
     }
     menu();
   }());


(function() {
	var num = 100;
    function menu() {
    	alert(num);
     }
  }());

 지역 변수와 지역 함수 그리고 즉시 실행 함수를 사용해서 충돌을 피한 예이다.

실행 시 경고창에 200과 100이 차례대로 실행된다.