Javascript - Scope 완벽하게 이해하기

자바스크립트에서 스코프(scope)는 변수와 상수에 대한 접근 범위와 가시성을 결정하는 중요한 개념입니다. 이 글에서는 스코프의 기본 원리를 설명하고 전역 스코프, 함수 스코프, 블록 스코프의 차이점을 살펴보겠습니다. 또한 호이스팅(hoisting)과 클로저(closure)와 같은 관련 개념도 다룰 것입니다.

 

1. 스코프란 무엇인가?

스코프는 변수가 존재하는 범위로, 변수의 생명주기와 가시성을 제어합니다. 자바스크립트에서는 전역 스코프, 함수 스코프, 블록 스코프의 세 가지 스코프가 있습니다.

 

전역 스코프

전역 스코프는 코드의 가장 바깥쪽 범위에 위치한 스코프입니다. 전역 스코프에서 선언된 변수는 어디에서나 접근할 수 있습니다.

 

예시:

const globalVar = "I'm global!";

function exampleFunction() {
  console.log(globalVar); // "I'm global!"
}

exampleFunction();

 

함수 스코프

함수 스코프는 함수 내에서 선언된 변수의 범위입니다. 함수 스코프에서 선언된 변수는 해당 함수 내에서만 접근할 수 있습니다.

 

예시:

function exampleFunction() {
  const localVar = "I'm local!";
  console.log(localVar); // "I'm local!"
}

exampleFunction();
console.log(localVar); // ReferenceError: localVar is not defined

 

블록 스코프

블록 스코프는 중괄호 {}로 구성된 블록 내에서 선언된 변수의 범위입니다. let과 const 키워드로 선언된 변수는 블록 스코프를 갖습니다.

 

예시:

if (true) {
  const blockVar = "I'm in a block!";
  console.log(blockVar); // "I'm in a block!"
}

console.log(blockVar); // ReferenceError: blockVar is not defined

 

2. 호이스팅

호이스팅은 변수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상입니다. 호이스팅은 함수 선언 및 var 키워드로 선언된 변수에만 적용됩니다. 호이스팅 때문에 변수 선언보다 먼저 변수에 접근할 수 있지만, 이때 변수는 아직 값을 가지고 있지 않기 때문에 undefined로 초기화됩니다.

 

예시:

console.log(hoistedVar); // undefined
var hoistedVar = "I'm hoisted!";

function hoistedFunction() {
  console.log("I'm also hoisted!");
}

hoistedFunction(); // "I'm also hoisted!"

 

let과 const 키워드로 선언된 변수는 호이스팅되지 않습니다. 이러한 변수에 선언 전에 접근하려고 하면 ReferenceError가 발생합니다.

 

예시:

console.log(noHoistVar); // ReferenceError: noHoistVar is not defined
let noHoistVar = "I'm not hoisted!";

 

3. 클로저

클로저는 함수와 그 함수가 선언될 때의 렉시컬 환경(lexical environment) 사이의 연결입니다. 이를 통해 함수는 선언된 위치의 스코프에서 변수에 접근할 수 있습니다. 클로저는 자바스크립트에서 고차 함수(higher-order functions)와 콜백(callbacks)을 사용할 때 중요한 역할을 합니다.

 

예시:

function outerFunction() {
  const outerVar = "I'm in the outer function!";

  function innerFunction() {
    console.log(outerVar); // "I'm in the outer function!"
  }

  return innerFunction;
}

const innerFunc = outerFunction();
innerFunc(); // "I'm in the outer function!"

 

위 예제에서 innerFunction은 outerVar에 접근할 수 있습니다. 이는 outerFunction의 렉시컬 환경이 innerFunction에 포함되어 있기 때문입니다. 이를 클로저라고 합니다.

 

정리

자바스크립트에서 스코프는 변수의 생명주기와 가시성을 결정하는 핵심 개념입니다. 스코프의 종류와 작동 방식을 이해하면 코드를 더 효과적으로 구성하고 디버깅할 수 있습니다. 호이스팅과 클로저와 같은 관련 개념도 함께 이해하면 자바스크립트에서 함수와 변수를 더욱 효과적으로 사용할 수 있습니다. 이제 스코프에 대한 이해를 바탕으로 자바스크립트 프로젝트에서 견고한 코드를 작성해 보세요.