[Group Study, 모던 자바스크립트 Deep Dive] - 36 디스트럭처링 할당

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

인간은 망각의 동물이라고 교수님께서 말씀하셨지만 반복 학습의 힘을 믿는다. React 오픈카톡방에서 모집한 스터디원분들과 함께 "모던 자바스크립트 Deep Dive" 1권 톺아보기를 시작한다!

 

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

---

36.0 디스트럭처링 할당(destructuring assignment)

디스트럭처링 할당(destructuriing assignment-구조 분해 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에 필요한 값만 추출하여 변수에 할당할 때 유용하다.

---

36.1 배열 디스트럭처링 할당

ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법이다.

ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 배열 디스트럭처링 할당의 대상은 이터러블이어야 하고, 할당 기준은 배열의 인덱스다.

[예제 36-01]

//ES5

var arr = [1, 2, 3]

var one = arr[0]
var two = arr[1]
var three = arr[2]




//ES6

const [one, two, three] = arr

// 기본값
const [a, b, c = 3] = [1, 2]
console.log(a,b,c) //1 2 3

// 기본값보다 할당된 값이 우선
const [e, f=10, g=3] = [1, 2]
consoel.log(e,f,g) // 1,2,3

---

36.2 객체 디스트럭처링 할당

ES5에서 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 한다.

[예제 36-02]

//ES5
var user = { firstName: 'ilgwon', lastName: 'Park' }

var firstName = user.firstName
var lastName = user.lastName


//ES6
const {lastName, firstName } = user

// 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다.
// 프로퍼티 키가 lastName인 프로퍼티 값을 ln에 할당,
// 프로퍼티 키가 firstName인 프로퍼티 값을 fn에 할당.
const {lastName: ln, firstName: fn} = user
consle.log(ln, fn)

// 기본값 설정
const { firstName = 'ilgwon', lastName } = {lastName: 'Park'}

const { firstName: fn = 'ilgwon', lastName: ln} =  {lastName: 'Park'}
console.log(fn, ln)

객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용하다. 

[예제 36-03]

const str = 'Hello'

const {length} = str
console.log(length) //5


const todo = { id: 1, content: 'HTML', completed: true ,} 
const { id } = todo



function printTodo({ content, completed }) {
 console.log(`할일 ${content}은 ${complted ? '완료' : '비완료'} 상태입니다.`)
}

printTodo({id: 1, content: 'HTML', complted: true})



// 배열의 요소각 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당 혼용 가능

const todos = [
 { id: 1, content: 'HTML', completed: true },
 { id: 2, content: 'CSS', completed: false },
 { id: 3, content: 'JS', completed: false },
]

const[, {id}] = todos


//중첩 객체인 경우

const user = {
 name: 'ilgwon',
 address: {
  zipCode: '12345',
  city: 'Seoul',
 },
}

const { address: { city } } = user
console.log(city)


//Rest
const {x, ...rest} = {x:1, y:2, z:3}
console.log(x, rest) // 1 {y:2, z:3}

ㅇ