유사 배열

mangojang·2022년 12월 22일
0

✍️ 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 

참고 문헌

profile
한 걸음 한 걸음 계속 걷는 자가 일류다

0개의 댓글