JavaScript: 5 ways to add new properties to an existing object

This succinct, straightforward article will walk you through 5 different ways to add new properties to an existing object in JavaScript. We’ll write code with the modern feature of the language, such as arrow functions, spread operator syntax, etc. Without any further ado, let’s get started.

Dot Notation

Using dot notation is the simplest way to add new properties to an object. You just write the object name, followed by a dot (.), followed by the property name.

Example:

const obj = { name: 'Sling Academy', address: 'Hidden Forest' };
obj.newProperty = 'New Property';
console.log(obj);

Output:

{
  name: 'Sling Academy',
  address: 'Hidden Forest',
  newProperty: 'New Property'
}

Bracket Notation

Just write the object name, followed by a pair of square brackets [], and inside the brackets, you write the property name as a string. This is useful when the property name is not a valid identifier or when it is stored in a variable.

Example:

// Create an object
let person = {
  name: 'Wolf',
  age: 35,
};

// Add a new property using bracket notation
person['hobby'] = 'gaming';

// Use a variable as a property name 
let newKey = 'married';
person[newKey] = false;

console.log(person);

Output:

{ name: 'Wolf', age: 35, hobby: 'gaming', married: false }

Object.defineProperty()

This is a static method that allows you to add a property to an object with more options, such as making it read-only, enumerable, or configurable. You pass 3 arguments to this method: the object, the property name, and an object with some descriptors for the property.

Example:

let person = {
  name: 'Wolf',
  age: 35,
};

// Add a new property
Object.defineProperty(person, 'hobby', {
  value: 'reading',
  writable: false,
  enumerable: true,
  configurable: true,
});

console.log(person); 

Output:

{ name: 'Wolf', age: 35, hobby: 'reading' }

If you try to modify the new property hobby, you will end up with an error:

// try to update an unwritable property
person.hobby = 'sleeping';

// TypeError: Cannot assign to read only property 'hobby'

Spread Operator

This is an operator that allows you to create a copy of an object and add or modify some properties at the same time. You write three dots … followed by the object name, and then you write any additional properties inside curly braces {}.

Example:

// Create an object
let person = {
  name: 'Lady Butterfly',
  age: 999,
};

// Create a copy of the object and add a new property
let personCopy = { ...person, hobby: 'fighting' };

console.log(personCopy);

Output:

{ name: 'Lady Butterfly', age: 999, hobby: 'fighting' }

Object.assign()

This is another static method that allows you to copy the properties of one or more objects into another object. You pass at least 2 arguments to this method: the target object and one or more source objects. The properties of the source objects will be copied to the target object.

Example:

// Create an object
let person = {
  name: 'The Corrupted Monk',
  age: 800,
};

// Create another object
let hobby = {
  hobby: 'eating',
};

// Copy the properties of hobby into person using Object.assign()
Object.assign(person, hobby);

console.log(person);

Output:

{ name: 'The Corrupted Monk', age: 800, hobby: 'eating' }

This tutorial ends here. Happy coding & have a nice day!