There are the following methods to add Property or Key-Value Pair in JavaScript Object.
- Using the dot(.) operator
- Using the square bracket([]) notation
- Using the Object.assign() function
- Using the Spread Operator
- Using a Variable as a key
Method 1: Using the dot notation(.)
This is the most common and straightforward way to add a property to an object. You simply use the dot (.) followed by the property name and assign a value to it. It’s easy to read and understand but can only be used with valid JavaScript identifiers as property names.
Example
const mama = {
name: "PrafulChandra Rupani",
age: 73
}
console.log(mama)
console.log("After adding a new property using . notation")
mama.Hobby = "Watching Cricket and News"
console.log(mama)
Output
{ name: 'PrafulChandra Rupani', age: 73 }
After adding a new property using . notation
{
name: 'PrafulChandra Rupani',
age: 73,
Hobby: 'Watching Cricket and News'
}
In this example, we created a JavaScript Object using curly braces({ }) and added one more property using the dot notation.
Method 2: Using square bracket notation(.)
Similar to dot notation, bracket notation allows you to add a property to an object. The main difference is that you can use any string as the property name, including strings that are not valid JavaScript identifiers. This is useful when working with dynamic or computed property names.
Example
let get_property = function (property_name) {
return obj[property_name]
};
get_property("key1")
get_property("key2")
get_property("key3")
If we apply the bracket notation in our previous example, it looks like the one below.
const mama = {
name: "PrafulChandra Rupani",
age: 73
}
console.log(mama)
console.log("After adding a new property using square bracket notation")
mama["Hobby"] = "Watching Cricket and News"
console.log(mama)
Output
{ name: 'PrafulChandra Rupani', age: 73 }
After adding a new property using square bracket notation
{
name: 'PrafulChandra Rupani',
age: 73,
Hobby: 'Watching Cricket and News'
}
And we get the same output.
Method 3: Using the Object.assign() function
The Object.assign() is a built-in JavaScript method used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.
Example
const x = { a: 11, b: 21 }
const y = { b: 46, c: 19 }
const returnedY = Object.assign(x, y)
console.log(x)
console.log(returnedY)
Output
{ a: 11, b: 46, c: 19 }
{ a: 11, b: 46, c: 19 }
Method 4: Using the spread operator
The spread operator (…) is a more modern way to merge properties from one or more objects into a new object. For example, you can use it to add new properties to an existing object by creating and spreading the existing object along with the new properties.
Example
const obj = {}
const newObj = { ...obj, key: 'value' };
console.log(newObj)
Output
{ key: 'value' }
Method 5: Using a variable as a key
Sometimes you may need to use a variable as the property name. You can do this using bracket notation or a computed property name in an object literal. This allows you to create dynamic property names based on variable values.
Example
const obj = {};
const key = 'dynamicKey';
const value = 'dynamicValue';
// Using bracket notation
obj[key] = value;
// Or using Object.assign()
const newObj = Object.assign({}, obj, { [key]: value });
// Or using the spread operator
const anotherObj = { ...obj, [key]: value };
console.log(anotherObj)
Output
{ dynamicKey: 'dynamicValue' }
These are the most common methods for adding properties to JavaScript objects. Choose the method that best fits your use case and coding style preferences.

Niva Shah is a Software Engineer with over eight years of experience. She has developed a strong foundation in computer science principles and a passion for problem-solving.