자바스크립트의 배열은 객체다

const arr = [1, 2, 3]

arr[3] = 'test'
arr['property'] = 'string value'
arr['func'] = function() {
  return 'hello'
}

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]) // 1, 2, 3, test
}

왜 for문에서 index가 0,1,2,3인 애들까지는 찍히는데 그 이후의 string 키에 대해서는 찍히지 않는가?

• 일단 arr.length의 값이 4이다.
• 그리고 i은 오직 number의 키에 대한 값만을 가져온다.

따라서 찍히지 않는 것이 당연하다. 그냥 개별적으로 각 키에 대한 값을 불러오면 다음과 같이 잘 접근해서 받아오는 것을 알 수 있다.

console.log(arr['property']) // string value
console.log(arr['func']) // function

흥미로운 점이 바로 이 점이다. 자바스클립트의 배열은 그냥 보통의 배열이 아니다. 인덱스가 아닌 일반 객체의 키와 값도 집어넣을 수 있다. 즉, 자바스크립트의 배열은 객체이다.

• 자바스크립트 배열은 해시 테이블로 구현된 객체이므로 인덱스로 요소에 접근하는 경우 일반적인 배열보다 성능적인 면에서 느릴 수밖에 없는 구조적인 단점이 있다(???). 하지만 요소를 삽입 또는 삭제하는 경우에는 일반적인 배열보다 빠른 성능을 기대할 수 있다.

자바스크립트에서 배열을 확인하는 방법

앞에서 배열의 타입을 검사하는 데 있어서 typeof를 사용하는 것은 한계가 있다고 하였다. object로 나오기 때문에.

const arr = [1, 2, 3]

if (typeof arr === 'object') {
  console.log('array check')
}

따라서 typeof 대신, 다음과 같은 방식을 사용하는 것이 좋다.

if (Array.isArray(arr)) {
  console.log('array check')
}

Array.length

배열의 길이보다는 배열의 마지막 인덱스 값과 가깝다. 만약 length의 값을 더 크게 할당을 하면 텅 비어 있는 값들이 채워지고(접근하면 undefined), 더 작게 할당한다면 배열이 잘린다.

const arr = [1, 2, 3]
console.log(arr.length) // 3

arr.length = 10
console.log(arr) // [1, 2, 3, , , , , , , ]
console.log(arr[4]) // undefined

arr.length = 2
console.log(arr) // [1, 2]
console.log(arr[2]) // undefined