Function Declarations vs Function Expressions

What is a Function Declaration?

When a function is defined as a statement that exists as a standalone unit of code and is not assigned to a variable, it is called a Function Declaration. It cannot be nested in a non-function construct, e.g., an Object, Array, etc.

Just as a variable declaration starts with var, a function declaration starts with the keyword function.

According to ECMAScript 5 (section 13.0), a function declaration is defined as:

function Identifier ( FormalParameterList(opt) ) { FunctionBody }

Example of a function declaration:

function greet(name) {
  return `Hello, ${name}!`;
}

greet("Saiem"); // "Hello, Saiem!"

What is a Function Expression?

Before diving into function expressions, let’s see what an expression is. In JavaScript, an expression is defined as:

An expression is any valid unit of code that resolves to a value. (MDN)

So, when a function is written as part of a larger expression syntax, assigned to a variable, or used as a callback or boolean operand, it’s called a Function Expression. A function defined as a function expression is typically anonymous.

According to ECMAScript 5 (section 13.0), a function expression is defined as:

function Identifier(opt) ( FormalParameterList(opt) ) { FunctionBody }

Example of a function expression:

const greet = function (name) {
  return `Hello, ${name}!`;
};

greet("Saiem"); // "Hello, Saiem!"

After a function expression has been stored in a variable, the variable can be used as a function. Functions stored in variables do not need function names. They are always invoked using the variable name.

Function Declaration vs Function Expression

They’re actually very similar in their definition syntax. How you call them is exactly the same. But the difference lies in how JavaScript runtimes load them into the execution context. The one and only difference between them is:

• Function declarations are hoisted by the interpreter.
• Function expressions are not hoisted by the interpreter.

You may be thinking, what is hoisting now? 😨

The JavaScript interpreter invisibly moves function and variable declarations to the top of the containing scope and loads them into memory during compile time. This is generally known as hoisting.

Let’s see hoisting in action and how it differs for function declarations and function expressions.

// Function declaration — works even though it's called before its definition
sayHello();

function sayHello() {
  console.log("Hello!");
}

// Function expression — throws an error because the variable is not hoisted
sayGoodbye(); // TypeError: sayGoodbye is not a function

var sayGoodbye = function () {
  console.log("Goodbye!");
};

With a function declaration, both the variable and its value are hoisted. With a function expression, only the variable declaration is hoisted — the assignment stays in place.

Which One is Better?

Function expressions. Hold on, there are reasons for this. There are some cases where you can’t use a function declaration. For example:

• As closures
• As arguments to other functions
• As an Immediately Invoked Function Expression (IIFE)
• Inside an if block

So, it’s better to always use function expressions to be consistent throughout your project.