어제의 나보다 성장한 오늘의 나

[자바스크립트] Destructuring assignment ( 해체할당 ) 본문

공부/JavaScript && jquery

[자바스크립트] Destructuring assignment ( 해체할당 )

NineOne 2021. 4. 27. 15:43

배열 해체 할당

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

이게 바로 해체 할당이다. 만약 첫 번째랑 두 번째 인자는 받기 싫다면?

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

 

이제 다양한 활용을 해보자!

1. rest parameter

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

2. default parameter

const [a = 10, b = 20] = [undefined, 5]
const [c, d = c * 2] = [5]
const [f, e=f] = [undefined, 10]
console.log(a,b);   // 10, 5
console.log(c,d)    // 5, 10    
console.log(f,e)    // undefined, 10

3. 다차원 배열

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

똑같이 매칭 해주면 잘 출력된다.

4. 값 교환하기

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

 

객체 해체할당

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

const iu = {
  name : '아이유',
  age : 25,
  gender : 'female'
}
const {
  name: n,
  age: a,
  gender: g
} = iu
console.log(n, a, g)	// 아이유, 25, female

위와 같이 iu에 객체를 담고 똑같이 매칭 시켜주면 n, a, g에 잘 담긴다.

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

const iu = {
  name : '아이유',
  age : 25,
  gender : 'female'
}
const {
  name,
  age,
  gender
} = iu
console.log(name, age, gender)

 

3. 중첩 객체의 경우 - 접근자와 추출을 구분하는 것이 중요

const loginInfo = {
    device: {
      create : '2020-04-27',
      blog: '어제의 나보다 성장한 오늘의 나 ',
      type: 'desktop'
    },
    user: {
      create: '1994',
      name: 'goo',
      nickname: '91',
    }
  }
  
  const {
    device,
    user: userInfo,
    user: {
      name,
      nickname,
    },
    user :{
        create: temp,
    }
  } = loginInfo
  console.log(name) // goo
  console.log(temp) // 1994

rest parameter로 device는 이름은 그대로 객체를 그대로 추출이 된다. 그런데 user가 몇 개 있는 게 눈에 뜨인다. key에 해당하는 user는 추출하는 프로퍼티명 이기 때문에 몇 번을 적어도 상관없다. 그 대신 뒤에 오는 userInfo 같은 자리는 변수명에 해당되기 때문에 중복을 하면 안 된다.

4. defalut 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)

phone 객체에 version이 없다 따라서 위와 같이 설정해서 사용할 수 있다.

 

사용 예

위에서 얘기한 활용

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,
  status,
  items: [ , ...products]
} = deliveryProduct
console.log(esti, status, products)

정규식 표현

const getUrlParts = (url) => /^(https?):\/\/(\w{3,}\.[A-z.]{2,})(\/[a-z0-9]{1,}\/([a-z0-9\-.,]+))$/.exec(url)

const [ , protocol, host, , title] = getUrlParts('http://abc.com/es6/destructuring')
console.log(protocol, host, title)

 

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

위의 코드도 나쁘지 않다 하지만 더 간단하게 만들어 보자

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

꼭 info라는 객체로 받을 필요 없이 바로 선언해버리는 방식이다. 그런데 만약에 객체가 안 오거나 제대로 된 값이 매칭 되어 안 넘어온다면? defalut parameter를 설정하면 된다.

 

출처

Comments