[Javascript] hoisting & scope 호이스팅과 스코프 (ES5, ES6 비교)

1. 호이스팅(hoisting)

네이버 단어 사전에 hoisting은 '끌어올리기'라는 뜻을 가지고 있다. 

hoisting은 자바스크립트 ES5에서 어떤 의미로 쓰였을까?

console.log(a);  // undefined

var a = 100;
console.log(a);  // 100

어떻게 변수 a를 선언도 하지않았는데 첫 번째 콘솔에서 undefined가 출력이 될까?

이것이 바로 자바스크립트에서의 호이스팅이다.

자바스크립트는 위의 코드를 처리하는 과정에서 마지막에 선언된 변수를 위로 끌어올린다. 그런데 끌어올릴 때 변수의 값까지 끌어올리는 것이 아니라 변수 자체만 끌어올리기 때문에 undefined를 출력하는 것이다.

또 다른 예시를 살펴보자.

var a = 100;
function test() {
console.log(a);  // undefined

var a = 200;
console.log(a);  // 200
}
test()

위 예시들에서 보듯 hositing의 문제점은 코드를 처리하는 과정에서 에러를 내지 않는다. 

그렇다면 이러한 문제를 어떻게 해결할 수 있을까? ES6+에서 위의 문제를 해결하기 위해 const, let을 사용한다.

const : 변하지 않는 값(상수)

let : 변할 수 있는 값 

const과 let으로 변수를 선언하게 되면 hoisting이 발생하지 않는다. 

만약에 변수를 선언하지 않고 사용을 하게 된다면 에러를 발생시킨다.

---

2. 스코프(scope)

scope는 사전적 의미로는 '범위'를 나타낸다.

자바스크립트에서의 scope는 '변수의 사용가능 범위'라고 해석할 수 있다.

다른 언어들에서는 블록(block)단위 스코프를 사용한다. 하지만, 자바스크립트의 ES5에서는 함수 단위 스코프를 사용한다.

함수 단위 스코프는 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.

즉, 함수 내부에서 선언한 변수는 지역변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

function test() {
var a = 100;
}
console.log(a);  // Uncaught ReferenceError: a is not defined

ES5에서는 함수가 끝나면 함수 내부에서 정의했던 변수를 사용할 수 없다. 위와 같이 레퍼런스 에러가 난다.

하지만, for문에서는 for문이 종료하고도 선언했던 변수를 사용할 수 있다.

for (var i = 0; i < 10; i++) { }
console.log(i) // 10

이번엔 ES6+에서의 scope를 살펴보자. 

scope를 사용하기 위해서는 let, const로 변수를 선언한다.

let과 const는 블록(block)단위의 scope를 사용한다.

모든 코드 블록(함수, if문, for문, while문, try/catch문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 

즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

for (let i = 0; i < 10; i ++) { }
console.log(i); // Uncaught ReferenceError: i is not defined

{
const a = 100;
}
console.log(a);  // Uncaught ReferenceError: a is not defined

마지막으로 var 키워드로는 동일한 이름을 갖는 변수를 중복해서 선언할 수 있었다. 하지만, let 키워드로는 동일한 이름을 갖는 변수를 중복해서 선언할 수 없다. 변수를 중복 선언하면 문법 에러(SyntaxError)가 발생한다.

var a = 100;
var a = 200;
console.log(a); // 200

let b = 100;
let b = 200;
console.log(b); // Uncaught SyntaxError: Identifier 'b' has already been declared