Introduction

Conditionally adding a property to an object is a common JavaScript task when building request payloads, options objects, or UI state. The main decision is whether you want to mutate an existing object or create a new object immutably.

Mutate the Existing Object With if

The most direct approach is to add the property only when the condition is true.

1const user = {
2  name: "Ava",
3  age: 20
4};
5
6if (user.age >= 18) {
7  user.canVote = true;
8}
9
10console.log(user);

This is simple and clear. It is a good choice when mutation is acceptable and the object is local to the current block of logic.

Build a New Object With Conditional Spread

If you want to preserve the original object, object spread is usually the cleanest modern approach.

1const user = {
2  name: "Ava",
3  age: 20
4};
5
6const result = {
7  ...user,
8  ...(user.age >= 18 ? { canVote: true } : {})
9};
10
11console.log(result);

This creates a new object and adds canVote only when the condition matches.

Why Spread Is Better Than Setting undefined

These two patterns are not equivalent:

1const a = {
2  name: "Ava",
3  ...(false ? { canVote: true } : {})
4};
5
6const b = {
7  name: "Ava",
8  canVote: false ? true : undefined
9};
10
11console.log(Object.keys(a));
12console.log(Object.keys(b));

In the first object, canVote is absent. In the second object, the property exists and its value is undefined. That difference matters when using Object.keys, JSON serialization rules, or code that checks property existence explicitly.

Conditional Properties From Variables

This pattern becomes especially useful when assembling API request bodies.

1function buildPayload(name, email) {
2  return {
3    name,
4    ...(email ? { email } : {})
5  };
6}
7
8console.log(buildPayload("Ava", "[email protected]"));
9console.log(buildPayload("Ben", ""));

If email is empty, the property is omitted completely.

Short-Circuit Style

You will also see a shorter form using logical AND.

1const isAdmin = true;
2
3const payload = {
4  id: 7,
5  ...(isAdmin && { role: "admin" })
6};
7
8console.log(payload);

This works because spreading a falsy primitive contributes no enumerable own properties. It is concise, but the ternary form is often easier to read when the condition is not trivial.

Computed Property Names

If the property name itself is dynamic, combine a computed key with the same approach.

1const fieldName = "nickname";
2const includeField = true;
3
4const profile = {
5  name: "Ava",
6  ...(includeField ? { [fieldName]: "av" } : {})
7};
8
9console.log(profile);

This is helpful when form schemas or configuration rules determine the field name at runtime.

Mutation Versus Immutability

Choose the pattern based on the surrounding code:

• use mutation for simple local objects
• use immutable object creation in React reducers, state updates, and functional pipelines

The conditional logic is the same in both cases. The difference is how you want object identity to behave.

Common Pitfalls

The biggest pitfall is assigning undefined when you really wanted to omit the property. Those are different object shapes and can produce different downstream behavior.

Another issue is mutating an object that was supposed to remain immutable, especially in React state or reducer code where identity changes are important.

Developers also overuse the short-circuit spread form in ways that reduce readability. A terse one-liner is not always clearer than an explicit if or ternary.

Finally, be careful when conditions depend on values like 0 or an empty string. If those values are valid and meaningful, a simple truthiness check may exclude fields you intended to keep.

Summary

• Use if when mutating an existing object is acceptable.
• Use object spread with a ternary when you want a new object without the property unless the condition matches.
• Omitting a property is different from setting it to undefined.
• The short-circuit spread form is concise but should still remain readable.
• Be explicit when falsy values such as 0 or "" are valid data.