Javascript - Arguments Vs Nested functions Vs Performance

Question

Javascript noob question - which one of the following is best practice and performance friendly, also welcome any other suggestions too. This is simplest version of original project. There will be 20+ variables and 10+ inner functions (Ex: 'process' in the case).

The advantage of Method 1 is it doesn't need to send arguments to the functions but as it nests all the functions inside the main function (possibly regenerate all the inner function for each instance of Foo). While the method 2 is free from function nesting but requires lot of arguments. Note that also there will be multiple instance of Foo constructor.

Method 1:

function Foo () {
    var a = 1;
    var b = 2;
    var c = (a+b)/2;
    var $element = $('#myElement');

    var process = function (){
        var x = a+b+c;
        $element.css('left', x)
        return x;
    }   
    x = process ();
}

Method 2:

function Foo () {
    var a = 1;
    var b = 2;
    var c = (a+b)/2;
    var $element = $('#myElement'); 
    x = process (a, b, c, $element);
} 

function process (a, b, c, $element){
    $element.css('left', x)
    return x;
}

Andrew Odri · Accepted Answer · 2011-12-25 08:50:02Z

4

The separated functions are definitely the way to go for performance. While there are situations where the variable scoping of nested functions would be nice to have, the performance hit can be huge if the function is large.

Keep in mind that every time Foo if called, var process is reallocating all the memory for the new function that is being created, rather than keeping the function in memory and just passing it new parameters. If the function is big, this is going to be a pretty intense task for the Javascript interpreter.

Here are some hard numbers that may help as well (Contains performance comparisons and actual benchmarks that you can run in your own browser): http://jsperf.com/nested-functions-speed, http://jsperf.com/nested-named-functions/5

answered Dec 25, 2011 at 8:50

Andrew Odri

9,5286 gold badges48 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1106995 Over a year ago

Yes, separated functions has better performance even with higher number of arguments. Thanks for the answer.

MacDada · Accepted Answer · 2014-11-19 20:32:46Z

2

Actually browsers do optimize even nested functions to where performance differences compared to functions declared in outer scope become negligible.

I blogged my findings and created a performance test to support this claim.

EDIT: The test was broken, after fixing the test shows that it's still faster not to nest functions.

edited Nov 19, 2014 at 20:32

MacDada

2,0311 gold badge15 silver badges25 bronze badges

answered Jun 4, 2012 at 14:45

Thorsten Lorenz

11.9k8 gold badges54 silver badges64 bronze badges

1 Comment

mjs Over a year ago

Hmm... they are slightly worse, but I consider this a weak point of the browsers. It so much nicer to write nested code! I love it! I wish all languages supported this, and optimized for this when non-local variables are used.

Collectives™ on Stack Overflow

Javascript - Arguments Vs Nested functions Vs Performance

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related