Javascript - var, const, let 차이

var, const, let 차이

 

var, const, let은 javascript 코드를 보다 보면 자주 보게 되는 변수 선언 방법입니다.

이 세가지 변수 선언 방법에는 어떤 차이가 있는지 알아보도록 하겠습니다.

 

 

const, let은 ES6의 문법이고,

var는 ES6이전의 문법입니다.

 

저는 지금까지 ES5밖에 안써서 이번에 기회가되어 ES6을 사용해보았습니다.

 

---

1. var

 

es6 이전의 변수 선언 방식이며, 'var'는 유연한 방식으로 변수를 선언할 수 있는 방법입니다.

그러나, 몇 가지 문제점을 가지고 있습니다.

var test='test'
function testFunc() {
	var test='test in function';
    console.log(test);
}

testFunc(); //test in function
console.log(test); //test

 

위의 예를 보면 'hello'라는 변수의 유효범위가 function 내라는 것을 알수 있습니다.

 

 

var는 {} 단위의 scope가 아닌 function 단위의 scope를 가집니다

var test='test';
if(true) {
	var test='test in if'
}

console.log(test); // test in if

 

위의 예제를 보면, if절 내부에 test변수를 새로 선언했지만, var로 선언한 변수의 scope는 {}가 아닌 function이기 때문에 test 변수가 {} 바깥에서도 변경된 것을 볼 수 있습니다.

 

 

var test='test';
var test='test2';

console.log(test); //test2

 

위의 예저처럼, 같은 변수를 두번 선언했는데도 오류가 나지 않고 잘 동작합니다.

이런식의 유연한 변수 선언 방식은 편리하기도 하지만 많은 오류를 발생시키기도 합니다.

 

그렇기때문에, ES6에는 const와 let이라는 변수 선언 방법이 추가되었습니다.

 

---

2. const

 

- 상수를 선언합니다.

const는 'constance'의 약자입니다.

한번 선언된 상수는 다시 재정의 할 수 없습니다.

const test='test';
test='change test'; // error

 

상수로 선언한 test의 값을 변경하려고 하니 에러가 발생합니다.

 

 

 

 

- scope는 {}블록입니다.

const test='test';
{
	const test='inner test';
    console.log(test); // inner test
}

console.log(test) // test

 

괄호 안에 test를 선언했지만, cons의 scope는 괄호 블록 안이기 때문에

괄호 바깥에 test 상수를 또 선언할 수 있습니다.

 

 

---

3. let

 

let으로 선언하면 값을 재정의 할 수 있습니다.

let test='test';
test='change test';

 

 

const와 마찬가지로 scope는 괄호 변수 입니다.

let test='test';
{
	let test='inner test';
	console.log(test); // inner test
}

console.log(test); // test

 

 

var처럼 같은 변수를 두 번 선언하는 것은 불가합니다.

var test='test1';
var test='test2'; // error

 

---