[JavaScript] 스코프, 스코프 체인 , 렉시컬 스코프

스코프 ( Scope )

스코프란 유효 범위로, 정의되어 있는 변수를 사용할수 있는 영역을 의미한다.

자바스크립트에는 크게 2가지 타입의 스코프가 있는데 전역 ( Global ) 과 지역 ( Local ) 로 나뉜다.

전역 상태란 함수의 외부에서 선언된 변수로, 

Local 상태는 함수안에 선언된 변수로, 그 함수에 대해 지역 변수를 갖는다. 지역 변수는 지역 범위 ( Local Scope ) 를 갖는다.

let a = 1;
function foo() {
  let b = 2;
  function bar() {
    let c = 3;
    console.log(a + b + c); // 6
  }
  bar();
}

위 코드에서 a, b, c 는 모두 변수이다. a, b, c 는 모두 foo() 함수 내부에서 선언되었기 때문에 foo() 함수 내부에서만 사용할 수 있다. 이처럼 변수가 선언된 위치에 따라서 변수의 유효 범위가 결정되는 것을 스코프라고 한다.

참고로 var, let, const 도 Scope 의 차이가 난다.

2023.01.09 - [Javascript] - [JS] var, let, const 의 차이점 ( Feat. 호이스팅 )

함수 레벨 스코프와 블록 레벨 스코프로 나뉘는데, {} 를 기준으로 나뉜다.

var 는 함수 레벨 스코프, let, const 는 블록 레벨 스코프이다.

스코프 체인 ( Scope Chain )

스코프 체인이란, 자바 스크립트 엔진은 식별자를 찾을때 일단 자신이 속한 스코프부터 위로 올라가면서 찾아가는 과정을 거친다. 이 과정을 스코프 체인이라고 하며 스코프가 중첩되어 있는 모든 상황에서 발생한다.

var a = 1;
var b = 2;
function foo() {
  var a = 3;
  var b = 4;
  console.log(a, b); // 3, 4
  function bar() {
    var a = 5;
    var b = 6;
    console.log(a, b); // 5, 6
  }
  bar();
}
console.log(a, b); // 1, 2

 

렉시컬 스코프 ( Lexical Scope )

렉시컬 스코프란 정적 스코프로, 함수를 호출한 곳이 아닌 선언한 곳을 기준으로 스코프를 결정하는 원칙을 의미한다.

어디서 호출했는지에 따라 정해지는 동적 스코프의 반대 개념으로, 대부분의 프로그래밍 언어는 렉시컬 스코프를 이용한다.

위 코드에서 foo 함수 내부에서 bar 함수를 호출하면 bar 함수의 스코프는 foo 함수의 스코프가 된다.

이때 bar 함수의 스코프는 Foo 함수의 스코프가 된다.

 

Reference

http://www.tcpschool.com/javascript/js_function_variableScope

코딩교육 티씨피스쿨