JavaScript로 선택적 속성을 추가하는 가장 깔끔한 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- JavaScript/TypeScript 개발자
- 동적 데이터 처리, 유틸리티 함수 구현, 타입 정의 관리 필요자
- 중간 수준의 프로그래밍 경험자
핵심 요약
...(property && { key: property })
패턴으로 조건문 없이 선택적 속성 추가- 타입 정의에서
?
연산자 사용으로 optional property 명시 - 불변성 유지 및 코드 가독성 향상을 위한 구조적 접근
섹션별 세부 요약
1. 기존 방법의 단점
- if 문 사용 시 코드 분기 증가
- Object.assign 사용 시 null 체크 복잡성 증가
- 명시적인 조건문으로 인한 코드 중복 가능성
2. 개선된 패턴
...(event.contextLabel && { label: event.contextLabel })
- falsy 값일 경우 spread 무시
- truthy 값일 경우 객체 병합
- 불변성 유지, 조건문/변수 생성 없이 간결한 구조
3. 타입 정의 관리
- TypeScript에서는
contextLabel?: string;
로 optional property 명시 - 타입 체크 시 자동으로 optional 처리 적용
- 런타임/타입스크립트 둘 다 호환 가능
결론
...(property && { key: property })
패턴 사용을 권장- 타입 정의에서 optional property 명시 필수
- 불변성과 명확한 의도 표현을 위한 권장 사항