javascript & jQuery

let const var 차이

k9e4h 2019. 6. 27. 11:05

javascript가 ES6으로 넘어오면서 let, const라는 새로운 선언 방법이 생겼습니다.


var

같은 이름의 변수를 두번 선언되어도 에러 발생시키지 않습니다.


let, cost에서는 SyntaxError를 발생시킵니다. ( Identifier 'xxx' has already been declared )

규모가 큰 코드에서 버그를 방지할 수 있는 바람직한 특징입니다.


var는 선언보다 호출이 먼저 있어도 변수가 undefined 될 뿐 정상적으로 작동합니다. (Hoisting 호이스팅)


var : Function-scope

let, const : Block-scope


임시적 사각지대(TDZ : temporary dead zone)

어떤 변수가 호출되었을 때 블록 안에 같은 이름의 변수가 없으면 상위 블록에서 선언된 같은 이름의 변수를 호출합니다. 하지만 블록 안에서 let이나 const로 변수 선언이 있었다면 그 이름의 변수는 변수가 선언되기 이전까지 그 블록안에서는 정의되지 않은 변수로 간주되는 것이죠.


단순형의 경우 값의 변경이 있는 경우에는 let으로, 상수로 사용하는 경우에는 const로 선언하는 것이 바람직하겠습니다. 참조형(Complex type: array, object, function)의 경우 결론부터 말씀드리면 const 로 선언하는 것이 바람직합니다. 참조형은 const로 선언하더라도 멤버값을 조작하는 것이 가능합니다.


[출처] 예제 잘 나와있음 꼼꼼히 읽어보자



2019.06.27 추가


1. 변수 값의 변환
2. 변수의 유효범위

3. 호이스팅


// var는 function-scope이기 때문에 for문이 끝난다음에 j를 호출하면 값이 출력이 잘 된다.
// 이건 var가 hoisting이 되었기 때문이다.
for(var j=0; j<10; j++) {
  console.log('j', j)
}
console.log('after loop j is ', j) // after loop j is 10



let과 const의 차이점은 변수의 immutable여부이다.

let은 변수에 재할당이 가능하지만,

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

동적언어이다 보니깐 runtime type check 가 필요하기 때문에 TDZ가 있음



https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d



 


var, let는 변수를 선언하는 키워드이고, const는 상수를 선언하는 키워드이다.

var, let은 변수선언 키워드 이므로 리터럴 값의 재할당이 가능하지만, const는 리터럴 값의 재할당이 불가능하다.

더욱이 const 키워드는 선언과 동시에 리터럴 값을 할당해 줘야 한다.


var 키워드의 가장 난해하고 악의적인 동작이, 이 호이스팅이라 개인적으로 생각한다.

호이스팅이라는 말 자체가 끌어올리다라는 의미이다. 코드로 보면 다음의 상황을 var 키워드의 호이스팅 현상이다.

여기서 var 식별자의 호이스팅의 중요한 점은 선언만 끌어 올려진다는 것이며, 할당은 끌어올려지지 않는 다는 것이다.


https://blog.hanumoka.net/2018/09/21/javascript-20180921-javascript-var-let-const/


반응형