Two different ways to make javascript objects

Question

I am new to Javascript and now studying it...

var person = function() {
    this.name = "name"
};

var person2 = function() {
    var obj = {};
    obj.name = "name";
    return obj;
};

Let's suppose we have two functions shown above. It seems that objects can be created by using either of the functions. For example)

var p = new person();
var p2 = new person2();

My question is: What's difference between person vs person2? Are they exactly the same? If not which one is a more preferable way to use?

Thanks

The first once is a constructor function, the second one is just a function returning an object and could also be called without new. There is a difference, which should become clearer when you read about new: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. — Felix Kling
– Felix Kling, Commented Aug 11, 2013 at 23:11
@FelixKling Except it is called with new, which changes things. — Andrew Marshall
– Andrew Marshall, Commented Aug 11, 2013 at 23:13
@Andrew: Not really because the function explicitly returns an object. Calling it with or without new won't make a difference. (of course it makes a difference in so far that this will refer to different values inside the function, but it doesn't make a difference for the result of the function call). — Felix Kling
– Felix Kling, Commented Aug 11, 2013 at 23:14
@AndrewMarshall It technically makes a difference in this specific case if you're doing more obscure things. For example, p.constructor and p2.constructor are not the same. — Peter Olson
– Peter Olson, Commented Aug 11, 2013 at 23:23

Guffa · Accepted Answer · 2013-08-11 23:14:43Z

2

The normal way of creating an object is the first way.

The second way will create two objects, and one will be discarded. One object will be created before the function is called, just as with the first method, but because the function returns another object the first object will be discarded and the returned object will be used instead.

An important difference between the methods is that the second one can't use a prototype. Anything that you put in the prototype of the function will be applied to the object that ends up being discarded.

answered Aug 11, 2013 at 23:14

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Peter Olson Over a year ago

I disagree with that the first way is normal. I think the normal way is var p2 = {name: "name"};, possibly with the object returned by a function if it's used in multiple places.

Guffa Over a year ago

@PeterOlson: That's the normal way of using the new keyword. If you don't want to do that, that's a completely different matter.

Peter Olson Over a year ago

I agree with you there, but I think it's misleading to say it's the normal way of creating an object.

Peter Olson Over a year ago

@Guffa Becase "creating an object" does not mean "using the new keyword". Somebody might read the post and think that using an object literal to create an object is not "the normal way". @Fabrico There's not very many things that require a custom constructor. Pretty much anything you can do with a constructor you can do with a plain object.

Guffa Over a year ago

@woofmeow: Anything that you put in the prototype of the function will be applied to the object that is created using the new keyword, but with the second method that object is discarded. The object returned from the function won't have anything from the prototype.

|

Alex Shesterov · Accepted Answer · 2013-08-11 23:17:02Z

1

The difference is in the way you use the functions.

The first one is intended to be used as a constructor, this being set to the newly created object. It is intended to be used in combination with the operator new, as follows:

var bill = new person();

This is just like a normal constructor as in typical OOP language.

The second one is intended to be used as a normal function (without new), e.g.:

var bill = person();

You can use this way of object creation in combination with the builder pattern.

answered Aug 11, 2013 at 23:17

Alex Shesterov

27.8k14 gold badges91 silver badges110 bronze badges

1 Comment

Fabrício Matté Over a year ago

Worth noting that the 2nd one does not inherit from the constructor's prototype (obvious, but a notable change).

Collectives™ on Stack Overflow

Two different ways to make javascript objects

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related