자바스크립트에서 변수의 사용 범위는 변수가 어느 부분에서 접근 가능한지를 의미합니다. 이는 자바스크립트 프로그램의 동작을 이해하고 변수를 효율적으로 사용하는 데 중요한 개념입니다.

전역 범위(Global Scope)

전역 범위는 자바스크립트 코드에서 가장 바깥쪽 범위를 나타내며, 코드 어느 곳에서나 접근할 수 있는 범위입니다. 전역 범위에서 선언된 변수는 프로그램의 어느 곳에서든 사용할 수 있습니다.

예를 들어, 다음과 같이 전역 범위에서 name이라는 변수를 선언하고 사용할 수 있습니다.

var name = "John";

function sayHello() {
  console.log("Hello, " + name);
}

sayHello(); // 출력결과: "Hello, John"

지역 범위(Local Scope)

지역 범위는 함수 내부에서 선언된 변수가 해당 함수 내부에서만 접근 가능한 범위입니다. 지역 범위에서 선언된 변수는 함수 외부에서 접근할 수 없습니다.

예를 들어, 다음과 같이 함수 내부에서 age라는 변수를 선언하고 사용할 수 있습니다.

function calculateAge() {
  var age = 30;
  console.log("Age: " + age);
}

calculateAge(); // 출력결과: "Age: 30"

console.log(age); // 에러: age is not defined (변수가 선언되지 않았음)

블록 범위(Block Scope)

ES6(ECMAScript 2015)에서 도입된 블록 범위는 중괄호({})로 둘러싸인 코드 블록에서만 접근 가능한 범위입니다. 이전에는 함수 범위로만 변수의 범위를 제한할 수 있었으나, 블록 범위는 조건문(if문, for문 등)이나 루프 내에서도 변수를 제한할 수 있게 해줍니다.

예를 들어, 다음과 같이 if문 내에서 count라는 변수를 선언하고 사용할 수 있습니다.

var number = 5;

if (number > 0) {
  let count = 10;
  console.log(count); // 출력결과: 10
}

console.log(count); // 에러: count is not defined (변수가 선언되지 않았음)

함수 범위와 블록 범위의 차이점

함수 범위는 해당 함수 내부에서만 유효하고, 블록 범위는 코드 블록 내부에서만 유효하다는 차이점이 있습니다. 또한, 함수 범위는 var 키워드로 선언된 변수에 적용되고, 블록 범위는 let 키워드로 선언된 변수에 적용됩니다.

function test() {
  var functionScope = "Function Scope";
  let blockScope = "Block Scope";

  console.log(functionScope); // 출력결과: "Function Scope"
  console.log(blockScope);    // 출력결과: "Block Scope"
}

console.log(functionScope); // 에러: functionScope is not defined (변수가 선언되지 않았음)
console.log(blockScope);    // 에러: blockScope is not defined (변수가 선언되지 않았음)

블록 범위는 변수의 유효 범위를 더 명확하게 제한하고, 변수 충돌을 방지하는 데에 유용합니다.

결론

변수의 범위는 자바스크립트 프로그램에서 중요한 개념입니다. 전역 범위에서 변수를 사용할 때는 변수의 충돌에 주의해야 하며, 지역 범위와 블록 범위를 사용하여 변수의 사용을 제한하는 것이 좋습니다. 효율적인 변수의 사용을 위해 변수의 범위에 대해 명확히 이해하고 활용하는 것이 중요합니다.