[Javascript] 배열을 다루는 펼침연산자 활용법
1. 배열에서 최대/최소값을 구하기
자바스크립트의 수학 함수중 최소값/최대값을 구하는 min()/max() 메서드는 여러 개의 인자를 받아서 인자로 받은 숫자들 중에서 가장 큰 값을 반환합니다.
펼침 연산자는 배열을 풀어서 여러 개의 인자 값으로 넘기는 기능을 제공합니다.
const array = [101,4,23,83,2355,-1,17,0];
console.log(Math.min(...array)); // -1
console.log(Math.max(...array)); // 2355
2. 노드 리스트를 배열로 변환하기
자바스크립트 데이터 컬렉션은 여러가지 타입이 있지만, 그중 배열을 처리하는 메서드와 기능이 가장 많습니다.
그만큼 배열로 된 데이터를 처리하기가 수월하고 원하는 결과를 얻기도 편합니다.
쿼리선택자로 선택한 노드 리스트는 펼침 연산자를 이용하면 배열로 변환할 수 있습니다.
const nodelist = document.querySelectorAll('div');
const nodearray = [...nodelist];
console.log(nodearray)
3. 중복 요소 없는 배열 만들기
많이 알려진 방법입니다. 배열을 셋(Set)으로 변환한 뒤, 다시 셋을 배열로 변환하는 방식으로 중복 요소가 없는 배열을 만들 수 있습니다.
셋은 배열을 인자로 받아서 셋 객체를 생성할 수 있는데, 이때 배열의 중복 요소가 자동으로 제거됩니다.
셋 객체 또한 펼침 연산자를 지원하기 때문에 셋 객체를 각각의 요소로 펼친 후 배열 생성자에 담으면 중복 요소가 없는 새로운 배열이 만들어집니다.
const stringarray = ['tiny','large','medium','big','large','huge','small','small'];
const distinctarray = [...new Set(stringarray)];
console.log(distinctarray);
4. 배열을 복사해서 새 배열을 만들기
배열을 복사할 때는 항상 주의할 점이 있습니다.
배열 변수(상수)를 새로운 변수에 대입하는 것은 배열 객체를 가리키는 포인터를 대입해서 값을 적용하는 것이며 배열 객체, 또는 데이터를 복사하는 것이 아닙니다.
배열의 복사는 원래 배열과는 다른 배열 객체 복사본을 생성하는 것입니다.
배열을 복사하는 것도 펼침 연산자를 사용하면 기존의 방법보다 조금 더 직관적이고 쉽게 할 수 있습니다.
const array2=['라이언','어피치','콘','프로도','무지'];
const samearray = array2;
const cparray1 = array2.slice(0);
const cparray2 = [...array2];
const cparray3 = new Array(...array2);
console.table(cparray3);
console.log(array2==samearray); //true
console.log(array2==cparray1); //false
console.log(cparray1==cparray2); //false
5. 배열에 요소(배열)를 추가하기
기존 배열에 새 요소(들)을 추가하는 과정도 펼침 연산자를 이용해 간편하게 할 수 있습니다.
펼침 연산자를 이용하면 다른 배열의 요소 전체를 기존 배열에 추가하는 것도 루프문 처리 없이 간편하게 할 수 있습니다.
const oarray = ['tiny','small','medium'];
const appendarray = ['large','big','huge'];
oarray.push(...appendarray); // 배열 전체 요소를 기존 배열에 추가
console.table(oarray);
6. 배열의 병합
두 배열을 하나의 배열로 합쳐서 새로운 배열로 생성할 수 있습니다.
이때 기존 배열 2개는 원래의 배열을 유지하게 되고 새로운 배열을 생성합니다.
배열 생성자([])는 여러 요소를 나열해 새 배열을 생성할 수 있는데, 인자에 펼침 연산자를 사용할 수 있기 때문에, 2개 이상의 배열을 하나의 새로운 배열로 만들 수 있습니다.
const oarray = ['tiny','small','medium'];
const appendarray = ['large','big','huge'];
const newarray = [...oarray, ...appendarray] // 2개의 배열을 합친 새 배열을 생성
console.table(newarray);