TIL

유사배열과 배열의 차이

JayPro 2021. 11. 19. 21:23

유사배열이란?

  • 유사배열은 배열과 똑같은 [ ] 에 감싸져서 배열인척하는 객체
  • 배열처럼 index 값을 가지기도 하고 모양도 배열과 똑같다. 하지만 ES5 문법 기준으로 map, filter 와 같은 배열 메소드를 바로 적용 할 수 없다.
  • ES6에서 추가된 Arry.from()로 유사배열을 배열로 바꿔주거나 call, apply 같은 프로토타입 메소드를 이용해 유사배열에도 배열 메소드를 사용할 수 있다.

유사배열이 이용되는 곳

  • JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사 배열 객체에 담겨서 온다.

기존 배열과 다른 점

  • 선언시에 유사 배열은 필수적으로 length 값을 적어줘야 한다. 하지만 배열은 그럴 필요가 없다.
  • key값도 선언해서 만들어줄 수 있는데 이 때 반드시 0부터 1씩 증가해야 한다.

유사 배열 각 요소를 수정하고 싶다면?

  • 앞서 map, forEach, filter 같은 배열 메서드를 사용하지 못한다고 했지만 우회적으로 call 이나 apply 라는 것을 사용하면 사용할 수 있다.
  • 구문은 Array.prototype.forEach.call(유사배열, {})과 같은 형태
  • 최신 버젼 자바스크립트에서는 더 간단하게 변했는데, Array.from()을 쓰면 된다 Array.from(유사배열).forEach({})
SMALL