자바스크립트 유사배열

황고은·2025년 9월 20일
0

자바스크립트의 유사배열(array-like) 객체란, 배열과 비슷하게 인덱스를 통한 접근이 가능하고, length 프로퍼티도 가지고 있는 객체를 의미한다.


유사 배열은 배열과 다르다

  • 유사 배열은 Array 나 배열 리터럴 [] 을 통해 만들어지지 않았다. 따라서, Array.prototype 을 상속받지 않기 때문에, push(), pop() 과 같이 배열과 관련된 메소드를 사용할 수 없다.
  • 또한 length 프로퍼티가 자동으로 업데이트 되지 않는다.


유사 배열을 구별하는 법

isArray() 메소드를 통해 유사 배열과 배열을 구별해낼 수 있다.

const arr_like = { 0: 'I', 1: 'am', 2: 'array-like', length: 3 };

Array.isArray(arr_like); // returns false


유사 배열을 진짜 배열로 변환하기

유사배열 객체는 배열 메소드를 사용할 수 없는데, 배열로 변환하여 배열 메소드를 사용할 수 있도록 할 수 있다.

1. Array.from() 메소드 사용하기

let arrayLike = { 0: 'a', 1: 'b', length: 2 };
let realArray = array.from(arrayLike);

console.log(realArray); // Outputs: [ 'a', 'b' ]

2. 전개 구문 사용하기

let arrayLike = { 0: 'a', 1: 'b', length: 2 };
let realArray = [ ...arrayLike ];
console.log(realArray); // Outputs: [ 'a', 'b' ]


유사 배열에 대해 알아야 하는 이유

유사 배열은 자바스크립트 언어에서 굉장히 자주 쓰이기 때문에, 배열로 생각하게 된다면 버그를 만날 수도 있다.

유사 배열의 예시

arguments 객체

function showArguments() {
  console.log(arguments);
}

showArguments(1, 2, 3);
// [Arguments] { '0': 1, '1': 2, '2': 3 }

키 값이 숫자이고, length 프로퍼티를 갖고 있는 객체

const arr_like = { 0: 'I', 1: 'am', 2: 'array-like', length: 3 };

arr_like[2]; // returns array-like
arr_like.length; // returns 3


📚 참고자료

profile
영차영차 눈을 굴려보아요 ⛄

0개의 댓글