shorthand syntax / 객체분해 / rest spread syntax 예시

const name = 'gildong'
const age = 19

const human = {
  name,
  age,
  level: 'Junior'
}


console.log(human) 
// { name: 'gildong', age: 19, level: 'Junior' }

객체에 변수 명을 key로 변수 값을 value로 할당할 수 있다.

객체분해

cosnt student = {name: 'gildong', major: 'computerScience'}

const { name } = student



{ name } === { name: 'gildong' } //true

객체의 특정 키값만 따로 임의의 객체에 저장할 수 있다.

rest / spread syntax 이용

const student = { name: 'gildong', major: '컴공' }
const { name, ...args } = student


name === 'gildong' //true
args === { major: '컴공' } //true

const student = { name: 'gildong', major: '컴공', lesson: '데이터구조', grade: 'B+' }

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


getSummary(student);
// gildong님은 B+의 성적으로 데이터구조을 수강했습니다

    const user = {
      name: '김코딩',
      company: {
        name: 'Code States',
        department: 'Development',
        role: {
          name: 'Software Engineer'
        }
      },
      age: 35
    }

    const changedUser = {
      ...user,
      name: '박해커',
      age: 20
    }

    const overwriteChanges = {
      name: '박해커',
      age: 20,
      ...user
    }

    const changedDepartment = {
      ...user,
      company: {
        ...user.company,
        department: 'Marketing'
      }
    }

- changedUser
spread syntax를 이용해서 ...user 로 user의 정보를 객체에 담는다,
name과 age를 재할당 하는 부분이 밑에 있으므로
...user 로 가져온 데이터에 name과 age를 덮어쓰게 된다.
(값이 변경됨)

-overwriteChanges
name과 age로 key와 value를 먼저 할당했지만,
...user로 다시 name과 age 를 덮어씌웠기 때문에
최종적으로 남는 데이터는 user의 데이터이다.
(user의 데이터와 같음)

-changedDepartment
...user로 user의 데이터를 모두 가져오나,
명시된 company는 재할당 된다.
company안에 ...user.company로 user의 company value와
같은 값이 들어온 뒤에,
department를 재할당 했기 때문에
department 값만 변경된다.