"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > Methods to create Objects in JavaScript

Methods to create Objects in JavaScript

Published on 2024-11-07
Browse:802

Methods to create Objects in JavaScript

Introduction

There are quite few ways to create an Object in JavaScript.

  1. Object literals
  2. Object() constructor
  3. Object.create()
  4. Constructor function
  5. ES6 Class

Object literals

Probably this is the fastest and easiest way to create an Object in JavaScript. This is also called as an object initializer is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).

const newObject = {} // Simply create a new empty object

const newObject = { 
  someKey: "someValue", 
  anotherKey: "anotherValue" 
}

Object values can be either primitive data type or other object.

Object() constructor

You can create an object using the built-in Object constructor.
If passed value is null or undefined or no value passed then it creates and return an empty object.
If the value is already an object, it returns the same value.

// below options create and return an empty object
const ObjWithNoValue = new Object();
const ObjWithUndefined = new Object(undefined);
const ObjWithNull = new Object(null);

const newObject = { 
  someKey: "someValue", 
  anotherKey: "anotherValue" 
}

const sameObject = new Object(someObject);

sameObject['andAnotherKey'] = "one another value";

sameObject === newObject; // both objects are same. 

Object.create()

This method allows you to create a new object with a specific prototype. This approach enables the new object to inherit properties and methods from the prototype, facilitating inheritance-like behavior.

const person = {
  greet: function () {
    console.log(`Hello ${this.name || 'Guest'}`);
  }
}

const driver = Object.create(person);
driver.name = 'John';
driver.greet(); // Hello John

Constructor function

Before ES6, this was a common method to create multiple similar objects. Constructor is nothing but a function and with the help of a new keyword you can able to create an object.

It's a good practice that capitalize the first character of a function name when you construct the object with the "new" keyword.

function Person(name, location) {
  this.name = name;
  this.location = location;
  greet() {
    console.log(`Hello, I am ${this.name || 'Guest'} from ${this.location || 'Earth'}`);
  }
}

const alex = new Person('Alex');
alex.greet(); // Hello, I am Alex from Earth

const sam = new Person('Sam Anderson', 'Switzerland');
sam.greet(); // Hello, I am Sam Anderson from Switzerland

ES6 Class

A more modern approach helps to create object just like other OOP programming languages using class with constructor function to initialize properties and methods.

class Person {
  constructor(name, location) {
    this.name = name || 'Guest';
    this.location = location || 'Earth';
  }

  greet() {
    console.log(`Hello, I am ${this.name} from ${this.location}`);
  }
}

const santa = new Person('Santa');
santa.greet(); // Hello, I am Santa from Earth

References:

  • MDN - JavaScript
  • javascript.info
Release Statement This article is reproduced at: https://dev.to/nkumarm/methods-to-create-objects-in-javascript-48a0?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3