var, let, const 비교 (1)

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

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

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

var name = "hanumoka";
name = "김대중"; // var는 변수 선언 키워드이며 값 재할당이 가능하다.

let age = "32";
age = "33";     // let역시 변수 선언 키워드이며 값 재할당이 가능하다.

const PI = "3.14";  // const는 상수선언 키워드이며 값 재할당이 불가능 하다. 그리고 이렇게 선언과 동시에 값을 할당해야 한다.

 

블록(중괄호) 내부에 let, const 키워드로 선언된 변수는 외부 스코프에 영향을 주지 않는다.

let, const는 ECMA6에서 도입된 키워드며, var로 인해 발생하는 혼란스럽고 불명확한 코드작성을 피하기 위해 만들어 졌다. 따라서 let, const 사용을 선호해야 한다.

그리고 왠만하면 const 키워드를 사용하여 식별자를 선언하고, 값이 변하는 식발자일 경우 let 키워드를 이용하여 선언하자.

프로그램에서 선언되는 식별자중 값이 변하는 식별자는 드물기 때문에 const 키워드 선언으로 예상하지 못한 오작동을 방지하자.

 

var Vs let의 비교(var가 얼마나 쓰레기인지, 대신 왜 let 을 써야 하는지에 대한 설명)

그 이유는 앞서 말했듯이 혼란스러운 javascript 코드작성을 야기하기 때문이다.

다음은 var 키워드가 야기하는 모호함이다.

 

1. var 키워드는 변수명을 재선언해도 아무런 문제가 발생하지 않는다.

var userName = "hanumoka";
/*
    예를 들어 100라인 정도의 코드가 존재
 */

//위에 userName을 선언한 것을 잊고 재선언한 경우
var userName = "마이클잭슨";   // 아무런 문제가 발생하지 않는다. 앞서 선언한 userName = "hanumoka"가 의도치 않게 유실된 것이다.

 

반면에 let 키워드는 변수명 재선언시 에러를 발생시킨다.

let userName = "hanumoka";
/*
  예를 들어 100라인 정도의 코드가 존재
*/
//위에 userName을 선언한 것을 잊고 재선언한 경우
let userName = "문재인"; // SyntaxError 를 발생시킨다. 개발자는 이미 선언된 변수라는 것을 확인 할 수 있다

 

2. var 키워드는 호이스팅(hoisting)이라는 메커니즘을 통해 끌어 올려진다.

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

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

console.log(userName);    // 선언되지 않은 변수를 console 출력
var userName = "손석희";  // 이제서야 userName변수에 값을 할당
console.log(userName);   // 다시 userName 변수 출력

위 소스코드는 정상적으로 동작 하는 것을 확인 할 수 있다.

그 이유는 var 키워드는 자바스크립트 해석기가 호이스팅을 통해 재 해석 하기 때문이다.

 

다음은 자바스크립트 해석기가 위 코드를 재 해석한 결과이다.

var userName; // 할당된 값을 제외하고 선언만 끌어 올려진다.
console.log(userName);
userName = "손석희";
console.log(userName);

위 소스를 보면 자바스크립트의 해석기는 var 변수선언문을 위로 끌어올린다.(호이스팅)

원본 코드에서 선언되지 않는 변수에 대한 접근이 오류없이 동작하게 되는 이유가 바로 이것 때문이다.

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

var 키워드의 이런 호이스팅 동작 역시 개발자(사람이) 인식, 예측하기 어려운 코드의 작성을 야기시키는 요인 중 하나이다.

 

이런 var의 호이스팅을 막기 위해서는 자바스크립트 scope(전역스코프나, 함수스코프)에 use strict(엄격한 자바스크립트를 사용하겠다는 키워드)를 사용해야 한다.

'use strict'
console.log(userName);
var userName = "손석희";
console.log(userName);

use strict를 사용한 결과 var의 호이이스팅은 동작하지 않으며, 위처럼 변수가 선언되지 않았다고 에러가 발생한다.

 

반면에 let 키워드를 사용할 경우 해당 스코프에 use strict를 사용하지 않아도 변수를 사용하기 전에 미리 선언하지 않으면 오류가 발생한다.

console.log(userName);  // let 키워드로 선언한 변수는 호이스팅이 동작하지 않는다.
let userName = "손석희";
console.log(userName);

출처: https://www.hanumoka.net/2018/09/21/javascript-20180921-javascript-var-let-const/