전개연산자

ES6에서 새로 나온 문법으로 굉장히 중요하면서 강려크한 기능이다.😍

 

전개 연산자는 마침표 3개 ...로 배열이나 객체를 목록으로 펼칠 수 있는 기능이다.

기존 배열 요소를 다룰 때는 index를 사용해 풀어쓰거나 내장 메서드를 사용해야 했었는데, 전개 연산자를 사용하면 아주 간단하게 내용을 전달하고 표현할 수 있다. (신세계 👍)

 

정확한 사용법은 아래에서 살펴보자!

//기존 방식
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arrWrap = arr1.concat(arr2, arr3);

console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

//ES6
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arrWrap = [...arr1, ...arr2, ...arr3];

console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

const obj1 = {
  a: 'A',
  b: 'B'
};
const obj2 = {
  c: 'C',
  d: 'D'
};
const objWrap = {...obj1, ...obj2};
console.log(objWrap); // {a: 'A', b: 'B', c: 'C', d: 'D'}

기존 ES5에서는 배열의 내용을 합치고 싶을 때 concat( ) 사용했었다면 ES6에서는 전개연산자로 위과 같이 표현할 수 있다.

💡 전개연산자를 이용한 복사는 1차원에서만 유효하다.

const arr1 = [4, 5, [6, 7]];
const arr2 = [1, 2, 3, ...arr1];
console.log(arr2); // [1, 2, 3, 4, 5, [6, 7]]

2차원 이상의 배열을 할당할 땐, 1차원 요소만 같은 1차원 레벨로 할당이 되고, 2차원 이상의 배열은 배열 그대로 할당이 된다.

 

💡 전개연산자는 기존 배열을 보존해야 할 때 유용하다.

// 기존
const arr1 = [1, 2, 3];
const arr2 = arr1.reverse();

console.log(arr1); // [3, 2, 1]
console.log(arr2); // [3, 2, 1]

// ES6
const arr1 = [1, 2, 3];
const arr2 = [...arr1].reverse();

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [3, 2, 1]

배열의 각 요소를 역순으로 배치하려면 기존에는 reverse( ) 메서드를 사용했는데, 이는 기존 배열도 바꿔버리는 단점이 있었다. 원본 배열을 수정할 의도가 있었다면 문제가 없지만, 원본 배열은 그대로 두고 배열의 요소를 역순으로 배치한 새로운 배열이 필요할 경우에 reverse( )메서드 만으로는 구현이 어렵다.

이 때, 전개 연산자를 사용하면 원본 배열을 수정하지 않고 역순으로 배치한 새로운 배열을 얻을 수 있다.

 

📌 나머지 요소 할당

비구조화 할당과 전개 연산자를 사용하여 배열의 나머지 요소를 할당받을 수 있다.

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

변수 first, second에 각각의 인덱스값에 맞는 요소가 차례로 할당되고, rest에는 할당받지 못한 나머지 요소들이 할당된다. 이때 할당되는 요소들은 배열의 형태로 할당된다.

 

📌 함수의 매개변수로 사용

const arr1 = [1, 2, 3, 4, 5];
function toObject(a,b, ...c) {
	return {a, b, c}
}
console.log(toObject(...arr1)) //{a:1, b:2, c:[3, 4, 5]}

함수의 매개변수로 전개연산자를 넘길 수도 있다. 이때, 매개변수로 넘겨지는 배열 요소의 개수가 가변적일 때, 전개연산자를 사용하면 그 나머지를 배열의 형태로 받을 수 있다.

 

✅ '...'이 함수 호출 시 사용되면 배열을 목록으로 확장해주는 '전개연산자'이다.

✅ '...'이 함수 매개변수의 끝에 있으면 인수 목록의 나머지를 배열로 모아주는 '나머지 매개변수'이다.