spread 문법 사용하기

배열의 요소를 하나씩 가져와서 사용하지 않고 spread 문법을 사용해 한번에 적용시켜보자

 

spread 문법

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

sum(...numbers)
// 6

• spread 문법은 기존 원본을 변경하지 않는다.
• sum함수의 인자에 numbers 배열의 요소들을 모두 넣고 싶을 때?
• ' ... ' + 배열 변수명을 써주면 된다.

 

배열 합치기

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];

// arr1 = [0, 1, 2, 3, 4, 5];

 

배열 복사

let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);  
// 참고: spread 문법은 기존 배열을 변경하지 않으므로(immutable), arr2를 수정한다고, arr이 바뀌지 않습니다.

// arr = [1, 2, 3]
// arr2 = [1, 2, 3, 4]

 

객체에서 사용하기

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };

// cloneObj = {foo: 'bar', x: 42}
// mergeObj = {foo: 'baz', x: 42, y: 13} 
// 객체에서 복사할 때 같은 키와 값을 가지고 있으면 뒤에 들어오는 객체껄로 덮어쓰기가 됨

 

함수에서 나머지 파라미터 받아오기

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// a, one
// b, two
// manyMoreArgs['three', 'four', 'five', 'six']
// 위에서 콘솔된 a,b를 제외한 나머지 값들이 배열로 묶여서 콘솔됨.