전개연산자 ...

객체 혹은 배열들을 펼칠 수 있게 해준다.

 

활용 방법

1. 배열 확장

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];

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

 

const arr1 = [1, 2, 3];
const arr2 = [4, 5];
arr1.push(...arr2);

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

 

배열 내 최대값을 가진 요소와 최소값을 가진 요소

const arr = [1, 2, 3, 4, 5, 7];

let max = Math.max(...arr);
let min = Math.min(...arr);

console.log(max, min); // 7 1

 

 

2. 객체 확장

const obj1 = { name: "ctrs", age: 29 };
const obj2 = { ...obj1, country: "south korea" };
console.log(obj2); // { name: 'ctrs', age: 29, country: 'south korea' }

 

3. 함수 호출

const sum = (a, b, c) => {
  return a + b + c;
};

const num = [1, 2, 3];

console.log(sum(...num)); // 6

 

4. 나머지 매개변수

const example = (a, b, ...rest) => {
  console.log(a); // 1
  console.log(b); // 2
  console.log(rest); // 3
};

example(1, 2, 3, 4, 5);

 

5. 문자열을 배열로 변환

문자열.split("")한 것과 동일한 효과

let str = "abcdefg";

console.log([...str]); // ['a', 'b', 'c', 'd', 'e', 'f', 'g']

console.log(str.split("")); // ['a', 'b', 'c', 'd', 'e', 'f', 'g']

 

 

[참조]

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%84%EA%B0%9C-%EC%97%B0%EC%82%B0%EC%9E%90Spread-%EB%AC%B8%EB%B2%95

[JS] 📚 전개 연산자(Spread 문법) 정리