Functions in Javascript (Declaration, Expression, Arrow)

There are three common ways of using functions and each has its own name — “Function Declaration” and “Function Expression”. There is also “Arrow Function”, which has the shortest syntax.

The syntactical differences between them are like so:

Function Declaration is declared as a separate statement, in the main code flow.

// Function Declaration
function sum(a, b) {
   return a + b;
}
const result = sum(3, 7); // calling the function

Function Expressions are created inside another expression or statement, such as a variable declaration. The function below is treated like a value which gets assigned into a variable — that variable can then be called as a function.

// Function Expression
let sum = function(a, b) {
   return a + b;
};
const result = sum(1, 3) // calling the function

Arrow function offers a shorter syntax like so:

let sum = (a, b) => a + b; // note it does not require a "return" keyword, because it is implicit

If we have only one argument, then parentheses can be omitted, making that even shorter:

let displayA = a => alert("this is ", a);

If there are no arguments, parentheses should be empty (but they should be present):

let sayHi = () => alert("Hello!");

If there is more than one line inside the code block encapsulated by the pair of { } , we would need to use the “return” keyword, like so :

let sum = (a, b) => {
   let result = a + b;
   return result;
};

Now, let’s discuss about the the more subtle difference between the Function Declaration and Function Expression. It has to do with the execution time of the function.

A Function Expression is created when the execution reaches it and is usable from then on.

Once the execution flow passes to the end side of the assignment,

let sum = function(a,b) { ... };
// At this point, sum now contains a function.

at that point, the function is created and can be used thereafter (assigned, called etc).

Function Declarations are different.

A Function Declaration is usable in the whole script/code block.

In other words, when JavaScript prepares to run the script or a code block, it first looks for Function Declarations in it and creates the functions. Much like var that is hoisted; declaring a variable anywhere in the code is equivalent to declaring it at the top.

And after all of the Function Declarations are processed, the execution moves on.

As a result, a function declared as a Function Declaration can be called earlier than it is defined.

For example, this works:

sayHi("Pillow"); // Hello, Pillow 
function sayHi(name) { 
   alert( `Hello, ${name}` ); 
}

The Function Declaration sayHi is created when JavaScript is preparing to start the script and is visible everywhere in it.

If it were a Function Expression, then it wouldn’t work:

sayHi("Pillow"); // Error! 
// so far, the execution has never encountered the sayHi function
let sayHi = function(name) { // (*)
    alert( `Hello, ${name}` );
};
// sayHi can be used from this point forward only

Function Expressions are created when the execution reaches them. That would happen only in the line marked with (*) .

Another post will cover specifically about Arrow Functions, but the gist about Arrow Functions is:

• Do not have their own this (inherit it from its nearest object-bound parent, read more here)
• Do not have arguments
• Can’t be called with new
• Do not have super