# How to create an object in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Jun 13, 2020, updated Oct 27, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-create-object

> Learn about different ways to create an object in JavaScript like object literal syntax, constructor function, Object.create() method, Object.assign() method, and ES6 classes.

A JavaScript [object](https://attacomsian.com/blog/objects-prototypes-classes-javascript#objects) 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 6 ways to create an object in JavaScript. You can use:

1. Object Literal
2. `Object` Constructor
3. Constructor Function
4. `Object.create()` Method
5. `Object.assign()` Method
6. ES6 Classes

## Create an Object using 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:

```javascript
const fruits = {
    mango: '?️',
    apple: '?',
    lemon: '?',
    cherry: '?'
}
```

## Create an Object using `Object` Constructor

The second way to create an object in JavaScript is using the in-built `Object()` constructor. 

You can use the `new` keyword to initialize an instance of `Object`:

```javascript
const fruits = new Object()
```

Now to [add properties](https://attacomsian.com/blog/javascript-object-add-key) to the above object, you have to use the dot (`.`) notation as shown below:

```javascript
const fruits = new Object()

fruits.mango = '?️'
fruits.apple = '?'
fruits.lemon = '?'
fruits.cherry = '?'
```

## Create an Object using 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:

```javascript
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.

## Create an Object using `Object.create()` Method

The `Object.create()` method allows us to create a new object, using an existing object as the [prototype](https://attacomsian.com/blog/objects-prototypes-classes-javascript#prototypes) of the newly created object.

This method is helpful 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:

```javascript
const Vehicle = {
    maker: 'BMW',
    color: 'Black'
}
```

To create a new object by using the `Vehicle`'s prototype, you can do the following:

```javascript
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:

```javascript

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create) to learn more about the `Object.create()` method.

## Create an Object using `Object.assign()` Method

The [`Object.assign()`](https://attacomsian.com/blog/javascript-object-assign) method is another way to create an object in JavaScript. 

It takes one or more source objects as input and copies all their enumerable own properties to the target object.

You can pass 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 you want to apply to the target object.

Let us assume that you have the following two objects:

```javascript
const car = {
    maker: 'Model X',
    color: 'Black'
}

const maker = {
    name: 'Tesla'
}
```

Now you want to combine `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:

```javascript
const vehicle = Object.assign({}, maker, car)

console.log(vehicle)

// { name: 'Tesla', maker: 'Model X', color: 'Black' }
```

## Create an Object using ES6 Classes

ES6 (ECMAScript 2015) introduced the concept of [classes in JavaScript](https://attacomsian.com/blog/javascript-classes). 

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.

Let us look at the following example:

```javascript
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
```