[JavaScript] Scope

Scope

scope란 ‘범위’라는 뜻을 가지고 있습니다. 즉, 스코프란 ‘변수에 접근할 수 있는 범위’를 말합니다.
자바스크립트는 Lexical Scope다.

• Lexical Scope : 선언된 위치가 상위 스코프를 정한다.
• Dynamic Scope : 실행 위치가 상위 스코프를 정한다.

Lexical Scope

선언된 위치가 상위 스코프를 정한다. 자바스크립트는 Lexical Scope다.
아래 코드에서 functionTwo의 선언 위치 때문에 functionTwo의 numberOne은 3이 된다.

var numberThree = 3;

function functionOne(){
  var numberThree = 100;
  console.log(`functionOne numberThree : ${numberThree}`);	// 100;
  
  functionTwo();
}

function functionTwo(){
  console.log(`functionTwo numberThree : ${numberOne}`);	// 3
}

functionOne();

// 실행결과
functionOne numberThree : 100
functionTwo numberThree : 3		// ==> 선언된 위치가 상위 스코프를 정한다.

var, let, const keyword

• var : 함수 레벨 스코프만 만들어낸다.
• let, const : 함수레벨 스코프와 블록레벨 스코프를 만들어낸다.

var 키워드는 함수레벨 스코프만 만들어낸다. for, if, while문에서는 스코프가 생성되지 않는다.
그렇기 때문에 아래 코드에서 가장 마지막 줄에 출력될 i의 값은 10이다.

var i = 999;
for(var i=0; i<10; i++){	// var 키워드 사용. 스코프가 만들어지지 않는다.
  console.log(i);
}
console.log(`i in global scope ${i}`); // 10

let, const 키워드는 함수레벨 스코프와 블록레벨 스코프를 만들어낸다.
그렇기 때문에 아래 코드에서 가장 마지막줄에 출력될 i의 값은 999이다.

var i = 999;
for(let i=0; i<10; i++){	// let 키워드 사용, 스코프가 새로 만들어진다.
  console.log(i);
}
console.log(`i in global scope ${i}`); // 999