[JS] test를 통한 구조 분해 할당 개념 익히기 _Koans

Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 한다. 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀 수 있지만 그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면 충분히 성장하기 어려울 것이다. 즉, '왜?' 라는 물음에 대해 꼭 깊은 고찰을 하고 넘어가자는 의미이다.

---

describe('구조 분해 할당(Destructuring Assignment)에 관해서', () => {
it('배열을 분해합니다', () => {
const array = ['code', 'states', 'im', 'course']

const [first, second] = array                   // **
expect(first).to.eql('code')
expect(second).to.eql('states')                  

const result = []                                // 매개변수에 배열이 들어갈 수 있다 **
function foo([first, second]) {
result.push(second)
result.push(first)
}

foo(array)
expect(result).to.eql(['states', 'code'])
})

function([first, second]) 대신에 배열 []을 빼봄 

-> foo(array) 를 하면 first 자리에 [1,2]가 다 들어간다.

-> foo(...array)를 하면 function([first, second])와 같은 결과가 나온다. 

it('rest/spread 문법을 배열 분해에 적용할 수 있습니다', () => {
const array = ['code', 'states', 'im', 'course']
const [start, ...rest] = array
expect(start).to.eql('code')
expect(rest).to.eql(['states', 'im', 'course'])

// 다음과 같은 문법은 사용할 수 없다. 할당하기 전 왼쪽에는, rest 문법 이후에 쉼표가 올 수 없다
// const [first, ...middle, last] = array
})

it('객체의 단축(shorthand) 문법을 익힙니다', () => {

// person의 키 속 name과 age를 미리 상위 스코프에서 선언 & 할당**

const name = '김코딩'                              
const age = 28
const person = {
name,
age,
level: 'Junior',
}

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

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

const { name } = student                   // name = name.student 라고 생각하면 쉬움 **
expect(name).to.eql('박해커')               // 방법 자체를 눈에 담기 **
})

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+의 성적으로 양자역학을 수강했습니다`) 
})

똑같이 콘솔에 쳐봤다

it('rest/spread 문법을 객체 분해에 적용할 수 있습니다 #3', () => {
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,                    // 가장 바깥쪽 깊이에 있는 company에 할당된 객체 내용을 변경함
department: 'Marketing'
}
}

expect(changedUser).to.eql({

company: {
name: 'Code States',
department: 'Development',
role: {
name: 'Software Engineer'
}
},
name: '박해커',
age: 20
})

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

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

똑같이 콘솔에 쳐봤다