스프레드 연산자 (...)

자바스크립트에서 스프레드 연산자(...)란?

배열, 객체, 또는 반복 가능한 객체의 요소들을 개별적으로 분리하여 다른 배열이나 객체에 쉽게 할당하거나,

함수 호출 시 인수로 전달하는데 사용됩니다.

이는 기존 데이터를 간단하게 복사하거나 합칠 수 있게 도와줍니다.

 

스프레드 연산자 미사용

const category = ["HTML", "CSS", "JS"];
const newCategory = ["REACT", "NEXT.js"];
const mergeCategory = [category,newCategory];
console.log(mergeCategory);

콘솔 결과는 [ [ 'HTML', 'CSS', 'JS' ], [ 'REACT', 'NEXT.js' ] ]로 두개의 배열이 중첩됨을 알 수 있다.

 

스프레드 연산자 사용

const category = ["HTML", "CSS", "JS"];
const newCategory = ["REACT", "NEXT.js"];
const mergeCategory = [...category, ...newCategory];
console.log(mergeCategory);

콘솔 결과는 [ ['HTML' , 'CSS' ,'JS' , 'REACT' ,'NEXT.js'] ]로 병합되어 있는 것을 볼 수 있다.

 

스프레드 연산자(...)를 사용할 시 위에 설명과 결과 값처럼 배열에서 중첩이 되는지 병합이 되는지의 차이가 있다.