How to Create an Object in JavaScript

JavaScript

In this article you will learn how to create an object in JavaScript. In previous article we have explained data types in JavaScript. Basically object is an entity, which is collection of data in the form of key/value pair. There are four ways to create an object in JavaScript. Which are as follows:

  1. Object literal
  2. Create instance of Object
  3. Object constructor
  4. Object.create()

Object literal

This is the easiest way to create an object. In this way, we use curly braces { } to create an object.

let obj = {}
obj['name'] = 'Web Study Point'
obj['url'] = 'www.webstudypoint.com'
console.log(obj) 
// Output - { name: 'Web Study Point', url: 'www.webstudypoint.com' }

==================================================================

let obj = {}
obj.name = 'Web Study Point'
obj.url = 'www.webstudypoint.com'
console.log(obj) 
// Output - { name: 'Web Study Point', url: 'www.webstudypoint.com' }

==================================================================

let name = 'Web Study Point'
let url = 'www.webstudypoint.com'
let obj = {
	name,
	url
}
console.log(obj); 
// Output - { name: 'Web Study Point', url: 'www.webstudypoint.com' }

==================================================================

let obj = {
	name: 'Web Study Point',
	url: 'www.webstudypoint.com'
}
console.log(obj.name) // Output - 'Web Study Point'
console.log(obj.url) // Output - 'www.webstudypoint.com'

In this example you have seen, we have created an object using curly braces {} then we added the property using [‘item’] syntax and dot (.) syntax. So there are two option to add new property in object in JavaScript.

Instance of an Object (new keyword)

In this way, we use new keyword to create an object.

// Create an object
let obj = new Object()
obj.name = 'Web Study Point'
obj.url = 'www.webstudypoint.com'
console.log(obj) // Output - { name: 'Web Study Point', url: 'www.webstudypoint.com' }

// Access the items from an object
console.log(obj.name) // Output - 'Web Study Point'
console.log(obj.url)  // Output - 'www.webstudypoint.com'

In this example you have seen, we have created an object using new keyword then add properties using dot (.) syntax.

Object constructor

In this way, we use also new keyword to create an object but new keyword is used to create instance of class/function. This way is called constructor way.

Constructor is a function that is called when we create an instance of this function using new keyword.

// Create constructor
function studyPoint(name, url) {
	this.name = name
	this.url = url
}

let obj = new studyPoint('Web Study Point', 'www.webstudypoint.com')
console.log(obj) // Output - { name: 'Web Study Point', url: 'www.webstudypoint.com' }

// Access the items from an object
console.log(obj.name) // Output - 'Web Study Point'
console.log(obj.url)  // Output - 'www.webstudypoint.com'

In the above example you have seen, we have created a studyPoint() function then created a constructor using new keyword. So here studyPoint() is a constructor.

Object.create()

This is the oldest way to crate an object in JavaScript. It is the feature of ES5.

var obj = Object.create(new Object());
obj.name = 'Web Study Point'
obj.url = 'www.webstudypoint.com'
console.log(obj) // Output - { name: 'Web Study Point', url: 'www.webstudypoint.com' }
console.log(obj.name) // Output - 'Web Study Point'
console.log(obj.url)  // Output - 'www.webstudypoint.com'

Find length of an object

If you want to find the length of an object then first we will find keys of object then we will use length property which returns the total number of items from keys of object.

let obj = {
	name: 'Web Study Point',
	url: 'www.webstudypoint.com'
}
let objKeys = Object.keys(obj)
console.log(objKeys.length) // Output - 2

Conclusion

So using this article anyone can easily understand how to create an object in JavaScript.

If you want to improve this article or you find anything wrong/incorrect in this article then please leave a message using below comment box.

1 thought on “How to Create an Object in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × two =