[Javascript] var, let, const 차이, Hoisting(호이스팅)

Javascript 변수 선언 방식에는 var, let, const가 있다.

 

VAR

var은 재선언을 해서 출력하더라도 에러가 나지 않고 각각 다른 값을 출력한다.

var은 유연함이 장점이자 단점이다. 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들고, 값이 바뀔 우려가 있다.

그래서 var은 쓰지않는 것이 바람직하다. var을 대체할 변수 선언 방식은 아래에 나온다.

 

 

let / const

ES6 이후 let과 const 변수 선언 방식이 추가되었다.

 

let을 사용하여 같은 이름의 변수를 두 번 만들어 다른 값을 넣으려고 하면 이미 선언되었다는 메시지가 나온다. const도 마찬가지이다.

 

let과 cosnt의 차이는 재할당 이다

 

 

 

let은 변수에 재할당이 가능하다.

    let greet = 'heyyyy'
    console.log(greet) // heyyyy

    let greet = 'hi'
    console.log(greet) 
    // Uncaught SyntaxError: Identifier 'greet' has already been declared

    greet = 'hello'
    console.log(greet) //hello

 

 

const는 변수 재선언, 재할당 모두 불가능하다.

    const greet = 'heyyy'
    console.log(greet) // heyyy

    const greet = 'hi'
    console.log(greet) 
    // Uncaught SyntaxError: Identifier 'greet' has already been declared

    greet = 'hello'
    console.log(hello) 
    //Uncaught TypeError: Assignment to constant variable.

 

 

Hoisting

호이스팅이란 함수 내부에 있는 선언들을 모두 끌어올려 해당 함수 유효범위의 최상단에 선언하는 것을 뜻한다.

-> 실제로 코드가 끌어올려지는 것이 아니라 자바스크립트 parser 가 함수 실행 전 해당 함수를 한 번 훑는 과정에서 내부적으로 끌어올려 처리하는 것을 뜻한다.

 

var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화하고,

let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다.

 

let과 const는 호이스팅이 발생하기는 하지만 값을 참조할 수 없기 때문에 동작하지 않는 것처럼 보인다.

 

 

요약: 미리 선언문 실행

 

 

변수 호이스팅

이렇게 하게되면 콘솔에는 undefined가 찍힌다. ( var )

console.log(name)
var name = 'narang'

 

// 코드를 실행하면 undefined로 미리 변수가 생성되고
var name = undefined;
var age = undefined;
// 이후에 초기화가 이뤄지기 때문이다.
name = 'narang'; 
age = 24

 

 

함수 호이스팅

이 코드는 잘 작동하는데 변수 호이스팅과 함수 호이스팅은 조금 다르기 때문이다.

변수 호이스팅의 경우는 undefined로 변수 생성이 되지만 함수는 그대로 맨 위로 올라오기 때문이다.

var result = sum(1,3); 
function sum(num1, num2){
   return console.log(num1+num2);
}

 

 

---

Q.

var, let, const은 무슨 차이가 있나요?

A.

var은 동일한 이름으로 여러 번 선언이 가능합니다. 유연함이 장점이 될 수 있지만 코드량이 많아질 경우 에러가 발생하였을 때 해결하기 어렵다는 단점이 있습니다.

반면 let과 const는 재선언을 하려고 할 때에 이미 선언되었다는 에러 메세지를 출력합니다. 

let과 const의 차이는 재할당 여부입니다. let은 재할당이 가능하지만 const는 재할당이 불가능합니다.

 

---

Q.

호이스팅이 무엇인가요?

A.

호이스팅이란 함수 내부에 있는 선언들을 모두 끌어올려 해당 함수 유효범위의 최상단에 선언하는 것을 뜻합니다.

이 때 실제로 코드가 끌어올려지는 것이  아니라 자바스크립트 parser가 함수 실행 전 함수를 훑으며 내부적으로 이루어지는 것을 말합니다.

 

<심화>

var의 경우 호이스팅이 이루어지면 변수 참조 전에 출력을 하였을 때 undefind로 출력이 되지만

let, const의 경우에는 참조 전에 출력문을 썼을 때 에러가 납니다.

왜나면 호이스팅이 발생하더라도 변수 선언만 해둘 뿐 초기화는 변수 선언문을 만났을 때 수행하므로 값을 참조할 수 없기 때문입니다.

---

 

 

 

 

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - 용어 사전 | MDN