JavaScript Fundamentals. Function expression vs. function declaration.

In JavaScript, we have three ways to write any functions: function declaration, function expression, and arrow functions.

But I focused on the function expression and function declaration concept in this article.

Before talking about the key differences between them let see how they look.

Function Declaration

function foo(){
alert('hello')
}
foo();

The way is to write a function declaration is shown above. What we see?

1. Function Declarations begins with the keyword “function”.
2. You don’t need any variable assignment for it.

Function expression

let name = function foo(){
alert('hello')
};
foo();

That is the way for function expression:

1. The function is created and assigned to the variable.
2. As other variables, you should use a semicolon after the curly braces closed.

Let’s talk about the key differences between them and when do you need to use the appropriate one.

The noticeable key difference is their syntax, but we are interested in unnoticeable ones).

If you are familiar with hoisting concept in javascript you will get the main difference. Hoisting refers to the accessibility of functions and variables “at the top” of the code you have written, as opposed to only after they are created. So the key difference is unlike function expression, function declarations are hoisted, in other words it is visible first, no matter where is it.

I would like to explain this key with the example below:

sayHello();
function sayHello(){
} 

The code above will not throw any error. The reason is that a function declaration can be called even if it is not defined. In the example, we called function sayHello()before defining it. Because a function declaration is visible in the whole script.

sayHello();
let a = function sayHello(){
}

But the example above will throw an error because we can not call a function before defining it if we use function expression and they are created when the execution reaches them.

Another point of function declaration is that it is a visible everywhere when it is within a code block. Outside that block function declaration is not available. The example below will help you to understand it better:

let a = prompt("Tell me you favourite number", 20);

if (a < 20) {

  function foo() {
    alert("Good!");
  }

} else {

  function foo() {
    alert("Bad!");
  }

}

foo(); // Error: foo is not defined

That’s because as we explained above Function Declaration is only visible inside the code block. But if we call foo()within that block, it will run.

How we can make it visible outside of the code block?

• Welcome, dear F.E(function expression).

Yes). I guess you have got it). So let’s use function expression to solve our problem.

let a = prompt("Tell me you favourite number", 20);

let foo;

if (a < 20) {

  foo = function() {
    alert("Good!");
  };

} else {

  foo= function() {
    alert("Bad!");
  };

}

foo(); // it works now

So when we need to declare a function, a Function Declaration is the way you may use, because it is flexible and more readable. But if your task is required to use function expression, as shown above, you may prefer to use it.