[Javascript] var와 let const의 차이점 / ES6(ECMA-2015)

2015년에 Javascript에 엄청난 업데이트가 발생하게 됩니다.

흔히 이야기하는 ES6 업데이트 인데요. 기본 ES5에서 많은 부분이 업데이트된 대규모 업데이트입니다.

이번 포스팅에서는 그 중에서 가장 흔하게 접할 수 있는 변수 선언 방식에 대해서 설명하고자 합니다.

 

 

ES5 특징 - 변수의 스코프(범위)

- 기존의 자바스크립트 ES5는 괄호{ } 에 상관없이 스코프가 설정되었다.

var sum = 0;
for(var i = 1; i <= 5; i++){
	sum +=  i;
}

console.log(sum); 	//15
console.log(i); 	//6

기존 Java나 C언어를 공부하셨던 분들은 변수 i를 출력할 때 당황하셨을 것입니다. for문에서만 사용하려고 선언했던 변수인데 for-loop을 벗어난 자리에서 접근할 수 있게 된 것입니다. 

 

이것이 바로 기존 자바스크립트의 변수선언인 var 선언문의 특징입니다. 이 특징과 함께 호이스팅에 대한 내용으로 확장할 수 있습니다.

 

호이스팅

위의 예제를 보면서 호이스팅을 설명하겠습니다. 호이스팅은 자바스크립트 언어의 특징으로 선언과 동시에 값을 할당하는 부분에서 선언부분만을 맨 위로 모두 올려버리고 값의 할당이나 기타 연산작업을 기존의 위치에서 진행하는 것을 말합니다.

 

즉, 자바스크립트 엔진은 위의 코드를 다음과 같이 변형시켜버립니다.

var sum;
var i;

sum = 0;

for(i = 1; i <= 5; i++){
	sum +=  i;
}

console.log(sum); 	//15
console.log(i); 	//6

즉 for문에서 선언된 변수가 아니라 전역객체에 할당되어 버립니다. 

 

var는 함수 스코프를 가진다

여기에 함수가 존재하게 된다면 약간 범위가 달라지게 됩니다.

var sum = 0;

function a() {
	for(var i = 1; i <= 5; i++){
		sum +=  i;
	}
}
a();
console.log(sum); 	//15
console.log(i); 	//Uncaught ReferenceError: i is not defined at <anonymous>:10:13

- 자바스크립트 엔진이 변형시킨 코드

 

// 변수 선언
var sum;
function a() {
	for(var i = 1; i <= 5; i++){
		sum +=  i;
	}
}

//할당 및 실행
sum = 0;
a();

console.log(sum); 	//15
console.log(i); 	//Uncaught ReferenceError: i is not defined at <anonymous>:10:13

- 함수와 변수선언 부분을 모두 위로 올리는 호이스팅이 처리됨.

- sum에 0을 할당하고 a함수를 실행하여 포문을 실행하고

- console로 변수들을 출력.(i는 현재 a함수 스코프에만 존재하고, 전역 스코프에 존재하지 않는 변수이기 때문에 에러발생)

 

 

새로운 변수의 선언방식

- 블록단위 { } 로 변수범위가 제한되었음 => 변수의 스코프가 괄호이다.

 

const

- const : 한번 선언한 값에 대해서 변경할 수 없다. => 변수의 재할당 불가

const c = 10;
c = 20; //Uncaught TypeError: Assignment to constant variable

- 객체나 배열의 내부는 변경할 수 있다.

const a = {};
a.aaa = 10;
console.log(a); //{aaa: 10}

const a = [];
a.push(20);
console.log(a); //[20]

 

let

- let : 한번 선언한 값에 대해서 다시 선언할 수 없다. => 같은 변수명으로 두번 선언할 수 없다. / 재할당 가능

let sum = 0;
for(let i = 1; i <= 5; i++){
	sum +=  i;
}

console.log(sum); 	//15
console.log(i); 	//Uncaught ReferenceError: i is not defined