자바스크립트(JavaScript) - 스코프(Scope)란?

자바스크립트(JavaScript) - 스코프

 

 

 

스코프는 자바스크립트 뿐만 아니라 다른 프로그래밍 언어에서도 중요하게 여겨지는 개념이다.

 

스코프는 "식별자가 유효한 범위" 를 말하는데, 모든 식별자(변수명, 함수명, 클래스명 등)는 자신이 선언된 위치에 따라 다른 코드에서 식별자를 참조할 수 있는 유효한 범위가 정해진다.

 

 

 

스코프의 종류

 

구분	설명	스코프	변수
전역	코드 가장 바깥쪽 영역	전역 스코프	전역 변수
지역	함수 내부	지역 스코프	지역 변수

 

 

 

다음과 같은 코드가 있다.

 

 

이 코드의 지역코드와 전역코드를 구분해보면 다음과 같겠다.

 

 

 

 

출력은?

 

 

이와 같이 된다.

 

 

 

 

만약 numChangeIn 함수 내에 있는 var num = 100; 코드를 지운다면?

 

 

 

 

 

한단계 상위 스코프에 선언된 num=10이라는 값을 출력시킨다.

 

여기서 알 수 있는 점은 변수를 참조할 때 스코프 체인이 일어난다는 것이다.

 

numChangeIn 함수내에서 변수를 참조하려했지만, 함수내에 선언된 num 변수의 값이 없고,

 

상위 스코프로 이동한다. 이때 numChange 함수내에는 num이 10이라는 값으로 선언되어 있으므로, 이 값을 콘솔에 출력시킨다.

 

함수 바깥의 맨 마지막 코드 console.log(num); 코드는 해당 스코프가 전역스코프이다. 그래서 맨 상단에 선언된 var num=1;을 참조하게되어 1을 출력한다.

 

 

 

중요한 점은 상위 스코프에서 유효한 변수들은 하위 스코프에서 거슬러 올라가 참조를 할 수 있다. 하지만, 그 반대로 상위 스코프가 하위 스코프로 내려가 참조를 할 수 는 없다는 점이다.

 

-------------------------------------------------------------------------------------------------

 

 

 

 

위의 코드를 실행하면 어떤값들이 출력될까?

 

위의 numChange(); 코드를 실행하게 되면 10을 출력하지 않을까 하는 고민을 할 수 도 있게된다.

 

하지만, 실제로 출력시키는 값은 1이다.

 

이유는 바로, 자바스크립트는 렉시컬 스코프를 따르므로, 함수를 어디서 정의 했는지에 따라 함수의  상위 스코프를 결정하기 때문이다.

 

그래서 numChangeOut 함수는 전역변수인 var num = 1; 값을 참조하게 되어 1을 출력시키는 것이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

* 참고 : 모던 자바스크립트 Deep Dive

 

* 틀린 내용 지적 환영입니다!