자바스크립트 Const(JavaScript Const)

const 키워드는 ES6(2015)에 소개되었다.

• const 키워드로 선언된 변수는 재선언될 수 없다.
• const 키워드로 선언된 변수는 재할당될 수 없다.
• const 키워드로 선언된 변수는 블록 범위를 갖고 있다.

 

 

재할당 불가(Cannot be Reassigned)

const로 선언된 변수는 재할당이 불가하다.

 

const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error

 

 

---

 

 

반드시 값이 할당되있어야 한다(Must be Assigned)

자바스크립트의 const 변수는 선언될 때 반드시 값이 할당되있어야 한다.

 

Correct

const PI = 3.14159265359;

 

Incorrect

const PI;
PI = 3.14159265359;

 

 

---

 

 

💡 자바스크립트의 const는 언제 써야할까?

 

값이 변경되어선 안된다는 알고 있는 경우에만 항상 const를 이용해서 변수를 선언해야한다.

const를 이런 경우에 사용한다.

• 새로운 배열
• 새로운 객체
• 새로운 함수
• 새로운 정규식

 

 

---

 

 

상수 객체와 배열(Constant Objects and Arrays)

const 키워드는 약간의 오해 소지가 있다.

상수 값을 정의하는 게 아니라 값에 대한 상수 참조를 정의하기 때문이다.

따라서,

• 상수값을 재할당하기
• 상수 배열 재할당하기
• 상수 객체 재할당하기

위의 3가지는 할 수 없는 것들이다.

반면에,

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

위 2가지는 가능한 것들이다.

 

 

---

 

 

상수 배열(Constant Arrays)

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

 

// You can create a constant array:
const cars = ["Saab", "Volvo", "BMW"];

// You can change an element:
cars[0] = "Toyota";

// You can add an element:
cars.push("Audi");

Toyota,Volvo,BMW,Audi

 

 

하지만 배열을 재할당 할 순 없다.

 

const cars = ["Saab", "Volvo", "BMW"];

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

 

 

---

 

 

상수 객체(Constant Objects)

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

 

// You can create a const object:
const car = {type:"Fiat", model:"500", color:"white"};

// You can change a property:
car.color = "red";

// You can add a property:
car.owner = "Johnson";

Car owner is Johnson

 

 

하지만 객체를 재할당 할 순 없다.

 

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

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

 

 

---

 

 

브라우저 지원(Browser Support)

const 키워드는 인터넷 익스플로러 10(IE) 또는 이전 버전에서는 지원되지 않는다.

다음 표는 const 키워드를 완벽하게 지원하는 첫 번째 브라우저 버전을 정의한다.

Chrome 49	IE 11 / Edge	Firefox 36	Safari 10	Opera 36
Mar, 2016	Oct, 2013	Feb, 2015	Sep, 2016	Mar, 2016

 

 

---

 

 

블록 스코프(Block Scope)

const 를 이용한 변수 선언은 블록 스코프와 관련해서 let 과 유사하다.

해당 예제에서, 블록 내의 선언되있는 x는 블록 외부에 선언되있는 x와 같지 않다.

 

const x = 10;
// Here x is 10

{
const x = 2;
// Here x is 2
}

// Here x is 10

 

 

---

 

 

재선언(Redeclaring)

자바스크립트의 var 변수를 재선언하는것은 프로그램의 어느 곳에서나 허용된다.

 

var x = 2;     // Allowed
var x = 3;     // Allowed
x = 4;         // Allowed

 

 

동일한 범위내에서 기존 var 또는 let 변수를  const로 재선언 하는것은 허용되지 않는다.

 

var x = 2;     // Allowed
const x = 2;   // Not allowed

{
let x = 2;     // Allowed
const x = 2;   // Not allowed
}

{
const x = 2;   // Allowed
const x = 2;   // Not allowed
}

 

 

동일한 범위내에서 기존 const 변수를 재할당하는것도 허용되지 않는다.

 

const x = 2;     // Allowed
x = 2;           // Not allowed
var x = 2;       // Not allowed
let x = 2;       // Not allowed
const x = 2;     // Not allowed

{
  const x = 2;   // Allowed
  x = 2;         // Not allowed
  var x = 2;     // Not allowed
  let x = 2;     // Not allowed
  const x = 2;   // Not allowed
}

 

 

다른 범위나 다른 블록에서 기존 const 변수를 재선언하는 것은 허용된다.

 

const x = 2;       // Allowed

{
  const x = 3;   // Allowed
}

{
  const x = 4;   // Allowed
}

 

 

---

 

 

Const 호이스팅(Const Hoisting)

var로 정의된 변수는 맨 위에 올려지고 언제든 초기화가 가능하다.

변수가 선언되기 전에 변수 사용이 가능하다.

 

carName = "Volvo";
var carName;

 

 

const로 정의된 변수는 블록 맨 위에 올려지긴 하나, 초기화되진 않는다.

변수가 선언되기 전에 const를 이용한 변수를 사용하게 되면 ReferenceError를 일으킨다.

 

alert (carName);
const carName = "Volvo";