본문 바로가기

프로그래밍/JavaScript(JS)

자바스크립트(JavaScript) - 유사 배열

글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다!

 

자바스크립트에는 유사 배열이라는 것이 존재합니다.

 

배열이 아니지만 배열을 흉내 내는 것이죠. 객체를 유사 배열로 이용하여 반복 처리를 가능캐 할 수 있는 유사 배열을 간단히 알아보겠습니다.

 

유사 배열

유사 배열과 배열의 차이점은 객체에 length 프로퍼티와 프로퍼티 이름이 숫자 0으로 시작하는 프로퍼티가 있다면 유사 배열입니다.

 

Argument 객체와 DOM에서 요소를 가져올 때 NodeList의 경우도 유사 배열 객체입니다.

let a = ["a", "b", "c"];
let b = {
  0: "a",
  1: "b",
  2: "c",
  length: 3
};

이 유사 배열 객체는 Array의 프로토타입에 있는 메서드들을 사용하지 못하지만 for문, for in문을 통해 반복 처리가 가능합니다. for in문을 사용하면 모든 프로퍼티를 반환하기 때문에 length도 반환되니 참고하시기 바랍니다.

let a = ["red", "green", "blue"];
let b = {
  0: "red",
  1: "green",
  2: "blue",
  length: 3
};

for(let i=0;i<b.length;i++)
{
  console.log(b[i]);
}
// red
// green
// blue

 

Array.prototype 메서드 사용하기

유사 배열 객체는 Array 프로토타입에 메서드를 사용할 수 없습니다. 따라서 Array에 프로토타입에 있는 메서드를 사용하려면 call 메서드를 통해 호출을 할 수 있습니다.

let a = ["red", "green", "blue"];
let b = {
  0: "red",
  1: "green",
  2: "blue",
  length: 3
};

Array.prototype.push.call(b,"white");
console.log(b); // -> {0: 'red', 1: 'green', 2: 'blue', 3: 'white', length: 4}

Array.prototype.forEach.call(b,(value) => console.log(value));
// red
// green
// blue
// white

 

참고

모던 자바스크립트 입문(이소 히로시 지음, 서재원 옮김)