[자바스크립트] 객체에 조건부로 속성을 추가하는 방법에 대해

들어가며

가끔씩 조건에 따라 달라지는 객체가 필요할 때가 있습니다.

If else로 하나씩 넣기

let obj = {}
if(includeA) {
    obj = { a : 3, b : 3 }
}
else {
    obj = { b : 3 }
}

코드 그대로 includeA가 true 이면 {a : 3} 이 포함되고 아니면 없는 경우인데요.

위의 예시처럼 if else로 조건을 추가할 경우에, 조건이 들어날수록 if else이 2배씩 늘어난다는 치명적인 단점이 있습니다.

삼항연산자로 넣어주기

그래서 일반적으로 아래와 같이 삼항연산자를 이용해 각 조건별로 값을 넣어주는 방식을 사용하기도 합니다.

let includeA = true;
let includeB = false;

let obj = {
    a : includeA ? 3 : undefined,
    b : includeB ? 3 : undefined,
    c : 3
}

//obj = { a : 3, b : undefined, c : 3}

 

객체의 key도 안넣고 싶은 경우

위의 2가지 상황은 obj에 undefined로 입력된 key값이 존재하게 됩니다.

const obj = {
  a: "a",
  b: undefined,
};

const obj2 = {
  a: "a",
};

console.log(obj.b) // undefined
console.log(obj.b) // undefined

둘다 console.log에 찍어보면 undefined로 나오는 건 똑같습니다.

하지만 가끔 undefined가 없는 { a: "a"} 가 필요할때가 종종 있습니다.

1. 조건에 따라 객체를 재조립하기

if(includeA){ 
    obj = {...obj, ...{a:3}} // {...obj, a:3} 도 가능
}

if(includeB){
    obj = {...obj, ...{b:3}} // {...obj, b:3} 도 가능
}

첫번째 방법은 조건이 추가되는 경우 if 문이 계속해서 늘어나고 완성된 객체의 모습을 한눈에 파악하기 어렵다는 단점이 있습니다.

2. 조건에 따라 객체를 재조립하기

let includeA = true;
let includeB = false;

let obj = {
    ...(includeA && { a : 3 }),
    ...(includeB && { b : 3 }),
    c : 3
} 
// obj = { a:3 , c:3}

spread 연산자와 &&연산자를 이용한 방법입니다. 

가장 직관적이면서 심플한 방법입니다.

&&연산자의 경우 앞에 조건들이 참일 경우 마지막에 있는 값이 할당되는 특징이 있습니다.

따라서 includeA가 true 이면 { a : 3 } 이 값이 되고 spread 연산자에 의해 풀어진 후 객체에 들어가게 되는 로직입니다.

React Props에도 적용해보기 (22.08.19 추가)

ComponentByType 컴포넌트가 있는데 type, typeAprop, typeBprop를 받는다고 가정하겠습니다.

이때 type은 "a" | "b"가 올 수 있으며 각각의 타입에 따라 가져야할 prop이 추가됩니다.

if (type === "a") {
  return <ComponentByType type="a" typeAprop={"aProp"} />;
} else {
  return <ComponentByType type="b" typeBprop={"bProp"} />;
}

이를 코드로 나타내면 이렇게 됩니다.

하지만 조건부로 속성을 추가하는 위의 방식을 적용하면

<ComponentByType
  type={type as "a" | "b"}
  {...(type === "a" && {
    typeAprop: "aProp"
  })}
  {...(type === "b" && {
    typeBprop: "bProp"
  })}
/>;

이렇게 됩니다.

코드로 보면 위에 것이 더 편해보일수도 있습니다.

하지만 prop 갯수가 많아지고 저 코드 역시도 jsx return에 삼항연상자로 들어가야하는 경우를 생각한다면 

아래의 방식이 훨씬 유용한 방법임을 알게됩니다.

마무리

단순 자바스크립트 객체의 예시부터 리액트 컴포넌트의 prop까지 넘기는 방법을 알아보았습니다.

모두들 행복 코딩하십쇼.

끝.