[TIL] Javascript 배열과 유사배열

배열은 익숙하게 들어서 잘 알고 있지만 어떤 기회를 통해 유사배열이라는 말을 듣게 되었다.

유사배열이랑 배열은 언뜻 같은 배열 같아보이지만 말 그대로 "유사"배열, 배열이 아니라는 뜻이다.

예시를 통해 한번 알아보자

예시)

var array = [1, 2, 3];
array; // [1, 2, 3]
var nodes = document.querySelectorAll('div'); // NodeList [div, div, div, div, div, ...]
var els = document.body.children; // HTMLCollection [noscript, link, div, script, ...]

위 예제에서 array는 배열이고, nodes와 els는 유사배열이다. 겉만 봐서는 잘 모르겠다.

그럼 Array.isArray 메서드(배열인지를 판단해주는 메서드)를 사용해서 뭐가 배열인지 확인해보자.

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

위 에시와 같이 nodes와 els는 유사배열이라는 것을 알 수 있다.

var yoosa = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

yoosa 객체가 바로 유사배열이다. 키가 숫자고, length라는 속성을 가지고 있다. 배열도 객체라는 성질을 이용한 트릭입니다. 배열처럼 yoosa[0], yoosa[1], yoosa.length같은 것을 모두 활용할 수 있다.

배열과 유사배열을 구분해야 하는 이유는, 유사배열의 경우 배열의 메서드를 쓸 수 없기 때문이다!

예를들자면,

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

els는 배열이 아니므로 에러가 발생한다.(유사배열) 이럴 때 메서드를 빌려 쓰는 방법이 있다.

배열 프로토타입에서 메서드를 빌려오는 것이다. 바로 call이나 apply이다.

위 예시는 메서드를 사용하여 유사배열을 배열로 바꾸는 방법이다.

꼭 forEach가 아닌 map이나 filter, reduce 등의 다른 배열 메서드도 사용 가능하다.

그러나 최신 javascript에서는 Array.from으로 더 간단하게 할 수 있다.

아래 예시는 Array.from을 이용하였다.

Array.from(nodes).forEach(function(el) { console.log(el) });