8

I'm new to objects in javascript. Read up on this topic on https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript and got a little confused.

I don't understand the difference between functions and objects. On the one hand, function is supposed to be and instance of Function (which is a child of Object) and so a function is also supposed to be an Object.

On the other hand object itself is denoted as a key-value pair, such as:

  1. var User = {name:"Tomy", password:"secret"}

    and this is quite different from a function definition in terms of code compatibility...

    Can I create function isn two different ways?

  2. var User = function () {this.name="Tomy"; this.password="secret";}

user229044
  • 232,980
  • 40
  • 330
  • 338
Novellizator
  • 13,633
  • 9
  • 43
  • 65
  • 2
    With B u can do `var tomy = new User();` – DarkBee Aug 06 '13 at 11:30
  • 2
    And object is a data structure to hold...data. A function is a reusable collection of commands. You can use a function as *constructor function* to *create* an object. An object literal and a constructor function are two ways to create objects, only that you have to explicitly *call* the constructor function to create the object. – Felix Kling Aug 06 '13 at 11:31
  • @DarkBee More precisely, version B has a prototype (set of properties cloned on each new instance) while A doesn't. EDIT : Makes me think, can you use new with A if you add a prototype property to the anonymous object ? – Virus721 Aug 06 '13 at 11:35
  • @Virus721: You can only use `new` with functions. That has nothing to do with the `prototype` property. – Felix Kling Aug 06 '13 at 21:10

3 Answers3

6

In this example, User now holds an object.

var User = {name:"Tomy", password:"secret"}
typeof User === "object"
User.name === "Tomy"

In this example, User will hold a function. This function can be used to create objects.

var User = function () {this.name="Tomy"; this.password="secret";}
typeof User === "function"
User.name === undefined

You could then create as many users as you like.

var user1 = new User(), user2 = new User();
user1.name === "Tomy"

A more realistic example, would be this:

var User = function (name, pass) {this.name=name; this.password=pass;}

var john = new User("John", "secret")
var andrew = new User("Andrew", "passw0rd")

john.password === "secret"

Generally constructors (functions that make objects) are more flexible than object literals, and allow for convenient and consistent creation of objects (bugs are easier to spot, less duplicate code).

There are no cross-browser inconsistencies in the two methods.

To understand what the new keyword is and what effectively happens at the "moment of creation", see What is the 'new' keyword in JavaScript? and How does the new operator work in JavaScript?

Community
  • 1
  • 1
Brigand
  • 84,529
  • 20
  • 165
  • 173
  • ok, one last question regarding the "moment of creation" of an object ;-). when I do var john = new User("John", "secret") then what exactly happens? My guess is this: 1) new object is created. 2) this is tied with that newly created object. 3) function is called. (and so creates the data members when calling this.something). Did I get it right? – Novellizator Aug 06 '13 at 11:57
  • @Novellizator, I added an explanation at the end of my answer. – Brigand Aug 06 '13 at 12:07
  • @FakeRainBrigand: No, nothing is copied. And the new object is not equivalent to `{}` (unless `User.prototype` is `null`). Please refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new for the correct steps. – Bergi Aug 06 '13 at 12:12
  • @Bergi, I edited my answer. Is that better? Feel free to edit it further for correctness if I got something wrong. – Brigand Aug 06 '13 at 12:19
  • Nope, not much better. Since I didn't want to duplicate all content, I just linked the relevant SO questions. – Bergi Aug 06 '13 at 12:28
2

The first one creates an instance of an object with two properties. You can access them like this:

User.name; // Tomy
User.password; // secret

The second one creates a definition of an object which you can create separate instances of and they will have separate instances of their properties. Example:

var a = new User();
a.name; // Tomy
a.password; // secret
var b = new User();
b.name = "Ralph";
a.name; // Tomy
b.name; // Ralph
Konstantin Dinev
  • 34,219
  • 14
  • 75
  • 100
1

The two are not remotely equivalent. The first version creates an object, with the properties name and password set. The second version creates a function which has not been execute; there are no properties set until new User is invoked.

user229044
  • 232,980
  • 40
  • 330
  • 338