미누에요
[JavaScript] 스코프(scope), 렉시컬 환경(lexical environment), 스코프 체인(scope chain) 본문
[JavaScript] 스코프(scope), 렉시컬 환경(lexical environment), 스코프 체인(scope chain)
미누라니까요 2025. 1. 22. 10:17스코프는 자바스크립트에서 굉장히 중요한 개념 중 하나이다.
간혹 변수의 값이 이상하다거나 예상한 값과 다를 때, 이 스코프(scope)와 관련되어 있는 경우가 꽤 있다.
모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 있다. 이것을 우리는 스코프(scope)라 한다.
예를 들어 보자.
var x = 'global';
function foo(){
var x = 'local';
console.log(x); // 'local'
}
foo();
console.log(x); // 'global'
위 코드에서 함수 내부의 x와 바깥의 x는 다르게 출력된다.
함수 내부 x의 스코프는 함수 안으로 한정되고, 함수 외부 x는 전역적인 스코프를 가진다.
현재 코드가 어디에서 실행되며 주변에 어떤 코드가 있는지, 즉 렉시컬 환경에 따라 현재 작업을 수행할 스코프가 달라지게 되는 것이다.
스코프의 종류는 크게 전역 스코프(global scope)와 지역 스코프(local scope)로 나뉜다.
이전의 코드에서 함수 밖의 x는 전역 스코프, 함수 안의 x는 지역 스코프를 의미하는 것이다.
위 사진을 보면 전역 변수와 지역 변수의 특징에 대해 잘 나와있다.
정리하자면, 전역 변수는 변수가 블록이나 함수 밖에서 선언되었고, 함수 없이도 어디서든 접근할 수 있다.
그리고 지역 변수는 해당 코드(블록이나 함수) 내에서 접근할 수 있고, 스코프 외부에서 접근하려면 정의되지 않은 값으로 간주된다는 말이다.
그렇다면 아래 코드를 보자.
var x = 'a';
function hello(){
var y = 'b';
function hi(){
var z = 'c';
console.log(z); // ?
console.log(y); // error?
console.log(x); // error?
}
hi();
}
hello();
이 코드를 실행했을 경우 hi() 함수 스코프 내에서 z는 존재한다. 하지만 y와 x는 스코프 바깥에 존재하기 때문에 에러가 날거라 생각할 수 있다.
이때 나오는 개념이 스코프 체인(scope chain)이다.
스코프 체인은 스코프들이 체인처럼 연결되어 있는 형태를 의미한다.
우리의 코드에서 보면 전역 ← hello() ← hi() 순으로 스코프 체인이 생성되어 있는 것이다.
따라서 y는 hi()에 없기 때문에 hello()로 올라가서 찾는다.
또한 x는 hi()에 없기 때문에 hello()로 올라가서 찾되, 없으니 한번 더 올라가서 전역 스코프에서 찾아 값을 참조하는 것이다.
스코프는 자바스크립트 코드의 동작을 이해하는 데 정말 중요한 개념이고, 이후에 나올 실행 컨텍스트와 연결하여 깊게 알아둘 필요가 있다.
이상으로 스코프에 대한 설명을 마치겠다.
