Ebooks

Creating objects in JavaScript

JavaScript create object tutorial shows how to create objects in JavaScript. Objects can be created using an object literal, function constructor, or class definition. Objects are often created with creational builder and factory desing patterns.

In this tutorial we use Node.js to execute our examples.

Object literal

In object literal notation, we place object attributes separated by comma inside curly brackets {}.

The attribute names and values are separated with colon.

object_literal.js
const person = {
    firstName: 'John',
    lastName: 'Doe',
    email: 'jdoe@example.com',
    info: function() {
        return `${this.firstName} ${this.lastName}, ${this.email}`
    }
};

console.log(person.info());

The example creates an object using literal notation.

$ node object_literal.js
John Doe, jdoe@example.com

This is the output.

Object constructor

Objects can be created with new Object() constructor. Attributes are then dynamically added using dot operator.

object_constructor.js
let person = new Object();

person.firstName = "John";
person.lastName = "Doe";
person.email = 'jdoe@example.com';

person.info = function(){
    return `${this.firstName} ${this.lastName}, ${this.email}`;
};

console.log(person.info());

The example creates an object with Object constructor.

Function constructor

A function constructor is created with a function keyword. It takes the values as parameters. The attributes are set using this keyword. Methods are created with this and function keywords. New objects are created with new keyword.

function_constructor.js
function Person(firstName, lastName, email) {

    this.firstName = firstName;
    this.lastName = lastName;
    this.email = email;

    this.info = function() {
        return `${this.firstName} ${this.lastName}, ${this.email}`;
    }
}

let person = new Person('John', 'Doe', 'jdoe@example.com');
console.log(person.info());

The example creates an object with function constructor.

Class definition

Objects are defined with class keyword and generated with new keyword. This is a classic way of creating objects known from languages like C# or Java. JavaScript uses constructor keyword to define an object constructor. Attributes are set with this keyword.

class_definition.js
class Person {

    constructor(firstName, lastName, email) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.email = email;
    }

    info() {
        return `${this.firstName} ${this.lastName}, ${this.email}`;
    }
}

let person = new Person('John', 'Doe', 'jdoe@example.com');
console.log(person.info());

The example creates an object using class definition.

Builder pattern

Builder pattern is a creational desing pattern used to create objects. It builds a complex object using simple objects by providing a step by step approach. Builder pattern uses fluent API to create objects.

builder_pattern.js
let Person = function (firstName, lastName, email) {

    this.firstName = firstName;
    this.lastName = lastName;
    this.email = email;
}

let PersonBuilder = function () {

    let firstName;
    let lastName;
    let email;

    return {
        setFirstName: function (firstName) {
            this.firstName = firstName;
            return this;
        },
        setLastName: function (lastName) {
            this.lastName = lastName;
            return this;
        },
        setEmail: function (email) {
            this.email = email;
            return this;
        },
        info: function () {
            return `${this.firstName} ${this.lastName}, ${this.email}`;
        },
        build: function () {
            return new Person(firstName, lastName, email);
        }
    };
};

var person = new PersonBuilder().setFirstName('John').setLastName('Doe')
    .setEmail('jdoe@example.com');
console.log(person.info());

The example creates an object using builder design pattern.

Factory pattern

With Factory pattern, we create objects without exposing the creation logic to the client.

factory_pattern.js
const personFactory = (firstName, lastName, email) => {
    return {
        firstName: firstName,
        lastName: lastName,
        email: email,
        info() {
            return `${this.firstName} ${this.lastName}, ${this.email}`;
        }
    };
};

let person = personFactory('John', 'Doe', 'jdoe@example.com');

console.log(person.info());

The example creates an object with factory pattern.

In this tutorial, we have created JavaScript objects using different syntax. We have also presented two creational desing patterns, namely builder pattern and factory pattern.

You might also be interested in the following related tutorials: JavaScript builder pattern tutorial, or list all JavaScript tutorials.