구조분해_할당

구조분해 할당

만약 아래와 같은 코드가 있다.

const example = { a: 123, b: { c:135, d: 146 }};
const a = example.a;
const d = example.b.d;

a와 d에 example 값을 할당하기 위해 중간다리를 많이 거쳐야 하고, 더 깊을 경우 코드가 지저분해보일 수 있다.

따라서 구조분해 할당을 통해 아래처럼 바꿀 수 있다.

const { a, b: { d } } = example;

단, 키와 변수명이 일치해야하며, 변수명이 중복되거나 다른 이름을 쓰고 싶을 때는 아래처럼 변수명을 바꿀 수 있다.

const { a, b: { d: e } } = example;

배열

let arr = [1,2,3,4,5];
const a = arr[0];
const b = arr[1];
...
const e = arr[4];

이 코드도 아래처럼 변환이 가능하다.

const [a,b,c,d,e] = arr;

변수의 경우는 길이가 일치해야 좋다.

만약 배열의 길이가 변수의 개수보다 많을 경우, 남은 배열 요소는 무시된다.

반대로 변수의 개수가 배열의 길이보다 많을 경우, 매칭되지 않은 변수에는 undefined가 할당된다.

만약 매칭되는 값이 없을 것을 고려해서 기본값 설정이 가능하다.

const [x, y, z = 30] = [10, 20];
const { name, age = 20 } = { name: 'jihun' };

구조분해 할당 활용

구조분해 할당은 실제로 아래와 같은 상황에서 많이 사용된다.

// 모듈 불러올 때
const { readFile, writeFile } = require('fs');
 
// express 서버에서 클라이언트가 보낸 데이터를 받을 때
const { name, password } = req.body;

또한, 함수의 매개변수에서 구조분해 할당이 활용된다.

구조분해 할당을 쓰지 않을 때의 코드다.

const user = { name: 'jihun', age: 25, region: 'Seoul' };
 
function printProfile(user) {
  console.log(`이름은 ${user.name}이고, 나이는 ${user.age}살입니다.`);
}
 
printProfile(user);

함수 내부에서 객체 이름(user.)을 반복해서 적어야 하므로 코드가 길어진다.

아래는 매개변수에서 구조분해 할당을 활용한 코드다.

const user = { name: 'jihun', age: 25, region: 'Seoul' };
 
function printProfile({ name, age }) {
  console.log(`이름은 ${name}이고, 나이는 ${age}살입니다.`);
}
printProfile(user);

함수를 선언하는 단계에서 객체를 분해하기 때문에 함수 내부가 깔끔해진다.