JavaScript - Hoisting 이란? (var , let , const)
자바스크립트에는 호이스팅이란것이 있습니다.
말 그대로 끌어올리는것인데요.
간단하게 호이스팅의 개념과 var, let, const의 차이점에 대해 알아보도록 하겠습니다.
우리는 코딩을 할 때 변수를 먼저 선언하고나서 선언한 변수를 사용할 수 있습니다.
c, java 등 대부분의 언어에서요.
이는 우리가 작성한 코드를 컴퓨터가 해석할 때 위에서 부터 아래로 읽어오기 때문입니다. (절차적 프로그래밍)
var sum = 10 //변수의 선언, 할당
console.log(sum)
자바스크립트는 굉장히 유연한 언어인데, 그렇게 만들어주는 기능중의 하나가 호이스팅입니다.
자바스크립트 엔진은 코드를 실행하기 전 모든 선언부의 스코프를 최상단으로 끌어오게 됩니다.
따라서 아래와 같이 console.log를 실행하고 나서 선언을 했지만,
자바스크립트 엔진에서 해석할때 선언 부분을 최상단으로 끌어오기 때문에 실행하는데는 문제가 없습니다.
console.log(num)
var num =10
다만 아래와 같은 메세지를 보시게 될겁니다.
undefined가 발생하는 이유는 조금 어렵기 때문에 때문에 궁금하다면 접은글을 펼처주세요.
- 함수는 전체 함수에 대한 참조와 함께 저장된다.
- 변수의 경우 ES6 문법인 let과 const는 초기화 되지 않은 채로 저장이 되고, var는 undefined로 저장이 된다.
- 함수와 변수는 코드를 실행하기 전에 실행 컨텍스트를 위해 메모리에 저장됩니다. 이것을 호이스팅이라고 한다.
- 함수는 전체 함수에 대한 참조와 함께 저장되고, var 키워드가 있는 변수는 undefined, let 및 const 키워드가 있는 변수 는 초기화되지 않은 상태로 메모리에 저장된다.
이처럼 변수의 선언과 할당이 유연하고 자유롭지만, 프로그래머 입장에서는 번거로울 수도 있습니다.
var를 사용해서 긴줄의 코드를 짜다보면,
동일한 변수명을 선언한다던가 등의 사고로 인해 예상치 못한 결과가 발생할 수도 있습니다.
이를 보완하기 위해 나온것이 ES6에서 추가된 let과 const입니다.
var , let ,const 의 가장 큰 차이점은 스코프의 범위 입니다.
var는 함수영역(레벨)의 스코프를 가지지만
let, const는 { } 블록영역의 스코프를 가집니다.
따라서 let ,const는 해당 코드블록을 벗어나면 사용할 수 없습니다.
let과 const에는 어떤 차이가 있을까요?
let은 재선언이 불가능하며 재할당은 가능합니다.
const는 재선언, 재할당이 불가능합니다.
재선언과 재할당이 어떻게 다른지 궁금할수도 있는데요.
어떤 의미인지는 코드로 보도록 하겠습니다.
let num; //let num 선언
num = 99 // num 재할당
console.log(num) // 결과값
const number = 10; //const number 선언
number = 20 //const number 재할당
console.log(number) //결과값(에러)
위와 같은 코드를 입력할 경우
let은 선언후 99로 값을 재할당하는것이 가능하지만
const는 20으로 재할당을 했더니 오류가 발생합니다.
마지막으로 요점만 정리하겠습니다.
호이스팅 : 자바스크립트에서 변수나 함수의 선언이 스코프의 최상단으로 끌어올려져서 실행되는것.
var, let, const의 차이점
| 구분 | 재선언 | 재할당 | 호이스팅 |
| var | o | o | o |
| let | x | o | x |
| const | x | x | x |