[Javascript] let/const/ var

자바스크립트 변수를 선언하는 방법에는 var, let, const 3가지 방법이 있다. 이 세 가지에 대해 알아보자.

 

var

var 은 예전부터 쓰이던 자바스크립트 변수 선언 방식이다. 그러다 보니 문제점도 많다..(?)

 

재선언 가능

var title = "제목1";
var title = "제목2";

변수를 선언했는데 뒤에서 같은 변수명으로 또 선언이 가능하다. 이러한 특징은 협업할 때 문제가 생기기 십상이다. 누군가가 중요한 데이터를 넣을 변수를 선언했는데 다른 누군가가 같은 이름으로 변수를 선언하고 앞선 데이터와는 다른 데이터를 넣었다고 생각해 보자. 나중에 선언된 변수명에 데이터가 들어가고 있는 상황이라 심각한 일이 벌어질 수도.. 있다.

 

후선언 가능

예시1

console.log(title);
var title = "제목";

>> undefined

선언을 나중에 했는데 오류가 안난다. 

 

예시2

title = "제목";
var title;

var 를 나중에 선언했는데도 오류가 안 난다.

 

이는 호이스팅 때문인데 호이스팅이란 자바스크립트 엔진이 코드 실행 전에 선언해 둔 변수들을 조사한 다음에 메모리에 기억을 해두고 이렇게 조사한 변수들은 해당 코드가 존재하는 파일의 최 상단으로 끌어올리는 것이다. 

 

예시1 호이스팅

var title;           // 변수 선언이 호이스팅됨
console.log(title);  // 초기화되지 않았으므로 undefined 출력
title = "제목";       // 그 다음 변수에 "제목"이 할당됨

 

예시2 호이스팅

var title;      // 호이스팅에 의해 변수 선언이 최상단으로 이동
title = "제목";  // 그 다음 실제 할당이 일어남

 

첫 번째 예시에서 title 선언이 되지 않았는데 오류가 발생하지 않고 undefined 로 출력된 이유도 이와 같은 이유이다. title 을 출력하는 코드 이후에 선언된 title 을 자바스크립트 엔진이 미리 조사를 하고 기록했기 때문에 선언 전에 출력을 시도해도 변수가 있다고 인식하고 오류가 안 나는 것이다. 더 정확히 발하면 호이스팅을 하고 undefined 로 알아서 초기화를 해버린다. 그래서 undefined 가 할당되어 있으니 오류가 발생하지 않고 undefined 로 출력하는 것이다.

 

또한 함수 스코프를 가지기 때문에 그냥 블록으로 감싸져 있는 변수는 어디서나 접근이 가능하므로 문제를 일으킬 수 있다.

 

→ 이런저런 이유로 var 사용을 지양하는 것으로 알고 있다. var 사용하지 말자! let 을 사용하자! 

 

let

- let 은 2015년도 ES6 가 나올 때 나온 선언 방식이다. let 은 위에서 보여준 var 의 문제점을 모두 해결한 선언 방식이다. 그러면 let 은 var 와 달리 호이스팅 하는 대상이 아닌 걸까? 그건 아니다! let 도 호이스팅이 된다!  다만 let 은 TDZ(Temporal Death Zone)을 적용해서 선언문이 나오기 전까지는 접근할 수 없도록 해서 문제를 해결했다. 쉽게 말해 var 처럼 초기값을 undefined 로 미리 할당하지 않는다. 

 

- let 은 블록 스코프를 가지므로 변수를 블록 내부에서만 사용할 수 있고 외부의 접근을 제한하므로 변수의 충돌을 방지할 수 있고 프로그램의 안정성을 높여준다.

 

예시

console.log(title);
let title = "제목";

 

예시 호이스팅

let title;           // 호이스팅으로 변수 선언이 올라감, 하지만 TDZ에 있음
console.log(title);  // ReferenceError 발생 (TDZ에 있기 때문)
title = "제목";       // TDZ에서 벗어나고 이제 값이 할당됨

let 도 호이스팅 되지만 TDZ 때문에 선언 전이나 쵝화 전에 변수를 참조하면 ReferenceError 가 발생한다! 변수가 선언된 시점부터 초기화되기 전까지 해당 변수에 접근 못 함!!

 

const

const 는 상수이다. 상수란 값이 변하지 않고 고정된 값이다. 즉, 변하고 싶지 않은 값들을 만들 때 쓴다.

 

const title = "제목";
title = "제목2";

>> TypeError: Assignment to constant variable.

- const 는 재할당이 불가능하다. title 에 "제목2" 라고 다른 값을 할당하는 시도를 했을 때 TypeError 가 발생한다. 값이 변하지 않는 변수인 것을 명확하게 표현할 수 있으므로 코드의 안정성을 높이고 의도하지 않은 값 변경이 일어나지 않는다.

 

- 블록 스코프를 가진다. 블록을 벗어나면 블록 안에 있는 변수에 접근하지 못 한다.

 

- const 도 let 처럼 호이스팅을 한다. 그러나 undefined 로 초기화하지 않아서 선언되기 전까지 접근할 수 없다.