나름 코스를 수강하면서 정말 열심히 복습과 예습을 했다고 생각 했는데... 이번 HA를 통해서 놓치고 있는 것들이 많다고 느끼게 되었다. '구조분해할당' 파트가 바로 그러하다. 코안즈 시간을 대충 대충 넘겼다는게 여기서 뽀록났다... 이제 부터라도 놓친 부분을 바로 잡기 위해 solo스터디 기간 동안 최대한 놓친 부분 위주로 블로깅을 통해 완벽히 내 것으로 만들 것이다.

Destructing(구조분해할당)

구조분해할당이란 배열이나 객체를 해체하여 그 값을 개별변수에 담을 수 있게하는 표현식이다.

배열

배열을 분해

const array = ['apple', 'banana', 'orange', 'grapefruit']

const [first, second] = array
console.log(first) // 'apple'
console.log(second) // 'banana'

const result = []
function foo([first, second]) {
  result.push(second)
  result.push(first)
}

foo(array)
console.log(result) //['banana','apple']

위와 같은 표현식을 쓰면 배열 안에 있는 값들을 변수에 재할당이 가능하고, 이 재할당은 함수의 인자로 받을 때도 사용이 가능하다.

rest/spread 문법을 배열 분해에 적용

const array = ['apple', 'banana', 'orange', 'grapefruit']
const [start, ...rest] = array
console.log(start) //'apple'
console.log(rest) //['banana', 'orange', 'grapefruit']

위와 같은 표현식으로도 사용이 가능하다.
단, 아래 같은 표현식은 사용이 불가능 합니다.

// const [first, ...middle, last] = array

rest문법 뒤에는 쉼표가 올 수 없다.

객체

객체의 단축(shorthand) 문법

const name = '김코딩'
const age = 28

const person = {
  name,
  age,
  level: 'Junior',
}
console.log(person) // {name: '김코딩', age: 28, level: 'Junior'}

위와 같이 변수를 먼저 선언해준 뒤, 선언한 변수를 객체안에 넣을 수 있다.

객체 분해

const student = { name: '김코딩', major: '컴퓨터공학' }

const { name } = student
console.log(name) //'박해커'

배열과 마찬가지로 객체안에 있는 키를 변수로 키값을 값으로 가지고 올 수 있다.

rest/spread 문법을 객체 분해에 적용

변수명이 키값일 경우 다음과 같이 사용하면 된다.

let itemId = 3
let cartItems = [
    {
      itemId: 1,
      quantity: 1
    },
    {
      itemId: 5,
      quantity: 7
    },
    {
      itemId: 2,
      quantity: 3
    }
  ]
[...cartItems, {itemId, quantity: 1}]
// {itemId: itemId , quantity: 1} 이렇게 작성하지 않아도 된다.

 // rest/spread 문법을 객체 분해에 적용(1)
const student1 = { name: '최초보', major: '물리학과' }
const { name, ...args } = student

console.log(name) //'최초보'
console.log(args) //{major:'물리학과'}

// rest/spread 문법을 객체 분해에 적용(2)
const student2 = { name: '최초보', major: '물리학과', lesson: '양자역학', grade: 'B+' }

function getSummary({ name, lesson: course, grade }) {
  return `${name}님은 ${grade}의 성적으로 ${course}을 수강했습니다`
}

console.log(getSummary(student)) //'최초보님은 B+의 성적으로 양자역학을 수강했습니다'

배열과 마찬가지로 다음과 같이 표현도 가능하다.
또는 값을 분해해서 할당 할때 lesson: course같이 선언해 주면 변수명이 lesson이 아닌 course로 변경되어 값이 할당 된다.

이 외에도 변수명 뿐만 아니라 할당된 값을 변경하는데 사용도 가능하다.

// rest/spread 문법을 객체 분해에 적용(3)
const user = {
  name: '김코딩',
  company: {
    name: 'Code States',
    department: 'Development',
    role: {
      name: 'Software Engineer'
    }
  },
  age: 35
}

const changedUser = { //전개구문으로 원본을 불러오고 그 원본에서 이름을 '박해커'로 나이를 '20'으로 변경
  ...user,
  name: '박해커', // : 뒤는 그 값을 변경한다는 의미
  age: 20
}

const overwriteChanges = {  
  name: '박해커',
  age: 20,
  ...user //변수 선언 이후 원본이 불러와지기 때문에 원본과 같아진다.
}

const changedDepartment = { 
  ...user, //전개구문을 통해서 원본을 불러온다.
  company: { //원본 안에 있는 company객체의 값을 변경 한다.
    ...user.company, //원본에 있는 company객체의 값들을 불러온다.
    department: 'Marketing' // 그 값을 변경한다.
  }
}



console.log(changedUser) /*{
  name: '박해커',
  company: {
    name: 'Code States',
    department: 'Development',
    role: {
      name: 'Software Engineer'
    }
  },
  age: 20
} */

console.log(overwriteChanges) /*{
  name: '김코딩',
  company: {
    name: 'Code States',
    department: 'Development',
    role: {
      name: 'Software Engineer'
    }
  },
  age: 35
}*/

console.log(changedDepartment) /*{
  name: '김코딩',
  company: {
    name: 'Code States',
    department: 'Marketing',
    role: {
      name: 'Software Engineer'
    }
  },
  age: 35
}*/