Javascript ES6+ Destructuring assignment

 

 

Destructuring assignment

 

 

 

 

 

 

배열의 해체할당

 

var colors = ['red', 'white', 'orange']
var first = colors[0]
var second = colors[1]
var third = colors[2]
console.log(first, second, third)
//결과: red white orange


const colors = ['red', 'white', 'orange']
const [first, second, third] = colors
console.log(first, second, third)
//결과: red white orange

위의 두 코드의 결과는 똑같다. ES6+부터는 변수 이름을 배열화할 수 있게 되었다.

 

 

 

const colors = ['red', 'white', 'orange']
const [ , , third, fourth] = colors
console.log(third)

//결과: orange

변수 이름의 배열화를 위와 같이 콤마로 빈 칸을 만들주면 빈 칸은 순서대로 배열의 값을 받지 않고 변수를 선언한 칸 부터 배열의 값을 받는다는 의미이다.

 

 

 

활용

 

var a = 10
var b = 20
var c = a
a = b
b = c
console.log(a, b)
/////


let a = 10;
let b = 20;
[a, b] = [b, a]
console.log(a, b)

값을 교환할때 헷갈리지 않게 간단하게 코드를 작성할 수 있다.

 

 

 

//rest parameter 와의 연동

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




//default parameter와의 연동

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




//다차원 배열에서

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

 

위와 같이 다양하게 변수의 배열을 활용할 수 있다. 중요하게 알아야 할 점은 변수이름의 배열과 배열간의 칸 수가 매칭에 주의한다는 것이다.

 

 

 

 

 

 

 

 

 

객체의 해체할당

 

 

 

{추출할 프로퍼티명 : 할당하고자 하는 변수명}

const i = {
  name : 'jinseok',
  age : 25,
  gender : 'male'
}
const {
  name: n,
  age: a,
  gender: g
} = i
console.log(n, a, g)

//결과: jinseok 25 male

↓

 

할당할 변수명은 생략 가능. (property shorthand)

const i = {
  name : 'jinseok',
  age : 25,
  gender : 'male'
}
const {
  name,
  age,
  gender
} = i

 

위의 코드처럼 객체에 '= (할당할 객체의 변수명)'을 해주면 객체 할당 작업이 가능해진다.

 

 

 

const i = {
  name : 'jinseok',
  age : 25,
  gender : 'male'
}
const {
  name,
  gender
} = i
console.log(name, gender)

 

발췌 또한 가능하다.

 

 

 

 

 

활용

 

const loginInfo = {
  device: {
    createdAt: '2017-12-06T00:14:04+0000',
    deviceId: '0000000000004Vx',
    deviceType: 'desktop'
  },
  user: {
    createdAt: '2017-03-08T18:00:28+0000',
    email: 'k0502s@naver.com',
    name: '김진석',
    nickname: 'k0520s',
    phoneNumber: '010-7921-7741'
  }
}

const {
  device,
  user: {
    name,
    nickname,
    phoneNumber: phone
  }
} = loginInfo

 

• device는 device 객체 그 자체이다.
• user : {} 는 user 객체 안에 있는 값들을 뽑아낸다는 의미이다. 
• phoneNumber : phone 중에 선언된 변수는 phone이다. 즉  'const phone ='으로 phoneNumber의 변수로서 선언할 수 있다.
  

 

 

 

 

 

 

 

 

 

 

 

default parameter와의 연동

 

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

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

const {
  name,
  version = 'X',
  color = 'black'
} = phone
console.log(name, version, color)

//결과: 
//iPhone 6+ silver
//iPhone X black

 

 

 

 

 

 

 

 

 

 

default parameter실무 활용

 

const deliveryProduct = {
  orderedDate: '2018-01-15',
  estimatedDate: '2018-01-20',
  status: '배송중',
  items: [
    {name: '사과', price: 1000, quantity: 3},
    {name: '배', price: 1500, quantity: 2},
    {name: '딸기', price: 2000, quantity: 4}
  ]
}

const {
  estimatedDate: esti,    //  estimatedDate을 esti로 변수 선언해주었다.
  status,                 // status는 객체 프로퍼티 자체를 지정.
  items: [ , ...products] // item의 첫 번째 프로퍼티 사과를 제외한 배, 딸기를 products로 지정함.
} = deliveryProduct
console.log(esti, status, products)


//결과:
//2018-01-20 배송중 (2) [{…}, {…}]
//0: {name: "배", price: 1500, quantity: 2}
//1: {name: "딸기", price: 2000, quantity: 4}

 

 

• 위의 코드를 보면 배달목록에 대한 정보를 필요할 때마다 손 쉽게 수정하여 객체 정보를 바꿀 수 있다는 것을 알 수 있다.

 

 

 

 

 

 

 

const getArea = (info) => {
  const {width, height} = info
  return width * height
}
getArea({ width: 10, height: 50 })


/////


const getArea = ({ width, height = width }) => {
  return width * height
}
getArea({ width: 10 })

 

• 에로우 함수의 매개변수를 더 효율적으로 사용할 수 있다. 변수 이름에도 객체가 들어 갈 수 있다는 점을 활용하여 에로우 함수 매개변수에 원하는 객체를 직접 넣어주었으며 default parameter을 활용할 수도 있다. 
• 수정도 용이하며 원하는 값을 자유자재로 수정할 수 있다.