JavaScript Objects Create

JavaScript object creation process can be done by following ways.

Using Object Literal
Using a new keyword with a constructor function
Object.create method
Object.assign() method
Using ES6 Class Statement

Using Object Literal

Wrap every object property inside the curly braces { } and separate every key-value pair with a comma(,). Please keep in mind that, property refers to key-value where property key name and value is separated by colon(:)

To create an object using object literal, follow the following rule.

Step 1: Wrap object properties inside the curly braces{}
Step 2: use colon: as a separator between the property name(key) and value.
Step 3: Use comma(,) to separate every javascript property. Property refers to object key and its value.

Source Code

          
            var person = { 
name: "John Doe", //name Property
age: 50, //age  Property
job:"Developer" //job  Property 
getInfo : function () {
     console.log(this.name + ' ' + this.job);
  }
};
 person.getInfo(); 
//output: John Doe Developer

Try it now

Creating Object Using Constructor Function

Javascript object can be created using the constructor function in the following ways:

Using Built-in Constructor Function
Using user Defined Function

When the javascript constructor function is invoked by a new operator then it creates a new instance of the object and returns it.

Built-in Constructor Function

Javascript provides various built-in object constructor functions. That is used to create a new object.

The built-in object constructor function when invoked by a new operator then it creates a new object and returns us then we can add multiple properties and methods to it.

Here, we are using the built-in object constructor function:Object to create a new object.

Source Code

          
            const userInfo = new Object();
userInfo.name = "John Doe";
userInfo.job = "Web developer";
userInfo.getInfo = function () {
  console.log(this.name + " " + this.job);
};
userInfo.getInfo(); //John Doe

Try it now

Creating Object Using User-Defined Constructor functions

Follow the following steps to create an object using a user-defined constructor function:

Step 1: Create a user-defined javascript function.
Step 2: Assign all the properties and methods to the object using this.
Step 3: Invoke javascript function with the new operator. It creates an object for you.

Let us understand it with the help of an example.

Source Code

          
            //Constructor function
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.fullName = function () {
    return this.name + " " + this.age + " " + this.job;
  };
}
//Create a as many objects as you want
let p1 = new Person("smith", 28, "developer");
let p2 = new Person("John Doe", 30, "designer");

Try it now

creating Object using Object.create method

The javascript Object.create() method is used to create a new object, using an existing object as the prototype of the newly created object. We pass the Prototype as the first argument to the Object.create() method.

The following code creates a new object p and sets the person as to its prototype.

Source Code

          
            const person = {
  getInfo: function () {
    document.write("My name is " + this.name + " and my age is " + this.age);
  },
};
const p = Object.create(person);
p.name = "John Doe";
p.age = 32;
p.getInfo();

Try it now

The Second argument to object.create is a property descriptor.

Source Code

          
            const person = {
  getInfo: function () {
    document.write("My name is " + this.name + " and my age is" + this.age);
  },
};
descriptors = { name: { value: "John Doe" }, age: { value: 32 } };
const p = Object.create(person, descriptors);
p.getInfo();

Try it now

Creating Object Using Object.assign() method

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. Objects are assigned and copied by reference. It will return the target object.

Source Code

          
            const obj1 = { a: 1, b: 2 };
const obj2 = { b: 4, c: 5 };
const returnedTarget = Object.assign(obj1, obj2);
console.log(obj1);
console.log(returnedTarget);

Try it now

Creating Object Using Class

The object is basically the instance of the class. So, to create an object through class, use a new operator.

Source Code

          
            class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  // Method
  getInfo() {
    return this.name + " " + this.age;
  }
}
const person = new Person("Smith", 32);
console.log(person.getInfo()); // Smith 32

Try it now

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4