javascript 객체 프로퍼티 동적 생성? ( Object property dynamic add?)

어떻게 표현하는지 잘 모르겠지만... 🤪 (아래 코드로 봅시다!)
자바스크립트에서 객체에 프로퍼티를 동적으로 생성? 하는 간단한 코드를 발견하여 기록합니다.

 

프론트에서 서버로 정보 전달시 빈값에 대한 속성 자체를 보내지 말아달라는 요구 사항을 받을 때가 있습니다.

이슈

{
    name: '홍길동'
    age: '20'
    etc: '' //속성 자체를 제거 해주세요
}

//아래와 같이 보내야함
{
    name: '홍길동'
    age: '20'
}

 

이럴때 아래와 같이 작성하기 쉽습니다. (나만 그럴지도...)

Worst Case

//form에 입력된 값을 formData라고 할때
const {name, age, etc} = formData

const submit = {
    name
    age
}

if (etc) {
    submit.etc = etc
}

//아니면 아래와 같이
const submit = formData
if (!etc) {
	delete submit.etc
}


//서버로 보내기
ajax('/save', submit);

코드가 장황하고 안쁘다는 생각을 늘가지고 있었는데 😢

 

TO-BE (Best case ?)

깔끔한 방법을 발견하였습니다. 😀😗
스프레드 문법을 활용한 건데요

const {name, age, etc} = formData

const submit = {
    name
    age
    ...(etc && {ect})
}

ajax('/save', submit);

한결 깔끔해진 것 같네요! 앞으로 자주 애용할 것 같아요 🎉🎉

혹시 더 좋은 코드를 알고 계신분은 댓글 부탁드립니다!~ 🙇