JavaScript에서 디스트럭처링

Source: Dev.to

🧠 What Is Destructuring?

배열이나 객체에서 별개의 변수로 값을 한 번에 꺼내는 것.

🔹 Destructuring Arrays

Before

const numbers = [10, 20, 30];
const first = numbers[0];
const second = numbers[1];

After

const [first, second, third] = [10, 20, 30];
console.log(first);  // 10
console.log(second); // 20
console.log(third);  // 30

✅ Notes

• 배열에서는 순서가 중요합니다.
• 쉼표를 사용해 항목을 건너뛸 수 있습니다:

const [, , third] = [10, 20, 30];
console.log(third); // 30

🔹 Destructuring Objects

Before

const person = { name: "Rahul", age: 22, city: "Delhi" };
const name = person.name;
const age = person.age;

After

const { name, age } = { name: "Rahul", age: 22, city: "Delhi" };
console.log(name); // Rahul
console.log(age);  // 22

• 순서는 중요하지 않습니다.
• 변수 이름은 속성 이름과 일치해야 하며(또는 이름을 바꿀 수 있습니다).

// Renaming
const { name: userName } = { name: "Rahul" };
console.log(userName); // Rahul

🔹 Default Values

속성이 없을 수도 있을 때 기본값을 제공할 수 있습니다:

const { name, city = "Unknown" } = { name: "Rahul" };
console.log(city); // Unknown

Nested Destructuring

const user = { name: "Rahul", address: { city: "Delhi" } };
const { name, address: { city } } = user;
console.log(name); // Rahul
console.log(city); // Delhi

⚡ Benefits of Destructuring

• 중복 코드를 줄여줍니다
• 코드가 더 깔끔하고 가독성이 높아집니다
• 중첩된 데이터를 쉽게 추출할 수 있습니다
• 함수 매개변수와 잘 어울립니다

🔹 Destructuring in Function Parameters

function greet({ name, city = "Unknown" }) {
  console.log(`Hello ${name} from ${city}`);
}

greet({ name: "Rahul" });
// Hello Rahul from Unknown

Before

function greet(person) {
  const name = person.name;
  const city = person.city || "Unknown";
  console.log(`Hello ${name} from ${city}`);
}

After

function greet({ name, city = "Unknown" }) {
  console.log(`Hello ${name} from ${city}`);
}

✅ 더 깔끔하고 짧으며 읽기 쉽습니다.

• 디스트럭처링은 배열이나 객체에서 값을 추출합니다.
• 배열 → 순서가 중요합니다.
• 객체 → 변수 이름은 키와 일치해야 하며(또는 이름을 바꿀 수 있습니다).
• 기본값과 중첩 구조를 지원합니다.
• 코드를 더 깔끔하게 만들고 함수 매개변수에 이상적입니다.