const 키워드

const 란 무엇입니까?

const 키워드는 ES6(2015)에서 도입되었으며 JavaScript에서 새 변수를 정의하는 데 사용됩니다. const 키워드로 정의된 변수는 재선언하거나 재할당할 수 없습니다. 이러한 변수에는 블록 범위{...}가 있습니다.

일반적으로 우리는 프로그램 전체에서 해당 변수의 값을 변경하지 않으려는 경우 변수를 선언하기 위해 const 키워드를 사용합니다. 그러나 상수 또는 const 변수가 배열 또는 객체인 경우 해당 항목 또는 속성을 업데이트하거나 제거할 수 있습니다.

통사론

const name = value;

매개변수

name이것은 상수 변수의 이름이며 유효한 식별자일 수 있습니다.
value이것은 상수 변수의 값이며 모든 유효한 표현식이 될 수 있습니다.

재할당 불가

const 키워드로 정의된 변수는 새 값을 재할당할 수 없습니다. 그렇지 않으면 error가 발생합니다.

const PI = 3.14;
PI = 22;    // this line will through an error
PI = PI + 5;    // this line will through an error

// this is the error
TypeError: Assignment to constant variable.

지정해야 함

const 키워드로 정의하는 변수는 선언 중에 값을 할당해야 합니다. 그렇지 않으면 error 가 발생합니다.

const PI;
PI = 3.14;

// this will throw an Syntax Error
Uncaught SyntaxError: Missing initializer in const declaration

상수 배열 및 객체

const 키워드는 const 키워드로 변수를 정의할 때 상수 값을 정의하지 않고 값에 대한 상수 참조(포인터)를 정의하기 때문에 약간 혼란스럽습니다.

이러한 이유로 상수 값, 상수 배열, 상수 개체를 재할당할 수 없지만 상수 배열 또는 개체의 요소 또는 속성을 변경할 수 있습니다.

상수 배열

이제 우리는 상수 배열의 요소를 변경할 수 있다는 것을 알고 있습니다.

// creating a constant array
const colors = ["Black", "Red", "Orange"];

// changing the second element of the array
colors[1] = "Blue"

// adding elements to the constant array
colors.push("Green");

// resulting array
["Black", "Blue", "Orange", "Green"];

하지만 error 가 발생하기 때문에 상수 배열을 재할당할 수 없습니다.

// creating a constant array
const colors = ["Black", "Red", "Orange"];

// this will throw an Type Error
colors = ["Red", "Blue", "Green"];

// this is the error
TypeError: Assignment to constant variable.

상수 객체

상수 배열과 마찬가지로 객체의 속성도 변경할 수 있습니다.

// creating a constant object
const colors = { r:"Red", g:"Green", b:"Brown" };

// changing the value of third property
color.b = "Blue";

// adding a new property to a constant array
color.a = "Alpha";

// resulting constant object
colors = { r:"Red", g:"Green", b:"Blue", a:"Alpha" };

하지만 error 를 발생시키기 때문에 상수 객체를 재할당할 수 없습니다.

// creating a constant object
const colors = { r:"Red", g:"Green", b:"Brown" };

// this will throw an Type Error
colors = { r:"Red", g:"Green", b:"Blue", a:"Alpha" };

// this is the error
TypeError: Assignment to constant variable.

블록 범위

JavaScript의 키워드와 마찬가지로 const 키워드로 선언된 변수는 블록 범위를 가집니다. 즉, 중괄호 사이에 선언된 변수{...}는 해당 중괄호 사이에서만 액세스할 수 있습니다.

const color = "Red";
// Here color is Red

{
    const color = "Black";
    // Here color is Black
}

// Here color is Red

Const 호이스팅

const로 정의된 변수는 맨 위로 끌어올려지지만 초기화되지는 않습니다.
의미: 선언되기 전에 const 변수를 사용하면 ReferenceError가 생성됩니다.

// this is throw an ReferenceError: Cannot access 'color' before initialization

console.log(color);
const color= "Red";

모아잠 알리 팔로우

Hi there, I am Moazam Ali, a Frontend Engineer based in Pakistan. Having around 2+ years of experience in frontend development.