[자바스크립트] 스코프란?

본 내용은 이웅모 님의 모던 "자바스크립트 DeepDive" 책을 보고 정리한 내용입니다. 저작권 보호를 위해 책의 내용은 요약되었습니다.

 

 스코프(Scope)란?

모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정되는데 그  유효범위를 스코프라고 한다.

 

 

스코프의 종류

전역 스코프(Global scope)

전역 스코프는 프로그램의 최상위 레벨에서 선언된 변수나 함수가 속하는 스코프로 전역 스코프에 선언된 변수나 함수는 어느 곳에서나 참조할 수 있다. 전역 스코프는 보통 모든 코드에서 공유해야 하는 변수나 함수를 선언하기 위해 사용된다. 하지만 전역 스코프는 너무 많은 변수나 함수가 선언되면 코드의 복잡성을 높이고, 의도하지 않은 이름 충돌이 발생할 수 있다.

 

지역 스코프(Local scope)

지역이란 함수 몸체 내부를 말하며 자신이 선언된 지역과 하위 지역(중첩 함수) 에서 유효한 스코프이다.

1. 함수 레벨 스코프 (Function-Level Scope)

함수 내에서 선언된 변수나 함수가 속하는 스코프로 함수 스코프에 선언된 변수나 함수는 함수 내에서만 유효하다.

2. 블록 스코프(Block scope)

중괄호({})로 묶인 코드 블록 내에서 선언된 변수나 함수가 속하는 스코프로 블록 스코프에 선언된 변수나 함수는 해당 중괄호로 묶인 코드 블록 내에서만 유효하다.

 

 

스코프 체인(Scope Chain)이란?

변수를 참조할 때 스코프 계층 구조를 따라 상위 스코프 방향으로 이동하며 선언된 변수를 검색하는 매커니즘이다.

 

예시) x 변수가 전역 스코프와 outer 함수 스코프, inner 함수 스코프에서 각각 정의되어 있다. inner 함수에서 console.log(x)가 호출될 때, 스코프 체인은 먼저 inner 함수 스코프에서 x를 찾아서 "inner"를 출력하고, inner 함수가 종료되면 outer 함수 스코프에서 x를 찾아서 "outer"를 출력한다. 마지막으로 outer 함수가 종료되면 전역 스코프에서 x를 찾아서 "global"을 출력한다.

var x = 'global';

function outer() {
  var x = 'outer';

  function inner() {
    var x = 'inner';

    console.log(x); // inner
  }

  inner();
  console.log(x); // outer
}

outer();
console.log(x); // global

 

 

렉시컬 스코프(Lexical Scope)란?

렉시컬 스코프는 변수의 유효 범위를 함수의 호출 위치가 아닌 함수의 정의 위치에서 결정하는 것을 말한다. 즉, 변수를 참조할 때 그 변수가 선언된 위치를 기준으로 스코프를 결정한다.

 

예시) inner 함수에서 x를 참조할 때, 렉시컬 스코프는 inner 함수가 정의된 outer 함수 스코프를 참조한다. 따라서 inner 함수에서 x를 출력하면 "outer"가 출력된다.

var x = 'global';

function outer() {
  var x = 'outer';

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

  inner();
}

outer();