let vs const [ES6] :: 마이구미

이번 글은 es6에서 제공하는 let과 const 키워드에 대해 다뤄본다.

글의 이해에 도움이 되는 이전 글을 읽기를 바란다. (function scope vs block scope)

원본 글을 번역하여 작성하였다.

이전 글에서 언급했듯이 var는 function scope, let과 const는 block scope를 의미한다.

같은 scope 내부에서 선언된 변수들을 보자.

const key = 'abc123';
let points = 50;
let winner = false;

위 코드에서 우리는 winner 변수를 다시 선언해보자.

let winner = true;

무슨 결과가 나올까?

우리가 알고 있기로는 문제가 없는 코드이다.

var를 통해 변수 선언의 경우에는 같은 변수로 처리가 되기 때문이다.

이러한 경우가 허용됨에 따라 중복된 변수로 인해 많은 버그를 초래할 수 있다.

하지만 let 키워드는 이 경우를 허용하지 않는다.

즉, 에러가 발생한다.

let과 const는 scope에 2번 재선언을 할 수 없다.

let winner = false;
let winner = true; // Bug

var winner = false;
var winner = true; // O

그렇다면 다른 scope에서 선언 시 차이점은 무엇일까?

function scope와 block scope 관련된 코드를 보자.

const key = 'abc123';
let points = 50;
let winner = false;

if (points > 40) {
let winner = true;
}

console.log(winner) // 출력되는 값은?

만약 위 코드가 실행된다면, winner의 출력값은 무엇일까?

winner의 변수 선언 시 let이 아닌 var의 경우를 생각해보자.

var는 function scope로써 winner 변수는 같은 scope에 존재하기 때문에 true의 출력을 볼 수 있다.

하지만 let의 경우에는 false의 출력을 볼 수 있다.

왜 winner는 false인가?

여기서 선언된 2개의 winner 변수는 분리된 2개의 변수이다.

같은 이름을 가졌지만 각 winner 변수는 scope가 다르다.

• let winner = false 는 if문 외부이자 window의 scope를 의미한다.
• let winner = true; 는 if문 내부 scope를 의미한다.

이것이 function scope와 block scope 의 의미를 말해준다.

이번에는 let과 const의 차이를 살펴보자.

가장 큰 차이점은 쉽게 말하면 let은 변경할 수 있고, const는 변경할 수 없다는 것이다.

이것이 의미하는 바가 무엇인지 예제를 통해 알아보자.

const key = 'abc123';
let points = 50;
let winner = false;

points = 60;

points 변수는 50에서 60으로 값이 변경되는 것을 보여주는 단순한 예제이다.

그렇다면 const로 선언된 key 변수의 값을 변경해보자.

key = 'aaaa';

이 경우 동작하지 않는다.

위에서 언급했듯이 변경할 수 없는 의미가 이것이다.

결론적으로 let은 변경이 가능하고, const는 변경할 수 없다는 것을 알 수 있다.

그렇다면 let과 const는 어떤 경우에 써야하는가?

const의 경우 변경할 수 없기에 불변이라는 의미로 생각한다.

그렇기에 JAVA의 final 같이 상수로 이용할 수 있다.

let의 경우는 변경이 가능하기에 원시형 타입으로 이용할 수 있다 (int, boolean, string 등)

const는 참조할 수 있는 객체나 함수 같은 경우에도 선언할 때 사용한다.

객체나 함수는 let으로 선언해야하지 않을까라는 의문이 생길 수 있다.

(const로 객체를 선언할 경우 객체의 속성들은 변경할 수 있다. 객체 자체를 재할당할 수 없다)

const person = {
name: 'JungHyun',
age: 26
}

person은 name과 age를 가진 객체이다.

person이라는 객체는 불변하다.

이 의미는 본인의 삶을 생각해보자.

본인의 삶은 그 자체로 존재한다. 즉, 변하지 않는다.

변하는 것은 삶 안의 있는 나이, 이름, 머리 색과 같은 속성들이 변하는 것이다.

const person = {
name: 'JungHyun',
age: 26
}
person.age = 27

본인은 항상 똑같은 본인의 객체를 할당하고, 내부의 속성들을 통해 변경할 수 있다.

그렇기에 참조할 수 있는 대상은 const를 사용하는 것이 일반적이다.

es6에서는 var 키워드를 대신하여 let과 const를 사용하길 지향한다.

es6 온라인 테스트 사이트

https://es6console.com/