why I use function declarations and named functions

How do we define functions theses days ?

var hello = function() {  
    console.log('hello')
}

function hello() {  
    console.log('hello')
}

obj.hello = function() {  
    console.log('hello')
}

The first and third examples are anonymous functions stored
in variables (first example) or inside a property (third example).

What's wrong with that?

anonymous functions are harder to debug

Given this failling jsfiddle:

Your console shows:

Whereas with this jsfiddle:

Your console shows:

Easy observations:

  1. We got the function name that threw the error
  2. We were able to organize our code in a more readable way (next)

reading code from top to bottom

Of course code organization may be a subject of taste but I do find that function declaration can help in code comprehension.

When reading code I like to put important things up (what is the program doing) and less important things down.

With JavaScript and anonymous functions stored as variables, you may end up with code like that:

var format = function() {

}

var send = function() {

}

var anObject = {};

var init = function() {  
  var res = init(anObject);
  return send(format(res));  
}

module.exports = init;  

Can you see what's wrong here?
Because of the nature of how JavaScript hoisting works, we need to put every
function that we need to do the real work (init), at the top most of the file.

It means that for a reader to quickly understand our code, he will have to read the entire file and find the relevant information himself.

I would like to see what's my function is doing
without having to jump at the end, or to search for my initialization code.

Function declaration to the rescue:

// yes I can do that and inform my reader of what I am exporting, right now
module.exports = init;

var anObject = {};

function init() {  
  var res = init(anObject);
  return send(format(res));
}

// util functions are at the bottom, I will have
// a look if I need to
function format() {  
  var res = init(anObject);
  return send(format(res));
}

function send() {

}

I really appreciate the improvements the second example
gives. You can immediately know:

  1. what are we exporting
  2. what is the main function (init) doing

function declaration helps decoupling

Callback hell is often used to critize JavaScript.

While it may sometimes be true that you can lose your mind writing JavaScript callbacks, one possible solution is to use function declarations and named functions.

Because once you start naming your functions, you have to find good names corresponding to the function actions.

var fs = require('fs');

function readAndFetchAndPost(cb) {  
  fs.readFile('/a/file', function(err, content){
    var db = require('db');
    db.fetch(content, function(err, data) {
      var http = require('http');
      http.post('a url', data, cb);
    });
  });
}

Good luck trying to debug and test this function!

When I see theses guys around, I call function declarations and named functions to the rescue.

Using named functions, you can't just have a big function wrapping anonymous functions anymore.

You need to think about function names and what are their responsabilities: code organization.

// async to the rescue, you may not always need it,
// pure taste
var async = require('async');

async.waterfall([  
  read.bind(null, '/a/file'),
  fetch,
  post
], end);

function read(file, cb) {  
  require('fs').readFile(file, cb);
}

function fetch(data, cb) {  
  require('db').fetch(data, cb);
}

function post(data, cb) {  
  require('http').post(data, cb);
}

function end() {  
  console.log('That\'s all folks!');
}

Do you think it's better written like that? I do!

Plus, it will be a lot more easier to externalize theses functions if they need to be externalized.

Whereas when everything is mixed up it's a lot harder.

Conclusion

I am not saying that people using var hello = function are writing bad code.

What I observed is that abusing anonymous functions is most of the time a path to bad code organization, tight coupling and bugs.

If you want to learn more about the various ways to use functions, I recommend kangax's nfe blog post.

This blog post may seems a newbe topic but from what I experienced, this is not at all a newbe subject.

Use JavaScript function declarations, now().

comments powered by Disqus