자바스크립트변수 유효 범위

09 Sep 2023

javascript

자바스크립트는 유연하면서도 동적인 언어로 많이 사용되고 있습니다. 하지만 자바스크립트의 변수 유효 범위(scope)는 초보 개발자들에게 혼동을 줄 수 있는 중요한 개념입니다. 변수 유효 범위를 이해하지 못하면 예상치 못한 버그가 발생하거나 의도하지 않은 결과를 얻을 수 있습니다. 이번 포스트에서는 자바스크립트 변수 유효 범위에 대해 알아보고, 어떻게 변수를 선언하고 사용해야 하는지 살펴보겠습니다.

전역 범위 (Global Scope)

전역 변수는 어떤 함수 내부에서도 선언되지 않은 변수를 의미합니다. 전역 변수는 스크립트에서 어디서든지 액세스할 수 있으며 프로그램이 종료될 때까지 유지됩니다. 전역 변수는 var, let 또는 const 키워드 없이 선언될 수 있습니다.

// 전역 변수 선언
var globalVariable = 10;

function testFunc() {
  console.log(globalVariable); // 10
}

testFunc(); // 전역 변수에 접근 가능

지역 범위 (Local Scope)

지역 변수는 특정 블록(함수 내부)에서 선언된 변수로, 해당 블록 내에서만 액세스할 수 있습니다. 지역 변수는 let 또는 const 키워드로 선언됩니다. 다른 함수 또는 전역 스크립트에서는 액세스할 수 없습니다.

function testFunc() {
  // 지역 변수 선언
  let localVariable = 20;
  console.log(localVariable); // 20
}

testFunc(); // 함수 내부에서 접근 가능
console.log(localVariable); // ReferenceError: localVariable is not defined

블록 범위 (Block Scope)

ECMAScript 6(ES6) 이후로 도입된 let 키워드를 사용하면 블록 범위 변수를 선언할 수 있습니다. 블록 범위 변수는 if 문, for 문, while 문 등의 블록 내에서 선언된 변수로, 해당 블록 내에서만 유효합니다.

function testFunc() {
  if (true) {
    // 블록 범위 변수 선언
    let blockVariable = 30;
    console.log(blockVariable); // 30
  }

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

testFunc();

함수 범위 (Function Scope)

ECMAScript 5 이전까지는 var 키워드를 사용하여 함수 범위 변수를 선언하는 것이 일반적이었습니다. 함수 범위 변수는 해당 함수 내에서 선언되며, 해당 함수 블록에서만 유효합니다.

function testFunc() {
  // 함수 범위 변수 선언
  var functionVariable = 40;
  console.log(functionVariable); // 40
}

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

변수 선언 방법 및 추천사항

변수 유효 범위를 잘 이해하고 관리하려면 몇 가지 중요한 점을 고려해야 합니다.

전역 변수는 최소한으로 사용합니다. 너무 많은 전역 변수를 사용하면 변수 충돌과 디버깅이 어려워질 수 있습니다.
let 키워드를 사용하여 변수를 선언합니다. let은 블록 범위 변수이므로 유효 범위 충돌을 피할 수 있습니다.
함수와 블록 내에서 변수를 선언할 때 해당 변수의 유효 범위를 고려합니다. 변수가 필요한 범위 내에서만 선언하여 의도치 않은 결과를 방지합니다.

이제 자바스크립트 변수 유효 범위에 대해 기본적인 이해를 갖게 되었습니다. 변수 유효 범위를 제대로 관리하면 코드의 가독성을 높이고 버그를 줄일 수 있습니다. 규모가 큰 프로젝트에서는 특히 변수 유효 범위의 중요성을 깨닫게 될 것입니다.