ES6의 변수 선언 let, const

ES6 이상부터 let, const 키워드가 생겨났다.

다른 프로그래밍들은 대부분 Block-level scope를 사용하지만, JavaScript는 Function-level scope를 사용한다.

Block-level scope는 코드 블록 내에서 선언된 변수는 모두 코드 블록 안에서만 유효하며, 코드 블록 외부에서는 변수를 호출할 수 없다.

Function-level scope는 함수 단위로, 함수 내에서 선언된 변수는 함수 밖에서는 호출할 수 없다.


var test = 'A';
console.log(test); // A

function example() {
  test = 'B';
}
example();

console.log(test); // B

var은 Block-level scope를 따르지 않고 재정의가 가능하다.

따라서 var test는 전역 변수이고 재정의가 가능한 var의 특성 때문에 example()내에서 재할당되어 값이 'B'로 변경되었다.

이 때문에 변수 이름에 대해 신경을 써야하는 경우가 생기고, 변수명 때문에 알 수 없는 에러가 나는 경우가 생긴다.

하지만 ES6부터는 let, const를 사용하여 이런 문제를 개선할 수 있다.


let test = 'A';

function example() {
  test = 'B';
  let value = 'C';
}
example();

console.log(test); // Uncaught SyntaxError: Identifier 'test' has already been declared
console.log(value); // Uncaught ReferenceError: value is not defined

또한 let으로 선언된 변수는 동일한 이름으로 다시 선언할 수 없다.


var test = 'A';
var test = 'B';

let test = 'A';
let test = 'B'; // Uncaught SyntaxError: Identifier 'test' has already been declared

const test; // Uncaught SyntaxError: Missing initializer in const declaration
const test = 'A';
test = 'B'; // Uncaught TypeError: Assignment to constant variable.

const는, let과 비슷한 맥락이지만 재할당이 불가능하다.

다시 말해 const를 사용해 변수와 값을 선언하면 나중에 이 변수는 다시 값을 할당할 수 없다는 뜻이다.

위와 같은 이유 때문에 const는 꼭 변수 값과 함께 선언되어야 한다.

하지만 예외적인 경우가 있다.


const test = { name: 'ian', }
console.log(test.name); // ian

test.name = 'john';
console.log(test.name); // john

const로 객체를 선언한 경우 프로퍼티는 변경이 불가하지만 객체의 내용(프로퍼티의 추가, 삭제, 프로퍼티 값의 변경)은 변경할 수 있다.

배열일 경우에는 값 수정, 삽입, 삭제는 자유롭지만 새로운 배열을 다시 대입하는 것은 불가하다.


const test = ['ian'];
test[1] = 'im';
console.log(test); // ['ian', 'im'];

test[0]= 'im';
console.log(test); // ['im', 'im'];

test.push('im');
console.log(test); // ['im', 'im', 'im'];

test = []; // Uncaught TypeError: Assignment to constant variable.

다람쥐 헌 쳇바퀴에 타고파

ES6의 변수 선언 let, const