JavaScript에서 상수(const) 배열을 만들려면 배열 이름 앞에 const 키워드를 붙여 선언하면 됩니다. 여기서 중요한 점은 배열의 개별 요소는 얼마든지 수정할 수 있지만, 배열 변수 자체를 새로운 값으로 재할당하는 것은 불가능하다는 것입니다.
const 배열의 동작 원리
const로 선언된 변수는 해당 변수가 참조하는 메모리 주소(참조값)가 고정되기 때문입니다. 따라서 다음과 같은 규칙이 성립합니다.
- 요소 변경 가능: arr[0] = 44 처럼 인덱스를 통해 기존 요소의 값을 바꾸거나 push(), pop() 등으로 배열 내용을 조작할 수 있습니다.
- 재할당 불가능: arr = [11, 11, 11, 11] 처럼 배열 전체를 새 배열로 교체하면
TypeError: Assignment to constant variable.오류가 발생합니다.
예제 코드
다음은 JavaScript에서 상수 배열을 생성하고, 요소 변경과 재할당 시도의 차이를 확인하는 전체 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Const array in JavaScript</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to change array values and reassign the array later
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let resEle = document.querySelector(".result");
const arr = [22, 33, 44, 55];
sampleEle.innerHTML = "Original Array = " + arr;
document.querySelector(".Btn").addEventListener("click", () => {
(arr[0] = 44), (arr[1] = 99), (arr[2] = 0);
resEle.innerHTML += "Changing array elements value" + arr + '<br>';
try {
arr = [11, 11, 11, 11];
}
catch (err) {
resEle.innerHTML += "Trying to reassign const array = " + err;
}
});
</script>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 아래와 같이 두 가지 결과를 확인할 수 있습니다.
- 요소 값 변경 성공: arr[0], arr[1], arr[2]의 값이 각각 44, 99, 0으로 정상적으로 변경되어 화면에 출력됩니다.
- 재할당 시도 실패: try-catch 블록에서 배열 전체를 새로 할당하려 하자
TypeError: Assignment to constant variable.오류가 잡혀 그대로 화면에 표시됩니다.
정리
const 배열은 배열 변수의 참조 자체를 보호하는 것이지, 배열의 내용까지 불변으로 만드는 것은 아닙니다. 만약 배열 내용 자체도 변경 불가능하게 만들고 싶다면 Object.freeze(arr)를 함께 사용해야 합니다.