[JavaScript] 배열에 속성을 추가했는데 length는 왜 그대로일까?

🤔 겉보기에는 길이 4인데, 실제로는 2?

다음과 같은 배열을 봤을 때, 얼핏 보면 배열 길이가 4처럼 보인다.

[ 'one', 'two', once: 'once', twice: 'twice' ]

 

하지만 실제로는 길이가 2인 배열이다. 왜 그럴까?

이유는 바로 자바스크립트 배열은 객체이기 때문이다.

---

🧠 핵심 개념: 배열은 객체다

자바스크립트의 배열은 Array라는 특별한 형태의 객체(Object)다.
객체이기 때문에 배열에 숫자 인덱스를 갖는 요소 외에도, 직접 속성(property)을 추가할 수 있다.

const arr = ['one', 'two'];
arr.once = 'once';
arr.twice = 'twice';

console.log(arr.length); // 2

이처럼 arr.once나 arr.twice는 배열의 요소가 아닌 객체의 속성이다.

---

📌 length는 무엇을 세는 걸까?

arr.length는 숫자 인덱스(0, 1, 2...)로 접근 가능한 요소의 개수를 의미한다.
즉, arr[0], arr[1]처럼 배열 요소로 들어간 값만 카운트한다.

항목length에 포함?

arr[0] = 'one'	✅ 포함
arr[1] = 'two'	✅ 포함
arr.once = 'once'	❌ 불포함
arr.twice = 'twice'	❌ 불포함

 

그래서 우리가 처음 본 이 코드:

[ 'one', 'two', once: 'once', twice: 'twice' ]

은 사실 아래 코드와 동일하고,

const arr = ['one', 'two'];
arr.once = 'once';
arr.twice = 'twice';

length는 2가 되는 것이다.

---

✅ 마무리 인사이트

• 배열은 사실 객체라서 속성(property)을 추가할 수 있다.
• 하지만 length는 숫자 인덱스 요소만 센다는 점을 기억하자.
• 이런 개념을 알고 있으면 디버깅이나 로직 구현 중 헷갈릴 일이 줄어든다!