자바스크립트에서 변수의 스코프는 변수의 유효 범위를 의미합니다. 자바스크립트에서는 지역 변수의 스코프에는 두 가지 타입이 있습니다. 블록 스코프와 함수 스코프입니다. 이 두 가지 스코프는 사용하는 방식과 변수의 유효 범위에 차이가 있습니다.

블록 스코프 (Block Scope)

블록 스코프는 중괄호({})로 둘러싸인 영역을 의미합니다. if 문, for 문, while 문 등과 같은 제어문 또는 함수 내부 등에서 변수를 선언할 때 이 변수는 블록 스코프를 가집니다. 이렇게 선언된 변수는 해당 블록 내부에서만 접근할 수 있으며, 외부에서는 접근할 수 없습니다.

if (true) {
  let blockScopedVariable = 10;
  console.log(blockScopedVariable); // 10
}
console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined

위의 코드에서는 if 문의 블록 내부에서 blockScopedVariable이라는 변수를 선언하였습니다. 그리고 이 변수를 블록 외부에서는 참조할 수 없습니다.

함수 스코프 (Function Scope)

함수 스코프는 함수 내에서 선언된 변수가 해당 함수 내에서만 접근 가능한 스코프를 의미합니다. 함수 내에 선언된 변수는 해당 함수 내에서 유효하며, 외부에서는 접근할 수 없습니다.

function foo() {
  var functionScopedVariable = 20;
  console.log(functionScopedVariable); // 20
}
foo();
console.log(functionScopedVariable); // ReferenceError: functionScopedVariable is not defined

위의 코드에서는 foo라는 함수 내에서 functionScopedVariable이라는 변수를 선언하고 사용하고 있습니다. 이 변수는 함수 내에서만 접근 가능합니다. 함수 외부에서는 이 변수에 접근할 수 없습니다.

블록 스코프와 함수 스코프의 차이점

1. 블록 스코프는 중괄호({})로 둘러싸인 영역에서 변수를 선언하고, 함수 스코프는 함수 내에서 변수를 선언합니다.
2. 블록 스코프에서 선언된 변수는 해당 블록 내에서만 접근 가능하고, 함수 스코프에서 선언된 변수는 해당 함수 내에서만 접근 가능합니다.
3. 블록 스코프에서 선언된 변수는 외부에서는 접근할 수 없지만, 함수 스코프에서 선언된 변수는 외부에서도 접근이 가능한 경우가 있습니다. 이는 클로저(Closure)라는 개념과 관련이 있습니다.

블록 스코프와 함수 스코프의 차이를 알아두면 변수의 범위와 유효성을 더욱 정확하게 이해할 수 있습니다.

참고자료:

• MDN Web Docs - Scope
• W3Schools - JavaScript Scope