뭐해먹고사나
ES6 문법 var, let, const 차이와 실질적인 예 본문
ES6에서 새로 추가된 let, const 에 대해 알아보자.
키워드 |
구분 |
scope |
재선언 |
var |
변수 |
전역 |
가능 |
let |
변수 |
해당구역 |
불가능 |
const |
상수 |
해당구역 |
불가능 |
라는데 실제로 코드에서의 차이를 설명하면
1. 변수와 상수의 차이
var test = 123; //변수
test = 22; //가능
let test2 = 123; //변수
test2 = 22; //가능
const test3 = 123; //상수
test3 = 22; //불가능!!
변수 : 값 변경 가능
상수 : 값 변경 불가 (배열/객체내의 값 수정은 가능함)
const 로 선언한 test3은 상수기 때문에 값변경이 불가능하다.
또하나의 차이점이 있다.
var a; //가능
let b; //가능
const c; //Uncaught SyntaxError: Missing initializer in const declaration
상수는 선언 시 꼭 초기값을 넣어줘야한다.
2. 재선언 가능과 불가능의 차이
var test = 12;
var test = 22; //동일 변수명으로 재선언이 가능함
let test1 = 12;
let test1 = 22; //불가능!!
const test2 = 12;
const test2 = 22; //불가능!!
같은 스코프에 같은 이름의 변수를 선언하는 것은 실수일 가능성이 높지 않겠는가
let이나 const를 사용하면 이런 문제를 미연에 방지해준다.
3. Scope
//전역 Scope
{
//A Scope
var test = 123;
{
//B Scope
console.log(test); //123
}
console.log(test); //123
}
A scope 에서 var 로 선언했는데 B 나 전역 Scope에서도 해당 변수를 읽을 수 있다.
var 의 scope는 전역이기 때문이다.
var는 이렇듯 자원을 비효율적으로 사용하기 때문에 성능의 저하를 만들수 있다.
//전역 Scope
{
//A Scope
let test = 123;
{
//B Scope
console.log(test); //오류
}
console.log(test); //123
}
A Scope에서 let 으로 선언한 test 는 B Scope에선 variable is not defined 라는 에러가 난다.
let/const 는 자신을 정의한 블럭 안에서만 유효하다.
4. const는 상수라지만 .. 자주쓰는 이유는 ?
아래처럼 객체나 배열, 함수로 선언된 const 상수는 그안의 값들을 변경할 수 있다.
obj 객체의 a 라는 속성의 값을 2로 변경하였다.
하지만 obj 객체 자체를 재할당하는것은 불가능하다.
const obj = { a:1, b:2, c:3};
obj.a = 2;
console.log(obj); //{a: 2, b: 2, c: 3}
obj = { d:4}; //Uncaught TypeError: Assignment to constant variable.
5. 그렇다면 뭘 주로 써야할까?
const > let > var
왠만하면 const 로 쓰고, 오류가 발생하는 부분만 let 을 쓰고
비지니스 로직상 정 바꾸기 어려우면 var를 쓰면 되겠다.
'본업 > Javascript ES6' 카테고리의 다른 글
ES6 spread 연산자 { ...} 에 대해 알아보자 (객체/배열 복제, 병합, 일부만 수정) (0) | 2020.02.07 |
---|