이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌2 - EcmaScript - 2년 전 등록 / 일 년 전 수정

ES2015(ES6) Const, Let

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

안녕하세요. 이번 시간부터 본격적으로 ES2015(ES6)에서 어떻게 자바스크립트가 바뀌었는지 알아보겠습니다!

먼저 변수를 선언할 때 var 외에도 const(constant, 상수)와 let이 생겼습니다.

const, let

기존 var과의 가장 큰 차이점은, const와 let은 함수스코프를 따르지 않고 블록스코프를 따른다는 겁니다. 스코프를 잘 모르신다면 이 글을 참고하세요. 지금까지 자바스크립트는 다른 언어와는 다르게 함수스코프를 사용하여 다른 언어를 사용하는 사람들이 적응하기가 힘들었는데, const와 let이 도입되어 적응하기 좀 수월해졌습니다.

블록스코프란 해당 변수를 해당 블록에서만 접근할 수 있는 것을 말합니다. var은 블록스코프가 아닌 함수스코프라서 if 블록과는 상관없이 접근할 수 있지만, const와 let은 블록 바깥에서는 접근할 수 없습니다.

if (true) {
  var x = 3;
}
console.log(x); // 3
if (true) {
  const y = 3;
}
console.log(y); // Uncaught ReferenceError: y is not defined

또한 const와 let은 var과 다르게 호이스팅(hoisting)이 일어나지 않습니다. 즉 예측하기가 쉽습니다. var은 hoisting 때문에 코딩할 때 예기치 못한 상황이 자주 발생했죠. 변수를 선언한 곳보다 더 위에서 해당 변수에 접근할 수 있는 경우가 있었습니다. 다음의 상황은 변수를 선언하기 전에 변수에 접근했는데도 에러가 나지 않는 현상을 보여줍니다.

(function() {
  console.log(x);
  var x = 10;
})(); // undefined;

하지만 const와 let은 그 현상을 차단했기 때문에 더 이상 변수를 선언한 곳보다 위에서는 변수에 접근이 불가능합니다.

(() => {
  console.log(z);
  const z = 10;
})(); // Uncaught ReferenceError: z is not defined

둘의 차이

const와 let의 차이는 간단합니다. 둘다 블록스코프를 따르지만, const는 한 번 초기화하면 다른 값을 대입할 수 없습니다. let은 기존의 var처럼 계속 값을 바꿔줄 수 있고요. const를 사용하면 절대 바꿔서는 안 되는 값을 실수로 바꾸는 것을 예방할 수 있겠죠?

const a = 100;
a = 101; // Uncaught TypeError: Assignment to constant variable.
let b = 100;
b = 101; // 101

하지만 조심해야 할 점은, const는 다시 대입하는 것만 막지, const에 할당된 객체나 배열의 요소를 바꾸는 것은 막지 않습니다. 즉 데이터의 주소값만 고정하는 겁니다.

const c = [1, 2, 3];
c[0] = 4;
c; // [4, 2, 3]
const d = {name: 'Zero'};
d.name = 'One';
d; // {name: 'One'} 

즉, =을 통한 대입만 막은 거죠. 이제 var 외에도 선택지가 두 개나 더 생겼으니 상황에 따라 선택하면 될 거 같습니다! 사실상 이제 var은 사용할 일이 없습니다. var의 기능은 let이 다 하거든요. const는 좀 더 제한적인 상황에서 사용하는 것이고요.

다음 시간에는 object의 변화에 대해 알아보겠습니다! 

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

아직 댓글이 없습니다.