[Javascript] Set 객체를 배열(Array)로 변환하는 3가지 방법

 

Javascript에서 Set 객체는 중복 없는 데이터를 표현합니다.

 

이번에는 Set 객체를 배열(Array)로 변환하는 3가지 방법을 알아보도록 하겠습니다.

 

1. Array.from()
2. Spread Operator (전개 연산자)
3. forEach

 

1. Array.from()

Array.from 함수는

유사배열객체(array-like object)나 반복가능객체(iterable object)를 얕은 복사(shallow copy)하여

새로운 배열(Array) 객체를 만들어줍니다.

 

유사배열객체(array-like object) : length 속성과 index element를 가지는 객체

반복가능객체(iterable object) : 배열을 일반화한 객체 ex)Map, Set

 

const set = new Set([1, 2, 3]);

const arr = Array.from(set);

document.write(Array.isArray(arr));
document.write('<br>');
document.write(arr);

 

위 예제에서는 Set 객체를 Array.from() 함수를 사용하여 배열로 변환한 후,

리턴받은 값이 배열인지 Array.isArray() 함수를 사용하여 확인하고,

리턴받은 값(배열)을 출력하였습니다.

 

 

2. Spread Operator (전개 연산자)

Spread Operator는 ES6의 문법으로

배열이나 문자열과 같이 반복가능한 객체를 하나씩 펼쳐서 리턴합니다.(전개)

'...'과 같이 점 3개로 표시합니다.

 

const set = new Set([1, 2, 3]);

const arr = [...set];

document.write(Array.isArray(arr));
document.write('<br>');
document.write(arr);

 

const arr = [...set];

Spread Operator(전개연산자) '...'을 사용하여 Set 객체의 값들을 하나씩 전개하여(꺼내서), 

새로운 배열의 원소로 넣어서, arr 변수에 저장하였습니다.

 

 

3. forEach

마지막 방법은 반복문을 이용하는 방법입니다.

const set = new Set([1, 2, 3]);
const arr = [];

set.forEach((element) => {
  arr.push(element);
})

document.write(Array.isArray(arr));
document.write('<br>');
document.write(arr);

 

forEach문과 Array의 push() 함수를 사용하여

Set 객체를 새로운 배열로 변환하였습니다.

 

---

 

Array.from(), Spread Operator(전개연산자), forEach문을 이용하여 

Set 객체를 배열(Array)로 변환하는 방법을 알아보았습니다.