Hoisting과 var, let, const

limuubin·2022년 2월 7일

💡Hoisting이란?

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
그로 인해 함수(변수)를 호출하는 코드를 함수(변수)선언보다 앞서 배치할 수 있다.
아래의 예시를 살펴보자.

/*Code A*/
function Myname(name){
console.log('My name is' + name);
}

Myname(limuubin)

//'My name is limuubin'

------------------------------------------------------------------------

/*Code B*/

Myname(limuubin)

function Myname(name){
console.log('My name is' + name);
}

//'My name is limuubin'

code A 의 경우에는 "함수(변수)선언" -> "함수(변수)호출" 의 순서이고,
code B 의 경우에는 "함수(변수)호출" -> "함수(변수)선언" 의 순서이다.

하지만 두 코드의 결과는

'My name is limuubin'

으로 같은 것을 볼 수 있다.

이와 같은 동작 방식이 호이스팅(hosisting)을 통하여 JavaScript가 코드를 실행시키는 방법이다.

💡JavaScript 변수를 선언하는 세가지 방식의 차이점

var, let, const의 차이점

1️⃣ var문 예시

var의 경우 동일한 변수 이름(color)이라도 여러번의 선언이 가능하고, 여러번 할당도 가능하다.

var color = 'blue'
console.log(color) 

var color = 'red'
console.log(color)

/*실행결과*/
//blue
//red

var의 경우에는 위와 같이 변수 선언과 할당이 자유롭게 에러없이 동작한다.
이는 자유롭게 변수를 선언하고 할당하는 장점은 있지만,
코드가 길어지는 경우에는 원하지 않는 결과가 나올 수 있는 위험과, 가독성이 떨어지는 단점이 있다.

2️⃣ let문 예시

let의 경우 동일한 변수 이름(color)은 한번의 선언만 가능하고, 할당은 여러번 가능하다.

/*동일한 변수로 여러번 선언 한 경우 에러가 도출된다*/
let color='blue'
console.log(color)

let color='red'
console.log(color)

/*실행결과*/
//Uncaught SyntaxError: Identifier 'color' has already been declared.

------------------------------------------------------------------------------------

/*한번의 선언과 여러번의 재할당의 경우 문제 없이 작동한다*/
let color = 'blue'
console.log(color)

color='red'
console.log(color)

color='green'
console.log(color)

/*실행결과*/
//blue
//red
//green

let의 경우에는 위와 같이 한번의 선언과 여러번의 재할당이 가능하다.
그렇기 때문에 유동적으로 값이 달라지는 결과를 할당할 때 사용한다.

3️⃣ const문 예시

const의 경우 선언과 할당 모두 한번만 가능하다.

/*동일한 변수로 여러번 선언 한 경우 에러가 도출된다*/
const color = 'blue'
console.log(color)

const color = 'red'
console.log(color)

/*실행결과*/
//Uncaught SyntaxError: Identifier 'color' has already been declared.

------------------------------------------------------------------------------------

/*한번의 선언과 여러번의 재할당의 경우에도 에러가 도출된다*/
const color = 'blue'
console.log(color)

color = 'red'
console.log(color)

color='green'
console.log(color)

/*실행결과*/
//blue
//VM2527:3 Uncaught TypeError: Assignment to constant variable.

------------------------------------------------------------------------------------

/*한번의 선언과 한번의 할당의 경우 문제 없이 작동한다*/
const color1 = 'blue'
console.log(color1)

const color2 = 'red'
console.log(color2)

//blue
//red