나만 헷갈리는 { 구조분해할당 }

Jean·2025년 2월 21일

파라미터를 다양한 방법으로 받아보자

1.{} 구조 분해 할당 ✅

const getUser = async ({ id, name }) => {
  console.log(id, name);
};

const user = { id: 1, name: "abc" };
getUser(user); // ✅ { id, name } 구조 분해

-----

✅ 결과 

1 abc
  • 순서에 의존하지 않음
  • 객체 형태로 값을 넘기므로 필요한 값만 선택적으로 전달
  • 가독성이 좋고 유지보수가 편리

2. 일반 파라미터 ✅

const getUser = async (id, name) => {
  console.log(id, name);
};

getUser(1, "abc"); // ✅ 값 개별 전달

-----

✅결과

1 abc
  • 순서가 중요 → id가 먼저, name이 나중에 전달되어야 함
  • 값이 많아지면 함수의 매개변수 개수가 늘어나 복잡

3. {} 방식으로 객체를 넘겼는데 일반 방식으로 받으면? ❌

const getUser = async (id, name) => {
  console.log(id, name);
};

const user = { id: 1, name: "abc" };
getUser(user); // ❌ 오류 발생

❌ 오류 발생 (파라미터 id에 객체 전체가 전달됨!)

[object Object] undefined

4. 일반 방식(id, name)으로 값을 넘겼는데 {} 방식으로 받으면? ❌

const getUser = async ({ id, name }) => {
  console.log(id, name);
};

getUser(1, "abc"); // ❌ 오류 발생

❌ 오류 발생 (기대하는 값이 객체인데, 개별 값이 전달됨!)

TypeError: Cannot destructure property 'id' of 'undefined'
profile
햇내기 개발자 지망생

0개의 댓글