JavaScript Function Expressions and Function Declarations — a beginner's guide to what’s what.
By: Grace Tan
Tags: Functional Programming, Coding, Flatiron School, JavaScript

Programmers are in no shortage of tools when it comes to building their next product but it turns out the flexibility means that knowing which tool to use for the right situation is a huge skill in programming.

Since JavaScript supports multiple ways of function declarations and invocations, many programmers are still confused about what the right tool for the job is, and sometimes how we create functions is down to pure preference.

Photo by Barn Images on Unsplash

Function Declarations

How to identify a function declaration:

They always begin with the word ‘function’

Invoke the function by calling the function name followed by parenthesis e.g. smile()

The work contained inside a function declaration is ‘saved’ for later. It kind of hangs around in isolation until you call or invoke the function.

It is a named variable without a variable assignment

They load before any other code is executed. This is because JavaScript hoists declarations to the top of the current scope (global or function) by default. Therefore, you can still call/invoke the function before the function is declared without any errors being thrown at you

Benefits of using function declarations?

Less chance of errors— In situations where you have called the function before it is declared, hoisting will help the function still run as intended. In the code below, we can see that the call on hello(“Grace”) still ran in the console despite being invoked before the function was declared.

left: code / right: console output

Since all function declarations are hoisted and go straight to the top of whatever scope it is in, it may call for cleaner code if you place these functions at the top of your code. This can help avoid confusion when you look at your code the next time around and see a floating function call way above its declaration.

Side note — hoisting is JavaScript’s way of moving declarations to the top of their current scope (global/window or function) and allows us to define a function before calling it. There’s a great resource here on it.

Example of a call after the function is declared

Function Expressions

How to identify a function expression:

They do not begin with the word ‘function’

They can be assigned to a variable (using let or const)

Function expressions load only when the interpreter (running from top to bottom) reaches that line of code. Therefore, unlike Function Declarations, invoking the function before it is declared will throw an error

They do not have a function name associated with it (if assigned to a variable, the variable name would usually take the place of a ‘name’)

Functions declared with let and const are not hoisted, therefore the function must exist before the function is invoked

It is defined as part of a larger expression

Anonymous functions, callback functions, and higher-order functions are some examples of function expressions

Benefits of using a function expression?

Function expressions are more versatile

They can act as callback functions

Can be passed in as arguments (higher-order functions)

Can be used as Immediately Invoked Function Expressions (IIFE)

Can create closures

Example of an IIFE. The parenthesis at the end invokes the function

The fact that JavaScript is a functional language makes it no surprise that a) there are many function types and b) there is flexibility on its use. Mastery is knowing that there is a distinction between the tools available and what they are. This is an invaluable skill that I hope to master one day as I continue on my JavaScript journey. #goals