destructuring assignment(해체할당,구조분해할당)

nabisorry·2019년 12월 11일
1

JavaScript

목록 보기
6/9

1.배열 해체할당

1.1 기본문법

const a = [1,2,3]
const [first,second,third] = a
console.log(first,second,third) // 1 2 3 

/*
const first = a[0]
const second = a[1]
const third = a[2]
*/
const a = [1,2,3]
const [,second,] = a 
const [,,third,four]
console.log(second, third,four) // 2 3 undefined

1.2 rest parameter 와의 연동

const arr = [1, 2, 3, 4, 5]
const [ a, ...b ] = arr // a  = 1  b = [2,3,4,5] 
const [ , , ...c ] = arr // c = [3,4,5]
console.log(a, b, c)

1.3 default parameter와의 연동

const [a = 10, b = 20] = [undefined, 5] // a = 10 b =5
const [c, d = c * 2] = [5] // c = 5 d = 10
const [e = f, f] = [undefined, 10] // 에러

1.4 값교환

let a = 1;
let b = 2;
[a,b] = [b,a]
console.log(a,b) // 2 1 

정리하면서 let [a,b] = [b,a] 이라고 해서 오류를 냈었다.. 위에 예제 같은 경우 위에서 이미 변수
a,b를 선언해주었기 때문에 선언문이 필요 없다.

2.객체 해체할당

2.1 기본


const dabin = {
  name : '최다빈',
  age : 28,
  gender : 'male'
}

const {
  name: n,
  age: a,
  gender // 프로퍼티 축약도 가능하다. gender : gender
} = dabin
console.log(n, a, gender) // 최다빈 , 28 , male

2.2 이중객체에서 활용

const loginInfo = {
  device: {
    createdAt: '2019-12-06T00:14:04+0000',
    deviceId: '0000000000004Vx',
    deviceType: 'desktop'
  },
  user: {
    createdAt: '2019-12-08T18:00:28+0000',
    email: 'aaa@gmail.com',
    name: '최다빈',
    nickname: 'nabisorry',
    phoneNumber: '010-1234-5678'
  }
}

const {
  device, // device : device  loginInfo 에서  device 값을 상수 device 에 담는다.
  user,
  user: {
    name,
    nickname,
    phoneNumber: phone // loginInfo 에서 phoneNumber 값을 상수 phone 에 담는다.
  }
} = loginInfo

console.log(device) //{createdAt: "2019-12-06T00:14:04+0000", deviceId: "0000000000004Vx", deviceType: "desktop"}
console.log(user)// {createdAt: "2019-12-08T18:00:28+0000", email: "aaa@gmail.com", name: "최다빈", nickname: "nabisorry", phoneNumber: "010-1234-5678"}
console.log(name) //최다빈
console.log(nickname) // nabisorry
console.log(phone) // 010-1234-5678

2.3 default parameter 연동

const phone = {
  name : 'iPhone',
  color : undefined
}

const {
  name: n,
  version: v = '6+',
  color: c = 'silver'
} = phone
console.log(n, v, c) // iPhone 6+ silver
profile
쿨럭쿨럭

2개의 댓글

comment-user-thumbnail
2019년 12월 12일

해체할당이라는 문법 참 흥미로워요! 감사합니다^^

답글 달기
comment-user-thumbnail
2020년 1월 25일

저도 이 부분 공부하고 있는데 좋은 자료 감사합니다~

답글 달기