[JS] Array-like(유사 배열) / Array(배열)

• Array-like Object : 배열과 유사한 '객체'
  • 객체의 모든 key가 index이고, 예외적으로 length key를 하나 가져야만 한다.
• Array : 그냥 배열

let not_array_like = {
  0: "hello",
  1: "injuk",
  2: "ingnoh",
}
let array_like = {
  0: "hello",
  1: "injuk",
  2: "ingnoh",
  length: 3,
}
console.log('1. contents');
console.log(not_array_like);
console.log(array_like);

console.log('2. with from');
console.log(Array.from(not_array_like));
console.log(Array.from(array_like));

console.log('3. is this Array?');
console.log(Array.isArray(not_array_like));
console.log(Array.isArray(array_like));


/* 실행 결과
1. contents
{ 0: 'hello', 1: 'injuk', 2: 'ingnoh' }
{ 0: 'hello', 1: 'injuk', 2: 'ingnoh', length: 3 }
2. with from
[] // Array-like object가 아니므로 빈 배열이 반환됨
[ 'hello', 'injuk', 'ingnoh' ] // Array-like object이므로 배열로 전환이 가능
3. is this Array?
false // 실제로는 배열이 아님
false // 실제로는 배열이 아님
*/ 

 

• Array-like 객체가 형식에 맞지 않는 경우는 다음과 같다.

let array_like = {
  0: "hello",
  1: "injuk",
  2: "ingnoh",
  length: 3,
}
let without_length = {
  0: "hello",
  1: "injuk",
  2: "ingnoh",
}
let wrong_index = {
  0: "hello",
  4: "injuk",
  2: "ingnoh",
  length: 3
}
console.log('1. contents');
console.log(array_like);
console.log(without_length);
console.log(wrong_index);

console.log('2. with from');
console.log(Array.from(array_like));
console.log(Array.from(without_length));
console.log(Array.from(wrong_index));

/* 실행 결과
1. contents
{ 0: 'hello', 1: 'injuk', 2: 'ingnoh', length: 3 }
{ 0: 'hello', 1: 'injuk', 2: 'ingnoh' }
{ 0: 'hello', 2: 'ingnoh', 4: 'injuk', length: 3 }
2. with from
[ 'hello', 'injuk', 'ingnoh' ] // 정상적인 배열을 반환
[] // length가 없으므로 Array-like object가 아님
[ 'hello', undefined, 'ingnoh' ] // index가 잘못된 경우, length에 맞는 배열을 반환하되 undefined가 포함됨
*/

 

• 유사 배열은 배열의 메서드를 사용할 수 없음에 유의할 것. 실제로는 배열 리터럴로 선언된 Array가 아닌 Object이기 때문이라고 함!
  • 예를 들어, forEach와 같은 메서드를 사용할 수 없다.
  • 사용하고자 하는 경우는 Array.from 등을 사용하여 실제 배열로 만들어야 함!

let i_am_array_like_object = {
  0: "hello",
  1: "injuk",
  2: "ingnoh",
  length: 3,
}
let i_am_array = ["hello", "injuk", "ingnoh"];

// 실행시 TypeError 발생!
//TypeError: i_am_array_like_object.forEach is not a function
//    at ingnoh.js:9:24
// i_am_array_like_object.forEach((val) => {
//   console.log(val);
// });
Array.from(i_am_array_like_object).forEach((val) => {
  console.log(val);
});
i_am_array.forEach((val) => {
  console.log(val);
});

/* 실행 결과
hello
injuk
ingnoh
hello
injuk
ingnoh
*/