JS) 구조 분해 할당(Destructuring assignment)

Destructuring assignment

배열 구조 분해 할당

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식

const colors = ['red', 'white', 'yellow']
const [first, second, third] = colors
// const로 선언한 경우 상수 취급 -> 수정 불가, let으로 선언 시 수정 가능

console.log(first, second, third) // red white yellow

• 원하는 곳만 할당이 가능하다

const [ , second] = colors
console.log(second) // white

• 발췌
  fouth와 같이 배열에 없는 요소 값을 발췌 시 undefined 할당

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

• rest parameter와 활용

const arr = [1,2,3,4,5]
const [a, ...b] = arr
const [, , ...c] = arr

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

• default parameter와 활용

const [c=10, d=20] = [3]
console.log(c, d) // 3 20

const [a, b=a*2] = [5]
console.log(a, b); // 5 10

TDZ 영향을 받는다

const [e=f, f] = [undefined, 10]
console.log(e) // ReferenceError: Cannot access 'f' before initialization

• 다차원 배열과 활용
  인덱스 매칭만 잘 되면 구조 분해 할당이 가능하다.

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

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

• 값 교환하기

let a = 10;
let b = 20;
[a, b] = [b, a]

console.log(a,b) // 20, 10

객체 구조 분해 할당

key로 매칭한다.
let으로 선언하는 경우 값을 수정할 수 있다.

const user = {
    name: 'kang',
    age: '27',
    gender: 'male'
}

const {
    name: n,
    age: a,
    gender: g 
} = user

console.log(n, a, g) // kang 27 male

• 발췌

const user = {
  name: "kang",
  age: "27",
  gender: "male"
}
// 프로퍼티 축약
const { name, age, gender } = user

console.log(name, age, gender)  // kang 27 male

• 중첩 객체의 경우 - 접근자와 추출을 구분
  변수명으로 추출

const loginInfo = {
    device: {
        createdAt: '2020-04-01',
        deviceId: '001',
        deviceType: 'laptop'
    },
    user:{
        createdAt: '2019-01-02',
        name: 'kang',
        nickname: 'kangdari',
        phoneNum: '010-0000-0000'
    }
}

const {
    device, 
    user: userInfo // userInfo가 변수
} = loginInfo

console.log(device, userInfo)

변수명으로 바로 발췌 가능

const {
  device: { createdAt, deviceId, deviceType },
  user: userInfo,
  user: { 
  		createdAt: userCreateAt, // userCreateAt이 변수 명
  		name,
  		nickname 
    }
} = {
    device: {
        createdAt: '2020-04-01',
        deviceId: '001',
        deviceType: 'laptop'
    },
    user:{
        createdAt: '2019-01-02',
        name: 'kang',
        nickname: 'kangdari',
        phoneNum: '010-0000-0000'
    }
}
console.log(createdAt, deviceId, deviceType, userCreateAt, name, nickname);
// 2020-04-01 001 laptop 2019-01-02 kang kangdari

• default parameter와의 연동
  phone 객체에 version key값이 없지만 defaut parameter로 설정해둔 값이 출력됨.

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

const {
    name: n,
    version: v = 'X', 
    color: c = 'silver'
} = phone

console.log(n, v, c) // iPhone X spaceGray

• 사용 예

const deliveryProduct = {
  orderedDate: "2020-04-01",
  estimatedDate: "2020-04-02",
  status: "상품 준비 중...",
  items: [
    { name: "베이컨", price: "5000", quantity: 2 },
    { name: "양상추", price: "2000", quantity: 4 }
  ]
};

const { estimatedDate, status, items } = deliveryProduct;

console.log(estimatedDate, status, items);

• 함수 내부에서 변수 추출

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

• 파라미터를 전달받음과 동시에 변수 추출

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

• default parameter를 이용한 오류 체크

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

• 활용 예
  서버에서 {name: 'kang'} 값만 넘겨줬다면 nickname의 default 값을 name 값으로 지정해두면 nickname도 사용 가능

const getUser = ({name, nickname = name}) => {
    console.log(name, nickname) // kang kang
}