Creating Object Instances JavaScript- Cheat Sheet
Aabhas Saxena
IITian | Co - Founder Khabri Bai | Education was my escape from poverty, and it can be yours too ?? | Let's stay in touch, and navigate our paths side by side ??
In JavaScript, there are several ways to create object instances. Each method has its own use cases and benefits. Here are some of the most common ways that you will frequently encounter:
1. Object Literals:
This is the simplest way to create a single object instance.
const car = {brand: 'Toyota',
model: 'Corolla',
getDetails: function() {
return this.brand + ' ' + this.model;
}
};
console.log(car.getDetails()); // Logs: 'Toyota Corolla'
2. Constructor Functions:
These are used to create multiple instances with shared properties and methods.
function Car(brand, model) {
this.brand = brand;
this.model = model;
}
Car.prototype.getDetails = function() {
return this.brand + ' ' + this.model;
};
const car1 = new Car('Toyota', 'Corolla');
const car2 = new Car('Honda', 'Civic');
console.log(car1.getDetails()); // Logs: 'Toyota Corolla'
console.log(car2.getDetails()); // Logs: 'Honda Civic'
3. Classes:
ES6 introduced classes, which provide a more intuitive syntax for creating constructor functions and managing prototypes.
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
getDetails() {
return this.brand + ' ' + this.model;
}
}
const car1 = new Car('Toyota', 'Corolla');
const car2 = new Car('Honda', 'Civic');
console.log(car1.getDetails()); // Logs: 'Toyota Corolla'
console.log(car2.getDetails()); // Logs: 'Honda Civic'
4. Factory Functions:
These are regular functions that return new objects and are useful for creating multiple similar objects.
function createCar(brand, model) {
return {
brand: brand,
model: model,
getDetails: function() {
return this.brand + ' ' + this.model;
}
};
}
const car1 = createCar('Toyota', 'Corolla');
const car2 = createCar('Honda', 'Civic');
console.log(car1.getDetails()); // Logs: 'Toyota Corolla'
console.log(car2.getDetails()); // Logs: 'Honda Civic'
5. Object.create():
This method creates a new object with a specified prototype object and properties.
const carPrototype = {
getDetails: function() {
return this.brand + ' ' + this.model;
}
};
const car1 = Object.create(carPrototype);
car1.brand = 'Toyota';
car1.model = 'Corolla';
const car2 = Object.create(carPrototype);
car2.brand = 'Honda';
car2.model = 'Civic';
console.log(car1.getDetails()); // Logs: 'Toyota Corolla'
console.log(car2.getDetails()); // Logs: 'Honda Civic'
6. ES6 Object.assign():
This method copies properties from one or more source objects to a target object.
const car = {
brand: 'Toyota',
model: 'Corolla'
};
const additionalProperties = {
getDetails: function() {
return this.brand + ' ' + this.model;
}
};
const carInstance = Object.assign({}, car, additionalProperties);
console.log(carInstance.getDetails()); // Logs: 'Toyota Corolla'
Summary:
- Object Literals: Simple and quick for single instances.
- Constructor Functions: Versatile for creating multiple instances.
- Classes: Modern and intuitive syntax for constructor functions.
- Factory Functions: Flexible functions returning new objects.
- Object.create(): Creates objects with a specified prototype.
- Object.assign(): Copies properties into a target object.
Each of these methods has its own advantages depending on your use case.