When to use Function Declaration vs Function Expression in JavaScript?

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 .

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

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.

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).

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:

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.

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 or an Anonymous Function that is executed immediately after initialization.

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

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

Callback

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

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

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.

Definition

Hoisting

IIFE

Callback

Refs