자바스크립트 구조분해할당과 전개연산자

2022.04.26

구조 분해 할당(Destrucuring assignment). 비구조화 할당

객체데이터에서의 구조 분해 할당

const user = {
  name: 'sunny',
  age: 31
}
// user라는 객체데이터에서 내용을 구조 분해해서 내가 원하는 속성만 꺼내서 사용할 수 있음
// 구조분해한 내용을 변수로 만들어서 활용할 수 있음

const {name, age, email} = user
console.log(`이름:${name}`) //이름:sunny
console.log(`나이:${age}`) //나이:31
console.log(`이메일:${email}`) //이메일:undefined 

//email부분에 기본값을 주고 싶다면? email변수부분에 default값 지정가능
const {name, age, email = 'hungry'} = user
console.log(`이름:${name}`) //이름:sunny
console.log(`나이:${age}`) //나이:31
console.log(`이메일:${email}`) //이메일:hungry

//변수 name이 마음에 안들면 콜론기호를 써서 변경 가능 
const {name: hi, age, email = 'hungry' } = user
// name은 꺼내오는 용도, 꺼내온 내용을 hi라는 변수로 만듦

배열데이터에서의 구조 분해 할당

// 배열데이터에 전개연산자를 붙이면 배열데이터의 대괄호가 난라감
// 배열데이터가 가지고있는 괄호를 지워준다고 생각하면 편함
const users = ['Sunny', 'Jessie', 'Rosie']
// users가 배열이라는걸 알고 있기때문에 대괄호를 사용해 주면 됨
// 구조분해 데이터타입에 맞게 기호를 사용해주기
// 배열데이터는 순서대로 추출!
const [a, b, c, d] = users
console.log(a, b, c, d) //Sunny Jessie Rosie undefined

// Rosie만 추출하고 싶을 경우
// 배열데이터는 순서대로 추출!되기때문에 맞춰줘야함
const [, , c] = users
console.log(c) //Rosie

 const a = {
   x: 1,
   y: 2
 }

 const b = {
   y: 3,
   z: 4
 }
 // 하나의 객체데이터 안에서 키는 고유함
 const c = Object.assign({}, a, b) 
 console.log(c) //{x: 1, y: 3, z: 4}

 const d = {
   a,
   b
 }
 console.log(d)
 {
   "a": {
       "x": 1,
       "y": 2
   },
   "b": {
       "y": 3,
       "z": 4
   }
 }

 배열데이터 안에 있는 애들을 날려준다
 const d = {
   ...a,
   ...b
 }
 console.log(d) //{x: 1, y: 3, z: 4}

 const userA = {
   name: 'Sunny',
   age: 92,
   isVaild: true
 }
 // 배열안에 배열이 있네 ? 2차원 배열
 배열안에 배열아이템이 들어있음
 const res = Object.entries(userA)
 console.log(res)
  [
    [
        "name",
        "Sunny"
    ],
    [
        "age",
        92
    ],
    [
        "isVaild",
        true
    ]
  ]
 for (const item of res) {
   console.log(item)
 }
  ['name', 'Sunny']
  ['age', 92]
  ['isVaild', true]
//객체데이터의 key value 형태가 배열형태로 나옴
console.log(item[0]) //key
console.log(item[1]) //value

// Object.entries는 2차원배열로 만들어줌
// 함수는 항상 실행된 데터 뭐 남으냐를 잘 봐함 그렇기 때문에 아래 for of문을 씀
// 즉,
for (const item of Object.entries(userA)) {
  console.log(item[0]) // name age isVaild
  console.log(item[1]) // Sunny 92 true
}

전개 연산자(Spread) 나머지매개변수

...가 전개 연산자 기호
배열데이터가 문자데이터 형태로 출력됨
배열데이터에 전개연산자를 붙이면 배열데이터의 대괄호가 날라감(배열데이터가 가지고있는 관호를 지워준다고 생각하면 편함)

const users = ['Sunny', 'Jessie', 'Rosie']

console.log(users) //['Sunny', 'Jessie', 'Rosie']
console.log(...users) //Sunny Jessie Rosie
console.log('Sunny', 'Jessie', 'Rosie') //Sunny Jessie Rosie

function toObject(a, b, c) {
  return {
    a: a,
    b: b, 
    c: c
  }
}
console.log(toObject(...users)) //{a: 'Sunny', b: 'Jessie', c: 'Rosie'}
console.log(toObject(users[0], users[1], users[2])) //{a: 'Sunny', b: 'Jessie', c: 'Rosie'}

const users = ['Sunny', 'Jessie', 'Rosie', 'Amy', 'Sarah']

//위에 toObject를 화살표함수로 축약함

const toObject = (a, b, ...c) => ({a, b, c})
//매개변수 부분에 전개연산자를 넣어주면 나머지 아이템들은 전부 c로 들어갈 수 있음 (=rest parameter 나머지 매개변수)
//매개변수에서 나머지값을 배열의형태로 받을 수 있음
console.log(toObject(...users)) 
//{a: 'Sunny', b: 'Jessie', c: Array(3)}, 
//                          c: (3) ['Rosie', 'Amy', 'Sarah']

const a = {
  x: 1,
  y: 2
}

const b = {
  y: 3,
  z: 4
}
// 하나의 객체데이터 안에서 키는 고유함
const c = Object.assign({}, a, b) =  
console.log(c) //{x: 1, y: 3, z: 4}

const d = {
  a,
  b
}
console.log(d)
{
  "a": {
      "x": 1,
      "y": 2
  },
  "b": {
      "y": 3,
      "z": 4
  }
}

배열데이터 안에 있는 애들을 날려준다
const d = {
  ...a,
  ...b
}
console.log(d) //{x: 1, y: 3, z: 4}

전개연산자와 (객체)구조분해할당

const user = {
  name: 'Sunny',
  age: 92,
  isValid: true
}
// const e = user.name
// const a = user.age
// const i = user.isValid

const { name: e, ...rest } = user
console.log(e, rest) //Sunny {age: 92, isValid: true}