개발 & 프로그래밍/JavaScript & TypeScript

스코프(scope)와 스코프체인 - JavaScript

냥모리 2025. 4. 23. 23:28
728x90

자바스크립트 딥다이브 공부 후 정리한 내용입니다.

스코프란?

  • 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됨
    ⇒ 즉 식별자가 유효한 범위를 뜻함(like.. 전역 변수, 지역변수)
    ⇒ 자바스크립트 엔진이 스코프 체인을 통해 참조할 변수인 식별자를 검색할 때 사용하는 규칙
💡 “코드가 어디서 실행되며 주변에 어떤 코드가 있는지”를 렉시컬 환경이라고 함
코드의 문맥은 렉시컬 환경으로 이루어짐. 이를 구현한 것이 “실행 컨텍스트”이며, 모든 코드는 실행 컨텍스트에서 평가되고 실행됨
💡 var 키워드의 변수는 같은 스코프 내에 중복 선언이 허용됨 → 변수값이 재할당 되는 부작용
하지만 let이나 const 키워드의 변수는 같은 스코프 내에서 중복 선언이 허용되지 않음 → SyntaxError 오류 발생시킴

  1. 전역과 전역 스코프: 전역 변수는 어디서든지 참조 가능
  2. 지역과 지역 스코프: 자신의 지역스코프와 하위 지역 스코프에서 유효

스코프 체인

  • 함수의 중첩(함수 몸체 내부에서 함수가 정의된 경우)에서 몸체 내부의 함수인 ‘중첩 함수’와 중첩 함수를 포함하는 함수인 ‘외부 함수’간에 스코프가 중첩될 수 있음 ⇒ 스코프가 계층적 구조를 가질 수 있음
전역 ← outer 지역(외부 함수) ← inner 지역(중첩 함수)
  • 이처럼 스코프는 하나의 계층적 구조로 연결되며, 최상위 스코프는 전역 스코프임
  • 이렇게 연결된것을 스코프 체인이라고 함
     변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 식별자를 검색함
  • 물리적인 실체로 존재함, 위 계층과 유사한 자료구조인 렉시컬 환경을 실제로 생성함
    변수 선언 실행 → 변수 식별자 자료구조(렉시컬 환경)에 키 등록 → 변수 할당 시 식별자에 해당하는 값 변경
  • 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있음
    하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없음
  • 스코프 체인에 의해 함수도 검색 가능함 → 그러므로 식별자를 검색하는 규칙이라고 표현하는 것

함수 레벨 스코프

  • 지역은 함수 몸체 내부, 지역은 지역 스코프를 만듬
     코드 블록이 아닌 함수에 의해서만 지역스코프 생성된다는 의미
  • 함수 몸체외에 모든 코드 블록이 지역스코프를 만드는데 이를 블록 레벨 스코프라고 함
  • 하지만 var 키워드로 선언된 변수는 오로지 함수의 코드블록만을 지역 스코프로 인정함(= 함수 레벨 스코프)
var x = 1;
if(true) {
    // var 키워드로 선언된 변수는함수의 코드블록만을 지역 스코프로 인정함
    // 함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역변수임
    var x = 10;
}
console.log(x); // 10 - 의도치 않게 변수 값이 변경되는 부작용 발생함

렉시컬 스코프

var x = 1;

function foo() {
    var x = 10; 
    bar();
}

function bar() { 
    console.log(x);
}

foo(); // ?
bar(); // ?
  • bar 함수의 상위 스코프가 무엇인지에 따라 두가지 패턴을 예측할 수 있음
  1. 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정함
    → bar 함수의 상위 스코프는 foo 함수의 지역 스코프와 전역 스코프 일 것임
     동적 스코프: 함수가 호출되는 시점에 동적으로 상위 스코프를 결정해야함
  2. 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정함
    → bar 함수의 상위 스코프는 전역 스코프일 것임
     정적 스코프(렉시컬 스코프): 함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정됨
  • 자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따름
    ⇒ 즉, 함수의 상위 스코프는 언제나 자신이 정의된 스코프임
    함수 정의가 실행되어 생성된 함수객체는 결정된 상의 스코프를 기억함. 함수가 호출될 때마다 함수의 상위 스코프를 참조할 필요가 있기 때문임
728x90