스코프

스코프

변수의 접근 범위(스코프)와 클로저의 개념 및 활용에 대해 알아보겠습니다.

변수 스코프

JavaScript에서는 변수가 선언된 위치에 따라 접근 가능한 범위가 결정됩니다.

전역 스코프(Global Scope)

전역 스코프는 코드의 어느 위치에서나 접근할 수 있는 변수 영역입니다.

// 전역 변수
const globalVar = "전역 변수입니다";

function showGlobal() {
  console.log(globalVar); // 전역 변수에 접근 가능
}

showGlobal(); // "전역 변수입니다" 출력

// 블록 밖에서도 접근 가능
if (true) {
  console.log(globalVar); // "전역 변수입니다" 출력
}

// 브라우저 환경에서 전역 객체(window)의 속성이 됨
console.log(window.globalVar); // "전역 변수입니다" 출력 (브라우저 환경에서)

함수 스코프(Function Scope)

함수 내부에서 선언된 변수는 해당 함수 내부에서만 접근할 수 있습니다.

function showLocalVar() {
  const localVar = "함수 스코프 변수입니다";
  console.log(localVar); // "함수 스코프 변수입니다" 출력
}

showLocalVar();
// console.log(localVar); // 오류: localVar is not defined

// var로 선언된 변수도 함수 스코프를 가짐
function varTest() {
  var functionScoped = "var 변수";
  if (true) {
    var blockVar = "이것도 함수 스코프";
  }
  console.log(functionScoped); // "var 변수" 출력
  console.log(blockVar); // "이것도 함수 스코프" 출력 (블록 밖에서도 접근 가능)
}

varTest();
// console.log(functionScoped); // 오류: functionScoped is not defined

블록 스코프(Block Scope)

ES6에서 도입된 let과 const는 블록 스코프를 가집니다. 블록은 중괄호({})로 묶인 코드 영역입니다.

function blockScopeTest() {
  if (true) {
    let blockLet = "let 블록 스코프";
    const blockConst = "const 블록 스코프";
    var blockVar = "var 함수 스코프";
    
    console.log(blockLet); // "let 블록 스코프" 출력
    console.log(blockConst); // "const 블록 스코프" 출력
    console.log(blockVar); // "var 함수 스코프" 출력
  }
  
  // console.log(blockLet); // 오류: blockLet is not defined
  // console.log(blockConst); // 오류: blockConst is not defined
  console.log(blockVar); // "var 함수 스코프" 출력 (블록 밖에서도 접근 가능)
}

blockScopeTest();

// for 루프의 블록 스코프
for (let i = 0; i < 3; i++) {
  console.log(i); // 0, 1, 2 출력
}
// console.log(i); // 오류: i is not defined

// var를 사용한 for 루프
for (var j = 0; j < 3; j++) {
  console.log(j); // 0, 1, 2 출력
}
console.log(j); // 3 출력 (루프 밖에서도 접근 가능)

렉시컬 스코프(Lexical Scope)

JavaScript는 렉시컬 스코프(정적 스코프)를 사용합니다. 이는 함수가 정의된 위치에 따라 상위 스코프가 결정됨을 의미합니다.

const outerVar = "전역 변수";

function outerFunction() {
  const innerVar = "외부 함수 변수";
  
  function innerFunction() {
    const innerMostVar = "내부 함수 변수";
    
    console.log(outerVar); // "전역 변수" 출력
    console.log(innerVar); // "외부 함수 변수" 출력
    console.log(innerMostVar); // "내부 함수 변수" 출력
  }
  
  innerFunction();
  // console.log(innerMostVar); // 오류: innerMostVar is not defined
}

outerFunction();
// console.log(innerVar); // 오류: innerVar is not defined

스코프 체인(Scope Chain)

JavaScript 엔진은 변수를 찾을 때 현재 스코프에서 시작하여 상위 스코프로 차례대로 검색합니다. 이를 스코프 체인이라고 합니다.

const global = "전역";

function outer() {
  const outerVar = "외부";
  
  function inner() {
    const innerVar = "내부";
    
    function innermost() {
      const innermostVar = "가장 내부";
      
      // 스코프 체인: innermost -> inner -> outer -> 전역
      console.log(innermostVar); // 가장 가까운 스코프에서 찾음
      console.log(innerVar); // inner 스코프에서 찾음
      console.log(outerVar); // outer 스코프에서 찾음
      console.log(global); // 전역 스코프에서 찾음
    }
    
    innermost();
  }
  
  inner();
}

outer();

// 변수 섀도잉(Shadowing) 예제
const value = "전역 값";

function shadowTest() {
  const value = "지역 값"; // 전역 변수를 가림(shadow)
  console.log(value); // "지역 값" 출력
}

shadowTest();
console.log(value); // "전역 값" 출력