Scope와 Hoisting

Hoisting

- var

console.log(x); // undefined
var x = 1;

위 코드는 아래와 동일하다.

var x;
console.log(x);
x = 1;

즉, hoisting이란 변수의 선언(만)을 해당 스코프의 맨 위로 끌어올리는 일

- function

function foo() {
	return 'foo';
};
console.log(foo());

console.log(foo());
function foo() {
  return 'foo';
};

위 두 코드의 실행 결과는 동일하다.

👉 function도 hoisting의 대상이다.

하지만, 함수의 선언과 값의 초기화는 서로 다르다.

코드의 어떤 식별자가 실제로 어떤 값을 가르키는지를 결정하는 것을 binding이라고 한다.
JavaScript에서의 binding은 lexical scope를 통해 이루어진다.

❓Lexical Scope란

안쪽에서 바깥쪽 변수에 접근할 수 있다는 뜻
inner Scope > Outer Scope
가장 가까운 Scope에서 일치하는 변수에 binding 된다.

function foo() {
	var x = 'Good Bye';
  	console.log(x); // 'Good Bye'
}

console.log(x); // ReferenceError

Lexical Scope에서는 밖에서 안을 참조할 수 없다.
👉 Outer Scope > Inner Scope 불가

Block Scoping

- var

var x = 1;

if(true) {
	var x = 2;
}

console.log(x); // 2

var는 block scoping의 대상이 아니다.
하지만 let과 const는 block scoping이 된다.