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

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

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

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

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

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

function 아버지() {
document.writeln(a); //undefined (** 설명2)
(function () {
document.writeln(a); //undefined (** 설명3)
a = '55';
})();
var a; //(** 특이사항)
document.writeln(a); //55 (** 설명4)
}

function 어머니() {
document.writeln(a); //undefined (** 설명5)
a = '50';
document.writeln(a); //50
//var a;
}


아버지();
어머니();
document.writeln(a); //50
}

가족();


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

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

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

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

**설명2) 가족함수에서 아버지() 지역함수를 먼저 호출합니다. 아버지() 함수 안에 ** 특이사항이라고 표현한 부분이 있는데 여기에 전역변수 a 와 동일하게 기술되어 있습니다. 아버지() 지역함수는 지역변수인 var a; 에 적용을 받게 됩니다. 변수만 설정 되었지만 값이 없네요. 그래서 값이 undefined 입니다. 만약에 ** 특이사항이라고 기술한 var a; 를 제거하면 어떻게 될까요?? 지역변수가 없으므로 전역변수 a 의 값을 찾게 됩니다. 그로 인해 출력이 0이 되겠죠. 여기선 var a; 지역변수가 존재하므로 undefined 로 출력됩니다.

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

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

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

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

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

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




Comments 0