const , let란 (var 넌 나가있어) --ES6

 

ES6 이전에는 변수를 선언하는 방법이 var로 정해져있었습니다.

하지만 ES6 이후 const와 let이 나오면서 var의 문제점을 해결할 수 있었습니다.

그렇다면 var의 문제점은 무엇일까요?

1. 변수 선언 시 var 키워드 생략 가능

color = 'blue';
console.log(color)  //blue로 결과값 나옴

 

2. 같은 변수 여러번 선언 가능

var color = 'blue';
var color = 'red';

console.log(color);  //red 결과값

같은 변수를 선언하여도 오류 없이 동작하는 것을 볼 수 있습니다.

 

3. 함수 외부에서 선언된 모든 변수는 전역 변수

var color = 'blue';

{
	color = 'red';
}

console.log(color); //red

function pink () {
	var colorPink = 'pink';
}

console.log(colorPink); //error

위에서 보듯이 var는 함수에서 사용하는 { }(중괄호)만 scope로 인정하기 때문에 전역 변수가 남발하는 문제가 생길 수 있습니다.

 

console.log(color);  //undifiend
var color = 'blue';

이런 것도 가능합니다. 찾아본 결과 변수 호이스팅(hoisting)으로 인한 문제라고 하는데

여기서 변수 호이스팅이란 코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것을 말합니다.

 

그렇다면 호이스팅은 왜 문제가 될까요?

 

호이스팅은 변수의 초기화가 아닌 선언부분만 끌어올리기때문에 초기화값이 없어도 에러가 나지 않고 undifiend라고 로그가 찍힙니다. 

 

(var color(선언부분) = 'blue'(초기화부분))

---

위의 문제를 해결하기 위해 ES6에 등장한 변수 선언자가 const 와 let 입니다!

1. 같은 변수 선언시 문법 error

let color = 'blue';
let color = 'red';
					
console.log(color);  //error

 

2. 변수 호이스팅 금지

console.log(color);    //error: color is not defined
const color = 'blue';

 

그럼 const와 let은 무슨 차이가 있을까요?

let은 var처럼 선언 후 초기화한 값을 재할당할 수 있습니다.

하지만 const는 한 번 초기화한 값은 다시 재할당할 수 없습니다.

const name = 'jiwon';
name = 'won';     	//error

let color = 'blue';
color = 'green';

console.log(color); //green

---

 

참고자료

 

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const

const

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let

let