유사 배열 객체

유사배열객체(Array Like Object)란
배열과 비슷해 보이지만 배열이 아닌 객체라는 특징을 가지고 있다.

유사배열객체의 사례1

// javascript의 함수는 내부적으로 arguments라는 객체를 가진다. 
// 참고로 화살표 함수는 arguments 객체를 가지지 않는다.
function func() {
  console.log(arguments)
  /*
    {
      '0': 1,
      '1': 2,
      '2': 3,
      '3': 4,
      '4': 5,
      callee: ƒ func(),
      length: 5,
      Symbol(Symbol.iterator): ƒ values(),
      [[Prototype]]: Object
    }
  */
}

func(1, 2, 3, 4, 5)

위와 같이 유사배열객체인 arguments는 key와 value를 가진 객체로 분류되며 매개변수로 받는 값의 여러 정보를 가진다.

또한 arguments는 배열이 아닌 유사배열객체이기 때문에 배열 메서드를 사용할 수 없다.

유사배열객체의 사례2

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

const nodeList = document.querySelectorAll('li');

위와 같이 DOM 요소 또한 유사배열객체에 해당한다.
다만 nodeList는 forEach, entries, keys는 제공한다. 하지만 그 외의 배열 메서드는 사용할 수 없다.

유사배열객체를 배열처럼 사용하기

function func() {
  console.log(Array.isArray(arguments))
}

func(1, 2, 3, 4, 5)

Array.isArray를 사용하여 진짜 배열인지 확인할 수 있는데
진짜 배열이면 true를 아니면 false를 반환한다.

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

const nodeList = document.querySelectorAll('li');
const convertNodeList = Array.from(nodeList);

Array.from을 사용하면 유사배열을 진짜 배열로 형 변환 해준다.
진짜 배열로 변경해주면 모든 배열 메서드를 사용할 수 있게 된다.