[JavaScript] 자바스크립트 유사 배열 객체를 배열(Array)로 변환하기

058_자바스크립트 유사 배열 객체를 배열(Array)로 변환하기

[적용]

• 문자열과 유사 배열ArrayLike을 배열로 변환하고 싶을 때
• 반복 가능Iterable 한 객체를 배열로 변환하고 싶을 때

---

[문법]

구문	의미
[...변환대상]	배열로 변환

---

[내용]

스프레드(Spread) 연산자 (...)를 사용하면 유사 배열 객체를 배열로 변환할 수 있다.

유사 배열의 특징은 다음과 같다.

• length 속성으로 크기를 확인할 수 있다.
• 인덱스가 부여된 요소를 가진다.

 

샘플을 확인해보자.  document.querySelectorAll(selector)는 인수 selector와 일치하는 요소 데이터를 전부 불러오지만, 

반환값은 NodeListOf 객체다. length와 인덱스가 부여된 요소를 가진다. 따라서 NodeListOf 객체는 유사 배열이다.

// div 요소를 전부 불러오기
const allDivElementList = document.querySelectorAll('div');

// div 요소의 수를 출력
console.log(allDivElementList.ldngth);

// 세 번째 div 요소 출력(인덱스가 부여된 요소)
console.log(allDivElementList[2]);

 

NodeList는 유사 배열이지만 배열은 아니다. 그러므로 배연에서 사용 가능한 filter() 등의 메소드는 여기서 사용할 수 없다.

// <div class="on"></div> 요소를 찾기 위해 filter()를 사용하면
// NodeList에서는 filter()를 사용할 수 없으므로 에러가 발생함
allDivElementList.filter((element) => element.classList.contains('on'));

 

스프레드 연산자(...)를 사용하여 유사 배열을 배열로 변환한다.

const allDivElementList = document.querySelectorAll('div');

// 배열로 변환
const elementsArray = [...allDivElementList];

// 배열용 메소드인 filter() 사용 가능
elementsArray.filter((element) => element.classList.contains('on'));

 

문자열도 length와 인덱스로 접근이 가능하기 때문에 유사 배열이다.

const myString = '안녕하세요';

console.log(myString.length);  // 결과: 5
console.log(myString[2]);  // 결과: "하"

 

문자열도 [...문자열]을 사용해 배열로 변환할 수 있다.

const myString = '안녕하세요';

console.log([...myString]);  // 결과: ["안", "녕", "하", "세", "요"]

 

---

[APPENDIX]

유사 배열은 Array.from()을 사용한 변환도 가능

[문법]

메소드	의미	반환
Array.from(변환대상, [콜백함수*])	배열로 변환	배열

[문법] - 콜백 함수

구문	의미
([요소*], [인덱스*], [기존배열*]) => {}	요소, 인덱스, 기존 배열을 불러와 작업

* 생략 가능

 

Array.from()도 스프레드 연산자(...)와 같이 유사 배열(ArrayLike)을 배열로 변환할 수 있다.

또한, 콜백 함수를 지정해 map() 메소드와 같이 새로운 배열을 생성할 수도 있다.

const myString ='안녕하세요';

console.log(Array.from(myString));  // 결과: ["안", "녕", "하", "세", "요"]

// 콜백 함수로 새로운 배열 생성 가능
// 문자열마다 '!'를 추가
const newArray = Array.from(myString, (character) => `${character}!`);
console.log(newArray); // 결과: ["안!", "녕!", "하!", "세!", "요!"]

 

 스프레드 연산자(...)도 map()을 사용할 수 있다.

브라우저 호환성에 문제가 없다면 스프레드 연사자를 사용해 더욱 간단하게 작업이 가능하다.

const myString = '안녕하세요';

// 콜백 함수로 새로운 배열 생성 가능
// 문자열마다 '!'를 추가
const newArray = [...myString].map((character) => `${character}!`);
console.log(newArray); // 결과: ["안!", "녕!", "하!", "세!", "요!"]

---

 

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김