[javascript] 유사배열객체(Array-like Objects) 란? 대체 무엇인가..

 

요약!

- 배열은 1) length가 있다. 2) index가 0부터 시작해서 1씩 증가한다.

- 유사배열의 조건도 위와 같다.  

1) length 속성을 포함해야한다.
2) 숫자 형태의 index가 존재해야한다. 

- 유사배열은 array가 아니다! (Array.isArray(유사배열) === false)

 

 

 

1. 유사배열이란?

---

유사배열(array-like objects)은 배열처럼 대괄호로 감싸져 있으며 각 요소가 indexing을 통해 담겨져 있는 형태를 띈다.

유사배열은 함수에서 처리 결과로 배열을 반환하고 싶을 때, Array에서 기본으로 내포되어있는 기능을 제공하고 싶지 않거나 Array에 내포되어있지 않은 기능을 제공하고 싶을 때 사용한다.

 

 

2. 유사배열의 예

---

document.querySelectorAll('a');

사진처럼 페이지 내의 특정한 선택자를 가진 노드를 불러왔을때  List는 배열처럼 보이지만 유사배열 객체이다. 

// 유사배열은 아래와 같은 형태로 선언하면 된다. 반드시 length를 가져야한다. 
let arrLikedObject = {0: 't', 1: 'e', 2: 's', 3: 't', length: 4};

console.log(arrLikedObject[0]); // 't'
console.log(arrLikedObject[1]); // 'e'

 

 

3. 유사배열과 배열의 비교

---

//배열
let array = ['t','e','s','t'];

//유사배열
let arrayLikeObject = {0: 't', 1: 'e', 2: 's', 3: 't', length: 4};

//두개 다 object  array구조는 object에 포함된다. 
console.log(typeof array); //object
console.log(typeof arrayLikedObject); //object

console.log(Array.isArray(array)); // true
console.log(Array.isArray(arrayLikeObject)); // false

 

또 유사배열은 배열의 내장 함수를 사용할 수 없다.

//배열
let array = ['t','e','s','t'];
//유사배열
let arrayLikeObject = {0: 't', 1: 'e', 2: 's', 3: 't', length: 4};

//forEach는 배열 iterator함수
array.forEach(el => console.log(el)); // t,e,s,t

//유사배열은 forEach 사용하면 Error남!
arrayLikeObject.forEach(el=> console.log(el)); Uncaught TypeError: forEach is not a function

 

 

4. 유사배열이 배열의 내장 함수를 사용하는 방법

---

4-1. Array.from() (ES6)를 이용해서 진짜 배열로 바꿔준다.

 

//유사배열
let arrayLikeObject = {0: 't', 1: 'e', 2: 's', 3: 't', length: 4};
// Array.from을 통해서 유사배열을 진짜 배열로 바꿔줌
let convertToArray = Array.from(arrayLikeObject);

//배열이 됫구요
console.log(Array.isArray(convertToArray)); // true

// 이제 forEach도 사용 ssap가능합니다.
convertToArray.forEach(el=> console.log(el)); // t,e,s,t

 

4-2. call 과 apply를 사용해서 배열의 내장 함수를 사용할 수 있다. 

//유사배열
let arrayLikeObject = {0: 't', 1: 'e', 2: 's', 3: 't', length: 4};

// TypeError: arrayLikeObject.forEach is not a function
arrayLikeObject.forEach(el=> console.log(el)); 

//call을 사용해서 Array.prototype 내장 함수를 사용할 수 있다.
Array.prototype.forEach.call(arrayLikeObject, el => {console.log(el)}); // t,e,s,t

 

 

잘못된 정보에 대한 피드백은 언제나 환영입니다  (´▽`ʃƪ)♡

 

참고:  https://poizon.tistory.com/11, https://kamang-it.tistory.com/entry/JavaScript15%EC%9C%A0%EC%82%AC%EB%B0%B0%EC%97%B4-%EA%B0%9D%EC%B2%B4Arraylike-Objects