({a, b, ...others}) 객체 구조 분해 할당으로 파라미터 다루기 (JavaScript Destructuring Assignment)

---

객체 구조 분해 할당으로 파라미터 다루기 (JavaScript Destructuring Assignment) 

({a, b, ...others})

---

---

구조 분해 할당이란?

JavaScript에서 함수를 호출할 때 객체를 파라미터로 넘기면, 특정 값만 따로 변수로 받고 나머지는 그대로 유지하는 방법이 있는데
이런 기법을 객체 구조 분해 할당(Object Destructuring Assignment) 이라고 합니다.

 

함수를 호출할 때 { key: value } 형태의 객체를 넘겨줄 경우, 함수 내부에서 필요한 값만 골라서 사용할 수 있도록 해주는 문법인데
이렇게 하면 불필요한 코드 작성을 줄이고 가독성을 높일 수 있어 사용합니다.

 

기본 사용법(1) - 각 객체 모두 등록

다음처럼 함수를 정의할 때, 객체에서 특정 키만 추출해서 변수로 받을 수 있습니다.

const printUserInfo = ({ name, age }) => {
    console.log(`이름: ${name}`);
    console.log(`나이: ${age}`);
};

// 호출
printUserInfo({ name: "홍길동", age: 30, city: "서울" });

이름: 홍길동
나이: 30

* name과 age는 바로 변수로 사용 가능하고, city는 함수에서 사용되지 않음.

기본 사용법(2) - 나머지 매개변수와 함께 사용하기 (Rest Parameter)

구조 분해 할당을 이용하면 특정 값만 분리하고, 나머지는 따로 모아둘 수도 있습니다.

const printUserInfo = ({ name, age, ...others }) => {
    console.log(`이름: ${name}`);
    console.log(`나이: ${age}`);
    console.log("추가 정보:", others);
};

// 호출
printUserInfo({ name: "홍길동", age: 30, city: "서울", job: "개발자" });

이름: 홍길동
나이: 30
추가 정보: { city: '서울', job: '개발자' }

* name과 age는 개별 변수로 받고, 나머지 city와 job은 others라는 객체에 모여서 저장됨.

 

기본 사용법(3) -  함수 기본값 설정하기

만약 객체에 특정 키가 없을 경우 기본값을 설정할 수도 있습니다.

const printUserInfo = ({ name = "이름 없음", age = 0 }) => {
    console.log(`이름: ${name}`);
    console.log(`나이: ${age}`);
};

// 호출
printUserInfo({ age: 25 });  // name이 없음

이름: 이름 없음
나이: 25

* name이 없으므로 기본값 "이름 없음"이 출력됨.

정리

• 객체를 함수의 파라미터로 받을 때 구조 분해 할당을 사용하면 특정 값만 쉽게 추출할 수 있다.
• ...rest 문법을 활용하면 필요한 값만 꺼내고 나머지는 객체로 보관할 수 있다.
• 기본값을 설정하면 undefined일 경우에도 안전하게 사용할 수 있다.

이런 방식으로 객체를 다루면 코드의 가독성이 좋아지고 유지보수가 쉬워진다