자바스크립트에서 스코프는 변수와 함수의 유효 범위를 결정합니다. 스코프는 다양한 종류가 있는데, 그중에서도 함수 스코프와 블록 스코프는 가장 일반적으로 사용되는 스코프입니다. 이번 글에서는 함수 스코프와 블록 스코프의 차이점을 이해해보겠습니다.

함수 스코프 (Function Scope)

함수 스코프는 함수 내부에서 선언된 변수가 해당 함수 내에서만 유효하다는 의미입니다. 즉, 함수 스코프 내에서 선언된 변수는 해당 함수의 시작부터 끝까지 사용할 수 있고, 함수 외부에서는 접근할 수 없습니다.

function myFunction() {
  var message = "Hello"; // 함수 스코프 내에서 유효한 변수

  console.log(message); // "Hello" 출력
}

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

위 예제에서 message 변수는 myFunction 함수 내에서 선언되었기 때문에 해당 함수 내에서만 유효합니다. 함수 외부에서는 message 변수에 접근할 수 없기 때문에 ReferenceError가 발생합니다.

블록 스코프 (Block Scope)

블록 스코프는 중괄호 {}로 둘러싸인 코드 블록 내에서 선언된 변수가 해당 블록 내에서만 유효하다는 의미입니다. 일반적으로 if문, for문, while문 등의 제어문 내에서 사용되는 변수들이 블록 스코프를 갖습니다.

if (true) {
  var message = "Hello"; // 블록 스코프 내에서 유효한 변수

  console.log(message); // "Hello" 출력
}

console.log(message); // "Hello" 출력

위 예제에서 message 변수는 if문 내에서 선언되었지만, var 키워드로 선언되었기 때문에 해당 블록 외부에서도 유효합니다. 따라서 if문 외부에서도 message 변수에 접근할 수 있고, 값인 “Hello”가 출력됩니다.

결론

함수 스코프와 블록 스코프는 변수의 유효 범위를 결정하는 중요한 개념입니다. 함수 스코프는 함수 내부에서 선언된 변수가 함수 전체에서 유효하며, 블록 스코프는 중괄호로 둘러싸인 코드 블록 내에서 선언된 변수가 해당 블록 내에서만 유효합니다.

자바스크립트에서는 var 키워드를 사용하여 함수 스코프를 생성하지만, ES6(ES2015)부터는 let과 const 키워드를 사용하여 블록 스코프를 생성할 수 있습니다. 따라서 최신 자바스크립트에서는 블록 스코프를 더욱 권장합니다.

Reference: MDN - Scope