Javascript 의 전역과 지역 함수 및 변수에 대해 알아보자

Javascript 의 전역과 지역 함수 및 변수에 대해 알아보자

 

 

JavaScript에는 전역 및 지역의 두 가지 범위가 있습니다.  

 

함수 정의의 외부에 선언된 변수는 전역 변수이며 프로그램 전체에서 이 값에 액세스하여 수정할 수 있습니다.  

 

함수 정의의 내부에 선언된 변수는 지역 변수입니다.  이 변수는 함수가 실행될 때마다 만들어지고 소멸되므로 함수 외부의 코드에서 액세스할 수 없습니다.  

 

블록 범위 변수의 특별한 경우를 제외하고는 JavaScript는 블록 범위를 지원하지 않습니다(중괄호 집합 {. . .}에서 새 범위를 정의).  

 

<script>

    function 가족() {

        var a = '0';

        document.writeln('가족(1):' + a); //0 (** 설명1)



        function 아버지() {

            document.writeln('아버지(1):' + a); //undefined (** 설명2)

            (function () {

                document.writeln('아버지(2):' + a); //undefined (** 설명3)

                a = '55';

            })();

            var a; //(** 특이사항)

            document.writeln('아버지(3):' + a); //55 (** 설명4)

        }



        function 어머니() {

            document.writeln('어머니(1):' + a); //0 (** 설명5)

            a = '50';

            document.writeln('어머니(2):' + a); //50

            //var a;

        }




        아버지();

        어머니();

        document.writeln('가족(2):' + a); //50

    }



    가족();

</script>

 

결과

 

가족(1):0

아버지(1):undefined

아버지(2):undefined

아버지(3):55

어머니(1):0

어머니(2):50

가족(2):50

 

 

서핑을 하다가 위의 자바스크립트 코드를 찾게 되었는데요. 이것을 보면 전역변수와 지역변수의 구분을 잘 알 수 있을 듯 싶네요.

 

가족이라는 전역함수와 전역변수를 만들었고,  그 안에 아버지와 어머니의 지역 함수를 만들었습니다. 

먼저 가족() 이라는 전역함수를 실행시킵니다. 

 

 

** 설명1)

 

function 가족() {
  var a = '0';
  document.writeln('가족(1):' + a); //0 (** 설명1)
  
  ...
  ...
}        

 

전역변수인 a 에 값이 0 이 할당되었습니다. 그래서 그 다음 구문인 document.writeln(a) 는 0 이 출력되었죠.

 

 

**설명2)

 

var a = '0';
document.writeln('가족(1):' + a); //0 (** 설명1)

function 아버지() {

  document.writeln('아버지(1):' + a); //undefined (** 설명2)

  (function () {
    document.writeln('아버지(2):' + a); //undefined (** 설명3)
    a = '55';
  })();

  var a; //(** 특이사항)
  document.writeln('아버지(3):' + a); //55 (** 설명4)
}

 

가족함수에서 아버지() 지역함수를 먼저 호출합니다. 아버지() 함수 안에 (** 특이사항) 이라고 표현한 부분이 있는데 여기에 전역변수 a 와 동일하게 기술되어 있습니다. 아버지() 지역함수는 지역변수인 var a; 에 적용을 받게 됩니다. 변수만 설정 되었지만 값이 없네요. 그래서 값이 undefined 입니다. 

 

만약에 (** 특이사항) 이라고 기술한 var a; 를 제거하면 어떻게 될까요?? 지역변수가 없으므로 전역변수 a 의 값을 찾게 됩니다. 그로 인해 출력이 0 이 되겠죠. 여기선 var a; 지역변수가 존재하므로 undefined 로 출력됩니다.

 

 

**설명3)

 

  (function () {
    document.writeln('아버지(2):' + a); //undefined (** 설명3)
    a = '55';
  })();

 

자동실행 함수이네요. 여기도 지역변수 var a; 로 인해 출력이 undefined 라 출력됩니다. 그 다음 구문은 a = 55; 이네요. 이제 a 라는 지역변수에 값이 55가 할당된 겁니다. 

 

**설명4)

 

function 아버지() {

  .....

  (function () {
    document.writeln('아버지(2):' + a); //undefined (** 설명3)
    a = '55';
  })();

  var a; //(** 특이사항)
  document.writeln('아버지(3):' + a); //55 (** 설명4)
}

 

자동실행 함수 안의 a = '55'; 로 인해 출력이 55가 됩니다.

 

 

**설명5)

 

function 가족() {

        var a = '0';

        document.writeln('가족(1):' + a); //0 (** 설명1)
        
        .....

	function 어머니() {

            document.writeln('어머니(1):' + a); //0 (** 설명5)

            a = '50';

            document.writeln('어머니(2):' + a); //50

            //var a;

        }
}        

 

이제 어머니() 함수를 호출하게 되네요. 어머니는 함수 내부에 var a; 같은 지역변수가 없습니다. 따라서 스코프영향으로 가족() 전역함수 안의 전역변수의 값을 찾게 됩니다. 값은 0 이 출력되겠죠. 중요한것은 아버지() 지역함수 내의 지역변수 a 값은 아버지() 지역함수 안에서만 적용된다는 점입니다. 만약에 어머지() 지역함수안에 아버지() 지역함수처럼 var a; 이 존재한다면 undefined 출력이 되겠죠...

 

**설명5) 어머니() 지역함수에서 변경한 전역변수의 a = '50'; 할당해서 전역변수값이 변경되어 50이 출력됩니다.

여담이지만, 자바스크립트 이론을 정립하기에 좋은 유투브 강좌를 소개 해 드립니다.

 

 

https://www.youtube.com/watch?v=Rnm0YnL8P60