JavaScript에서 논리 AND 연산자로 객체 속성을 조건부로 변경하는 방법

JavaScript에서 객체의 속성을 조건부로 변경하려면 논리 AND 연산자(&&)를 활용할 수 있습니다.

논리 AND 연산자는 두 개의 피연산자가 모두 참(참으로 평가되는 값)일 때만 전체 조건이 참이 됩니다. 이 특성을 이용하면 특정 조건이 충족될 때만 새로운 속성 값을 객체에 병합하도록 만들 수 있습니다.

동작 원리

스프레드 연산자(...)와 함께 논리 AND를 사용하면 다음과 같은 방식으로 동작합니다.

• 조건이 false인 경우: false && {...}는 false로 평가되며, 스프레드 연산자는 falsy 값(예: false, null, undefined)을 만나면 아무것도 병합하지 않습니다.
• 조건이 true인 경우: true && {...}는 오른쪽 객체를 반환하고, 해당 객체가 기존 객체에 병합되어 속성 값이 덮어씌워집니다.

예제 코드

let marksDetails = { Mark1: 33, Mark2: 89 },
    isBacklog = false;

console.log("백로그가 false일 때의 결과 ===");
console.log({ ...marksDetails, ...isBacklog === true && { Mark1: 33 }});

isBacklog = true;

console.log("백로그가 true일 때의 결과 ===");
console.log({ ...marksDetails, ...isBacklog === true && { Mark1: 93 }});

실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 사용합니다.

node fileName.js

여기서는 파일 이름이 demo77.js라고 가정합니다.

출력 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

PS C:\Users\Amit\JavaScript-code> node demo77.js
백로그가 false일 때의 결과 ===
{ Mark1: 33, Mark2: 89 }
백로그가 true일 때의 결과 ===
{ Mark1: 93, Mark2: 89 }

정리

이 패턴은 if 문 없이도 간결하게 조건부 속성 업데이트를 처리할 수 있게 해줍니다. 특히 불변성(immutability)을 유지해야 하는 React 같은 라이브러리에서 상태 객체를 업데이트할 때 유용하게 사용됩니다. 단, 조건식이 항상 명시적인 boolean(=== true 등)으로 평가되도록 작성하는 것이 의도치 않은 병합을 방지하는 데 좋습니다.