객체나 배열의 내부나 함수를 호출해주는 인자에서 사용

객체나 배열의 요소를 펼쳐보아라

객체 spread

• 이전 객체의 내용,속성 등을 복사하는 것

  예시)

  • 이전 객체의 내용과 속성을 전부 가지고 더하여 내용을 추가하고 싶은 경우
  • 두 이상의 객체의 내용을 더하여 새로운 객체의 속성에 넣고 싶은 경우

  → 엄청 많은 내용이 있을 경우 코드가 길어지고 일일히 치는데 어려움이 있음

  const student = {
      name : '김구름',
  		//내용이 엄청 많이 있다고 가정
  		//...........
  };
  
  //student의 내용을 전부 받아오면서 major라는 값을 추가하고 싶은 경우
  
  //spread를 안쓴 경우
  const univStudent = {
      name : '김구름',
      //student의 인자 모두...........
  		major : '컴퓨터공학과',
  }
  
  //spread를 쓴 경우
  const univStudent = {
  		...student,  //이거 받고 //student의 인자 모두...........까지도 받음
  		major : '컴퓨터공학과', //이거 추가
  }
  
  //다중 spread 쓴 경우
  const koreanUnivStudent = {
      ...univStudent, //전의 내용을 전부 받아오고
      region : 'seoul', //이거 추가
  }
  

배열 spread

• 이전 배열의 내용과 속성 등을 복사하는 것

  예시)

  • 이전 배열의 내용과 속성을 전부 가지고 더하여 내용을 추가하고 싶은 경우
  • 두 이상의 배열의 내용을 더하여 새로운 배열의 속성에 넣고 싶은 경우

  → 엄청 많은 내용이 있을 경우 코드가 길어지고 일일히 치는데 어려움이 있음

  const oddNumbers = [1,3,5,7,9];
  const evenNumbers = [2,4,6,8,10];
  
  //배열 합치기
  const allNumbers = [...oddNumbers,...evenNumbers];
  console.log(allNumbers);
  
  //한번에 값 집어 넣기
  function sum(num1,num2,num3,num4,num5,num6,num7,num8,num9,num10){
      return num1+num2+num3+num4+num5+num6+num7+num8+num9+num10;
  }
  
  const result = sum(...allNumbers);
  console.log(result);
  
  console.log(...allNumbers); // 1 3 5 7 9 2 4 6 8 10
  console.log(allNumbers); 
  //[
  //  1, 3, 5, 7,  9,
  //  2, 4, 6, 8, 10
  //]
  

rest

• (구조분해할당으로 값을 받아오는) 객체나 배열을 받아오는 변수나 (값을 받아오는) 함수 파라미터에서 주로 쓰임

• 요소를 펼쳐서 배열로 받아오는 방식

  구조분해할당으로 값을 받아오는 객체
  const {객체키값1,객체키값2,객체키값3} = 객체이름 //앞에 것이 객체
  
  배열을 받아오는 변수
  const arrayVar = [배열값1,배열값2 ...]; //이때 앞의 것이 배열을 받아오는 변수
  
  값을 받아오는 함수 파라미터
  function(파라미터1,파리미터2,....){ //이때 인자값 즉 파라미터
  }
  

• 굳이 rest라는 이름을 사용 안해도 되고 다른 이름을 사용해도 됩니다.

  function sum(...rest){
      console.log(rest);
  }
  
  function sum(...restName){
      console.log(restName);
  }
  
  function sum(...rest){
  		console.log(rest[0]);
  }
  

spread와 rest의 차이점

• spread : 펼쳐서 전해주는 방식
• rest : 펼쳐서 배열에 저장하여 전해주는 방식 → 부분집합을 만드는 데에 사용된다.

몇개를 제외한 새로운 객체를 만드는 방법(부분집합느낌의 객체 생성)

const koreanUnivStudent = {
    name : '김구름',
    major : '컴공',
    region : '서울',
};

//const {name,major,region} = koreanUnivStudent;
//name을 뺀 부분집합 객체를 만들고 싶다.
const {name,...rest} = koreanUnivStudent;
//나는 구조분해할당을 할건데 name을 뺀 나머지로 부분집합을 만들거야
console.log(rest);