자바스크립트(JavaScript) - 스코프 체인(Scope Chain)

자바스크립트 튜토리얼

스코프(Scope) 개념 이해와 종류 블록스코프 함수 스코프 참고자료 https://www.w3schools.com/js/default.asp https://developer.mozilla.org/ko/docs/Web/JavaScript https://www.geeksforgeeks.org/javascript/?ref=dhm https://roadmap.sh/javasc

idocleancode.tistory.com

스코프 체인이란?

스코프 체인은 변수나 함수 등의 식별자를 검색할 때, 현재 스코프에서부터 바깥쪽으로 차례로 검색해 나가는 매커니즘입니다.

스코프 체인 동작 원리

현재 스코프에서 검색
변수나 함수를 사용하는 코드 블록 내에서 먼저 검색합니다. 만약 해당 시젹자가 현재 스코프에 존재 하면 해당값을 반환합니다.
부모 스코프로 이동
현재 스코프에서 해당 식벽자를 찾지못한 경우, 부모 스코프로 이동합니다. 이때, 부모 스코프는 해당 코드 블록을 감싸고 있는 외부 코드 블록이 됩니다.
상위 스코프로 이동
부모 스코프 에서도 찾지 못한경우 더 상위의 스코프로 계속 이동합니다. 이 과정이 계속 반복되며, 전역 스코프까지 도달하여도 찾지 못한경우에는 ReferenceError가 발생합니다.

이러한 스코프 체인의 원리는 렉시컬 스코프(Lexical Scope)을 기반으로 하여, 함수가 어디에서 선언되었는지에 따라 스코프가 결정됩니다.

// 전역 스코프
let globalVar = 'I am global';

function outerFunction() {
  // outerFunction 스코프
  let outerVar = 'I am outer';

  function innerFunction() {
    // innerFunction 스코프
    let innerVar = 'I am inner';
    
    console.log(innerVar);    // "I am inner"
    console.log(outerVar);    // "I am outer"
    console.log(globalVar);   // "I am global"
  }

  innerFunction();
}

outerFunction();

스코츠 체인 활용한 예제

전역 변수와 지역 변수의 참조

var globalVar = "I'm a global variable";  // 전역 변수

function testFunction() {
    var localVar = "I'm a local variable";  // 지역 변수

    console.log(globalVar);  // "I'm a global variable"
    console.log(localVar);  // "I'm a local variable"
}

testFunction();

함수 내에서 변수를 찾을 때, 먼저 지역 스코프를 확인하고, 없다면 전역 스코프로 넘어가 변수를 찾습니다.

중첩 함수에서의 스코프 체인

function outerFunction() {
    var outerVar = "I'm an outer variable";

    function innerFunction() {
        console.log(outerVar);  // "I'm an outer variable"
    }

    innerFunction();
}

outerFunction();

내부 함수 스코프(innerFuntion)에서 변수(outerVar)를 찾지못하면 상위 스코프인 외부 함수 스코프(outerFuntion)에서 변수를 찾습니다.

클로저(Closure)활용

function outerFunction() {
    var outerVar = "I'm an outer variable";

    function innerFunction() {
        console.log(outerVar);  // "I'm an outer variable"
    }

    return innerFunction;
}

var innerFunc = outerFunction();
innerFunc();  // "I'm an outer variable"

클로즈는 내부 함수가 외부 함수의 변수에 접근할 수 있는 자바스크립트 특성입니다. 이는 스코프 체인 덕분에 가능합니다. 외부 함수가 종료된 후에도 내부 함수는 외부 함수를 참조할 수 있어어, 이를 활용하면 프로그램의 유연성과 효율성이 향상 됩니다.