본문 바로가기
기술 개발/Javascript

const - 요소나 속성을 추가할 수 있는 이유

by 쪼짱 2023. 4. 3.
728x90
반응형
SMALL

const란?

const 선언은 블록 범위의 상수를 선언한다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없다.

 

즉, const로 선언된 배열이나 객체의 경우, 해당 변수를 다른 값으로 재할당하는 것이 불가능하다. 또 다른 말로는, const로 선언된 변수에 다른 값을 할당하려고 하면 에러가 발생한다는 것이다. 하지만, 배열이나 객체의 요소나 속성에 대한 수정은 가능하다.

 

배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유

const가 변수 자체를 불변으로 만드는 것이 아니라 변수가 참조하는 값의 변경을 막는 것이기 때문이다. 배열이나 객체는 참조 타입이고, const로 선언된 변수가 참조하는 메모리 공간 자체는 변경되지 않는다. 따라서 변수가 참조하는 배열이나 객체의 요소나 속성은 여전히 변경 가능하다.

 

ex) const로 선언된 배열에 요소 추가

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

ex) const로 선언된 객체에 속성 추가 및 속성의 값 변경

const obj = { a: 1, b: 2 };
obj.c = 3;
obj.a = 4;
console.log(obj); // { a: 4, b: 2, c: 3 }

 

하지만, const로 선언된 배열이나 객체의 참조를 변경하려고 하면 에러가 발생한다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr1 = arr2; // Error: Assignment to constant variable.
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
obj1 = obj2; // Error: Assignment to constant variable.

let도 요소나 속성을 추가할 수 있을까?

결론적으로, let으로 선언된 배열이나 객체에도 요소나 속성을 추가할 수 있다.

let은 변수를 재할당할 수 있는 반면, const는 변수 재할당이 불가능한 차이점이 있지만,

let으로 선언된 변수도 마찬가지로 변수가 참조하는 값의 변경이 가능하다.

 

ex) let으로 선언된 배열에 요소 추가

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

 

ex) let으로 선언된 객체에 속성 추가 및 속성의 값 변경

let obj = { a: 1, b: 2 };
obj.c = 3;
obj.a = 4;
console.log(obj); // { a: 4, b: 2, c: 3 }

하지만, let으로 선언된 변수도 재할당이 가능하기 때문에, 변수의 값이 변경될 수 있다.

따라서, let으로 선언된 변수는 주의해서 사용해야 한다.

 

 

추가로 참고하면 좋음

https://suzzeong.tistory.com/99

 

호이스팅(Hoisting) (feat. var, let, const)

영어 사전에서 Hoist는 '들어(끌어)올리다'라는 의미를 가지고 있다. 그러면 자바스크립트에서 호이스팅이란 무엇을 의미할까? MDN에 의하면 JavaScript에서 호이스팅이란, 인터프리터가 변수와 함수

suzzeong.tistory.com


출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const

https://velog.io/@tvfxq0423/배열객체를-const로-선언하였을-때-요소나-속성을-추가할-수-있는-이유

 

 

728x90
반응형
LIST