구조 분해 할당 - 객체

객체에 대한 구조 분해 할당 역시 mdn 문서를 기본으로 하고, 코드스테이츠 과제를 활용해서 정리해 보았다.

 

let o = {a: 42, b:true};
let {a,b} = o;

console.log(a) // 42
console.log(b) // true

 

변수의 선언과 분리하여 변수에 값을 할당할 수 있다.

let a,b;
({a,b} = {p:1, q:2})  // 할당문을 둘러싼 ( ) : 선언 없이 객체 리터럴 비구조화 할당을 할 때 쓰는 구문
					  // 즉, ( ) 이 없으면 유효한 독립 구문이 아님
                      // ({a,b} = {p:1, q:2})는 let {a,b} = {p:1, q:2}와 같다.                       

** (  ) 표현식 앞에는 세미콜론이 있어야 한다. 그렇지 않으면 이전 줄과 연결된다.

 

 + 객체의 단축 문법

  it('객체의 단축(shorthand) 문법을 익힙니다', () => {
    const name = '김코딩'
    const age = 28

    const person = {
      name,
      age,
      level: 'Junior',
    }
    expect(person).to.eql({name:'김코딩', age:28, level:'Junior' })
  })

name과 age는 이미 변수로 선언되어 있다.

person이라는 객체 안에서 name, age는 값을 상위 스코프에서 가지고 왔고 level은 새로 선언, 할당되었다.

 

객체로부터 속성을 해체 -> 다른 이름의 변수에 할당할 수 있다.

let o = {a: 42, b: true};	// 변수 o에 객체가 담겨 있음
let {a: foo, b: bar} = o	// 새로운 변수에 변수 o를 할당함

console.log(foo)	// 42
console.log(bar) 	// true

 

it('객체를 분해합니다', () => {
    const student = { name: '박해커', major: '물리학과' }

    const { name } = student
    expect(name).to.eql('박해커')
  })

student 변수에 객체 { name: '박해커', major: '물리학과' } 를 할당했고

다시 {name} 에 student를 할당해 주었다.

 

객체로부터 해체된 값이 undefined인 경우, 변수에 기본값을 할당할 수 있다.

let {a = 10, b =5} = {a:3};

console.log(a) // 3
console.log(b) // 5  -> b에 해당하는 할당값이 없으므로 기본값을 사용한다.

주의!!  기본값을 할당할 때에는 ' : '가 아니라 ' = ' 을 써야하는 점!!

 

기본값을 갖는 새로운 이름의 변수에 할당할 수 있다.

즉, 새로운 변수명과 기본값 할당을 한번에 할 수 있다.

let {a: aa = 10, b : bb = 5} = {a : 3};	// 좌변에서 =와 함께 기본값이 할당되어 있음
                                        // 우변에서 a의 값을 3으로 변경하도록 할당함
console.log(aa) // 3
console.log(bb) // 5	

변수명이 a,b 에서 aa, bb 로 변경되었고 a의 기본값이 3으로 변경되었다.

 

 

rest / spread 문법을 객체 분해에 적용할 수 있다.

it('rest/spread 문법을 객체 분해에 적용할 수 있습니다 #1', () => {
    const student = { name: '최초보', major: '물리학과' }
    const { name, ...args } = student

    expect(name).to.eql('최초보')
    expect(args).to.eql({ major: '물리학과' })
  })

it('rest/spread 문법을 객체 분해에 적용할 수 있습니다 #2', () => {
    const student = { name: '최초보', major: '물리학과', lesson: '양자역학', grade: 'B+' }

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

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

 

getSummary 함수에 보면 lesson : course 라는 부분이 있는데 이것 때문에 변수 lesson이 course로 변경되었던 것 같다.

 

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

    const changedUser = {
      ...user,				// user의 내용을 넣고 가장 바깥쪽 깊이에 있는 name, age 값을 덮어 씌움
      name: '박해커',
      age: 20
    }

    const overwriteChanges = {
      name: '박해커',		// name, age를 먼저 선언하고 나머지 user를 적어준 것
      age: 20,			 // 순서는 name, age를 먼저 넣지만 값은 뒤에 붙여 넣은 user를 따름
      ...user
    }

    const changedDepartment = {
      ...user,
      company: {			// 가장 바깥쪽 깊이에 있는 company에 할당된 객체 내용을 변경함	
        ...user.company,	// user.company에서 department만 Marketing으로 변경함
        department: 'Marketing'
      }
    }

    expect(changedUser).to.eql
    ({name: '박해커', company: {name: 'Code States', department: 'Development', 
    role: {name: 'Software Engineer'}}, age: 20 })

    expect(overwriteChanges).to.eql
    ({name: '김코딩', age: 35, company: {name: 'Code States', department: 'Development', 
    role: {name: 'Software Engineer'}}})

    expect(changedDepartment).to.eql
    ({name: '김코딩', company: {name: 'Code States', department: 'Marketing', 
    role: {name: 'Software Engineer'}}, age: 35})
    
  })

 

mdn 실용예제

중첩된 객체 및 배열의 구조 분해 *

for...of 문과 구조 분해 *

함수 매개변수로 전달된 객체에서 필드 해체하기

계산된 속성 이름과 구조 분해

속성 이름이 유효현 JavaScript 식별자명이 아닌 경우