Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to conditionally add a member to an object using JavaScript?
Objects are fundamental data structures in JavaScript, and developers often need to add properties conditionally based on certain criteria. For example, adding a "drivingLicense" property to a person object only if they are 18 or older.
Here, we will explore different approaches to conditionally add members to JavaScript objects.
Using the Spread Operator
The spread operator provides an elegant way to conditionally add properties during object creation or update.
Syntax
let obj = {
...(condition ? { prop: 'value' } : {})
}
If the condition is true, it adds the property; otherwise, it spreads an empty object (adding nothing).
Example
<html>
<body>
<h3>Using the <i>spread operator</i> to add members conditionally</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let demo = {
prop1: 'value1',
prop2: 'value2',
prop3: 'value3'
};
output.innerHTML = "Original object: " + JSON.stringify(demo) + "<br>";
let addProp4 = true;
let addProp5 = false;
demo = {
...demo,
...(addProp4 ? { prop4: 'value4' } : {}),
...(addProp5 ? { prop5: 'value5' } : {})
};
output.innerHTML += "After conditional addition: " + JSON.stringify(demo);
</script>
</body>
</html>
Original object: {"prop1":"value1","prop2":"value2","prop3":"value3"}
After conditional addition: {"prop1":"value1","prop2":"value2","prop3":"value3","prop4":"value4"}
Using Object.assign() Method
The Object.assign() method copies properties from source objects to a target object, making it useful for conditional property addition.
Syntax
Object.assign(obj, condition ? { prop: "value" } : {})
Example
<html>
<body>
<h3>Using <i>Object.assign()</i> to add members conditionally</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let initialObj = {
prop1: "value1",
prop2: "value2",
prop3: "value3"
};
let age = 20;
let obj = Object.assign(initialObj, age >= 18 ? { canDrive: true } : { canDrive: false });
output.innerHTML = "Object after conditional assignment: " + JSON.stringify(obj);
</script>
</body>
</html>
Object after conditional assignment: {"prop1":"value1","prop2":"value2","prop3":"value3","canDrive":true}
Using jQuery's extend() Method
jQuery's extend() method merges objects together, allowing conditional property addition with external library support.
Syntax
let updatedObj = $.extend(initialObj, { prop: condition ? "Yes" : "No" });
Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h3>Using jQuery's <i>extend()</i> method to add members conditionally</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let city = {
name: "Bangalore",
population: 10000000,
area: 1000
};
let isCityClean = true;
let isTrafficFree = false;
let updatedObj = $.extend(city, {
clean: isCityClean ? "Yes" : "No",
trafficFree: isTrafficFree ? "Yes" : "No"
});
output.innerHTML = "Updated city object: " + JSON.stringify(updatedObj);
</script>
</body>
</html>
Updated city object: {"name":"Bangalore","population":10000000,"area":1000,"clean":"Yes","trafficFree":"No"}
Using if Statements
The traditional if statement provides straightforward conditional property assignment with clear logic flow.
Syntax
if (condition) {
obj.prop = value;
}
Example
<html>
<body>
<h3>Using <i>if statements</i> to add members conditionally</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let person = {
name: "John",
age: 25
};
let hasLicense = true;
let hasInsurance = false;
if (hasLicense) {
person.drivingLicense = "Valid";
}
if (hasInsurance) {
person.insurance = "Active";
} else {
person.insurance = "None";
}
output.innerHTML = "Person object: " + JSON.stringify(person);
</script>
</body>
</html>
Person object: {"name":"John","age":25,"drivingLicense":"Valid","insurance":"None"}
Comparison
| Method | Readability | Performance | Use Case |
|---|---|---|---|
| Spread Operator | High | Best | Object creation/immutable updates |
| Object.assign() | Medium | Good | Merging multiple objects |
| jQuery extend() | Medium | Fair | When jQuery is already included |
| if Statements | High | Good | Complex conditional logic |
Conclusion
The spread operator offers the most elegant solution for conditionally adding object properties, especially for immutable updates. Use if statements for complex conditions and Object.assign() when merging multiple objects.
3K+ Views
