유사 배열

✍️ react-saga를 공부하다 generator > iterator> 유사 배열 까지 왔다. 작업 하다 보면 종종 배열인데, method(ex) forEach, slice, splice…..)가 안 되는 경우가 있다. 알고 보니 진짜 배열이 아니라 유사 배열이라 안되는 것이었다. 때마다 어떻게 어떻게 대처했는데 제대로 알고 사용하고자 다음 글을 정리 해 보았다.

배열 vs 유사 배열

배열

선언 방법

1. 대괄호 ([])를 이용하여 선언

   ✅ 많이 사용하는 방법

   const fruit = ['mango', 'orange', 'apple']; 

2. new Array() 를 이용하여 선언

   const fruit = new Array('mango', 'orange', 'apple');

특징

• 인덱스(숫자)로 접근 가능

  alert(fruit[0]);  // mango
  alert(fruit[1]);  // orange
  alert(fruit[2]);  // apple

• length 속성으로(기본으로 가지고 있음.) 배열 요소의 갯수를 알 수 있음.

  alert(fruit.length)  // 3

유사 배열

const likefruit = {
  0: 'tomato',
  1: 'strawberry',
  2: 'watermelon',
  length: 3
};

특징

• 숫자를 키로 두고 있음.

  alert(likefruit[0])  // tomato
  alert(likefruit[1])  // strawberry
  alert(likefruit[2])  // watermelon

• length 속성을 가지고 있음.

  alert(likefruit.length)  // 3

• 배열 Method를 사용하지 못 함.

대표적인 유사 배열

1. arguments - 가변인자

   • 함수의 파라미터가 가변적일 경우, arguments로 받아 올 수 있음.

   alert(sum(1,2));
   alert(sum(1,2,3));
   
   function sum(){
   	let result =0;
   	for(let i=0 < arguments.length; i++ ){
   		result += arguments[i]
   	}
   	return result;
   }

2. HTMLCollection

   const htmlCollection = document.body.children

3. NodeList(dom접근)

   const allDiv = document.querySelectorAll('div')

유사 배열에서 배열 Method 사용하기

1. call or apply로 Array 의 Method 빌려오기

   • call or apply 를 이용해 this를 지정할 수 있음.
     Function.prototype.call()

     func.call(thisArg[, arg1[, arg2[, ...]]])

     • thisArg : func 에 호출에 제공 되는 this의 값
     • call 과 apply 의 차이 : call 은 인수 목록(다수)을 받고, apply 는 인수 배열(하나)을 받는다.
   • 배열 Method의 this를 유사 배열로 지정하여 , 배열 Method를 상속 받음.

   Array.prototype.forEach.call(likefruit, function(el) { 
   	console.log(el); 
   });
   
   [].forEach.call(likefruit, function(el) { 
   	console.log(el); 
   });

2. 유사 배열을 진짜 배열로 만들기

   • Array.from()

     const realfruit = Array.from(likefruit);
     realfruit.forEach((el)=>{
     	console.log(el);
     })
     // tomato, strawberry, watermelon 

     • es6부터 가능 - pollyfill

참고 문헌

• https://www.zerocho.com/category/JavaScript/post/5af6f9e707d77a001bb579d2
• https://kamang-it.tistory.com/entry/JavaScript15유사배열-객체Arraylike-Objects
• https://www.howdy-mj.me/javascript/array-and-array-like-object-and-iterable
• https://kamang-it.tistory.com/entry/JavaScript13가변인자와-arguments
• https://ko.javascript.info/array
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call