JavaScript const

const 키워드는 ES6(2015)에서 도입되었습니다.

const로 정의된 변수는 다시 선언할 수 없습니다.

const로 정의된 변수는 재할당할 수 없습니다.

const로 정의된 변수는 블록 범위가 있습니다.

재할당 불가

const 변수를 재할당할 수 없습니다.

예제 1
const PI = 3.141592653589793;
PI = 3.14;      // 오류 발생
PI = PI + 10;   // 오류 발생

반드시 할당 해야함

JavaScript const 변수는 선언될 때 값을 할당해야 합니다.

예제 2

바른 예 :

const PI = 3.14159265359;

틀린 예 :

const PI;
PI = 3.14159265359;

JavaScript const를 사용하는 경우

일반적으로 값이 변경되는 되지 않는 변수에는 항상 const를 사용하여 선언합니다.

다음을 선언할 때 const를 사용합니다.

  • 배열선언
  • 객체선언
  • 함수선언

상수 객체 및 배열

키워드 const는 조금 오해의 소지가 있습니다.

값에 대한 지속적인 참조를 정의합니다.

이 때문에 다음 작업을 수행할 수 없습니다.

  • 상수 값 재할당
  • 상수 배열 재할당
  • 상수 객체 재할당

하지만 다음 작업은 수행할 수 있습니다.

  • 상수 배열 요소 변경
  • 상수 객체의 속성 변경

상수 배열

상수 배열의 요소를 변경할 수 있습니다.

예제 3
// 상수 배열 생성
const cars = ["Saab", "Volvo", "BMW"];

// 요소를 변경할 수 있습니다.
cars[0] = "Toyota";

// 요소를 추가할 수 있습니다.
cars.push("Audi");

하지만 배열 재할당은 불가능합니다.

예제 4
const cars = ["Saab", "Volvo", "BMW"];

cars = ["Toyota", "Volvo", "Audi"];    // ERROR

상수 객체

상수 객체의 속성을 변경할 수 있습니다.

예제 5
// 상수 객체 생성
const car = {type:"Fiat", model:"500", color:"white"};

// 속성을 변경할 수 있습니다.
car.color = "red";

// 속성을 추가할 수 있습니다.
car.owner = "Johnson";

하지만 객체 재할당은 불가능합니다.

예제 6
const car = {type:"Fiat", model:"500", color:"white"};

car = {type:"Volvo", model:"EX60", color:"red"};    // ERROR

지원 브라우저

const 키워드는 Internet Explorer 10 이전 버전에서는 지원되지 않습니다.

다음 표에 const 키워드를 완전히 지원하는 최소 브라우저 버전을 나타냅니다.

브라우저 구글 Chrome 마이크로소프트 Edge Firefox Safari Opera
버전 49 11 36 10 36

블록 범위

변수를 const로 선언하는 것은 블록 범위에 관한 경우 let과 유사합니다.

이 예에서는 블록 내에서 선언된 x 가 블록 밖에서 선언된 x 와는 다릅니다.

예제 7
const x = 10;
// x : 10

{
const x = 2;
// x : 2
}

// x : 10

재선언

JavaScript var 변수의 재할당은 프로그램 내 어디에서나 허용됩니다.

예제 8
var x = 2;     // 가능
var x = 3;     // 가능
x = 4;         // 가능

동일한 범위에서 var 또는 let으로 선언된 변수를 const로 재선언 하는것은 불가능합니다.

예제 9
var x = 2;     // 가능
const x = 2;   // 불가능

{
let x = 2;     // 가능
const x = 2;   // 불가능
}

{
const x = 2;   // 가능
const x = 2;   // 불가능
}

동일한 범위에서 기존 const 변수를 재할당할 수 없습니다.

예제 10
const x = 2;     // 가능
x = 2;           // 불가능
var x = 2;       // 불가능
let x = 2;       // 불가능
const x = 2;     // 불가능

{
  const x = 2;   // 가능
  x = 2;         // 불가능
  var x = 2;     // 불가능
  let x = 2;     // 불가능
  const x = 2;   // 불가능
}

다른 범위에서는 const 변수를 재할당할 수 있습니다.

예제 11
const x = 2;     // 가능

{
  const x = 3;   // 가능
}

{
  const x = 4;   // 가능
}

const 호이스팅

var로 정의된 변수는 맨 위로 이동하며 언제든지 초기화할 수 있습니다.

의미: 변수를 선언하기 전에 사용할 수 있습니다.

예제 12
carName = "Volvo";
var carName;

const로 정의된 변수도 맨 위로 이동하지만 초기화되지 않습니다.

의미: const 변수를 선언하기 전에 사용하면 ReferenceError가 발생합니다.

예제 13
alert (carName);
const carName = "Volvo";