[JS] 자바스크립트의 변수 (var, const, let)

https://github.com/voodootikigod/logo.js

 

변수란 프로그램에서 자료를 저장할 수 있는 기억장소를 말한다. 어떤 변수를 선언하면 그 변수의 값은 메모리 어딘가에 저장이 되는데, 그 위치를 매번 프로그래머가 찾을 수 없으니 이름을 붙여 저장하는 것이다.

 

자바스크립트에는 변수를 선언하는 방법이 3가지 있는데,

var / const / let 이 3가지 키워드를 이용해 변수를 선언할 수 있다.

 

이 중 const / let 은 ECMAscript6에서 추가된 신문법으로, 이전에 var가 가지고 있던 단점을 개선했다.

 

그렇다면 이 3가지 키워드의 차이점은 무엇일까?

 

---

 

첫번째로, 값을 바꿀수 있는지 여부. 즉, 재할당이 가능한지에 차이가 있다.

 

const는 상수라는 뜻을 가진 변수로 한 번 값이 정해지면 바꿀수 없다.

하지만 var와 let의 경우는 언제든지 값을 수정할 수 있는 변수들이다.

 

자바스크립트에서 변수를 선언할 떄는 기본적으로 const를 사용한다. 대표적으로, node.js에서 require를 할 때

const fs = require('fs');
const path = require('path');

같이 사용하는 것처럼, 한 번 선언된 후 값이 변하지 않는다면 기본적으로는 const를 사용한다.

 

 

두번쨰로, 재선언을 할 수 있는지 없는지에 차이가 있다.

 

var의 경우 변수를 재선언 할 수 있다는 아주 해괴한 특징을 가지고 있다. 이게 무슨 말이냐면,

var variable = "Hello World!";
console.log(variable);
var variable = "World Hello!";
console.log(variable);

위 코드를 실행했을 때, 차례로 Hello World! 와 World Hello! 가 출력된다.

 

만약 다른 언어를 다루다 Javascript를 공부하는 사람이라면 이상한 점을 깨달았을 것이다. variable 변수를 아래에서 한 번더 선언했음에도, 에러가 출력되지 않고 값이 정상적으로 출력된다.

 

이런 var의 특징은 유연하게 변수를 선언할 수 있기 때문에 편하게 프로그래밍을 할 수 있다는 장점을 가지고 있으나, 코드가 길어지게 된다면 재선언이 가능하다는 특징은 단점으로 작용할 수 있다.

 

재선언이 일어난 지점을 일일이 찾아내야 하는 불상사가 생길수도 있고, 값이 어떤 식으로 바뀔지 파악하기 어려울 수도 있다.

 

때문에 비교적 나중에 추가된 let과 const에서는 이런 재선언을 할 수 없다.

let variable = "Hello World!";
console.log(variable);
let variable = "World Hello!";
console.log(variable);

already been declreared (이미 선언됨) 오류가 발생하게 된다.

 

 

세번째로, 호이스팅이 일어나는지 일어나지 않는지에 차이가 있다.

 

호이스팅이란 var와 function 키워드 등에서 발생하는 자바스크립트의 독특한 동작이다. 다른 언어에서는 변수나 함수를 선언하기 전에 사용하면 오류를 출력하는데,

 

위 사진처럼 함수를 선언하기도 전에 사용하면 오류가 발생한다.

자바스크립트는 그렇지 않다.

 

sum 함수를 아래에 선언했음에도 정상작동한다.

 

이처럼 var 형태의 변수와 함수를 선언도 하기 전에 사용할 수 있는데 이를 호이스팅이라고 한다.

 

자바스크립트는 var와 함수 선언을 보면 그 내용을 제일 위로 끌어올려 코드를 실행한다. 그래서 위와 같이 아래에 선언한 var와 함수도 먼저 사용이 가능하다.

 

그러나 let과 const는 이런 호이스팅의 대상이 되지 않기 때문에, 선언을 먼저 하지도 않고 변수를 사용하는 것은 불가능하다.

 

variable 변수가 정의되지 않았다는 오류가 뜨게된다.

 

위 내용들을 다시 종합해보면 아래와 같다.

	값 재할당 여부	값 재선언 여부	호이스팅 여부
var	O	O	O
let	O	X	X
const	X	X	X

 

var, let, const 세가지 변수의 큰 차이점은 이런식으로 정리할 수 있다. 각각의 변수들이 위와 같은 차이를 가지는 이유는 실행 컨텍스트, 렉시컬 환경, 스코프, 스코프 체인에 대한 지식이 있으면 이해하기 쉽다고 하는데, 추후 기회가 된다면 관련 내용을 정리해 둬야겠다.

 

 

var - JavaScript | MDN

let - JavaScript | MDN

const - JavaScript | MDN

호이스팅 - 용어 사전 | MDN