To add a property to an Object in JavaScript for known property names, use the dot (.) notation, and for adding dynamic property names, use the bracket ([ ]) notation. For adding multiple properties at once in an Object, use the spread operator (…). 

Using dot(.) notation

let obj = { place: "Naples", country: "Italy" };

obj.food = "Pizza";  // Adding 'food' property

console.log(obj);

// Output: { place: 'Naples', country: 'Italy', food: 'Pizza' }

In this code, we added a new known property called “food” with a value of “Pizza” to the object. It directly assigns a value to the property.

JavaScript Objects are collections containing key-value pairs where each key is either of type String or Symbol, and values can be any data type (primitives, functions, other objects, etc).

What if the key already exists in the Object?

If the key already exists in the Object, it will overwrite it with a new value.

let obj = { place: "Naples", country: "Italy" };

obj.place = "Rome";  // Overwriting the value of 'place'

console.log(obj);

// Output: { place: 'Rome', country: 'Italy' }

The above code shows that the key place’s value has been overwritten to Rome from Naples.

Adding property to Nested Objects

If the input is a nested object, you need to use the chaining of dot (.) notation.

While chaining the dot (.), ensure that the parent object exists; otherwise, an error will occur.

let obj = { person: {} };

obj.person.age = 30;  // Adding a property to a nested object

console.log(obj);

// Output: { person: { age: 30 } }

For a safer approach in nested objects, you can use the spread operator (…) as well.

let obj = { person: {} };

obj.person = { ...obj.person, age: 30 };

console.log(obj);

// Output: { person: { age: 30 } }

Adding Symbol Properties

For unique, non-enumerable keys (e.g., private props), you can use the Symbols.

let sym = Symbol('hidden');

let obj = {};

obj[sym] = 'secret';

console.log(obj[sym]);

// Output: 'secret'

console.log(Object.keys(obj));

// Output: [] (not enumerable)

Using Spread Operator (…) (ES6+ for Merging)

Using the spread operator (…), we can add single or multiple properties to an existing object efficiently. It does not modify the original object; instead, it always returns a new object with the added properties.

Adding a single property

let obj = { place: "Naples", country: "Italy" };

let new_object = { ...obj, name: 'Meloni' };

console.log(new_object);

// Output: { place: 'Naples', country: 'Italy', name: 'Meloni' }

We added a single property called “name” to the object.

Adding multiple properties

let obj = { place: "Naples", country: "Italy" };

let new_object = { ...obj, name: 'Meloni', party: 'Fratelli', age: 48 };

console.log(new_object);

// Output:
// {
//      place: 'Naples',
//      country: 'Italy',
//      name: 'Meloni',
//      party: "Fratelli",
//      age: 48
// }

We added three properties, named “name”, “party”, and “age”, to the object in one go without any iteration.

Using Bracket Notation ([ ]) (For Dynamic or Invalid Keys)

The primary advantage of using bracket notation is that it allows us to use computed property names, symbols, or keys that include special characters.

let obj = { place: "Naples", country: "Italy" };

let dynamic = 'age';  // Dynamic key

obj[dynamic] = 48;    // Adds 'age'

obj['full name'] = 'Giorgia Meloni';

console.log(obj);

// Output:
// {
//     place: 'Naples',
//     country: 'Italy',
//     age: 48,
//     'full name': 'Giorgia Meloni'
// }

As you can see, we added a key “age” and a value of 48 to the object dynamically. The age is a runtime-generated key. It is not possible with dot notation.

Then, we used a hard-coded key “full name” to add it to the main object. So, we added two key-value pairs.

That’s all!

Krunal Lathiya

With a career spanning over eight years in the field of Computer Science, Krunal’s expertise is rooted in a solid foundation of hands-on experience, complemented by a continuous pursuit of knowledge.