A JavaScript object is a collection of key-value pairs known as properties. Objects are commonly used for storing, manipulating, and sending data over the network.
There are multiple ways available to create an object in JavaScript. You can use:
- Object Literal
Object
Constructor- Constructor Function
Object.create()
MethodObject.assign()
Method- ES6 Classes
1 — Object Literal
The simplest and most popular way to create objects in JavaScript is by using the object literal syntax. All you need to do is put all your key-value pairs separated by a colon(:
) inside curly braces as shown below:
const fruits = {
mango: '🥭️',
apple: '🍎',
lemon: '🍋',
cherry: '🍒'
};
2 — Object
Constructor
The second way to create an object in JavaScript is by using the in-built Object()
constructor. You can use the new
keyword to initialize an instance of Object
:
const fruits = new Object();
Now to add properties to the above object, you have to use the dot (.
) notation as shown below:
const fruits = new Object();
fruits.mango = '🥭️';
fruits.apple = '🍎';
fruits.lemon = '🍋';
fruits.cherry = '🍒';
3 — Constructor Function
The new
keyword can also be used with a user-defined constructor function to create an object. A constructor function is nothing but a simple JavaScript function that, when called with a new
keyword, acts as a constructor and returns an object.
Here is an example:
function User(name, age) {
this.name = name;
this.age = age;
};
const user = new User('John Doe', 45);
In the above User
function, the this
keyword refers to the object being created, so the name
and age
become the properties of the newly created object.
This approach is better than the in-built Object
constructor initialization. It allows us to quickly create multiple objects of the same type without manually adding properties to each object.
4 — Object.create()
Method
The Object.create()
method allows us to create a new object, using an existing object as the prototype of the newly created object.
This method is especially useful when you want to create a new object from an already existing object.
The Object.create()
method takes up to two parameters. The first mandatory parameter is the object that serves as a prototype for the newly created object. The second parameter is an optional object which contains the properties to be added to the new object.
Let us say you have the following existing object:
const Vehicle = {
maker: 'BMW',
color: 'Black'
};
To create a new object by using the Vehicle
's prototype, you can do the following:
const vehicle = Object.create(Vehicle);
console.log(vehicle.maker); // Tesla
console.log(vehicle.color); // Red
You can also specify additional properties for the new object as a second parameter to Object.create()
with attribute options like configurable, enumerable, writable and value as shown below:
const vehicle = Object.create(Vehicle, {
type: {
value: 'Electric',
writable: true,
configurable: true,
enumerable: false
}
});
console.log(vehicle.maker); // Tesla
console.log(vehicle.color); // Red
console.log(vehicle.type); // Electric
Take a look at this MDN article to learn more about the Object.create()
method.
5 — Object.assign()
Method
The fifth way to create an object in JavaScript is by using the Object.assign()
method. This method takes one or more source objects as input and copies all enumerable own properties to the target object.
You can pass in any number of objects to Object.assign()
as parameters. The first parameter is the target object. The rest of the parameters are source objects containing properties that you want to apply to the target object.
Let us assume that you have the following two objects:
const car = {
maker: 'Model X',
color: 'Black'
};
const maker = {
name: 'Tesla'
};
Now you want to combine both car
and maker
objects to create a vehicle
object. Just use Object.assign()
to merge both existing objects to create a new object as shown below:
const vehicle = Object.assign({}, maker, car);
console.log(vehicle);
// { name: 'Tesla', maker: 'Model X', color: 'Black' }
Take a look at this guide to learn more about the Object.assign()
method.
6 — ES6 Classes
ES6 (ECMAScript 2015) introduced, for the first time, the concept of classes in JavaScript. You can use the class
keyword to define a new class in JavaScript instead of a function constructor, and then use the new
keyword to create an instance of it.
Let us look at the following example:
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHi() {
return `Hi ${this.name} 👋`;
}
}
const user = new User('Atta', 30);
console.log(user.sayHi()); // Hi Atta 👋
console.log(user.age); // 30
Conclusion
That's all folks for creating objects in JavaScript. We learnt about 6 distinct ways to create an object including object literal syntax, Object
constructor, constructor functions, Object.create()
, Object.assign()
, and ES6 classes.
All these methods are useful in different scenarios. The method commonly used by the JavaScript developers to define an object is object literal. It is a simple and fastest way to define an object with all required key-value pairs in JavaScript.
✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.