[Javascript] 배열과 유사 배열의 차이

Javascript에서 객체(Object)란 프로그램에서 인식할 수 있는 모든 대상을 가리킨다.
데이터를 저장하고 처리하는 기본 단위이다.

배열과 유사 배열의 차이

배열은 일반 객체와 달리 위치를 나타내는 index와 요소의 개수(배열의 길이)를 나타내는 length 프로퍼티를 가진다.

유사 배열 객체(Array-like objects)는 마치 배열처럼 index로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체를 말한다.

• 유사 배열 객체의 예
  • 문자열(string)
  • 함수의 매개변수 객체(arguments)
  • 각종 DOM 객체(HTMLCollection, NodeList 등)
    .
• 유사배열은 함수에서 처리 결과로 배열을 반환하고 싶을때 또는, Array에서 기본으로 내포되어있는 기능을 제공하고 싶지 않거나 Array에 내포되어있지 않은 기능을 제공하고싶을때 사용한다.
  .
• 유사 배열 객체는 마치 배열처럼 for문으로 순회할 수도 있다.

const kmj = {
  0: 'kmj',
  1: 'howdy-mj',
  2: 'FE',
  length: 3,
  //kmj라는 key값을 가지고 length: 3을 가지는 유사배열객체
}
for (let i = 0; i < kmj.length; i++) {
  console.log(kmj[i]) // output: 'kmj', 'howdy-mj', 'FE'
}

• 하지만 배열처럼 push, pop, join, map과 같은 배열에 사용하는 메서드 사용은 불가하며, 일반 객체처럼 프로퍼티로 접근할 수 없다.

그럼 유사 배열 객체를 수정하려면 어떻게 해야 할까?
=> 배열로 바꿔서 해야 함.
1.간접 호출 활용
2.(ES6)Rest파라미터 활용
3.(ES6)Array.from()메서드: 유사 배열을 진짜 배열로 바꿔준다.

//문자열을 배열로
console.log(Array.from("Hello"));	
//[ 'H', 'e', 'l', 'l', 'o' ]
//유사 배열 객체를 배열로
console.log(Array.from({ 0: "찬민", 1: "희진", 2: "태인", length: 3 }));	
// [ '찬민', '희진', '태인' ]

Reference)
https://www.howdy-mj.me/javascript/array-and-array-like-object-and-iterable/
https://poizon.tistory.com/11
https://nohack.tistory.com/29 [lucid_dream:티스토리]
https://velog.io/@ssonnni/Array.from-%EB%B0%B0%EC%97%B4%EB%A1%9C-%EB%A7%8C%EB%93%A4%EC%96%B4%EC%A3%BC%EB%8A%94-%EB%A9%94%EC%84%9C%EB%93%9C