JS의 구조 분해 할당

 

구조 분해 할당(Destructuring Assignment)은 자바스크립트에서 배열이나 객체와 같은 자료구조의 값을 쉽게 꺼내어 개별적인 변수에 할당할 수 있도록 하는 문법입니다.

따라서 배열이나 객체에서 필요한 값만 간단하게 추출해서 사용하는 것입니다.

배열

만약에 아래와 같은 배열이 있다고 해보겠습니다.

const numbers = [10, 20, 30, 40];

// 일반적인 방법
const a = numbers[0];
const b = numbers[1];
const c = numbers[2];
const d = numbers[3];

// 구조 분해 할당
const [x, y, z, w] = numbers;
// x, y, z, w를 각각 a, b, c, d와 똑같이 사용 가능~!
// 더 간결해짐!

• 좀 더 살펴보기조금 더 생각해보면 “나는 내가 원하는 요소만 항상 가지고 싶은데?” 라고 생각이 들 수 있습니다.이번에는 배열에서 일부분만 추출하거나 값이 필요하지만 존재하지 않을 때 기본값을 설정하는 방법을 알아보겠습니다.“나는 내가 원하는 요소만 항상 가지고 싶은데?”

    const colors = ["빨강", "초록", "파랑"];
    const [first, second, third] = colors;
  
    console.log(first);  // "빨강"
    console.log(second); // "초록"
    console.log(third);  // "파랑"

  여기서는 first, second, thrid를 다 지정해줬어요

    const colors = ["빨강", "초록", "파랑"];
    const [, second, third] = colors;
  
    console.log(second); // "초록"
    console.log(third);  // "파랑"

  그냥 first를 안써줘버렸어요.필요하지 않은 요소는 빈칸으로 처리하는 방식입니다.

    const [, second] = colors;

  위 코드의 의미는 아래와 같아요
  • 첫번째는 건너뛰어
  • 두번째는 second에 값을 할당해
  • 그 다음은 없어“배열에 값이 있는지 없는지 확실치 않은데, 값이 필요하면 어떻게 하지?”

    const [a, b, c = "기본값"] = ["첫 번째", "두 번째"];
    
    console.log(a); // "첫 번째 값: 빨강"
    console.log(b); // "두 번째 값: 초록"
    console.log(c); // 기본값인 "파랑"

    만약 c 가 필요하지만 값이 있는지 없는지 확실하지 않다면 c = “기본값” 으로 기본값을 설정할 수 있습니다.
  • 이 방법은 아주 간단합니다.
  • 기본값 설정하기
• 여기서 다시 thrid도 필요 없다면?
• 구조 분해 할당에서 ,(쉼표) 는 특정 위치의 값을 건너뛸 때 사용하는 방법입니다.
• 근데 저는 first 가 딱히 필요하지 않아요. 그럴 땐 아래와 같은 방법을 이용합니다. 되게 직관적이에요
• 먼저 아래 코드에서부터 시작하겠습니다.
• 배열의 일부분만 추출하기
• 혹은 “배열에 값이 있는지 없는지 확실치 않은데, 값이 필요하면 어떻게 하지?” 라고 생각할 수도 있겠어요.
• 위에서의 방법은 기초적으로 사용한 방법들입니다.

객체

이번에는 객체에서 구조 분해 할당을 해보겠습니다

const person = { name: "KKW", age: 24 };

// 일반적인 방법
const name = person.name;
const age = person.age;

// 구조 분해 할당
const { name, age } = person;

지금 객체의 구조 분해 할당을 보면 프로퍼티의 이름과 구조 분해 할당할 때 설정된 이름이 같은걸 볼 수 있어요.

만약 똑같은 이름으로 사용하고 싶다면 위 방법을 그대로 적용하면 됩니다.

하지만 변수가 많아지고 복잡해질 수 있어요.

const person1 = { name: "KKW", age: 24 };
const person2 = { name: "James", age: 30 };
// 일반적인 방법
const name = person1.name;
const age = person1.age;

// 구조 분해 할당
const { name, age } = person1;
const { name, age } = person2:
// ❌ 상수에 값의 재할당이 발생함

위와 같은 상황처럼 변수명이 겹칠 수도 있어요.

객체의 구조 분해 할당은 프로퍼티의 이름과 다른 이름으로 변수를 할당할 수 있습니다.

const person = { name: "KKW", age: 24 };

// 일반적인 방법
const name = person.name;
const age = person.age;

// 구조 분해 할당
const { name: userName, age: userAge } = person;

console.log(userName); // KKW
console.log(userAge);  // 24

• 좀 더 살펴보기객체도 프로퍼티가 없을 때 사용할 기본값을 지정할 수 있습니다.중첩된 객체 내부의 값 추출하기

    const student = {
      name: "KKW",
      address: {
        city: "서울",
        zip: 12345,
      },
    };
  
    // 중첩된 객체에서 city만 추출
    const {
      address: { city },
    } = student;
  
    console.log(city); // 서울
  

• 중첩 객체에서 더 깊이 있는 값도 구조 분해 할당을 통해 값을 추출할 수 있습니다.
• const person = { name: "KKW" }; // age는 존재하지 않음 → 기본값 24 사용 const { name, age = 24 } = person; console.log(name); // KKW console.log(age); // 24 (기본값)
• 기본값 지정