[TIL / JavaScript] 유사배열

유사배열은 배열과 똑같이 대괄호로 감싸져 있으나 배열이 아니다.

DOM의 nodes와 함수의 arguments가 유사배열에 해당한다.

var array = [1, 2, 3];
var nodes = document.querySelectorAll('div'); // // NodeList [div, div, div, ...]

function sum () {
  _sum = 0;    
	console.log(arguments) // [1,2,3,4]
	Array.isArray(arguments); // false

  for (let i = 0; i < arguments.length; i++){
      _sum += arguments[i];
  }   
	return _sum;
}

sum(1,2,3,4);

Array.isArray(array); // true
Array.isArray(nodes); // false

Array.isArray로 배열 여부를 판별할 수 있다.

유사배열의 실체

let arr = {
    0: 'a',
    1: 'b',
    2: 'c',
    3: 'd',
    length: 4
};

직접 만들어 사용할 이유는 없다. 브라우저가 데이터를 유사배열로 주기 때문에 알아야 한다.

유사배열의 문제점

length 속성과 index를 가지고 있지만 배열의 메소드는 사용할 수 없다.

유사배열에서 배열 메소드를 사용하는 방법

1. call, apply

function func() {
  console.log(arguments.join());
}
func(1, 'string', true); // Uncaught TypeError: arguments.join is not a function

유사배열인 arguments에서 배열 메소드인 join을 사용할 수 없다.

function func () {
  console.log(Array.prototype.join.call(arguments));
}
func(1, 'string', true); // '1,string,true'

배열의 프로토타입에 있는 join 함수를 빌려 사용하고, this는 arguments를 가리키게 하면 배열 메소드를 사용할 수 있다.

2. Array.from()

function func () {
	let arr = Array.from(arguments);
  console.log(arr.join());
}
func(1, 'string', true); // '1,string,true'

최신 자바스크립트에서는 Array.from으로 유사배열을 배열로 만들 수 있다.

Reference

• 함수의 메소드와 arguments by zerocho
• 배열과 유사배열 by zerocho