자바스크립트에서 무심코 사용하지만 실제로는 꽤나 까다로운 Array.length 속성에 대해 알아보자
1. Array.length의 특징과 주의점 ⚠️
Array.length는 실무에서 정말 자주 사용되는 속성이다. React 컴포넌트에서 배열을 렌더링 할 때나, 조건문에서 배열의 상태를 체크할 때 등 자주 사용된다. 하지만 이 속성은 우리가 생각했던 것보다 더 복잡한 동작을 한다.
1.1 length 속성의 이상한 동작 🤔
const arr = [1, 2, 3];
console.log(arr.length); // 3
arr.length = 10;
console.log(arr.length); // 10
console.log(arr); // [ 1, 2, 3, , , , , , , ]배열의 length를 강제로 10으로 설정했더니, 빈 슬롯이 생긴다.
1.2 배열의 "구멍" 문제 🕳️
자바스크립트 배열의 가장 큰 특징 중 하나는 바로 이 "구멍"을 가질 수 있다는 점이다.
const arr = [1, 2, 3];
arr[3] = 4; // [1, 2, 3, 4]
arr[9] = 10; // [1, 2, 3, 4, , , , , , 10]
console.log(arr.length); // 10이처럼 배열은 실제로는 객체처럼 동작하기 때문에, 연속적이지 않은 인덱스에 값을 할당하면 그 사이에 구멍이 생긴다. 이 구멍은
- 자동으로 메워지지 않는다
map(),filter()등의 메서드 실행 시 건너뛰게 된다- 실제 데이터 처리에 문제를 일으킬 수 있다
1.3 length의 진짜 의미 📏
따라서 Array.length는 "배열의 실제 요소 개수"가 아닌 "마지막 숫자 인덱스 + 1"을 의미한다고 생각한다.
1.4 length의 활용
이런 특성을 역이용 하면 배열을 쉽게 조작할 수 도 있다
// 일반적인 배열 비우기 방법들
const arr1 = [1, 2, 3, 4, 5];
arr1 = []; // ❌ const로 선언된 경우 에러 발생
arr1.splice(0); // ⭐️ 동작은 하지만 새로운 배열을 반환
arr1 = new Array(); // ❌ const로 선언된 경우 에러 발생
// length를 활용한 방법
const arr2 = [1, 2, 3, 4, 5];
arr2.length = 0; // ✨ 가장 간단하고 효율적!
console.log(arr2); // []
// 유틸리티 함수로 만들기
function clearArray(array) {
array.length = 0;
return array;
}
// 프로토타입으로 확장하기
Array.prototype.clear = function() {
this.length = 0;
}
// 사용 예시
const arr3 = [1, 2, 3, 4, 5];
arr3.clear();
console.log(arr3); // []이 방식의 장점
- 매우 빠른 성능(내부적으로 단순히 length 속성만 수정)
- 원본 배열의 참조를 유지
- 메모리 효율적
- const로 선언 된 배열에도 사용 가능
정리 📌
Array.length는 실제 요소의 개수가 아님- 단순히 마지막 숫자 인덱스 + 1일 뿐이다
- 임의의 인덱스나 키값 할당은 피해야 한다
- 배열은 순차적인 데이터 구조로만 사용하면 length가 실제 요소 개수와 일치하게 된다. 결국
Array.length의 이상한 동작으로 고민하지 말고, 처음부터 배열을 올바르게 사용하는 것이 해결책이다
Hello