menu

JavaScript/Typescript - 16 Topics

DEEP DIVE INTO

JavaScript/Typescript

Topic:extending objects

menu

Extending objects in JavaScript allows you to add new properties or methods to an existing object.

There are various methods to achieve this, and the choice of method depends on your specific use case and coding style.

Here are several common approaches to extend objects in JavaScript:

1. Using Dot Notation:

You can add new properties or methods to an object using dot notation. This approach is the simplest and most common.

javascriptconst person = {
  name: "John",
  age: 30,
};

person.city = "New York"; // Add a new property
person.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

console.log(person);
person.greet();

2. Using Bracket Notation:

You can also add new properties or methods to an object using bracket notation. This is particularly useful when the property name is stored in a variable.

javascriptconst person = {
  name: "John",
  age: 30,
};

person["city"] = "New York"; // Add a new property using bracket notation
const methodName = "greet";
person[methodName] = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

console.log(person);
person.greet();

3. Using Object.assign():

The Object.assign() method allows you to copy the properties of one or more source objects into a target object.

This can be used to extend an object by adding properties from other objects.

javascriptconst person = {
  name: "John",
  age: 30,
};

const extendedInfo = {
  city: "New York",
};

Object.assign(person, extendedInfo);

console.log(person);

4. Using Spread Operator (ES6):

In modern JavaScript (ES6 and later), you can use the spread operator to create a copy of an object and extend it with additional properties.

javascriptconst person = {
  name: "John",
  age: 30,
};

const extendedInfo = {
  city: "New York",
};

const extendedPerson = { ...person, ...extendedInfo };

console.log(extendedPerson);

5. Using Object.setPrototypeOf():

You can set the prototype of an object to extend it by adding methods and properties from another object.

javascriptconst person = {
  name: "John",
  age: 30,
};

const extendedInfo = {
  city: "New York",
};

Object.setPrototypeOf(person, extendedInfo);

console.log(person);
console.log(person.city);

Choose the method that best suits your specific needs and coding style.

The approach you select may depend on factors like code readability, compatibility, and whether you're working in an ES6+ environment.

1280 x 720 px