21.7.2 TIL(spread,rest構文)

Spread構文

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

const numbers = [1, 2, 3];

sum(...numbers)   // ...numbers 전개구문으로 numbers 배열을 풀어 인자로 전달



ex) 배열 복사
let arr = [1, 2, 3];
let arr2 = [...arr];
arr2.push(4);  
// ...arr 전개구문으로 arr의 요소를 arr2 변수에 복사하였다 , 
//전개구문은 데이터를 immutable 하므로 arr의 값은 변하지않는다
//arr2 === [1,2,3,4]



ex) 객체의 속성 복사
let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };
// clonedObj === { foo: 'bar', x: 42 };
// mergedObj === { foo: "baz", x: 42, y: 13  };
// mergedObj처럼 obj1과 obj2의 키가 같을경우 뒤에오는 객체의 value를 사용한다

最新の構文

ex) 
function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

sum(1,2,3)
sum(1,2,3,4)  //sum 함수에 들어가는 인자가 정해지지않고 가변적일때 ...theArgs 와 같은 Rest문법을 사용
//sum(1,2,3,4) 로 함수를 호출할 경우  theArgs === [1,2,3,4]   배열이 된다



ex) rest 문법으로 나머지 파라미터 받아오기
function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

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

構造分解の割り当て

整列

const [a, b, ...rest] = [10, 20, 30, 40, 50];
// 각각의 변수 a === 10, b === 20, rest === 30,40,50  

オブジェクト

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
// 변수 a === 10 b === 20, rest === {c: 30, d: 40}
* 객체에서 구조 분해 할당을 사용하는 경우, 선언(const, let, var)과 함께 사용하지 않으면 에러가 발생할 수 있습니다.