JavaScript Function Expressions vs Declarations

One of the beauties of JavaScript is its flexibility - there is multiple ways to do just about everything. Working with functions is no exception. There are two primary ways to write functions in JavaScript - function expressions and function declarations. I am going to look at both and discussion what I feel are the similarities and differences of each, and why I choose one style over the other.

Definitions

Function Expression

A function expression is a type of JavaScript expression that once resolved, assigns its value to a variable. It typically looks like this:

const add = function (x, y) {
  return x + y;
}

console.log(add(1, 2));
// expected output: 3

or this:

const add = (x, y) => {
  return x + y;
}

console.log(add(1, 2));
// expected output: 3

The value in the variable is the function and can be called like a function declaration.

Function Declaration

A function declaration is a JavaScript statement. It is declared with the function keyword, like this:

function add (x, y) {
  return x + y;
}

console.log(add(1, 2));
// expected output: 3

Similarities

Both function declarations and function expressions have the same syntax: name, parameter, and statements.

// function declaration
function name (parameter, parameter, ...ect) {
  statements
}

// function expression
const variable = function name (parameter, parameter, ...ect) {
  statements
}

Both styles of functions are considered higher-order functions.

Differences

There are some significant differences between the two styles.

Syntax

Where both styles use the same syntax - name, parameter, and statements - function expressions consider all three to be optional, and function declarations require name. This means that function expressions can be anonymous functions.

Hoisting

Function declarations are hoisted, and function expressions are not. This means that you cannot use a function expression before you create it. The variable that the function expression is assigned to will be hoisted but not the value. This has to do with how JavaScript parses a file, and a topic for a later post.

My Preference

In my code I prefer to use function declarations. There are several reasons for this (all completely subjective):

1. Readability - I find function declarations to be easier to read and lead to cleaner code.
2. Debugging - I find functions with a name to be easier to debug, and function declarations enforce the naming of functions.
3. Hoisting - Since function declarations are hoisted, I can write my procedural logic at the top of my file or module and declare the functions that are used later. This leads to cleaner, easier to follow code.
4. Laziness - Why type const blah = function when I can just write function.

Conclusion

Using function expressions versus function declarations is going to be a personal style choice. Knowing the pros and cons of each style will help you choose which style will work best with the code you are writing.

Until next time!

Resources

JavaScript Expressions
JavaScript Statements
JavaScript Function Expression
JavaScript Function Declaration

Comments

[Kolja]

Thx