Difference between constructor functions and constructor literals

Question

I am reading a JavaScript book and here the constructor function is created like this:

var Person = function (living, age, gender) {
    this.living = living;
    this.age = age;
    this.gender = gender;
    this.getGender = function () { return this.gender; };
};

And I read somewhere something like this:

function Person (living, age, gender) {
    this.living = living;
    this.age = age;
    this.gender = gender;
    this.getGender = function () { return this.gender; };
};

I wonder what the difference is between these two. Is there any difference when we create instances or are they the same, just two different ways of creating object constructors?

Hunan Rostomyan · Accepted Answer · 2015-11-29T02:50:00.010

1

The first is a function expression, the second a function declaration (it doesn't need the semicolon at the end, btw). The distinction is not tied to constructors, however and applies to ordinary functions.

As you probably know, functions are first-class values in javascript. One of the things that implies is that functions can be assigned to variables. So, just like you can assign numbers to variables (e.g. var pi = 3.14), you can assign functions to variables, var add = function(a,b) {return a + b}. That's what your first declaration does, it creates a function (implemented as a closure) and then stores the reference to it in the variable Person. You can think of the second one as a shortcut for the first.

For the syntactical details, check out §14.1 of the spec.

edited Nov 29 '15 at 02:50

answered Nov 29 '15 at 02:40

Hunan Rostomyan

2,072
2
19
29

function expression means function literal right?? And please tell me the difference in details.. – Marc Andre Jiacarrini Nov 29 '15 at 02:43
@MarcAndreJiacarrini Right. I've augmented my answer with a little more detail, so check that out. – Hunan Rostomyan Nov 29 '15 at 02:50

score 0 · Answer 2 · answered Nov 29 '15 at 02:50

Both are similar and you can create instances from them with new Person().

The only difference is that in the 1st case it's an expression ,so it must be defined before you use it while in the second case , due to hoisting you can use the function anywhere in your file

score -2 · Answer 3 · edited May 23 '17 at 11:44

-2

This is defined at run-time (function expression):

var Person = function (living, age, gender) {
    this.living = living;
    this.age = age;
    this.gender = gender;
    this.getGender = function () { return this.gender; };
};

And this is defined at parse-time (function declaration):

function Person (living, age, gender) {
    this.living = living;
    this.age = age;
    this.gender = gender;
    this.getGender = function () { return this.gender; };
};

As an example:

funA(); // does not work
funB(); // it works

var funA = function(){console.log("testA");}

function funB(){console.log("testB");}

funA(); // it works
funB(); // it works

Other StackOverflow reference that supports my answer --> var-functionname-function-vs-function-functionname

edited May 23 '17 at 11:44

Community

1
1

answered Nov 29 '15 at 02:43

Facundo Victor

2,604
20
18

In both of those cases the name will be defined as soon as the enclosing function/script body is entered (the definition is ["hoisted"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting)). In one case, the value assignment will happen immediately, in the other case it won't happen until execution reach the line it's written on. In neither case is it defined at parse-time. – Jeremy Nov 29 '15 at 02:52
I disagree! I added an example, try to execute it! the "function funB(){}" it's defined at parse time (this is when you say the value assignment will happen immediately, and it happens when the interpreter reach that line to parse the code! it is parse-time, it's a definition step.. ). If it is not the parser... then who? explain your self! Also, "var funA = function(){}" is defined until the interpreter executes the line (run-time). – Facundo Victor Nov 29 '15 at 03:09
Also, i recommend you to read about [V8](https://en.wikipedia.org/wiki/V8_%28JavaScript_engine%29) and [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey_(software)). Javascript is compiled by a multi-pass compiler (in one of the compiler passes it implements Hoisting) – Facundo Victor Nov 29 '15 at 03:37

Difference between constructor functions and constructor literals

3 Answers3