1

I have noticed I can create the same object using a constructor in two different ways.

var myObj = Object()

var myObj = new Object()

I can add properties to both using these methods. myObj.age = 1 and myObj['age'] = 1. The properties of both can be accesed the same way.

So what is the actual difference between these two ways I created myObj? Also is one of these the better way to create an object?

Vader
  • 4,972
  • 8
  • 26
  • 43
  • [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new) – Pointy Jan 24 '15 at 14:37
  • the "this" pointer within the constructor/methods is window-object or undefined without new-operator, depends on strict-mode on or off. When new-operator is used then "this" is the instance. – Blauharley Jan 24 '15 at 14:38
  • Without using new-operator you would add a property to the window-object and not to an instance. – Blauharley Jan 24 '15 at 14:45
  • possible duplicate of [What is the 'new' keyword in JavaScript?](http://stackoverflow.com/questions/1646698/what-is-the-new-keyword-in-javascript) – Blauharley Jan 24 '15 at 14:56

2 Answers2

4

The difference is that the first one simply calls Object() as a function, within the scope of the window object.

The second one actually instantiates a new object. It's the one you want to use to create an object.

The difference may not be obvious with the Object() function, but let's say you create your own type, like so:

function User(name) {
    this.name = name;
}
var u1 = User("John");
var u2 = new User("Jane");

console.log(u1); // *undefined* because `User()` doesn't return anything.
console.log(this.name); // John
console.log(window.name); // John
console.log(u2.name); // "Jane"

The Object function itself is a special case--it does create a new Object. But since most functions don't work that way, it's good to get in the habit of using the new keyword when instantiating things. If you're just creating a plain old Object, on the other hand, most people prefer the more concise syntax:

var myObj = {};
StriplingWarrior
  • 135,113
  • 24
  • 223
  • 283
  • so, `console.log(this.name); // John` and `console.log(window.name); // John` are both things that I should not be able to do? – Vader Jan 24 '15 at 14:57
  • @Vader: Right. That implies that the `User` function just set a *global variable*, which is bad practice. If you tried to create three users this way, each new user's name would simply overwrite the previous one. All you're doing at that point is setting properties on a global object, not creating new ones. – StriplingWarrior Jan 24 '15 at 15:00
2

The first statement is a function call, meaning that myObj will get whatever is returned in the Object() function. As it happens, the function Object() will provide you with a reference to an Object object, whereas 'normal' constructors will not.

See f.e. the following:

function O(){
  this.bla= "bla";
  return this;
}

Calling O() here will yield a reference to window, not to an instance of O.

Koen
  • 268
  • 1
  • 7
  • so what does the function call `Object()` return? and why is it a function? – Vader Jan 24 '15 at 14:50
  • This would be an instance of an empty object, like `{}` would yield. – Koen Jan 24 '15 at 14:51
  • but isn't an empty object what I would want? I can add the properties like this `myObj.prop = 1` – Vader Jan 24 '15 at 14:53
  • Creating an empty object is a common practice, for example as a first step in building an 'associative array'. – Koen Jan 24 '15 at 15:08