How to Append Values to an Object in JavaScript?

Do you want to add new values, but don’t know how to append them to an object in JavaScript? Read on!

In JavaScript, when you want to change how something works while running.

One way to do this is by adding new values to an existing object. JavaScript has built-in methods that help you accomplish this.

In this article, we’ll explain these methods and show you how to use them with examples. This will help you append values to objects in JavaScript.

What is JavaScript append to object?

Appending to an object in JavaScript means adding new properties to an existing object.

Here’s an illustration:

var obj = {
name: 'John',
age: 30
};

// Append a new property to the object
obj.address = '123 Main St';

console.log(obj);

In our given example, we are appending the address property to the obj object.

Then, the console.log(obj); statement will print the updated object to the console:

{ name: 'Example', age: 18, address: '143 Smith St, USA' }

As you can see, the obj object now includes the address property that we appended. This is a common way to add new data to an existing object in JavaScript.

Remember, the property name (in this case, address) is always followed by a colon and then the value of the property (‘143 Smith St, USA’).

The entire property is then added to the object using the dot notation (obj.address).

How to append Values to an object in JavaScript?

Here are the solutions on how to append to an object in JavaScript:

Solution 1: Use dot notation

If you know the name of the property, you can add it directly to the object using the dot notation.

Here’s the syntax:

var obj = {key1: 'value1', key2: 'value2'};
obj.key3 = 'value3';
console.log(obj); 

Here’s an example code:

var obj = {Name: 'Itsourcecode', Age: 18};
obj.Address= 'USA'; ✅
console.log(obj); 

Output:

{ Name: 'Itsourcecode', Age: 18, Address: 'USA' }

Solution 2: Use the square bracket notation

Square bracket notation is used when the name of the property is dynamically determined.

Here’s the syntax:

var obj = {key1: 'value1', key2: 'value2'};
var keyName = 'key3';
obj[keyName] = 'value3';
console.log(obj); 

For example:

var obj = {Name: 'Itsourcecode', Age: 18};
var keyName = 'Address';
obj['Address'] = 'USA'; ✅
console.log(obj);

Output:

{ Name: 'Itsourcecode', Age: 19, Address: 'USA' }

Solution 3: Object.assign() method

Object.assign() method is used to copy all properties that you defined in an object to another object (also known as source and target objects).

Here’s the syntax:

var obj = {key1: 'value1', key2: 'value2'};
Object.assign(obj, {key3: 'value3'});
console.log(obj); 

Here’s an example code:

var obj = {Name: 'Itsourcecode', Age: 20};
Object.assign(obj, {Address: 'USA'}); ✅
console.log(obj); 

Output:

{ Name: 'Itsourcecode', Age: 20, Address: 'USA' }

Solution 4: Use the spread operator

Using the spread operator allows you to expand iterable objects into multiple elements.

Here’s the syntax:

var obj = {key1: 'value1', key2: 'value2'};
obj = {...obj, key3: 'value3'};
console.log(obj);

Here’s an example code:

var obj = {Name: 'Itsourcecode', Age: 21};
obj = {...obj, Address: 'USA'}; ✅
console.log(obj);

Output:

{ Name: 'Itsourcecode', Age: 21, Address: 'USA' }

📌Please keep in mind that the spread operator creates a new object, so if there are other references to the original object, they will not see the new property.

Conclusion

In conclusion, appending to an object in JavaScript is a fundamental concept that allows you to add new properties to an existing object.

This can be achieved using various methods such as dot notation, square bracket notation, the Object.assign() method, and the spread operator.

Each method has its own use case and can be used depending on the specific requirements of your code.

We hope this article has provided you with enough information to understand the JavaScript append to object.

If you want to explore more JavaScript topics, check out the following articles:

• Age calculator in JavaScript
• JavaScript switch statement
• Math.round to 2 decimal places JavaScript

Thank you for reading Itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel
 · View all posts by Caren Bautista →