Welcome Guest! (App Version 3.1)

websitnero logo name

How to Create Objects in JS

Object Creation in JavaScript

As, we read that objects form the very core of JavaScript, now we will see what are the various methods of making objects in JavaScript.

Following are the 4 methods of creating objects in JavaScipt:

  1. By Object Constructor Function (pre-built into JS Library)
  2. By custom Constructor Function
  3. By Object.create() Method
  4. By Object Literal

1. By Object Constructor Function

This is a pre-built constructor function in the JavaScript library. Any object that is present in the code of JavaScript will at last in the prototype chain will for sure having this constructor at the end of its chain, before further pointing to null as prototype.

We can make a new object with the following syntax:

var Obj1 = new Object;

Look at the following example to understand further:

Example

<script>

var obj1 = new Object;
obj1.name = "Felicity";
obj1.age = 23;

alert(obj1.name+" "+obj1.age);

</script>

2. By Custom Constructor Function

Though there is a default constructor given in JavaScript, but you can make an object with your own set of properties and methods. We do so by first making constructor function and then using the new keyword, to have an instance object of our constructor function.

Example

<script>

var alpha = function(name,age){
  this.name = name;
  this.age = age;
}

var obj1 = new alpha("Jenny",27); 

alert(obj1.name+" "+obj1.age);

</script>

3. By Object.create() methods

This is the third way of making object in JavaScript. This method can be used in 2 ways. Either passing an object within round braces which adds passed object as prototype of new object OR passing 'null' inside braces creating empty object.

Example

<script>

var obj1 = Object.create(null);
obj1.name = "Merilyn";
obj1.age = 48;

alert(obj1.name+" "+obj1.age);

</script>

4. By Object Literal

This is for most simple method and most used. Most of times when I need to create an object, I too use this only. Just open curly braces and add properties .... and .... whoosh, your object is created. This method is far more simple than any of the above 3 methods.

Example

<script>

var obj1 = {name:"Peter", age:29};

alert(obj1.name+" "+obj1.age);

</script>

All combined, look at the following example:

Example

<script>

//through object pre-made constructor function
var obj1 = new Object;
obj1.name = "Felicity";
obj1.age = 23;

//through custom constructor function
var alpha = function(name,age){
  this.name = name;
  this.age = age;
}
var obj2 = new alpha("Jenny",27); 

//through Object.create method (additionally also )
var obj3 = Object.create(null);
obj3.name = "Merilyn";
obj3.age = 48;

//literal notation
var obj4 = {name:"Peter", age:29};

alert(obj1.name+" "+obj1.age);
alert(obj2.name+" "+obj2.age);
alert(obj3.name+" "+obj3.age);
alert(obj4.name+" "+obj4.age);

</script>
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.