Understanding function declaration vs expression in JavaScript

Understanding function declaration vs expression in JavaScript

·

4 min read

When I started learning javascript for the first time, it took me a long time to grasp some concepts. In fact, at a point nothing made sense to me, because having learn't html and css first before diving into JavaScript I felt programming was easy :( .. little did I know that it requires good problem solving skills which I was yet to learn....

The first time I came across a function expression while watching a YouTube tutorial...my God!, I was thrown off balance...like???... I initially learn't that functions were declared and called like this;

// function declaration
function hello(){
/* run this code*/
}
hello();

Now, how on earth did someone assign a function to a variable like this?...Even without a function name??

// function expression
const hello = function(){
/* run this code*/
}

It just didn't make sense to me at the moment, but I wanted to know more so I paused the tutorial I was watching and went ahead in search of answers. I searched Google on the different ways of writing a function in JavaScript, and guess whaaattt??? My curiosity paid off because I got the answers I was looking for...yasss!..I did ;)

So in this article, we will discussing what function declaration and function expressions actually mean :)

What is a function declaration?

A function declaration simply means a named function that is not assigned to a variable. It can also be called a function statement. Just like a variable declaration must start with var, let, or const, a function declaration must start with the word function as seen below;

function hello(){};

// function declaration

How about a function expression?

A function expression is a function declared as part of a larger expression syntax(in simpler words, a function assigned to a variable). function expression can either be a named function or an anonymous function (function without a name).

const hello = function(){}

// function expression

In ES6, anonymous function can be written like this;

const hello = () => {}

// function expression written with arrow function

From what we discussed above, one difference between function declaration and function expression is the presence and absence of a function name.

Ever heard of hoisting?

Hoisting refers to how functions and variables are moved (hoisted) "to the top of your code" by the JavaScript interpreter before your code is executed. The objects are initialized at compile time and available anywhere in your file.

It is important to note that function declarations are hoisted but function expressions are not hoisted.

Below is a function declaration. Calling this function will output hello on the console.

// function declaration 

sayHello();
function sayHello() {
    console.log("hello")
};

// hello

However, in the case of a function expression, the JavaScript console will throw an error;

sayHello();
const sayHello = function() {
    console.log("hello")
};

// Uncaught ReferenceError: Cannot access 'sayHello' before initialization at app.js:1

Should I use function declaration or expression?

Choosing to use either function declaration or function expression depends on when and where the function is needed. Though function declaration has powerful hoisting properties, function expression has other important uses too.

A function expression can be easily passed around since it is assigned to a variable, and this helps you to avoid polluting or crowding the global scope. It is also useful in immediately invoked function expressions(IIFE) and callback functions (function passed into another function)- which I'll be discussing in my next article.

Conclusion

If you want to call your function before declaring it, then go for function declaration. However, I prefer using function expressions because it gives structure to my code.

Thank you for taking your time to read through :).. I really hope you found this article helpful. Feedbacks on how I can further improve my writing will be very much appreciated...Kindly give this article a like, if you found it helpful ;)...Stay safe friends..cheers!