[JavaScript]스코프, 스코프 체인

스코프체인 발표영상

스코프(Scope)란?

스코프란 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 선언된 위치에 따라 다른 코드에서 자신을 참조할 수 있는 범위를 결정하는 개념입니다. 간단히 말하면, 스코프는 변수나 함수가 유효한 범위를 말하는 것이죠. 자바스크립트에서는 함수 스코프와 블록 스코프 두 가지 유형의 스코프가 있습니다.

함수 스코프(Function Scope): 함수 스코프는 함수 내부에서 정의된 변수가 해당 함수 내부에서만 유효하며 외부에서는 접근할 수 없습니다.

블록 스코프(Block Scope): 블록 스코프는 중괄호({})로 둘러싸인 블록(예: if 문, for 문) 내에서 정의된 변수가 해당 블록 내에서만 유효하며 외부에서는 접근할 수 없습니다. ES6에서 도입된 let과 const 키워드를 사용하여 블록 스코프를 생성할 수 있습니다.

함수는 전역에서 정의될 수도 있고, 다른 함수 내부에서 정의될 수도 있습니다. 함수 내부에서 정의된 함수를 중첩 함수라고 하며, 중첩 함수를 포함하고 있는 함수를 외부 함수라고 합니다. 이렇게 함수가 중첩되면 스코프들도 중첩되어 계층적인 구조를 가지게 됩니다.

스코프 체인 (Scope)

스코프 체인은 변수를 참조할 때 스코프의 계층 구조를 따라 올라가며 찾는 메커니즘입니다. 변수를 찾을 때는 항상 아래에서 위로 순차적으로 올라갑니다. 아래 코드를 통해 같이 살펴보겠습니다.

제일 먼저 실행되는 것은 전역 컨텍스트입니다. 전역 컨텍스트가 활성화되면 전역 변수 동과 함수 outer가 선언되어 있는지 확인하고 값을 할당합니다. 이후에 outer 함수를 실행합니다. outer 함수가 실행되면 해당 함수의 내부로 이동하고, 내부에 또 다른 함수인 inner 함수가 있는지 확인하고 호출합니다.

outer 함수 내부에서 inner 함수가 호출되면, 컴퓨터는 변수 동을 확인하고 값을 저장합니다. 이후에 console.log로 실행된 동과 훈의 값을 출력하기 위해 inner 함수 내부에서 값을 찾게 됩니다. 변수 동은 방금 선언하고 값을 할당했으므로 쉽게 찾을 수 있습니다.

그러나 변수 훈을 선언하지 않았기 때문에 컴퓨터는 inner 함수를 넘어서 정의된 변수 훈이 있는지 찾게 됩니다. 이때 우리는 단순히 아무 변수나 참조하는 것이 아니라 변수 훈만 찾아서 참조해야 합니다. 이를 위해 컴퓨터는 스코프 체인을 따라 검색을 진행합니다. 코드 옆의 표를 통해 스코프 체인이 어떻게 형성되는지 살펴보겠습니다.

스코프 체인에서 변수를 참조할 때는 항상 아래에서 위로 순차적으로 올라갑니다.따라서 컴퓨터는 먼저 내부 스코프인 inner 함수의 스코프를 검색하고, inner 함수 내부에서 변수 훈이 없다는 것을 확인하였으니 바로 상위 스코프인 outer 함수로 올라가서 변수 훈을 찾습니다. outer 함수 내에서 변수 훈을 찾았으므로 정상적으로 inner 함수를 실행할 수 있게 됩니다. 이제는 outer 함수를 실행할 차례입니다.

이제 outer 함수로 넘어와서 outer 함수 내에 변수 동과 훈이 정의되어 있는지 컴퓨터가 확인하게 됩니다. 이번에는 변수 동은 없고 변수 훈이 있습니다. 컴퓨터는 outer 함수 내의 훈을 찾게 되고,

그 다음으로 한 단계 위인 전역 스코프로 올라가 변수 동을 찾게 됩니다. 전역 변수 동을 찾았으므로 outer 함수를 실행하면 동과 훈을 정상적으로 출력하게 됩니다. 만약 전역 스코프에서도 변수 동을 찾지 못한다면 컴퓨터는 ReferenceError 를 발생시킵니다.

이렇게 변수를 찾을 때는 항상 스코프 체인을 따라 순차적으로 검색하며, 변수가 정의된 스코프에서부터 상위 스코프로 차례로 올라가게 됩니다.따라서 중첩된 함수에서 외부 함수의 변수를 참조할 수 있게 됩니다.