자바스크립트는 블록 스코프 대신 함수 스코프를 가지고 있습니다. 함수 스코프는 변수와 함수의 유효 범위를 함수 내부로 제한하는 개념입니다. 이는 코드를 모듈화하고 변수의 충돌을 방지하는데 도움을 줍니다.

변수의 유효 범위 (Scope)

변수의 유효 범위는 변수가 정의된 위치에 따라 결정됩니다. 함수 내에서 정의된 변수는 함수 내부에서만 접근할 수 있으며 외부에서는 참조할 수 없습니다. 이를 지역 변수라고 합니다.

function printMessage() {
  var message = "Hello, World!";  // 지역 변수
  console.log(message);
}

printMessage();  // "Hello, World!" 출력
console.log(message);  // 에러 - message는 함수 외부에서 접근 불가

위 예시에서 message 변수는 printMessage 함수 내에서 정의된 지역 변수입니다. 함수 외부에서는 message 변수에 접근할 수 없으며, 해당 코드를 실행하면 에러가 발생합니다.

변수의 호이스팅 (Hoisting)

자바스크립트에서는 변수의 정의가 유효 범위 위로 끌어올려진다는 개념인 호이스팅이 적용됩니다. 이는 변수가 선언되기 전에도 참조할 수 있다는 의미입니다. 그러나 변수의 할당은 그 위치에 따라 실행됩니다.

function printNumber() {
  console.log(number);  // undefined (할당 이전)
  var number = 123;
  console.log(number);  // 123 (할당 이후)
}

printNumber();

위 예시에서 number 변수를 var 키워드로 선언하고 값을 할당한 후에도 해당 변수를 이전에 참조하는 것이 가능합니다. 다만 할당은 실제로 선언된 위치 이후에 이루어지므로, 첫 번째 console.log에서는 undefined가 출력됩니다. 두 번째 console.log에서는 변수가 할당된 후의 값인 123이 출력됩니다.

클로저 (Closure)

자바스크립트에서는 함수 스코프의 개념을 기반으로 클로저라는 기능을 제공합니다. 클로저는 함수를 정의할 때 스코프 체인에 접근하는 것을 말합니다. 이는 함수 내부에서 외부 변수에 접근할 수 있게 해주며, 데이터 은닉 및 모듈화 등의 목적으로 자주 사용됩니다.

function createCounter() {
  var count = 0;

  return function increment() {
    count++;
    console.log(count);
  };
}

var counter = createCounter();
counter();  // 1
counter();  // 2

위 예시에서 createCounter 함수는 내부에 count 변수를 정의한 후, increment 함수를 반환합니다. 이렇게 반환된 increment 함수는 외부에서 실행할 때마다 count 변수를 증가시키고 출력합니다. 이 때 count 변수는 클로저의 개념을 통해 외부 함수 스코프에 접근할 수 있게 됩니다.

마무리

자바스크립트의 함수 스코프는 변수와 함수의 유효 범위를 함수 내부로 제한하여 충돌을 방지하고 모듈화를 도와주는 중요한 개념입니다. 변수의 유효 범위, 호이스팅, 그리고 클로저를 이해하는 것은 자바스크립트 개발에 있어서 필수적입니다.