프로젝트가 커질수록 함수가 받는 매개변수도 늘어난다. 이때 매개변수를 어떻게 관리하느냐에 따라 코드의 품질이 크게 달라질 수 있다. 오늘은 구조분해할당을 활용해 더 깔끔한 코드를 작성하는 방법을 알아보자.
기존 코드의 문제점 ❌
function Person(name, age, location){
this.name = name;
this.age = age;
this.location = location;
}
const jun = new Person('jun', 29, 'korea'); 이 코드의 가장 큰 문제는 매개변수의 순서에 강제성이 있다는 것이다. 매개변수가 3개만 되어도
- 숫자를 기억해야 한다
- 문서화가 없다면 각 위치의 매개변수가 무엇을 의미하는지 알기 어려움
- 중간 매개변수를 생략하고 싶다면
undefined를 넣어야 함
객체 구조분해할당으로 개선하기 ✨
function Person({name, age, location}) {
this.name = name;
this.age = age ?? 20;
this.location = location ?? 'korea';
}
const jun = new Person({
name: 'jun',
location: 'korea',
age: 29
});구조분해할당을 사용하면
- 매개변수의 순서를 신경쓰지 않아도 됨
- 각 매개변수의 의미가 명확함
- 선택적 매개변수는 기본값으로 처리 가능
- 코드의 가독성과 유지보수성이 향상됨
필수값과 선택값 분리하기 🎯
때로는 일부 매개변수는 필수로, 나머지는 선택적으로 받고 싶을 수 있다.
function Person(name, {age, location} = {}) {
this.name = name;
this.age = age ?? 20;
this.location = location ?? 'korea';
}
const junOptions = {
age: 29,
location: 'korea'
};
const jun = new Person('jun', junOptions);이런 패턴은
- 필수 매개변수를 명확히 함
- 선택적 매개변수는 객체로 깔끔하게 관리
- API의 의도를 코드로 명확히 표현
배열의 두 가지 구조분해할당 방식 💡
const orders = ['First', 'Second', 'Third'];
// 1️⃣ 배열 구조분해할당 사용
const [first, , third] = orders;
// 2️⃣ 객체 구조분해할당 사용
const { 0: firstValue, 2: thirdValue } = orders;왜 이게 가능할까? 🤔
자바스크립트에서 배열은 내부적으로 객체로 구현되어 있어 인덱스가 키로 사용된다.
// 배열은 내부적으로 이런 형태
{
0: 'First',
1: 'Second',
2: 'Third',
length: 3
}이러한 특성 덕분에 배열에 두 가지 구조분해할당 방식을 모두 사용할 수 있다
배열 구조분해할당 방식 [first, , third]
장점
- 코드가 더 간결하고 직관적
- 순서가 명확하게 보임
- 배열의 순차적인 특성을 반영
단점
- 건너뛰는 요소가 많으면 쉼표가 늘어남
[first, , , , , , seventh]이런 식으로 지저분해질 수 있음
객체 구조분해할당 방식 { 0: first, 2: third }
장점
- 인덱스가 명확하게 보임
- 건너뛰는 요소가 많아도 깔끔함
- 특정 인덱스만 골라서 가져올 때 유용
단점
- 코드가 상대적으로 더 길어짐
- 인덱스를 직접 써야해서 실수할 가능성이 있음
언제 무엇을 써야 할까?
// ✅ 건너뛰는 요소가 적을 때 : 배열 구조분해할당
const [year, month, day] = date;
const [firstName, , lastName] = fullName;
// ✅ 건너뛰는 요소가 많을 때 : 객체 구조분해 할당
const { 0: first, 15: sixteenth } = longArray;
// ✅ 인덱스가 명확해야 할 때 : 객체 구조분해 할당
const { 0: jan, 6: jul, 11: dec } = monthlyData;React에서도 마찬가지 ⚛️
function Welcome({name}) {
return <h1>Hello, {name}</h1>;
}React 컴포넌트에서도 구조분해할당은 props를 더 깔끔하게 다룰 수 있게 해준다.
정리 🎯
구조분해할당을 잘 활용하면
- 코드의 의도를 더 명확하게 표현할 수 있음
- 매개변수 관리가 용이해짐
- 기본값 설정이 간편해짐
- 전반적인 코드 품질이 향상됨
매개변수가 3개 이상이라면 객체 구조분해할당을 고려해보는 것이 좋다. 코드가 길어지더라도 얻는 이점이 더 크기 때문이다💪
Hello