자바스크립트의 스코프 체인 완전 분석하기 예제코드 포함

안녕하세요 오늘은 자바스크립트의 스코프 체인에 대해서 소개해드리려고 합니다. 코드를 작성할 때 스코프 체인(scope chain) 개념을 이해하고 있는 것이 굉장히 중요합니다.

쉽게 설명드리자면 변수 및 함수의 유효 범위를 결정하고, 코드에서 식별자(identifier)에 액세스하는 방법을 제어하는 것 입니다. 더 자세히 알아보도록 하겠습니다.

Table of Contents

스코프의 개념

스코프(scope)란 변수와 함수의 유효 범위를 의미합니다. 변수나 함수가 어디에서 선언되었는지에 따라 그 유효 범위가 결정됩니다. 크게 스코프는 전역 스코프(global scope)와 지역 스코프(local scope)로 나뉩니다. 전역 스코프는 코드 어디에서든지 접근할 수 있는 범위를 가지고 지역 스코프는 특정 블록 내에서만 접근할 수 있는 범위를 가집니다.

스코프 체인 이해하기

자바스크립트에서는 스코프 체인(scope chain)이라는 개념을 사용하여 변수 및 함수에 대한 접근 권한을 결정합니다. 스코프 체인은 스코프가 중첩되어 있을 때 발생합니다. 예를 들어서 함수 내부에 다른 함수가 중첩되어 있는 경우 내부 함수는 외부 함수의 변수에 접근할 수 있습니다. 이러한 구조에서 스코프 체인은 내부 스코프부터 시작하여 외부 스코프로 이동하며 변수나 함수를 찾습니다.

제가 준비한 예제와 함께 살펴보도록 하겠습니다.

function outerFunction() {
  var outerVar = 'Outer Variable';

  function innerFunction() {
    console.log(outerVar); // innerFunction에서 outerVar에 접근
  }

  innerFunction();
}

outerFunction(); // "Outer Variable" 출력

위 예제에서 innerFunction은 외부 함수 outerFunction의 변수 outerVar에 접근할 수 있습니다. 여기서 스코프 체인이 동작함을 보여줍니다.

렉시컬 스코프

자바스크립트는 렉시컬 스코프(lexical scope)를 따릅니다. 변수의 유효 범위가 코드를 작성할 때 정적으로 결정된다는 의미입니다. 함수가 어디에서 호출되었는지가 아니라 어디에 선언되었는지에 따라 스코프가 결정됩니다.

예제와 함께 살펴보도록 하겠습니다.

var globalVar = 'Global Variable';

function outerFunction() {
  var outerVar = 'Outer Variable';

  function innerFunction() {
    console.log(outerVar); // innerFunction에서 outerVar에 접근
    console.log(globalVar); // innerFunction에서 globalVar에 접근
  }

  innerFunction();
}

outerFunction();

보시다시피 innerFunction은 외부 스코프인 outerFunction과 전역 스코프 모두의 변수에 접근할 수 있습니다. 렉시컬 스코프의 특성을 볼 수 있습니다.

스코프 체인 해결 과정

스코프 체인을 통해 변수나 함수에 접근할 때, 자바스크립트 엔진은 다음과 같은 과정을 거칩니다.

현재 스코프에서 변수나 함수를 찾습니다.
없으면 상위 스코프로 이동하여 다시 검색합니다.
이 과정을 전역 스코프까지 반복합니다.
변수나 함수를 찾으면 해당 값을 반환하거나 실행합니다.

스코프 체인의 성능 고려 사항

코드의 가시성과 유연성을 제공하지만, 성능상의 고려 사항도 있습니다. 스코프 체인이 깊이가 깊을수록 변수나 함수를 찾는 데 걸리는 시간이 늘어날 수 있습니다. 따라서 너무 깊은 스코프 체인을 가지는 것은 성능에 영향을 줄 수 있으므로 주의가 필요합니다.

핵심 내용 요약 총정리

다시 한번 핵심만 요약해서 정리해드리자면 자바스크립트에서 스코프 체이닝은 변수나 함수를 참조할 때 실행됩니다. 스코프 체이닝은 코드가 실행되는 동안 식별자(identifier)를 해석하는 과정에서 발생합니다. 즉, 변수나 함수를 참조할 때 해당 식별자가 현재 스코프에 없으면 자바스크립트 엔진은 상위 스코프로 이동하여 해당 식별자를 찾습니다. 이 과정에서 스코프 체이닝이 발생하며, 필요한 식별자를 찾을 때까지 스코프 체인을 따라 올라가게 됩니다. 스코프 체이닝은 변수나 함수의 유효 범위를 결정하고, 코드에서 해당 식별자에 접근하는 데 사용됩니다.

오늘 내용이 자바스크립트를 사용하시는 분들에게 도움이 되었다면 좋겠습니다. 방문해 주셔서 감사합니다.