Proper function conventions for JavaScript

Question

I've been doing the Codecademy JavaScript lesson, and they're telling us to use functions like this:

var functionName = function(parameters) {};

I've done some JavaScript before and I've always done it like this:

function myFunction(parameters){}

Whats the correct way? Is there any difference? When should I use either?

Thanks!

See also this for another detailed explanation of the differences: http://stackoverflow.com/questions/3887408/javascript-function-declaration-and-evaluation-order/3887590#3887590 — slebetman, Apr 05 '13 at 08:50

score 1 · Answer 1 · answered Apr 05 '13 at 08:25

It depends, in general for a normal function you will want to use the second way:

function myFunction(parameters) {
}

You can assign a function to a variable using the first way if you want and also by mixing and matching.

// Assign an anonymous function to functionName
var functionName = function (parameters) {
}

// Assign a pointer to myFunction to functionName
var functionName = myFunction

These do slightly different things though, imagine a for loop containing these, the first one will make a new function every iteration where as the second will just reference an already existing function.

for (var i = 0; i < 10; i++)
    // Creates 10 functions
    var functionName = function (parameters) {
    }

    // Uses an existing function
    var functionName = myFunction
}

It really depends on what you're doing though, for example you can use inline functions like this which is perfectly fine.

window.onload = function () {
};

Freddie · Answer 2 · 2013-04-05T08:43:43.197

Some differences that I'm aware of.

function myFunction(parameters){}

Above function is always callable, both before and after where it's located in your code.

var functionName = function(parameters) {};

This is only callable once the code has been run (i.e. the object has been defined).

So you can do things like;

if(condition) {
    var functionName = function(parameters) {};
}

if(functionName != undefined) { functionName(); }

Also you can use them as callbacks;

function anotherMethod(parameters, callbackFunction){
    // Do things with parameters
    callbackFunction(parameters);
}

var functionName = function(parameters) {};
anotherMethod(parameters, functionName);

Also, probably the most important thing usually is that the latter format allows for namespacing, instead of gathering all functions in the global space which might end up with duplicate function names in a large project with several large libraries used.

var uniqueName1 = {
    firstFunction: function(){},
    secondFunction: function(){},
};

var uniqueName2 = {
    firstFunction: function(){},
    secondFunction: function(){},
};

uniqueName1.firstFunction();
uniqueName2.firstFunction();

score 0 · Answer 3 · answered Apr 05 '13 at 08:47

difference is when you do :

functionName();
var functionName = function(parameters) {};
//you get error


functionName1();
function functionName1(parameters) {};
//you get no error

reason for that is javascript pre-parse code. I suggest use second way of creating object.

score 0 · Answer 4 · answered Apr 05 '13 at 08:59

0

Both the ways are correct. Performance may vary check the performance.

answered Apr 05 '13 at 08:59

karthick

5,998
12
52
90

Proper function conventions for JavaScript

4 Answers4