함수 매개변수에서 디스트럭처링 제대로 이해하기

디스트럭처링은 여러 가지 상황에서 유용하다. 예를 들어, 함수의 매개변수로 객체나 배열을 전달할 때, 각 값에 쉽게 접근할 수 있도록 도와준다.

 

JavaScript 함수에서 객체 디스트럭처링을 활용하는 방법

JavaScript에서 함수의 매개변수로 객체를 받을 때, 디스트럭처링(구조 분해)을 이용하면 코드가 더 간결하고 직관적이 된다.

function greet({ name, age }) {
  console.log(`Hello, ${name}. You are ${age} years old.`);
}

const person = { name: "Alice", age: 25 };
greet(person);  // "Hello, Alice. You are 25 years old."

 

이 코드에서 greet({name, age}) 부분을 보면

const {name, age} = person; 처럼 따로 변수를 선언하지 않았는데도 name과 age값을 사용할 수 있는걸 확인할 수 있다.

 

---

왜 동작할까? 디스트럭처링의 원리

함수의 매개변수에서 {name, age}를 사용하면, JavaScript는 함수가 호출될 때 전달된 객체에서 name과 age 속성을 자동으로 추출한다.

function greet(obj) {
  const { name, age } = obj; // 내부적으로 이렇게 동작
  console.log(`Hello, ${name}. You are ${age} years old.`);
}

 

즉 greet(person)을 호출하면 모든 것은 결국 obj에 속해 있기 때문에 person 객체가 {name, age}에 자동으로 할당되는 것과 같다.

---

 

같은 이름의 객체를 가진 함수가 여러개일 경우

function compareAges({ name, age }) {
  console.log(`${name} is ${age} years old.`);
}

const alice = { name: "Alice", age: 25 };
const bob = { name: "Bob", age: 30 };

compareAges(alice); // "Alice is 25 years old."
compareAges(bob);   // "Bob is 30 years old."

 

이 경우 함수에 전달된 객체에 따라 name과 age 값이 달라진다.

comparaAges(alice)를 실행하면 {name, age} = alice가 되고,

comparAges(bob)를 실행하면 {name, age} = bob가 된다.

즉, 디스트럭처링이 일어나는 순간, 함수에 전달된 객체가 기준이 된다.

---

 

함수에 여러 객체 전달하기

그렇다면 두 객체를 한 번에 전달하려면?

function compareAges({ name: name1, age: age1 }, { name: name2, age: age2 }) {
  if (age1 > age2) {
    console.log(`${name1} is older than ${name2}.`);
  } else if (age1 < age2) {
    console.log(`${name2} is older than ${name1}.`);
  } else {
    console.log(`${name1} and ${name2} are the same age.`);
  }
}

const alice = { name: "Alice", age: 25 };
const bob = { name: "Bob", age: 30 };

compareAges(alice, bob); // Bob is older than Alice.

 

이렇게 alice와 bob 두 객체를 각각 첫 번째, 두 번째 매개변수로 전달하고

내부에서 { name: name1, age: age1 }, { name: name2, age: age2 } 디스트럭처링해서 사용할 수 있다.

여기에 각각 별칭을 사용해서 값을 구별할 수 있다.

 

이와 같이 함수에 객체를 전달할 때 디스트럭처링을 사용하면 매개변수에서 바로 객체의 속성에 접근할 수 있어 코드가 간결해 진다.