[React] 배열과 유사배열 | 유사배열을 배열로

배열

•  데이터 타입 중 하나로, 관련있는 데이터를 하나의 변수에 할당한다.
• 배열을 사용하면 여러 데이터를 관련성 있게 관리할 수 있기 때문에 생산성 및 코드 가독성이 높아지고 이는 유지보수 비용의 감소로 이어진다.
• 배열에서 기본으로 제공하는 함수(forEach, map, filter, reduce)를 사용할 수 있다.
• 데이터에 순차적으로 접근이 가능하다.

유사배열

• 유사배열이란 이름 그대로 배열과 유사한 객체를 말한다.
• 유사배열은 함수에서 처리 결과로 배열을 반환하고 싶을때 또는, 배열에서 기본으로 내포되어있는 기능을 제공하고 싶지 않거나 배열에 내포되어있지 않는 기능을 제공하고 싶을때 사용한다.

 

배열과 유사배열의 차이점

var array = [1, 2, 3];          // [1, 2, 3] 배열
var nodes = document.querySelectorAll('a');   //[a,a,a...a] 유사배열

(선택자를 선택하여 배열과 비슷한 객체인 nodeList로 반환해주는 querySelectorAll()로 유사배열을 만들어 줬다)

위 코드 예제를 보면, array는 배열이고 nodes는 유사배열이다. 

 

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

뭐가 다른지 모르겠어서, 배열인지 판단해주는 메서드 Array.isArray() or instanceofArray() 함수를 이용해 배열을 구분해보았다.

배열 리터럴 [] 로 선언한 함수만 배열로 나온다.

 

 

배열과 유사배열은 다음과 같은 차이점을 가진다

• 유사배열은 객체에 length 프로퍼티를 가진다
• 유사배열은 객체에 프로퍼티 이름이 숫자로 시작한다
• 유사배열은 배열의 메서드를 쓸 수 없다 (forEach, map, filter, reduce) -> 배열메서드 사용하면 Uncaugth TypeError 발생한다.
• 유사배열도 for문과 if문이 가능하다. 하지만, 모든 프로퍼티를 반환하기 때문에 length도 반환한다.

 

유사배열에서 배열 메서드 사용하려면?

• Array.from()

const texts = document.querySelectorAll('.text');
Array.form(textx).map((text) => console.log(text));

• this
• apply
• bind

등을 사용할 수 있다.

 

 

 

 

 

참조

https://intrepidgeeks.com/tutorial/similar-to-javascript-arrays

[JavaScript] 배열과 유사배열