The mysterious JS function()

When it comes to functional programming, even experts in languages like Java become beginners. For people who are new to coding itself, functions are even stranger things to deal with.

Functions are treated as fundamental data types in JavaScript. But it can be hard to use them this way considering they can contain hundreds of lines of code, other functions which can contain even more functions, and such functions can be returned and passed as parameters. This is usually used to give an object-oriented feel to JavaScript.

And the most confusing part is, that the only thing which separates a variable from being a function is a pair of parentheses.

For example, take this function:

function something() {
return "Hi there, just a string passing by!";
}

something can technically ‘be’ two things

console.log(typeof something);  // "function"
console.log(typeof something()); // "string"

Now, most people will be able to tell when a function itself is being talked about, or its return value (the result of its invocation). But new coders might be unsure.

You can actually think of the () as something in JavaScript which tries to invoke whatever you put it in front of. If that thing happens to be a function, it goes ahead and happily executes its code. But some functions are written to execute other functions, and if you execute the function and then pass it as a parameter, things go wrong.

Here’s a mistake some beginners make:

var myFunction = function() {
console.log("Ding!");
}
setTimeout(myFunction(), 1000);

Let’s first get clear about setTimeout()'s job. It takes a function as a parameter, and after the delay, executes it. You can say that it takes the first parameter and puts a () in front of it. What’s happening in the example is that you execute the function, and then pass it as a parameter.

So basically, it does myFunction()()

The correct code should be: setTimeout(myFunction, 1000);

But, you will notice that it it doesn’t give an error. Also, the console.log("Ding!") is, in fact, executed, but not after a delay of a thousand milliseconds. That’s because the function is executed first to get the return value (none, in this case). And thus, rushes a horde of fools to StackOverflow (I’ve been there, too).

But don’t think that every time you see code like this in such a function, its wrong. What if we have a function like this -

function one() {
console.log("I return another function!");
return function() {
console.log("Hi, I'm the second function!");
}
}
setTimeout( one() , 1000);

In this case, function one is executed to get the return value. In the process, the first console.log gets executed (not at a delay). The setTimeout() gets the return value, and then waits 1 second before executing it. In this way, the second console.log() gets executed after a delay.

Basically, in this case, one()() works. Actually, this is valid syntax. So this would work too-

function what() {
return function() {
return function() {
return function() {
console.log("wtf is happening");
}
}
}
}
what()()()()();  //works

Don’t do it if you’re working with others, though.