Object literal vs object constructor

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will discuss the main difference between objects created using object literal and constructor function and when to use one over the other. In Part 53 of JavaScript tutorial we discussed some of the syntactical differences.

Creating an object using object literal notation

[script type="text/javascript"]
var employee =
{
name : "John"
}

// Create a new variable and assign the employee object
var newEmployee = employee;

// Change the name property of the employee object using the new variable

// Retrieve the name property from the original employee object
// Notice that name is changed to Mary
[/script]

Output : Mary

Objects created using object literals are singletons. This means when a change is made to the object, it affects that object across the entire script.

Creating an object using constructor function

[script type="text/javascript"]
var emp = function ()
{
}

// Create an instance of employee
var employee = new emp();

// Create an other instance of employee
var newEmployee = new emp();

// Change the name property of the newEmployee object

// Retrieve the name property from the original employee object
// Notice that name is not changed to Mary, it is still John
[/script]

Output : John

Object defined with a function constructor lets you have multiple instances of that object. This means change made to one instance, will not affect other instances.

So, when to use one over the other?
If you need multiple instances of the object use constructor function where as if you need just one instance of the object then use literal notation.

[Mark]

Great explanation! I looked at 4 other sources before I came across this one. Out of all of them, this one was the best. Short and to the point.

[abhiktzp]

Hi, this is a good example to understand the difference. I have read so many tutorials explaining the same and suggested to use function constructor if I have more instances but please see the example and help me to understand the differences.
var s = {
x:5
}
var t = Object.create(s);//instead of t=s;
alert(s.x);
alert(t.x);
t.x=10;
alert(s.x);
alert(t.x);

We can even use object literals if we have more instances. Do you have any other difference?

[Flora-hoeo]

Best teacher ever! Thank you so much for the great content and explanations.

[prakashnatarajan]

Hi kudvenkat, since you are assigning an object literal to another object changes made to one will affect the other. Because assigning an object will refer to the same memory reference. If you are taking Object.create() method changes made in one will not affect the other

[adhasmana]

I really like and follow your work. difference is summarize in following answer, "It essentially boils down to if you need multiple instances of your object or not; object defined with a constructor lets you have multiple instances of that object. Object literals are basically singletons with variables/methods that are all public."

[basheeral-momani]

hello pregem can You do for us a tutorial about google closure library
please

[raziqijr]

kudvnkat when u assign newEmployee = employee in object literal this is not the same when you create two object using constructor function. when you create object using constructor they are separate objects if you change one the other cant be changed. in first example you assign the same object to another variable that mean they are same if you change one the other one will also change.

[NoahNobody]

Hi, like the other commenter, I would also like to request AngularJs after the JavaScript series is over.
Thanks.

[pastuh]

Looks like object constructor is best to use..

[NoHandle]

Of course it has not changed in the second example cause you have not done var newEmployee= new emp(); newEmployee =employee; like before;