Destructuring 집고 넘어가자 [자바스크립트]

이번 글을 쓰는이유

리엑트를 차근차근 배워 나가는 도중 나에겐 너무 낯선 대괄호가 판을 치는것을 보았다

import React, { useState } from 'react';

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });

  const { name, nickname } = inputs; 

const { name, nickname } = inputs;

🤯 도대체 이건 무엇을 의미 하는 것일까?
python을 사용하다가 이런 괴랄한 것을 보니 많이 당황했었다.
이런것에 이제 당황하지 말고 지금 부터 알아 가보자.

Destructuring이란

Destructuring구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

코드를 먼저 봐보자

const userInfo = ["Sanghoon", "몸짱"];
const [name, bodyType] = userInfo;

아래 그림으로 생각해보자.

Destructuring 안쓰면 얼마나 많이 번거로운지 보여주는 코드

const userInfo = ["Sanghoon", "몸짱"];
const name = userInfo[0];
const bodyType = userInfo[1];

Object 에선 어떻게 사용할까?

const userInfo = {
  name: "Sanghoon",
  bodyType = "몸짱"
}
const { name, bodytype } = userInfo;

console.log(name);
//Sanghoon
console.log(bodyType);
//몸짱

• 변수 name에는 userInfo의 name key의 value값인 "Sanghoon"이
• 변수 bodyType에는 userInfo의 bodyType key의 value값인 "몸짱"이 할당 되었다.

즉 어떤 변수명이 key와 동일하다면 destructuring을 사용해서 그 key의 value값으로 할당이 가능하다.

그렇다면 꼭 key와 같은 변수명으로만 해야 하는것일까..?

const { key : 내가 원하는 변수명 } = object

으로 작성하면 key대신 내가 원하는 변수명에 값을 할당할 수 있다.

const userInfo = {
  name: "Sanghoon",
  bodyType = "몸짱"
}
const { name: firstName, bodytype } = userInfo;

console.log(firstName);
//Sanghoon
console.log(bodyType);

실전 예제로 가보자!

const people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith"
    },
    age: 35
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones"
    },
    age: 25
  }
];
///각 사람들의 이름과 아버지의 이름을  출력하고싶다 
//for문을 사용해서 destructuring 을 사용해서 출력한다면 어떻게 될까?

for(let eachMember of people){
  let { name: 이름, family: {father: 아버지} } = eachMember;
  console.log(`Name: ${이름}, Father:  ${아버지}`);
}

///더 고급진 방법  
 
for (let {name: 이름, family: { father: 아버지 } } of people) {
  console.log(`Name: ${이름}, Father:  ${아버지}`);
}

reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment