[Javascript] 스코프 체인과 렉시컬 스코프

김건휘·2024년 5월 12일

렉시컬 스코프

Javascript

목록 보기

1/2

🍀들어가며

이번 시간에는 프로그래밍에서 변수의 유효 범위를 결정하는 중요한 개념인 스코프 체인(Scope Chain)과 렉시컬 스코프(Lexical Scope)에대한 소개가 있겠습니다.

🍀스코프 (Scope)란?

스코프란 식별자의 유효 범위를 말한다.
Scope를 직역하면 범위, 영역 이라는 뜻입니다. 즉, 자바스크립트에서의 스코프는 식별자(변수, 매개변수, 함수)가 유효한 범위 를 말합니다.

🍀스코프 (Scope) 예시

var x = 'global';

function foo() {
  var x = 'local';
  console.log(x)
}

foo();
console.log(x);

x라는 변수를 전역환경과 함수내부에서 각각 선언을 해주고 다른 값을 할당해 주었다.
자바스크립트는 어떤 변수를 참조할까?

// local
// global

함수 foo() 내부에서 console.log(x)를 호출할 때: 이 경우, foo() 함수 내에서 새롭게 선언된 로컬 변수 x가 출력됩니다. 이 변수 x는 함수 내부에서 'local'로 초기화되었기 때문에, 함수 내의 console.log(x)는 "local"을 출력합니다.
전역에서 console.log(x)를 호출할 때: 전역 변수 x는 'global'로 초기화되었습니다. 따라서 함수 foo() 외부에서 console.log(x)를 호출하면, 전역 변수 x의 값인 "global"이 출력됩니다.

그러므로 스코프란 식별자를 검색할 때 검색 가능한 범위 라고 할 수 있다.

🍀스코프 (scope) 종류

스코프는 크게 두 가지 유형으로 나뉩니다:

글로벌 스코프(Global Scope):

글로벌 스코프에 선언된 변수는 프로그램의 어디에서나 접근할 수 있습니다(local scope에서도 가능). 이는 프로그램 전체를 통틀어 하나만 존재하며, 프로그램이 시작될 때 생성되고 종료될 때까지 유지됩니다.

지역 스코프(Local Scope) 또는 함수 스코프:

지역 스코프는 함수 내부에서 선언된 변수가 함수 내에서만 접근할 수 있는 범위를 의미합니다.자신이 선언된 스코프와 하위 스코프(중첩, 내부 함수)에서만 참조가 가능하다.
각 함수 호출 시 새로운 스코프가 생성되며, 함수 실행이 종료되면 해당 스코프에 있는 변수들은 사라지게 됩니다.

🍀스코프 체인 (Scope Chain)이란?

높은 망루에선 낮은 위치의 성채 내부와 바깥에 뭐가 있는지 관찰(참조)할 수 있다. 그러나 성벽에 시야가 가리기 때문에 바깥에서 내부를 관측할 수 없다. 함수의 코드 블럭은 성벽과 같다. 코드 블럭 안쪽에 있을 수록 바깥을 관측할 순 있지만 코드 블럭 바깥에서 내부의 변수를 참조할 순 없다.
블록 스코프에서 지역 변수 y는 전역 변수 x값을 참조할 수 있고, 반환되는 함수의 지역 변수z는 y의 값을 참조할 수 있다.

🍀스코프 체인 (Scope Chain) 코드 예시

var globalVar = "global";

function outer() {
    var outerVar = "outer";

    function inner() {
        var innerVar = "inner";

        console.log(innerVar);   // "inner"
        console.log(outerVar);   // "outer"
        console.log(globalVar);  // "global"
    }

    inner();
}

outer();

위 예제에서 inner() 함수는 자신의 로컬 변수 innerVar, 바깥 함수 outer()의 변수 outerVar, 그리고 전역 변수 globalVar 모두에 접근할 수 있습니다.

즉, 어떤 함수 또는 블록 내에서 변수를 참조할 때, 현재 스코프에서 찾고, 없으면 바로 바깥 스코프로 이동하여 찾는 과정을 반복하는 것.
자신이 속해있는 지역의 변수들을 참조할 수 있게 되며, 해당 코드 레벨에 참조값이 없다면 상위 레벨의 스코프로 참조 값을 찾아 나가는 현상을 스코프 체인(Scope Chain)이라고 한다.

🍀렉시컬 스코프 (Lexical Scope)이란?

렉시컬 스코프는 변수가 코드를 작성하는 시점에서 그 범위가 결정되는 것을 말한다. 즉, 함수의 실행 컨텍스트가 아니라 함수가 작성된 위치에 따라 해당 함수의 스코프가 정해진다. 이를 통해 코드를 작성할 때 변수 접근성이 어떻게 될지 예측할 수 있다.
자바스크립트는 렉시컬 스코프 원칙을 따른다. 렉시컬 스코프는 또 다른 말로 정적 스코프(Static Scope)라고 한다.

즉, 렉시컬 스코프란 함수를 호출한 곳이 아닌 선언한 곳을 기준으로 스코프를 결정하는 원칙이다.

🍀렉시컬 스코프 (Lexical Scope) 코드 예시

let greet = 'Hello';

function sayHi() {
	let greet = 'Hi';
  	print();
}

function print() {
	console.log(greet);
}

sayHi();
print();

sayHi();를 호출 시 : print() 함수가 실행되어 전역 스코프의 greet 변수의 값을 콘솔에 출력합니다. 따라서 "Hello"가 출력됩니다.
print();를 호출 시 : 같은 전역 스코프의 greet 변수를 참조하므로 "Hello"가 출력됩니다.

만약, 동적스코프였다면?

sayHi() 호출 시 : print() 함수가 호출된 컨텍스트, 즉 sayHi() 함수의 스코프를 참조하게 됩니다. 따라서 sayHi() 내에서 선언된 greet (값이 'Hi')를 출력합니다.
print() 직접 호출 시 : 이 경우 print() 함수는 전역 컨텍스트에서 호출됩니다. 따라서 전역 변수 greet (값이 'Hello')를 참조하여 출력합니다.

참고자료
https://velog.io/@oneook/%EC%8A%A4%EC%BD%94%ED%94%84%EC%99%80-%EC%8A%A4%EC%BD%94%ED%94%84-%EC%B2%B4%EC%9D%B8-JavaScript-Basics
https://thisiscoke.tistory.com/entry/JavaScript-%EC%8A%A4%EC%BD%94%ED%94%84-%EB%A0%89%EC%8B%9C%EC%BB%AC%ED%99%98%EA%B2%BD