2020.07.03 spread 연산자 업데이트

spread 연산자

const arr = ['a' , 'b' , 'c']
console.log(arr); // ['a' , 'b' , 'c']
console.log(...arr); // 'a' 'b' 'c'

const arr2 = [1,2,3]
console.log([...arr , ...arr2]) 
// ['a' , 'b' , 'c' , 1,2,3]

const copiedArr = [...arr]
console.log(copiedArr) // ['a' , 'b' , 'c']

[a1 , a2 , ...rest_a] = [1,2,3,4,5,6,7,8,9]
console.log(a1); // 1
console.log(a2); // 2
console.log(rest_a); // [3,4,5,6,7,8,9]

const 변수에 담기

const [a1 , a2 , ...rest_a] = [1,2,3,4,5,6,7,8,9];
console.log(a1); // 1
console.log(a2); // 2
console.log(rest_a); // 3 , 4 ,5 ,6 ,7 ,8 ,9

객체에 담기

const { a1 , a2 , ...rest_a} = {a1 : 10 , a2 : 20 , a3 :30 , a4 : 40};

console.log(a1); // 10
console.log(a2); // 20
console.log(rest_a); // {a3 : 30 , a4 : 40}

객체 spread 연산자

const obj1 = {a:1 , b:2}
const obj2 = {c:3}
console.log({...obj1 , ...obj2})
// {a:1 , b:2 , c:3}
// 갹체 합치기에 사용할 수 있습니다.

const copiedObj = {...obj1}
console.log(copiedObj); // {a:1 , b:2}
// 객체 복사에 사용할 수 있습니다.

const obj3 = {...obj1 , b:'b'}
console.log(obj3); //{ a:1 , b:'b'}
//기존 객체의 값을 수정해서 새로운 객체 만들기에 사용 할 수 있습니다.

rest 파라미터

rest 파라미터라는 기능을 이용해서 나머지 아규먼트를 배열로 사용할 수 있습니다.

const add = (a,b, ...rest) => { // 반드시 마지막 파라미터에 ... 을 붙여서 사용해야 합니다.
  console.log(a); //5
  console.log(b); //3
  console.log(rest); //[9,2,1,6]
}
add(5,3,9,2,1,6)

const add2 = (...rest2) => {
  console.log(rest2); // [1,2,3,4,5]
}
add2(1,2,3,4,5)