react를 공부하면서 자연스레 ES6 공부도 같이 하게 되었다. 그 중 첫번째로 기초중에 기초이지만 변수선언의 방법에서부터 전 직장에서는 줄 곧 var를 사용하여 변수를 선언하였는데 ES6를 공부하게 되면서 var에는 여러가지 단점이 존재한다는 것을 알게되었고 이를 보안하기위해 ES6에서 부터 도입된 let, const가 var과 어떤 차이점이 있는지 짚고 넘어가고자 한다.
우선 var에 대해서 알아보자.
1) 함수레벨스코프
var는 함수레벨스코프를 지원하는데 함수레벨스코프란 함수 내에서 선언된 변수는 함수 내에서만 참조가 가능하며 외부에서는 참조가 불가능한 것을 말한다. 즉, 함수 외부의 제일 밖에서 선언된 var 변수는 전역변수이다.
var result = 0;
for (var i = 0; i < 10; i++) {
result += i;
}
console.log(result, i); // 45, 10위 코드와 같이 변수 i는 for문이 종료되었음에도 값이 유지되고 있는데 var로 선언된 변수는 블록레벨이 아닌 함수레벨로 범위가 정해지기에 값이 유효하다.
2) 재선언이 가능
var로 선언된 변수는 재선언이 가능하다. 즉, 같은 이름의 변수를 여러번 생성가능하다.
var str = "hello world";
var cnt = 3;
if (cnt > 1) {
var str = "hi world";
}
console.log(str) // "hi world"위 예제코드와 같이 재선언이 가능하기 때문에 변수 str은 hi world로 재정의 되게 된다. 의도적으로 재정의 한 것이라면 문제가 없겠지만 변수 str이 이미 정의가 되어 있다는 사실을 인지하지 못한 경우에는 문제가 될 수 있다.
ES6에서는 이를 보완하기 위해 let, const가 도입되었는데 다음과 같은 특징이 있다.
1) 블록레벨스코프
let과 const는 var와 달리 함수레벨스코프가 아닌 블록레벨스코프를 지원한다. 블록레벨스코프란 {} 로 감싸진 하나의 코드블록내에서 만 참조가 가능한 것을 의미한다.
if (true) {
let str = "hi world!";
console.log(str); // "hi world!"
}
console.log(str); // str is not definedif문 안쪽에서 선언된 변수 str을 if문 바깥쪽에서 출력하려 했더니 에러가 출력되는것을 확인할 수 있다. let은 블록레벨스코프이기 때문이다.
2) 재선언이 불가능
let과 const는 var와 달리 재선언이 불가능하다. 재선언은 불가능하지만 let의 경우 같은 블록내에서 값을 수정가능, const는 한번 선언이후에는 값이 수정 불가능하다는 차이점이 있다.
let str = "hello world!"
if (true) {
let str = "hi world!";
console.log(str); // "hi world!"
}
console.log(str); // "hello world!"재선언이 안된다고 하였지만 위의 코드는 정상적으로 동작한다. 이유는 앞서 말했듯이 let과 const는 블록레벨스코프이기 때문에 서로 범위가 다르기 때문이다. var에서의 예제와 비교해보면 변수 str이 이미 정의된 사실을 인지하지 못하였다고 가정한 경우 var 보다는 let이 더 좋은 선택지가 될 수 있을 것 같다.
