13 - 스코프

모던 자바스크립트 Deep Dive 정리

스코프란?

▶식별자가 유효한 범위

▷예시) 식별자인 파일이름을 중복해서 사용할 수 있는 이유는, 폴더(디렉터리) 덕분

 

전역 스코프

▶코드의 가장 바깥 영역

▷전역 변수는 어디서든지 참조할 수 있다

 

지역 스코프

▶함수 몸체 내부

▷중첩이 가능

 

스코프 체인

▶모든 스코프는 hierarchy를 가지며, 모든 지역 스코프의 최상위 스코프는 전역 스코프이다

▶변수를 참조할때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여

상위 스코프 방향으로 이동하며 선언된 변수를 검색한다

 

함수레벨 스코프 vs 블록레벨 스코프

▶함수레벨 스코프

▷var

▷오직 함수 몸체만을 스코프로 인정하며 if, for 등의 코드 블록을 무시

 

▶블록레벨 스코프

▷let, const

▷모든 코드블록이 지역 스코프를 만듬

 

▷함수레벨 스코프 예시

 

var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수

if (true) {
  var var2 = 2; // 코드 블록 내에서 선언한 변수
  if (true) {
    var var3 = 3; // 중첩된 코드 블록 내에서 선언한 변수
  }
}

function foo() {
  var var4 = 4; // 함수 내에서 선언한 변수

  function bar() {
    var var5 = 5; // 중첩된 함수 내에서 선언한 변수
  }
}

console.log(var1); // 1
console.log(var2); // 2
console.log(var3); // 3
console.log(var4); // ReferenceError: var4 is not defined
console.log(var5); // ReferenceError: var5 is not defined

 

렉시컬 스코프

▶함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다

▷예시

 

var x = 1;

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

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

foo(); // 1
bar(); // 1

 

▷var 대신 let, const 를 써도 동일한 결과를 발생시킴

▷var x = 10 은 무시된다