[JS] 구조분해할당과 spread

2차 세미나 시간에 구조분해할당 퀴즈를 다 틀려서 rest와 spread를 복습하고 정리해보려고 한다.

⭐ 구조분해할당

배열이나 객체의 속성을 분해해서 그 값을 개별적인 변수에 따로 담을 수 있게 하는 표현식

배열의 구조분해할당

✅ 기본할당

 const foodList = ['apple','orange','mango'];
 
 let [a,b,c] = foodList;
 console.log(a); //apple
 console.log(b); //orange
 console.log(c); //mango

✅ 배열 rest로 나타내기

const group = ["씨엘", "박봄", "산다라박", "공민지"];
const [leader, ...members] = group;

• rest를 표현하는 ...을 통해 나머지 요소를 한 번에 묶어서 표현할 수 있다.

---

객체의 구조분해할당

✅ rest로 나타내기

const obj = {
            name:'이서영',
            age:23,
            favorite:{
                food:['치킨','라면','김밥'],
                music:'kpop',
                color:'#000000',
            }
        }
        const {name,...rest} = obj;

• 객체도 배열과 마찬가지로 rest를 통해 나머지 항목을 묶을 수 있다.

✅ 원하는 변수명으로 객체 다루기

const {
        favorite: { color: favoriteColor, ...restData },
      } = obj;

• 다음과 같이 변수명을 마음대로 바꿀 수 있다.
• favoriteColor, restData를 통해 객체에 접근할 수 있다.

---

✅ spread 연산자

배열, 문자열, 객체 등 Iterable한 객체를 개별적인 요소로 분리할 수 있다.

const newObj = {
          ...obj,
          job:'학생',
          study:'Web',
      }
      console.log(newObj);
      
      /* 출력결과
      {
        name: "이서영",
        age: 23,
        favorite: {
          food: ["치킨", "라면", "김밥"],
          music: "kpop",
          color: "#000000",
        },
        job: "학생",
        study: "Web",
      }
      */

💥 spread 예제

다음과 같은 객체가 있다고 가정하자.

const obj = {
	name: "이서영",
    age: 23,
    favorite: {
      food: ["치킨", "라면", "김밥"],
      music: "kpop",
      color: "#000000",
      }
}

---

{
	food:["치킨", "라면", "김밥"],
    music: "kpop",
    color: "#000000",
    coffee:'아.아'
}

🔺위와 같은 형태의 newObj 객체를 만드는 방법은 다음과 같다.

 const newObj = {
 	...obj.favorite,
    coffee:'아.아',
 }

---

✅ concat 안쓰고 배열 붙이기

const 과일 = ["망고", "수박", "킹스베리"];
const 채소 = ["오이", "양배추", "파프리카"];
const 싱싱한음식 = [...과일, ...채소];

🔺위와 같이 rest를 사용하여 배열을 하나로 합칠 수 있다.

---

❓ rest와 spread의 차이 및 활용방법

rest는 묶는 것이고 spread는 펼치는 것이다.

(뇌피셜)

• rest는 변동된 특정 속성만 따로 변수로 다루고 바뀌지 않은 나머지 속성들은 굳이 일일이 작성하고 싶지 않을 때 하나로 묶기 위해 사용할 것 같다. 예를 들어 유저가 닉네임을 변경해서 유저 정보를 새롭게 저장해줘야 한다면, 나머지 정보는 rest로 표현하고 닉네임만 새로운 값을 할당해서 서버에 보내주면 될 것 같다.
• spread는 주로 새로운 객체를 만들 때 기존에 있던 객체의 내용을 가져오기 위해 사용하는 것 같다. 날씨 api 요청 후 받아온 data 객체에서 해당 객체 내부의 또 다른 중첩된 객체를 가져와서 새로운 객체를 만드는 등의 예시가 있을 것 같다.