[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