JS | 유용한 ES6 문법! 구조 분해 할당 & 펼침 연산자

🔍 구조 분해 할당 (비구조화 할당)

구조 분해된 내용을 변수로 선언해 활용하는 방법

---

✒️ 객체의 구조 분해 할당

const user = {
        name :'sungwoon',
        age: 29,
        email:'gooreumseng@gmail.com',
      }

      const {name, age, email, address} = user

      console.log(`사용자의 이름은 ${name}입니다.`) // 사용자의 이름은 sungwoon입니다.
      console.log(`${name}의 나이는 ${age} 입니다.`) // sungwoon의 나이는 29입니다.
      console.log(adress) // undefined
			
			// 기본 값 지정 가능
			const {name, age, email, address ='Korea'} = user
			console.log(adress) // Korea 

			// 변수 이름을 다른 이름으로 사용하고 싶을 때
			const {name : userName, age, email } = user
			console.log(`사용자의 이름은 ${userName}입니다.`) 

✒️ 배열의 구조 분해 할당

순서대로 뽑아내서 변수로 할당

const fruits = ['apple', 'banana', 'orange']
      const [a,b,c] = fruits
      console.log(a,b,c) // apple banana orange

banana 만 뽑아오고 싶다면?

const [,b] = fruits
console.log(b) // banana

🔍 전개 연산자 (Spread)

---

const fruits = ['apple','banana', 'orange'];

console.log(...fruits) // apple banana orange

function toObject(a,b,c) {
        return {
          a:a,
          b:b,
          c:c
        }
      }
console.log(toObject(...fruits)) // { a : apple, b : banana, c : orange }

rest parameter

남은 아이템을 모두 인수로 받을 수 있도록 나머지 매개변수로 전개 연산자를 활용할 수 있다.

const fruits = ['apple','banana', 'orange', 'cherry'];

console.log(...fruits) // apple banana orange

function toObject(a,b,...c) {
        return {
          a:a,
          b:b,
          c:c
        }
      }
console.log(toObject(...fruits)) // { a : apple, b : banana, c : ['orange', 'cherry'] }

속성의 이름과 변수의 이름이 같으면,return {a, b, c} 이런식으로 생략이 가능하다.

화살표 함수를 사용해 코드를 더욱 간결하게 하면 아래와 같다.

// 축약형
const toObject = (a,b,...c) => ({ a, b, c })