구조 분해 할당 (Destructing assignment)

STUDY-MOLE

위기의 두더지! 더 공부하잣.
평일 첫째 주 내 첫 PR이다. 두 번씩 보면 더 오래 기억나려나? 일단 렛치 고

구조 분해 할당 (Destructing assignment)

구조 분해 할당이란?

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

맛보기

코드로 대강 파악해보기

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

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({a, b}} = { a: 10, b: 20});
console.log(a); // 10
console.log(b); // 20

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

기본 변수 할당

배열 분해를 먼저 살펴보도록 하자!

let x = [1, 2, 3, 4, 5];
let [y, x] = x;
console.log(y); // 1
console.log(z); // 2

선언에서 분리한 할당

변수 선언이 분리되어도 구조 분해로 값을 할당할 수 있다.

let a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

기본값

분해한 값이 undefined 일 때는 어떨과.
기본값이 없으면 그대로 undefined를, 있다면 그 기본값을 대신 사용한다.

let a, b;
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

let a, b;
[a = 5, b] = [1];
console.log(a); // 1
console.log(b); // undefined

let a, b;
[a = 5, b] = [];
console.log(a); // 5
console.log(b); // undefined

변수 교환

하나의 구조 분해 표현식으로 두 변수의 값을 교환할 수 있다.
swap 이 이렇게 쉽다고? 이게 뭔데 하며 찾아보게 된 계기이기도 한!

let a = 1;
let b = 2;
[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

함수가 반환한 배열 분석

함수도 구조 분해 할당 열가능!

function f() {
  return [1, 2];
}

var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2

일부 반환값 무시

필요없는 값은 건너뛰어불기

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

싸그리 무시도 가능. 근데 이런 건 어디에 써먹을라나

var [, ,] = f();

나머지 할당하기

맛보기의 rest와 같다.
나머지 요소는 항상 선언된 변수 중 가장 뒤에 위치해야한다. 안글면 에러가 잔뜩..

var [a, ...b] = [1, 2, 3, 4];
console.log(a); // 1
console.log(b); // [2, 3, 4]

var [...c, d] // ❗SyntaxError : 나머지 요소 뒤에 쉼표가 올 수 없어요

정규 표현식과 함께 활용해보기

정규 표현식의 exec() 메서드를 활용하여 입맛대로 잘 쪼갠 뒤 원하는 부분만 챙겨올 수 있다.

function letsParse(url) {
  let parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
  if (!parsedURL) return false;
  console.log(parsedURL);
  // ["https://github.com/Study-Mole/study-cs-mole"
  // , "https", "github.com", "Study-Mole/study-cs-mole"]

  let [, protocol, fullhost, fullpath] = parsedURL;
  return protocol;
}

console.log(letsParse("https://github.com/Study-Mole/study-cs-mole")); // "https"

기본 할당

배열은 여기까지. 객체 구조 분해도 살펴보자!

let o = { p: 42, q: true };
let { p, q } = o;
console.log(p); // 42
console.log(q); // true

선언 없는 할당

배열에서 선언 없는 할당이 가능한 것과 같은 맥락.
배열 구조 분해와 다르게 할당문을 둘러싼 (...)가 필요한데
이게 없으면 좌변의 { a, b }를 객체 리터럴이 아닌 블록으로 인식해 독립적인 구문으로 사용이 불가하다.

let a, b;
({ a, b } = { a: 1, b: 2 });

기본값

객체로부터 해체된 값이 undefined인 경우, 기본값을 할당할 수 있다.

let { a = 10, b = 5 } = { a: 3 }; // b는 할당 못받았는디 ㅠ

console.log(a); // 3
console.log(b); // 5 기본값 줬질옹

새로운 변수 이름으로 할당하기

속성을 해체하여 원래 속성명을 다른 이름의 변수에 할당할 수도 있다.
죅금 헷갈리지만 간단히만 살펴보자.

var yubin = { a: 23, c: true };
var { a: age, c: gamja } = yubin;

console.log(age); // 24
console.log(gamja); // true

중첩된 객체/배열의 구조 분해

살짝 복잡해보이지만 어떻게 된 일인가 찬찬히 봐보자.

1. metadata의 title을 새로운 변수 studyTitle에 할당
2. metadata의 details의 구조를 맞춰주고 내부의 title을 새로운 변수 topic에 할당
3. 정리하면, metadata의 일부 값을 구조 분해 할당하여 냅다 출력한 코드라 볼 수 있다.

let metadata = {
  title: "StudyMole",
  details: [
    {
      locale: "Moles",
      localization_tags: [],
      last_edit: "2024-08-29T14:29:37",
      url: "/Moles/StudyMole",
      title: "Destructing-assignment",
    },
  ],
  url: "/Moles/StudyMole",
};

let {
  title: studyTitle, // 
  details: [{ title: topic }], // 
} = metadata;

console.log(studyTitle); // "StudyMole"
console.log(topic); // "Destructing-assignment"

for of 반복문과 구조 분해

배열을 for 문으로 돌면서 공통된 key 값을 가진 일부 value 들을 할당 받아올 수도 있다.
위와 크게 다르지 않은 상황. 다만 조금 반복되는 ~

let moles = [
  {
    name: "yubin",
    age: 23,
    friends: {
      f1: "jomboo",
      f2: "yuna",
      f3: "zhoo",
      f4: "jiyeon",
    },
  },
  {
    name: "yuna",
    age: 27,
    friends: {
      f1: "jomboo",
      f2: "zhoo",
      f3: "yubin",
      f4: "hyehwa",
    },
  },
];

for (let {
  name: n,
  friends: { f4: f },
  age: a,
} of moles) {
  console.log("Name: " + n + ", Age: " + a + ", Friend: " + f);
}

// Name: yubin, Age: 23, Friend: jiyeon
// Name: yuna, Age: 27, Friend: hyehwa

객체 구조 분해에서 rest

객체 구조 분해에서도 rest 는 같은 방식으로 동작한다.

let { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 };
console.log(a); // 10
console.log(b); // 20
console.log(rest); // { c: 30, d: 40 }

etc.

평소에 자주 사용하는 아래 예시들도 모두 구조 분해 할당에 해당한다.
이게 그거였구나, 싶었다.

1. 함수의 매개변수 처리

function displayUser({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

2. 객체 속성의 빠른 접근

let { username, email } = user;

3. 배열 요소의 추출

let [first, second] = [10, 20];

4. API 응답 처리

let { data, status } = apiResponse;

결론

구조 분해 할당은 JavaScript에서 더 효율적이고 간결하게 코드를 작성하도록 돕는다.
다양한 상황에서 적절히 사용하여 생산성을 높여보자!

Summary

구조 분해 할당이란 배열 또는 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식 입니다. 이를 통해 기본값 할당, 변수 교환, 객체나 배열의 요소 추출, 함수 매개변수 작업 등 복잡한 데이터 구조를 더 간결하게 처리할 수 있습니다.