Add properties to object by condition ES6 JavaScript

JavaScript

In this post, we are going to learn how to add properties to objects by condition ES6 JavaScript with examples. We will go to use the spread operator along with the logical operator. The logical AND operator is represented by (&&) and return True if both the condition is True. The spread operator is a new operator introduced in ES6 Standard of JavaScript, It is represented by three dots(…) It takes an iterate object(Array, Set, Map, String) and Object and spreads their element.

How Logical operators (&&) work in JavaScript

  • if the first expression(left side) is truthy considered is true when coming across in boolean context and return the Second expression(right side).
  • If the first expression(left-side) is Falsy consider it False When coming across in the boolean context

In this example, the First output statement’s first expression is True, So the second expression ‘Welcome’ is returned, In the Second output statement ‘Hi ‘truthy value so the “Dev.com” is returned. In the case of the third output statement, the first expression is False so it returns false.

console.log(true && "Welcome");

console.log(`Hi` && "Dev.com");

console.log(false && "GM");

//Output
Welcome
Devenu.com
false

 1. Add properties to object by condition in ES6 JavaScript

In this JavaScript program, we are adding a property to a javascript object by using the Spread and logical AND operator (&&).In this case, the first expression(ConditionTrue) is returning True, So the property { salary: 600000}) is added to the Employee object.

In second condition First expression(left-side) conditionFalse retruning False.So { Dep:’Admin’} is not added to Employee object

const ConditionTrue = true;
const conditionFalse = false;



const Employee = {
EmpId:1,
Empname: 'Jack',
  ...(ConditionTrue && { salary: 600000}),
  ...(conditionFalse && { Dep:'Admin'}),
};
console.log(Employee)

Output

{ EmpId:1,Empname: 'Jack', salary: 600000 }

2. Ternary operator to add properties to object by condition

In this JavaScript program, we are adding a property to a javascript object by using the Spread and Ternary operator(?).In this example first expression(ConditionTrue) is returning True, So the property { salary: 600000}) is added to the Employee object.

In second condition First expression(left-side) conditionFalse returning False.So it will return an empty object and property is not added to the object.

const ConditionTrue = true;
const conditionFalse = false;



const Employee = {
EmpId:1,
Empname: 'Jack',
  ...(ConditionTrue?{salary: 600000}:{}),
  ...(conditionFalse?{Dep:'Admin'}:{}),
};


console.log(Employee)

Output

{ EmpId: 1, Empname: 'Jack', salary: 600000 }

3. Add object properties by condition ES6 JavaScript

Another way to add members to a javascript object is by using the object.assign() used to merge one object into another object. In this Javascript program, We have merged orgEmp object into Employee by adding a new property to salary:60000.

const OrgEmp = {
EmpId:1,
Empname: 'Jack',
Dept:'Admin'
};
const Employee = Object.assign({},OrgEmp , { salary:60000 });

console.log(Employee)

Output

{ EmpId: 1, Empname: 'Jack', Dept: 'Admin', salary: 60000 }

4. Add object properties by condition ES6 JavaScript

We can use object.assign() method with Ternary operator merge object based on condition. In this javaScript example if the First condition is True then the property salary: 60000 will add to a new object when the condition is False it will return NULL.The Second condition is False so { DeptID: ‘Admin’ } not added to object. ConditionThree is True,so { Empname: ‘Jack’ } is added in object Emp

const ConditionTrue = true;
const conditionFalse = false
const ConditionThree = true;
Emp= {}
Object.assign(Emp, ConditionTrue ? { salary: 60000 } : null,
                 conditionFalse ? { DeptID: 'Admin' } : null,
                 ConditionThree ? { Empname: 'Jack' } : null);
console.log(Emp)

Output

{ salary: 60000, Empname: 'Jack' }

Summary

In this post, we have learned how to add properties to objects by condition ES6 JavaScript with examples. By using spread operator with logical And operator, Ternary operator, object assign() to merge object into a new object with Ternary operator.

Related Posts