Top
Screen Shot 2016-05-24 at 8.07.05 AM

Stop or Continue Using Nested (Chained) Functions In Javascript?

Javascript is a beautiful language that I love it a lot. But, I just read an article and it says Stop Nesting Functions in Javascript. The article makes me confused and think “really?” since I like the nested functions to create an easy-to-read codes.

Where you define functions in your code impacts your application’s performance; keep that in mind as you write your code. Don’t nest functions inside a frequently called function. Doing so wastes CPU cycles. As for constructor functions, embrace the prototype; failure to do so results in inefficient code. After all, developers write software for users to use, and an application’s performance is just as important to the user’s experience as the UI.

Really interesting quote that makes me challenged to check that. While I agree if Performance is the important part, I want to ensure if the Nested Functions (or chained functions) will impact a big difference with the non-chained functions. So, I tried to create some simple test to deal with performance and easy-to-read functions. The test will run object type checking 1 million times (so it’s become frequently called function) and perform increament to the counter when the type is match. The test will using ClosureCached ClosurePrototypalGlobal, and Normal methods.

 

First, I create a helper function to get the object type.

 

Using Closure

The Closure method is something that I believe the slower method and an anti-patterns (bad use cases), but some peoples still using this method. Even though this method can produce an easy to read codes, but we need to (sometimes) avoid that.

 

Using Cached Closure

The Cached Closure method will be faster than Closure method because the main function doesn’t create an inline functions. Still easy to read, but we need to be careful with this way since each methods will read the non-priavate variables. So, avoid using this way when creating a function that contains async calls before reading the non-private variables, because sometimes the next calls will overwrite the variables before the previous one read them.

 

Using Prototypal

The Prototypal way should be faster than Closure way because the prototypes will be shared across objects that created by the constructor. And the code still easy to read.

 

Using Global

The Global way should be faster, but we know the code is harder to read.

 

Using Normal

The normal way is something that I believe the fastest method, but we need to write more code to use that and probably harder to read.

 

Test Runner

 

The tests above is an unnecessary functions, but the result will give us an answer to choose when should we use the Closure, Cached Closure, Prototypal, or Global functions. To check what’s the difference between those methods, I ran the startTest() function 3 times and record the CPU Profiles. So, let’s take a look to the result.

 

Chained and Non-Chained Methods Profiling

 

The Closure method finished in 12,296.4 msCached Closure method finished in 11,090.8 msPrototypal method finished in 11,073.6 msGlobal method finished in 11,083.3 ms, and the Normal method finished in 2,522.8 ms.

 

As we can see, the Closure method is the slower method, and the Normal method is the fastest method. For the chained method, the winner is Prototypal method. The difference between chained method (prototypal) and non-chained method (except the normal method) to call them in frequently called scenario is 9.7 ms, but the chained method still the winner. Sometimes the global method will win, but the difference will not really big.

 

Summary

I’ll continue using chained method since the difference between chained method and non-chained method is doesn’t matter to me. Also, I can create an easy-to-read codes with the chained method. For me, “if (the(object).is(‘string’))” is easier to read than “if (isThe(object, ‘string’))”. Also, don’t use the “_the()” function above because they’re unnecessary, except if the difference between prototypal method and normal method is doesn’t matter for you.

 

Thanks for coming and read my article. Also, I’m sorry for my bad english 🙂

Nanang Mahdaen El Agung

I am a Senior Front-End Developer and Javascript Addict.

Follow me on Instagram