How do you add a property to an object in JavaScript?

In JavaScript, objects are collections of key-value pairs. Adding a new property to an object is a common task when working with JavaScript objects.

Here are various ways to add a property to an object:

Method 1: Dot notation:

The easiest way to add a property to an object is by using dot notation. In dot notation, we use the dot (.) operator to access an object’s properties.

// Define an object
const car = {
  make: "Honda",
  model: "Civic",
  year: 2018,
};

// Add a new property using dot notation
car.color = "blue";

console.log(car); // { make: 'Honda', model: 'Civic', year: 2018, color: 'blue' }

In the above code, we define an object called car with three properties: make, model, and year. We then add a new property called color using dot notation.

Method 2: Bracket notation:

In bracket notation, we use square brackets [] to access an object’s properties. We can use bracket notation to add a new property to an object.

// Define an object
const car = {
  make: "Honda",
  model: "Civic",
  year: 2018,
};

// Add a new property using bracket notation
car["color"] = "blue";

console.log(car); // { make: 'Honda', model: 'Civic', year: 2018, color: 'blue' }

In the above code, we define an object called car with three properties: make, model, and year. We then add a new property called color using bracket notation.

Method 3: `Object.assign()` method:

The Object.assign() method is a built-in JavaScript method that allows us to copy the values of all enumerable properties from one or more source objects to a target object. We can use Object.assign() to add new properties to an object.

// Define an object
const car = {
  make: "Honda",
  model: "Civic",
  year: 2018,
};

// Add a new property using Object.assign() method
Object.assign(car, { color: "blue" });

console.log(car); // { make: 'Honda', model: 'Civic', year: 2018, color: 'blue' }

In the above code, we define an object called car with three properties: make, model, and year. We then add a new property called color using Object.assign() method.

Method 4: Spread operator:

The spread operator (...) can be used to create a new object with properties from an existing object and additional properties. We can use the spread operator to add new properties to an object.

// Define an object
const car = {
  make: "Honda",
  model: "Civic",
  year: 2018,
};

// Add a new property using spread operator
const carWithColor = { ...car, color: "blue" };

console.log(car); // { make: 'Honda', model: 'Civic', year: 2018 }
console.log(carWithColor); // { make: 'Honda', model: 'Civic', year: 2018, color: 'blue' }

In the above code, we define an object called car with three properties: make, model, and year. We then create a new object called carWithColor using the spread operator and add a new property called color.

Method 5: `DefineProperty()` method:

The Object.defineProperty() method is another built-in JavaScript method that allows us to add a new property to an object or modify an existing one. This method provides more control over the property’s behavior, such as making it read-only or configurable.

// Define an object
const car = {
  make: "Honda",
  model: "Civic",
  year: 2018,
};

// Add a new property using Object.defineProperty() method
Object.defineProperty(car, "color", {
  value: "blue",
  writable: true,
  enumerable: true,
  configurable: true,
});

console.log(car); // { make: 'Honda', model: 'Civic', year: 2018, color: 'blue' }

In the above code, we define an object called car with three properties: make, model, and year. We then use Object.defineProperty() method to add a new property called color. We also set the property’s values for writable, enumerable, and configurable to true.

Method 6: Class constructor:

If we’re working with classes, we can add properties to an object using a class constructor.

// Define a class
class Car {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }
}

// Create a new instance of Car class
const car = new Car("Honda", "Civic", 2018);

// Add a new property using class constructor
car.color = "blue";

console.log(car); // Car { make: 'Honda', model: 'Civic', year: 2018, color: 'blue' }

In the above code, we define a class called Car with a constructor function that takes in make, model, and year as arguments. We then create a new instance of the Car class using the new keyword and add a new property called color to it.