JavaScript 스코프 이해하기 🌐

JavaScript에서 "스코프"란 변수나 함수가 접근 가능한 범위를 의미합니다. 이 개념을 이해하는 것은 코드를 더 잘 조직하고, 오류를 피하는 데 중요합니다. 간단히 말해, 어디서 변수를 만들고 사용할 수 있는지를 정하는 규칙입니다.

전역 스코프(Global Scope)

전역 스코프에 있는 변수는 어디서든지 접근할 수 있습니다. 이는 코드의 어느 곳에서든 해당 변수를 사용할 수 있다는 것을 의미합니다.

var globalVar = "나는 전역 변수입니다";

function checkScope() {
  console.log(globalVar); // "나는 전역 변수입니다"
}

checkScope();

지역 스코프(Local Scope)

지역 스코프는 함수 내부에서 생성된 변수를 의미합니다. 이러한 변수는 함수 외부에서 접근할 수 없습니다.

function showLocalScope() {
  var localVar = "나는 지역 변수입니다";
  console.log(localVar); // "나는 지역 변수입니다"
}

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

블록 스코프(Block Scope)

let과 const를 사용하여 선언된 변수는 블록 스코프를 가집니다. 이는 {}로 둘러싸인 영역 내에서만 변수가 유효하다는 것을 의미합니다.

function checkBlockScope() {
  if (true) {
    let blockVar = "나는 블록 스코프 변수입니다";
    console.log(blockVar); // "나는 블록 스코프 변수입니다"
  }

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

checkBlockScope();

스코프 체인(Scope Chain)

함수 내부에서 변수를 찾을 때, JavaScript는 먼저 현재 스코프에서 찾습니다. 만약 없다면, 바깥 스코프로 이동하여 찾습니다. 이 과정은 가장 바깥 스코프에 도달할 때까지 반복됩니다.

var outerVar = "나는 바깥 변수입니다";

function outerFunction() {
  var innerVar = "나는 안쪽 변수입니다";

  function innerFunction() {
    console.log(outerVar); // "나는 바깥 변수입니다"
    console.log(innerVar); // "나는 안쪽 변수입니다"
  }

  innerFunction();
}

outerFunction();

이처럼 스코프는 코드에서 변수와 함수의 가시성과 생명주기를 관리합니다. 스코프를 잘 이해하고 사용하면, 더욱 안정적이고 유지보수하기 쉬운 코드를 작성할 수 있습니다.