각 브라우저마다 JS를 해석하는 엔진이 다르다.
자바스크립트 엔진
구글 크롬 등장 이전, IE가 웹 브라우저 시장의 90% 이상을 차지
→ ECMAScript 표준을 무시하며 JS 생태계 파괴
→ 구글 Chrome의 강력한 퍼포먼스를 지닌 V8 엔진이 등장하면서 JS 생태계 안정화됨!
var | let | const | |
---|---|---|---|
범위 | Function | Block | Block |
변수 재선언 | ⭕ | ❌ | ❌ |
변수 값 재할당 | ⭕ | ⭕ | ❌ |
초기화 값 필요 | ❌ | ❌ | ⭕ |
// test.js
...
let globalVariable; // 전역 변수
function globalFunction() { // 전역 함수
...
}
...
var x = "var";
(선언 + 할당)을var x;
(선언)과 x = "var"
(할당)으로 분리하여 선언부만 유효 범위 내 최상단으로 끌어올림// 작성한 JS 코드
hoistFunction();
function hoistFunction() {
console.log(x)
var x = "var";
console.log(x)
}
// JS 엔진이 해석한 코드
function hoistFunction() {
var x;
console.log(x)
x = "var";
console.log(x)
}
hoistFunction();
// 실행 결과
undefined
var
코드의 가독성과 유지보수를 위해 호이스팅은 최대한 발생하지 않도록 해야함
💡 var 대신 let, const를 사용!
💡 함수와 변수를 가급적 코드 상단부에서 선언!