How to add a new property to JavaScript object?

Add a new property to JavaScript object

This video covers 2 fundamental approaches of adding new property to a JavaScript Object. The first one is without modifying the existing object and second approach is by changing the object itself.

Read more about assign() method on JavaScript Object here:

Code

let transaction = {id: 119 ,name: 'Westfield clothing', amount: 45}

//Without Modifying transaction
let newTransaction = Object.assign({}, transaction, {category: 'Personal'})
console.log('Transaction: ', transaction);
console.log('New Transaction: ', newTransaction);


//Modify transaction: Approach 01
let newTransaction = Object.assign(transaction, {category: 'Personal'});
console.log('Transaction: ', transaction);
console.log('New Transaction: ', newTransaction);


//Modify transaction: Approach 02
transaction.category = 'Personal';
console.log('Transaction: ', transaction);

Full Transcript

00:00 Welcome to JavaScript series and I am Deeksha Sharma from bonsaiilabs. Today we will look at one of the most frequently performed operations on JavaScript objects, which is to add a new property to it. Consider this example where transaction is an object containing collection of properties including id, name, amount and their corresponding values. The term property is given to each of these key value pairs. Now we need to add a new property to transaction object which contains the key category and its corresponding value personal. Before adding the property to an object, it is necessary for you to identify whether you can or you should modify the existing object or you should instead create a new object with the existing properties, in addition to this new property. Most of the time you will not find a convincing reason to mutate or modify the current object. However, if you still absolutely need to modify it, you can do so.

00:57 Let's look at them one by one. To add a property without modifying the object, we can use a method available on JavaScript objects. It is called assign(). This method copies all the properties from various source objects into a target object. If you use it wisely, then you can avoid mutating the original object. The first parameter is target, which is also the resulting object that is returned when object.assign() is called. It contains all the properties from source objects merged into it. The second parameter sources could be multiple source objects whose properties are merged into the target object. We'll write some code in order to understand its usage. We have the transaction object here with id, name and amount. Now we want to add a category with value personal without ever mutating this transaction object. We can do so by initializing a variable called newTransaction.

01:54 We will call Object.assign() method. Now the first parameter is the target object, which will be this new empty object. Giving empty object ensures that we don't modify the transaction object itself. The second parameter will be the source objects whose properties would be copied inside the target object. We need all the properties of transaction object and our new property category personal. Let's log the value of transaction object to see if it's modified and also our new transaction object. We are ready to run this and here it is. Transaction object is as-is and the newTransaction object now contains the id, name, amount and category. You should always strive for this approach in your code for the most part until you absolutely need to modify the object itself. Now I want to show you something interesting. Let's remove this code and what if we don't give the target object and just use object.assign() with the source objects.. Any guesses?

02:58 Well, whatever you pass as a first parameter becomes that target object which means in this case transaction object will be modified and your source object which in this case category and its value personal will be copied into this transaction itself. We already have the log statements ready, let's run it again. If you look at both the transaction and new transaction objects are same. The original object is also modified because we didn't create it the copy by passing an empty object. Instead, supplied transaction object as the target. So in a nutshell, if your intention is not to modify the original object, then don't forget to pass these empty brackets as the first argument to assign() method. If you don't care about the original object being mutated, you can simply add a new property using the dot notation on transaction object, and you can assign the value to key category. Let's log the value of transaction and now you have the new property available. I hope this quick session was useful for you. You can find the code in the description below and I've added the link for object.assign() documentation in case you want to give it a read. Thank you so much for watching and be sure to subscribe if you haven't already. Until then, my friends keep learning and share your knowledge.---