[JS] 프레임워크에서 많이 쓰는 JS개념 구조분해할당

구조분해할당이란 무엇일까?

배열의 인덱스 혹은 객체의 키를 기준으로 원하는 값만 빼내는 것을 구조분해할당이라고 합니다.

어떻게 사용할까?

let Person = {
    firstname : "홍", 
    lastname : "길동", 
    age : 18, 
    role : "학생", 
    family : { 
        mom : "김영희",
        father : "홍철수"
    } 
}

위 같은 객체가 있고 필요한 값이 firstname, father이라면 저희는 이런 식으로 코드를 짤 수 있을것입니다.

let firstname = Person.firstname;
let father = Person.family.father

console.log(firstname, father); // 홍 홍철수

하지만 오늘 이 포스팅을 읽는다면 이 2줄의 코드를 한줄로 바꿀 수 있습니다.

let {firstname, family : { father } } = Person;

console.log(firstname, father); // 홍 홍철수

위와 같이 객체의 키를 기준으로 원하는 값을 변수로 빼낼 수 있습니다.

같은 이름으로만 변수를 받을 수 있나요?

let {firstname : name, family : { father : daddy } } = Person;

console.log(name, daddy) // 홍 홍철수

:를 사용해서 변수의 이름을 키의 이름과 다르게 만들수도 있습니다.

왜 쓰는 걸까? 어디에서 본거 같은데?

예를 들어 api데이터를 처리할 일이 있다면 하나하나 변수를 지정하는 것보다 코드를 줄일 수 있고 가독성도 보다 뛰어나기에 사용합니다.

const express = require('express')
const router = express.Router()
const path = require('path')
const User = require('../models/user')
const Content = require('../models/content')
const { renameSync } = require('fs')

위는 제 node.js프로젝트중에 import문을 가져 온 것인데 6번 째 줄에 익숙한게 보이죠?
이런식으로 fs의 여러 요소중 코드에서 필요한 renameSync 속성만 가져오는 식으로 쓸 수도 있습니다.

다음에는 인스턴스를 한번 준비 해보겠습니다. 오늘도 제 포스팅을 읽어주셔서 감사합니다.