스코프(Scope)

스코프

• 스코프(Scope, 유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적인 개념
• 변수와 함수, 클래스 이름과 같은 식별자가 본인이 선언된 위치에 따라서 자신의 참조 가능 여부가 결정되는 것
• 스코프의 속성으로 보자면, 정적 스코프(Static scope)와 동적 스코프(Dynamic scope)
• 스코프의 범위로 보자면, 선언되는 위치에 따라 전역 스코프(Global scope), 지역 스코프(Local scope or Function-level scope)
• 스코프가 없다면? → 같은 식별자 이름의 충돌로 프로그램 전체에서 하나밖에 사용할 수 없게 됨 → 스코프는 이런 식별자 이름의 충돌을 방지하는 개념으로도 볼 수 있음

스코프 레벨

• 블록 레벨 스코프
  • 블록 레벨 스코프란, 코드 블록({…})내에서 유효한 스코프 → 유효한 스코프라는 건 결국 참조(접근) 가능하다는 의미 → if, for, while, try/catch, 함수 등
• 함수 레벨 스코프
  • 함수 레벨 스코프란, 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효, 외부에서 참조 불가능 - only 함수
• 상위 스코프를 결정 짓는 요소
  • 동적 스코프 → 함수가 호출되는 시점에 결정 → 런타임 도중에 실행 컨텍스트에 의해서 스코프가 결정
  • 정적 스코프 → 함수가 선언되는 시점에 결정, 렉시컬 스코프

자바스크립트에서의 스코프

• 대부분의 C-family language는 블록 레벨 스코프(block-level scope)
• 자바스크립트는 함수 레벨 스코프(function-level scope) → 단, ES6에서의 let을 사용하면 블록 레벨 스코프 적용, 상황에 따라 주로 let 사용을 권고
• 자바스크립트는 렉시컬 스코프를 따르기 때문에 선언되는 시점에 상위 스코프가 결정, 함수 본인의 내부 슬롯에 상위 스코프에 대한 참조를 저장

스코프 체인

스코프 체인 예시

let x = '나는 전역 x';

function outer() {
  let y = '나는 outer함수의 지역 y';
  **console.log(x); // 나는 전역 x**
  console.log(y); // 나는 outer함수의 지역 y

  function inner() {
    let x = '나는 inner함수의 지역 x';

    **console.log(x); // 나는 inner함수의 지역 x**
    console.log(y); // 나는 outer함수의 지역 y
  }

  inner();
}

outer();
console.log(x); // 나는 전역 x
console.log(y); // ReferenceError ..

• 함수는 전역에서 선언될 수 있지만, 함수의 내부에서도 함수가 선언될 수 있음
• 함수 내부에서 정의된 함수를 중첩 함수 혹은 내부 함수라고 하고, 중첩 함수를 포함하는 함수는 외부 함수
• 즉, 스코프 또한 중첩이 될 수 있고 스코프가 계층적인 구조를 가질 수 있다는 것을 의미 → 스코프 체인
• 변수를 참조할 때 자바스크립트는 스코프 체인을 통해 변수를 참조 → 최상위 전역 스코프까지 확인하고 해당 변수가 없을 때 reference error를 출력
• 작업 시 하위 스코프에서 상위 스코프 변수를 참조할 수 있는 이유가 스코프 체인의 단방향성 때문

참고자료

• https://youtu.be/PVYjfrgZhtU?si=iLk8C8vO1qpfvyWs
• https://poiemaweb.com/js-scope
• https://poiemaweb.com/es6-block-scope