what is the difference between these two coding style in JS?

Question

Option 1:

<script>
var myObject = function(){  
    this.iAm = 'an object';  
    this.whatAmI = function(){  
        alert('I am ' + this.iAm);  
    };   
   } 
var myNewObject = new myObject();  
myNewObject.whatAmI(); 
</script>

Option 2:

<script>
function myObject(){  
    this.iAm = 'an object';  
    this.whatAmI = function(){  
        alert('I am ' + this.iAm);  
    };  
}; 
var myNewObject = new myObject();  
myNewObject.whatAmI(); 
</script>

Question:

Both of these codes can work. But what is the difference between them? And which is the better way when doing OOP coding in js?

have a look [at this] http://stackoverflow.com/questions/336859/javascript-var-functionname-function-vs-function-functionname — Thomas Mannion, Jun 13 '13 at 08:44
Read about `Function Declaration (Statement)` and `Function Expression`. — Artur Udod, Jun 13 '13 at 08:46

Timmetje · Answer 1 · 2013-06-13T08:48:25.957

They are both called Prototype-based programming. The difference is the following: The first one is Literal notation and the second one is Constructor function.

Literal notation

var myObject = {  

};

Constructor function

function myObject(){  
  
};

The differences in usage

There is no better way it depends how you use it.

Literal is a preferred option for name spacing so that your JavaScript code doesn’t interfere (or vice versa) with other scripts running on the page and also if you are using this object as a single object and not requiring more than one instance of the object, whereas Constructor function type notation is preferred if you need to do some initial work before the object is created or require multiple instances of the object where each instance can be changed during the lifetime of the script.

The constructor object has its properties and methods defined with the keyword ‘this’ in front of it, whereas the literal version does not.
In the constructor object the properties/methods have their ‘values’ defined after an equal sign ‘=’ whereas in the literal version, they are defined after a colon ‘:’.
The constructor function can have (optional) semi-colons ‘;’ at the
end of each property/method declaration whereas in the literal
version if you have more than one property or method, they MUST be
separated with a comma ‘,’, and they CANNOT have semi-colons after
them, otherwise JavaScript will return an error.

score 1 · Accepted Answer · answered Jun 13 '13 at 08:42

The first example will not be hoisted. In your second example the function will be hoisted.

In your example, with option 1 (Not Hoisted):

If you called this code:

var myNewObject = new myObject();  
myNewObject.whatAmI();

Before the function declaration you would receive an error. However in your 2nd example the function is moved to the top of the enclosing scope, declared and ready for use (hoisted).

http://www.sitepoint.com/back-to-basics-javascript-hoisting/

score 1 · Answer 3 · answered Jun 13 '13 at 09:01

The first notation will create a variable with the name myObject and assign an anonymous (nameless) function to that variable:

var myObject = function(){  
};

The second notation will create a function with the name myObject:

function myObject() {
}

You can plot the name of the function by accessing the name property:

console.log(myObject.name);
//will print an empty string for the first example
//but "myObject" for the second example

There is also a difference in hoisting. In the first example only the variable declaration will be hoisted up but the function definition won't be. In the second example, the complete function will be hoisted to the top of the current scope.

console.log(ad()); //ad
console.log(ac()); //will throw an error because ac is undefined

function ad(){
    return "ad";
}

var ac = function(){
    return "ac";
}

what is the difference between these two coding style in JS?

3 Answers3