배열(Array)
자바스크립트에서 배열이란 관련 있는 데이터를 하나의 변수에 할당해 관리하기 위해 사용하는 데이터 타입이다. 자바스크립트는 명시적 타입이 없기 때문에, 하나의 배열은 여러 자료형을 가질 수 있는 특징이 있다. 배열을 사용하면 여러 데이터를 관련성 있게 관리할 수 있기 때문에 생산성 및 코드 가독성이 높아지고 이는 유지보수 비용의 감소로 이어진다. 이외에도, 배열에서 기본으로 제공하는 함수를 사용할 수 있는 점, 데이터에 순차적으로 접근이 가능하다는 점 등 장점이 아주 많다.
유사배열(Array-Like Object)
유사배열이란 이름 그대로 배열과 유사한 객체를 말한다.
유사배열은 함수에서 처리 결과로 배열을 반환하고 싶을때 또는, 배열에서 기본으로 내포되어있는 기능을 제공하고 싶지 않거나 배열에 내포되어있지 않는 기능을 제공하고 싶을때 사용한다.
배열 vs 유사배열
배열과 유사배열을 간단하게 비교해보면
var array = [1, 2, 3];
array; // [1, 2, 3]
var nodes = document.querySelectorAll('div'); // NodeList [div, div, div, ...]
var els = document.body.children; // HTMLcollection [noscript, link, div, ...]Array.isArray 메서드(배열인지 판단해주는 메서드)를 이용해보자.
Array.isArray(array); // true
Array.isArray(nodes); // false
Array.isArray(els); // false직접 배열 리터럴로 선언한 array만 배열으로 나오는걸 알 수 있다.
유사배열의 조건
- 숫자 형태의 indexing이 가능할것
- length 속성을 포함할것
이는 유사배열을 배열처럼 사용하기 위한 최소한의 조건이다.
let arr = {
0:'i'
1:'am'
2:'iron'
3:'man'
length: 4
};위와같이 반드시 length 속성을 포함해야한다.
하지만 매우 원시적인 방법이며 값이 바뀔때마다 length 속성을 갱신해줘야한다.
가급적이면 유사배열을 만들지 않는게 좋다.
유사배열에서 배열 메서드 사용
유사배열에서는 배열의 forEach, map, filter, reduce 같은 메서드를 사용할 수 없는데 이런 메서드들을 사용하고 싶으면 Array.form() 메서드를 사용하면 된다.
Array.form()으로 유사배열 객체에 있는 value를 복사해 배열로 만드는 방법이다.
const texts = document.querySelectorAll('.text');
Array.form(textx).map((text) => console.log(text));이외에도 this, call, apply, bind 를 이용한 방법도 있다.
참고 자료 : https://poizon.tistory.com/11
