
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
Object literals vs constructors in JavaScript
Object literals and constructors both are used to create an Object in JavaScript. An object created by the object literals is a singleton. This means when a change is made to the object, it affects that object across the entire script.
If an object created by a function constructor has multiple instances of the object. This means the changes made to one instance, will not affect other instances.
Object Literal Notation − Let’s create user details where we have the key, name, age, and name of the company. So we are creating an object named userDetails.
const userDetails = {name: "Aman", age: "22", Company: "tutorialspoint"};
Object Constructor Notation − In constructor Notation, we are creating the same object but in a different way. By calling the constructor function with the "new" keyword.
const userDetails = new User("Aman", 22, "tutorialspoint");
Methods and Properties
Objects in JavaScript have methods and properties, whether they are built with a constructor function or with literal notation. In JavaScript, the keyword called 'this' is the object that "possesses" the code. The value of this, when used in an object, is the object itself.
Let’s demonstrate how to define them.
Object Literal Notation −
const Tutorialspoint = { 'url': " https://www.tutorialspoint.com/index.htm", 'printUrl': function(){ console.log(this.url); } };
Object constructor Notation −
function Tutorialspoint(){ this.url = " https://www.tutorialspoint.com/index.htm"; this.printUrl = function(){ console.log(this.url); } }
Example 1
In the following example, we are creating an object and printing its value using literal notation.
<!DOCTYPE html> <html lang="en"> <head> <title>Literal Notation</title> </head> <body> <script> const Tutorialspoint = { url: " https://www.tutorialspoint.com/index.htm", printUrl: function () { document.write(this.url); }, }; Tutorialspoint.printUrl(); //Literal Notation </script> </body> </html>
Example 2
In the following example, we are creating an object and printing its value using constructor notation.
<!DOCTYPE html> <html lang="en"> <head> <title>Literal Notation</title> </head> <body> <script> function Tutorialspoint() { this.url = " https://www.tutorialspoint.com/index.htm"; this.printUrl = function () { document.write(this.url); }; } var link = new Tutorialspoint(); link.printUrl(); //Literal Notation </script> </body> </html>
- Related Articles
- Integer literals vs Floating point literals in C#
- Character constants vs String literals in C#
- Built-in javascript constructors?
- Type difference of character literals in C vs C++
- Tagged Template Literals in JavaScript
- Javascript Map vs Object — What and when?
- Object Identity, and Objects versus Literals
- How to concatenate regex literals in JavaScript?
- How to use a Boolean in JavaScript Constructors?
- ES6/ECMA6 template literals not working in JavaScript?
- Randomly shuffling an array of literals in JavaScript
- Are the constructors in an object invoked when de-serialized in Java?
- Flattening a deeply nested array of literals in JavaScript
- Sorting an array of literals using quick sort in JavaScript
- Removing duplicates from a sorted array of literals in JavaScript
