[js 딥다이브] 13. 스코프 정리

13.1 스코프란?

-스코프 : 식별자가 유효한 범위 (식별자 : 변수이름, 함수이름, 클래스 이름등)

let x = 'global';

function foo() {
  var x = 'local';
  console.log(x);	// "local"
}

foo();

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

=> 식별자 결정 : 이름 같은 두개의 변수 중 js엔진은 스코프 통해 어떤 변수 참조할지 결정한다.
=> 스코프 내 식별자는 유일해야 하지만 다른 스코프에는 같은 이름의 식별자 사용 가능
(var 키워드는 같은 스코프 내 중복 선언 허용, let, const는 안됨)

Ex) 컴퓨터에서의 폴더같은 개념(다른 폴더라면 파일 이름이 겹쳐도 됨.)

13.2 스코프의 종류

13.2.1 전역과 전역 스코프

• 전역: 코드의 가장 바깥영역
• 젼역변수 : 어디서든 참조 가능

13.2.2 지역과 지역 스코프

• 지역 : 함수 몸체 내부(js는 함수 스코프를 따르기 때문)
• 지역변수: 자신의 지역 스코프와 하위 지역 스코프에서 유효

13.3 스코프 체인

• 함수는 중첩 가능, 함수의 지역 스코프도 중첩 가능!
  => 함수 중첩되면 스코프도 계층적 구조 가짐

// 전역 함수
function foo() {
  console.log('global function foo');
}

function bar() {
  // 중첩 함수
  function foo() {
    console.log('local function foo');
  }

  foo(); // ① bar함수 내부에 선언한 foo 함수 호출하는것(전역에 선언한 foo함수 아님)
}

bar();

=> ①에서 foo호출시, 현재 실행중인 bar함수내 실행컨텍스트에서 foo 식별자 검색 => 있으면 참조 , 없으면 외부 렉시컬환경(상위 렉시컬 환경) 가서 찾기 반복 : 식별자 검색 규칙

13.4 함수레벨 스코프

• 블록 레벨 스코프의 특성 : 대부분의 프로그래밍 언어는 함수 몸체만이 아니라 모든 코드 블록이 지역 스코프를 만든다라 한다.
  함수 레벨 스코프의 특성 : var 키워드로 선언된 변수 => 함수 몸체만을 지역 스코프로 인정! (함수 밖에서 var 키워드로 선언된 변수는 코드 블록 이내여도 전역변수)

var x = 1;
// 코드 블록 내에서 선언 될지라도 함수 몸체가 아니니 전역 변수이다.
if(true){
  var x = 10;
}
console.log(x);	// 10


var i = 10;
// for 문에서도 역시 전역 변수이다.
for(var i = 0; i < 5; i++){
  console.log(i);	// 0 1 2 3 4
}
console.log(i);	// 5

(ES6에서 도입된 let, const 키워드는 var 키워드와 다르게 블록 레벨 스코프를 지원한다)

13.5 렉시컬 스코프

( 💨 렉시컬(lexical) : 어휘의, 사전의)

상위 스코프를 결정하기 위해서는 두 가지 패턴을 생각해 볼 수 있다.

1. 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정한다.
   함수가 호출되는 시점에 동적으로 상위 스코프를 결정해야 하기 때문에 동적 스코프라고 부른다.

2. 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다.
   함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정되기 때문에 정적 스코프 또는 렉시컬 스코프라고 부른다.(자바스크립트는 렉시컬 스코프를 따른다)