15. 실행 컨텍스트(Execution Context)와 스코프(Scope) - 3

호이스팅(Hoisting)과 변수의 스코프 체인(Scope Chain)

호이스팅과 스코프 체인은 자바스크립트의 핵심 개념 중 하나로, 코드의 동작을 이해하는 데 있어서 매우 중요합니다. 이 두 가지 개념을 이해하면 변수 및 함수 선언이 어떻게 동작하는지 이해할 수 있습니다.

1. 호이스팅(Hoisting)

호이스팅은 변수 및 함수 선언이 스코프 내에서 최상단으로 끌어올려지는 것을 의미합니다. 즉, 코드 내에서 변수나 함수를 선언하기 이전에도 참조할 수 있다는 특징이 있습니다. 그러나 할당된 값은 호이스팅되지 않습니다.

아래는 호이스팅의 예시 코드입니다.

console.log(x); // undefined
var x = 5;

 

위 코드는 실제로 다음과 같이 동작합니다.

var x;
console.log(x); // undefined
x = 5;

2. 변수의 스코프 체인(Scope Chain)

변수의 스코프 체인은 변수가 접근 가능한 범위를 나타냅니다. 스코프 체인은 함수의 중첩 구조에 의해 형성되며, 내부 함수에서 외부 함수의 변수에 접근할 수 있는 메커니즘을 제공합니다.

아래는 스코프 체인의 예시 코드입니다.

function outerFunction() {
  var outerVariable = 'Outer Variable';
  
  function innerFunction() {
    console.log(outerVariable); // 외부 함수의 변수에 접근 가능
  }
  
  innerFunction();
}

outerFunction(); // 출력 결과: 'Outer Variable'

 

위 코드에서 innerFunction은 외부 함수 outerFunction 내부에 정의되어 있으며, 따라서 innerFunction 내부에서 외부 함수의 변수 outerVariable에 접근할 수 있습니다.

이러한 호이스팅과 변수의 스코프 체인은 자바스크립트의 동작을 이해하는 데 필수적인 개념입니다. 이를 이해하면 코드를 더 잘 이해하고 디버깅하는 데 도움이 됩니다.