Scope와 Hoisting

5181 단어 JavaScriptJavaScript

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이 된다.

좋은 웹페이지 즐겨찾기