 # Don't Confuse Function Expressions and Function Declarations in JavaScript

Posted May 4, 2021

In JavaScript, the `function` keyword does a simple job: creates a function. However, the way you define a function using the keyword can create functions with different properties.

In this post, you'll find how using the `function` keyword you can write function declarations and function expressions, and what are the differences between the 2 types of functions.

Before I go on, let me recommend something to you.

The path to becoming good at JavaScript isn't easy... but fortunately with a good teacher you can shortcut.

Take "Modern JavaScript From The Beginning 2.0" course by Brad Traversy to become proficient in JavaScript in just a few weeks. Use the coupon code DMITRI and get your 20% discount!

## 1. Function expressions vs function declarations

Function declarations and function expressions are 2 ways to create functions using the `function` keyword.

Let's pick an example to demonstrate the difference — let's create 2 versions of a function that sums numbers:

`function sumA(a, b) { return a + b;}(function sumB(a, b) { return a + b;});sumA(1, 2); // ???sumB(1, 2); // ???`

Open the demo.

In one case, you define the function as usual (the `sumA` function). In the other case, the function is placed into a pair of parentheses (the `sumB` function).

What would happen if you invoke `sumA(1, 2)` and `sumB(1, 2)`?

As expected, `sumA(1, 2)` simply returns the sum of `1` and `2` numbers — `3`. However, invoking `sumB(1, 2)` throws an error `Uncaught ReferenceError: sumB is not defined`.

The explanation is that `sumA` was created using a function declaration, which creates a function variable (with the same name as the function name) in the current scope. But `sumB` was created using a function expression (it is wrapped into parentheses), which doesn't create a function variable in the current scope.

If you want to access the function created using a function expression, then save the function object into a variable:

`// Works!const sum = (function sumB(a, b) { return a + b;});sum(1, 2); // => 3`

Here's a simple hint on how to distinguish a function declaration from a function expression:

If the statement starts with the `function` keyword, then it's a function declaration, otherwise it's a function expression.

`// Function declaration: STARTS with `function` keywordfunction sumA(a, b) { return a + b;}// Function expression: DOES NOT START with `function` keywordconst mySum = (function sumB(a, b) { return a + b;});// Function expression: DOES NOT START with `function` keyword[1, 2, 3].reduce(function sum3(acc, number) { return acc + number });`

From a higher point of view, function declarations are useful to create standalone functions, but function expressions are good as callbacks.

Now, let's dive more into the behavior of the function declarations and function expressions.

## 2. The function declaration

As you already saw in the previous example, `sumA` is a function declaration:

`// Function declarationfunction sumA(a, b) { return a + b;}sumA(4, 5); // => 9`

A function declaration occurs when a statement contains the `function` keyword followed by the function name, a pair of parentheses with the parameters `(param1, param2, paramN)`, and the function body enclosed into a pair of curly braces `{ }`.

The function declaration creates a function variable — a variable with the same name as the function name (e.g. `sumA` from the previous example). The function variable is accessible in the current scope (before and after the function declaration) and even inside the function's scope itself.

The function variable is normally used to invoke the function or pass around the function object to other functions (to higher-order functions).

For example, let's write a function `sumArray(array)` that sums recursively items of an array (the array can contain either numbers or other arrays):

`sumArray([10, [1, ]]); // => 16function sumArray(array) { let sum = 0; for (const item of array) { sum += Array.isArray(item) ? sumArray(item) : item; } return sum;}sumArray([1, [4, 6]]); // => 11`

Open the demo.

`function sumArray(array) { ... }` is a function declaration.

The function variable `sumArray`, containing the function object, is available in the current scope: before `sumArray([10, [1, ]])` and after `sumArray([1, [4, 6]])` the function declaration, and also in the scope of the function itself `sumArray(item)` (allowing recursive calls).

The function variable is available before the function declaration thanks to hoisting.

### 2.1 Dos and don'ts of the function declaration

The role of the function declaration syntax is to create standalone functions. Function declarations are expected inside the global scope or the direct the scope of other functions:

`// Good!function myFunc1(param1, param2) { return param1 + param2;}function bigFunction(param) { // Good! function myFunc2(param1, param2) { return param1 + param2; } const result = myFunc2(1, 3); return result + param;}`

Using the same reason it is not recommended to use function declarations inside conditionals (`if`) and loops (`while`, `for`):

`// Bad!if (myCondition) { function myFunction(a, b) { return a * b; }} else { function myFunction(a, b) { return a + b; }}myFunction(2, 3);`

Creating functions conditionally is better performed using function expressions.

## 3. The function expression

The function expression occurs when the `function` keyword creates a function (with or without a name) inside of an expression.

The following are examples of functions created using expressions:

`// Function expressionsconst sum = (function sumB(a, b) { return a + b;});const myObject = { myMethod: function() { return 42; }};const numbers = [4, 1, 6];numbers.forEach(function callback(number) { console.log(number); // logs 4 // logs 1 // logs 1});`

There are 2 kinds of functions created inside a function expression:

• If the function inside the expression doesn't have a name, e.g. `function() { return 42 }`, then that's an anonymous function expression
• If the function has a name, e.g. `sumB` and `callback` in the previous example, then that's a named function expression

### 3.1 Dos and don'ts of the function expression

Function expressions fit good as callbacks or functions created by condition:

`// Functions created conditionallylet callback;if (true) { callback = function() { return 42 };} else { callback = function() { return 3.14 };}// Functions used as callbacks[1, 2, 3].map(function increment(number) { return number + 1;}); // => [2, 3, 4]`

If you've created a named function expression, note that the function variable is available only inside the created function scope:

`const numbers = ;numbers.forEach(function callback(number) { console.log(callback); // logs function() { ... }});console.log(callback); // ReferenceError: callback is not defined`

Open the demo.

`callback` is a named function expression, thus the `callback` function variable is available only inside the `callback()` function scope, but not outside.

However, if you store the function object into a regular variable, then you can access the function object from that variable inside and outside of the function scope:

`const callback = function(number) { console.log(callback); // logs function() { ... }};const numbers = ;numbers.forEach(callback);console.log(callback); // logs function() { ... }`

Open the demo.

## 4. Summary

Depending on how you use the `function` keyword to create functions, you can end in 2 ways to create function: function declaration and function expression.

A function declaration happens when you start the statement with the `function` keyword:

`// Function declarationfunction sumA(a, b) { return a + b;}`

Function declarations are useful to create standalone, general purpose, functions.

However, if a statement doesn't start with `function` keyword, then you have a function expression:

`// Function expression(function sumB(a, b) { return a + b;});`

The functions created using functions expressions are useful to create callbacks or functions by condition.

Challenge: is `function sum(a, b) { return a + b } + 1;` a function declaration or function expression? Write your explanation in a comment below!

#### Like the post? Please share! 