변수 정의: const, let
ES5 까지는 var 키워드로 변수를 정의했다.
ES6 에서는 const 와 let 을 이용하는 새로운 변수 정의 방법이 생겼다.
1. var 문제점
1.1. 함수 스코프
스코프(scope) 란 변수가 사용될 수 있는 영역을 말한다.
var 는 함수 스코프라서 함수 밖에서 사용하면 에러가 발생한다.
function error() { var a = 1; } console.log(a); // ReferenceError: a is not defined
var 키워드 없이 변수를 선언하면 전역 변수가 된다.
function global() { a = 1; } function local() { console.log(a); } global(); local(); // 1 출력
for 문에서 선언된 변수가 사라지지 않는다.
for 문 뿐만 아니라 while, switch, if 문 등 함수 내부에서 작성되는 모든 코드가 같은 문제를 안고 있다.
for (var i = 0; i < 10; i++) { console.log(i); // 0 ~ 9 출력 } console.log(i); // 10 출력
1.2. 호이스팅(hoisting)
var 로 정의된 변수는 해당 스코프의 최상단으로 끌어올려진다.
변수를 선언 없이 사용하면 참조 에러가 발생한다.
console.log(a); // ReferenceError: a is not defined
하지만 다음 코드는 에러가 발생하지 않는다.
console.log(a); // undefined var a = 1;
호이스팅에 의해 위 코드는 아래와 같이 취급된다.
var a = undefined; console.log(a); // undefined a = 1;
심지어 변수 선언 전에 값을 할당할 수도 있다.
console.log(a); // undefined a = 2; console.log(a); // 2 var a = 1;
이런 호이스팅 개념은 코드를 직관적이지 않게 만들며, 버그가 발생하여도 정확한 원인을 찾기 힘들게 만든다.
1.3. 항상 재할당 가능
var 는 재할당 가능한 변수로만 만들 수 있다.
따라서 상수처럼 고정된 값을 변수로 선언해서 이용해야 할 때에도 변경될 위험이 존재하고 있다.
2. var 문제점 해결: const, let
2.1. 블록 스코프
대부분의 언어에서 블록 스코프를 사용한다.
블록 스코프에서는 블록을 벗어나면 변수를 사용할 수 없다.
블록을 벗어나도 살아있던 var 변수와 달리 const, let 변수는 블록을 벗어나면 관리해줄 필요가 없다.
if (true) { const a = 0; } console.log(a); // ReferenceError: a is not defined
2.2. 호이스팅(hoisting)
const, let 도 호이스팅 된다.
하지만 변수를 선언하기 전에 사용하려고 하면 에러가 발생한다.
console.log(a); // ReferenceError: Cannot access 'a' before initialization const a = 1;
이 때문에 const, let 은 호이스팅 되지 않는다고 생각하기 쉽다.
const, let 은 서로 다른 스코프에서 같은 이름의 변수를 사용할 때 실수를 방지해준다.
아래 코드에서 a 는 다른 블록 스코프지만 상위에 선언되었기 때문에 1 이 출력된다.
const a = 1; { console.log(a); // 1 }
하지만 아래 코드에서는 참조 에러가 발생한다.
하위 블록 스코프에서 호이스팅으로 인해 const a = 2
로 할당 되기 전까지는 사용이 불가능하다.
이처럼 같은 이름의 변수를 사용할 때의 실수를 방지해준다.
const a = 1; { console.log(a); const a = 2; }
2.3. 재할당 불가능 const
const 로 정의된 변수는 재할당이 불가능하다.
let 으로 선언된 변수는 재할당 가능하다.
대신 const 로 정의된 객체의 내부 속성값은 수정 가능하다.
const arr = [1, 2]; arr[0] = 3; arr.push(4); console.log(arr); // [3, 2, 4]
'Language > JavaScript' 카테고리의 다른 글
[Javascript] ES6 템플릿 리터럴 (0) | 2020.05.17 |
---|---|
[Javascript] ES6 비동기 프로그래밍 2 (async await) (0) | 2020.05.17 |
[Javascript] ES6 비동기 프로그래밍 1 (Promise) (0) | 2020.05.17 |
[Javascript] ES6 함수 (function) (0) | 2020.05.08 |
[Javascript] ES6 객체와 배열 (Object and Array) (0) | 2020.05.08 |