How to Add Properties to an Object in JavaScript?

Here are a few ways to add properties to JavaScript objects:

1. Using Dot Notation

Dot notation is the simplest way to add a property to an object.

For example:

// Defining an object with some properties
const book = {
  title: 'JavaScript Basics',
  author: 'John Doe',
  year: 2023
};

// Accessing properties using dot notation
console.log(book.title);  // Output: JavaScript Basics
console.log(book.year);   // Output: 2023

// Adding a new property to the object
book.pages = 200;
console.log(book.pages);  // Output: 200

Note: You cannot use special characters or start the property name with a number when using dot notation.

For example, the following will throw a syntax error:

book.12pages = 300;  // SyntaxError: Invalid or unexpected token

2. Using Bracket Notation []

Bracket notation comes in handy when property names are dynamic or not valid identifiers (e.g., starting with a number or containing spaces).

Syntax

object['new_property'] = new_value;

For example:

const car = {
  model: 'Toyota',
  year: 2022
};

// Using bracket notation to add a property
car['color'] = 'red';
console.log(car.color);  // Output: red

You can also use variables to dynamically add properties:

let propertyName = 'engine';
car[propertyName] = 'V8';
console.log(car.engine);  // Output: V8

3. Using the Object.defineProperty() Method

The Object.defineProperty() method allows you to add properties with more control over their behavior. You can configure attributes like whether the property is writable or enumerable.

Syntax

Object.defineProperty(obj, new_property, configuration);
//Object.defineProperty() method of JavaScript to define new properties to an existing object 

For example:

let obj = {};

// Adding a non-writable property
Object.defineProperty(obj, 'id', {
  value: 101,
  writable: false  // The property can't be modified
});

obj.id = 500;  // No effect, as 'id' is non-writable
console.log(obj.id);  // Output: 101

// Adding a writable property
Object.defineProperty(obj, 'name', {
  value: 'JavaScript Master',
  writable: true  // The property can be modified
});

obj.name = 'Code Expert';
console.log(obj.name);  // Output: Code Expert

4. Using the Object.assign() Method

Object.assign() is used to copy properties from one object to another. It can also be used to add properties to an existing object.

Syntax

//Object.assign() method 

Object.assign(target, source); 

For example:

let student = { name: 'Alice', age: 22 };
let additionalInfo = { gender: 'Female', nationality: 'American' };

// Adding properties from additionalInfo to student
Object.assign(student, additionalInfo);
console.log(student);
// Output: { name: 'Alice', age: 22, gender: 'Female', nationality: 'American' }

5. Using the Spread Operator (...)

The spread operator (...) allows you to create a shallow copy of an object and add new properties to it inline.

Syntax

//adding property1 & property2 to object using spread operator of JavaScript
object = { ...object, property1: value1, property2: value2 }

//adding all properties from new_object to object using spread operator of JavaScript
object = { ...object, ...new_object }

For example:

let user = { name: 'Tom', age: 30 };
console.log(user);
// Output: { name: 'Tom', age: 30 }

// Adding new properties using spread operator
user = { ...user, city: 'New York', occupation: 'Developer' };
console.log(user);
// Output: { name: 'Tom', age: 30, city: 'New York', occupation: 'Developer' }

// Merging two objects using spread operator
let address = { country: 'USA', zip: '10001' };
user = { ...user, ...address };
console.log(user);
// Output: { name: 'Tom', age: 30, city: 'New York', occupation: 'Developer', country: 'USA', zip: '10001' }