---
title: 'When to use Function Declaration vs Function Expression in JavaScript?'
date: '2020-09-17'
tags:
  [
    'javascript',
    'function',
    'function-declaration',
    'function-expression',
    'anonymous-function',
    'arrow-function',
    'es5',
    'es6',
  ]
summary: 'Learn about the differences between Function Declaration and Function Expression in JavaScript, including their definitions, hoisting behavior, and when to use each method.'
images:
  [
    '/static/images/banners/selective-focus-photography-of-yellow-and-orange-post-it-notes-on-wall__whmii__S3JdHNXSfnA.jpeg',
  ]
authors: ['default']
---

This post is just a **quick note** from me for developers who sometimes forget about the two concepts: **Function Declaration** and **Function Expression**,
so that every time they need to remember, they can come here to review instead of having to Google again <Twemoji emoji="grinning-face-with-sweat" />.

Surely, those of you who work with **JavaScript** every day will write many functions with syntaxes such as:

```js showLineNumbers
function doSomething() {} // function declaration

// or
let doSomething = function () {} // function expression

// or
let doSomething = () => {} // function expression
```

The first way of writing is **Function Declaration**, and the next two are **Function Expressions**.
So what are the differences between them, and how do we use them?

## Definition

The first difference is how to define a **function**.

- **Function Declaration** is declared with the `function` keyword and **always** includes the name of the **function**.

```js
function doSomething() {}
```

- **Function Expression** is declared similarly to **Function Declaration** but is assigned to a **variable** and will run when called through that **variable**. The name of the **function** can be omitted (**Anonymous Function**).

```js showLineNumbers
let doSomething = function () {}

// Anonymous function in ES6 syntax
let doSomething = () => {}
```

## Hoisting

**Hoisting** is a mechanism of **JavaScript** that brings **functions** and **variables** to the top of the **scope** before the code is executed.

> **Hoisting** only applies to **Function Declarations**, not to Function Expressions.

You can understand it simply through the following example:

```js showLineNumbers
sayHello() // => "Hello"

function sayHello() {
  console.log('Hello')
}
```

You can **call** Function Declaration anywhere in the **scope** it initializes.

However, **Function Expression** can only be called after it is defined.

```js showLineNumbers
sayHello() // => Uncaught ReferenceError: Cannot access 'sayHello' before initialization

let sayHello = function () {
  console.log('Hello')
}
```

Depending on the habits of the developer and the rules set by the project or team leader,
one of these two ways of defining a function can be used.

However, there are some special cases where **Function Expression** is used.

## IIFE

[Immediately Invoked Function Expressions](https://mariusschulz.com/blog/use-cases-for-javascripts-iifes) or an **Anonymous Function** that is executed immediately after initialization.

```js showLineNumbers
;(function () {
  console.log('Code runs!')
})()

// ES6
;(() => {
  console.log('Code runs!')
})()
```

## Callback

Another case where **Function Expression** is used is as a **callback**.

```js showLineNumbers
buttonElement.addEventListener('click', function (e) {
  console.log('Button is clicked!')
})
```

or

```js showLineNumbers
array.map((item) => {
  // do stuff to an item
})
```

This is a common case of using **Function Expression** because we don't need to know about this **function** throughout the scope.

In conclusion, you can use the two ways of defining a function flexibly.
If you want a function that can be used flexibly in many places in the scope, use **Function Declaration**, and if you only need it for a limited time, use **Function Expression**.

## Refs

- [Function Declaration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)
- [Function Expression](https://developer.mozilla.org/en-US/docs/web/JavaScript/Reference/Operators/function)
- [https://www.freecodecamp.org/news/when-to-use-a-function-declarations-vs-a-function-expression-70f15152a0a0/](https://www.freecodecamp.org/news/when-to-use-a-function-declarations-vs-a-function-expression-70f15152a0a0/)
- [https://gomakethings.com/function-expressions-vs-function-declarations/](https://gomakethings.com/function-expressions-vs-function-declarations/)
