JavaScript – Function Declarations vs. Function Expressions

What are the differences between function declarations and function expressions? We'll find out in this article.

We know how to write functions in JS, right? We use the function keyword, whose main role is to create a function. But did you know that there are two function form variants (or more, depending on the context)? If not, take a look at the code snippet below and try to understand the syntactical and logical differences.

function calculateSomethingForMePlease() {
 // here goes logic - function declaration
}
let findTheClosestBeachNearMe = function(lat, lng) {
 // here goes logic - function expression
}

Function Declaration

The first variant is called the function declaration because it is an expression by itself. We write the JavaScript keyword function followed by the name of the function. The parser then associates the function keyword with the name of the function during the compilation phase. Why is this useful? Well, we can call the function not only after the declaration but also before the declaration!

calculateSomethingForMePlease(); // this is valid in JS

function calculateSomethingForMePlease() {
 // here goes logic
}

In most other programming languages this doesn't work, but JS has this cool concept called hoisting, during which it grabs the whole function objects, and makes them available anywhere in our file by pushing it to the top, compared to the (SPOILER ALERT) the next variant that we will see.

Function Expression

The function expression is a function that is assigned to a certain variable. As you might have guessed - the function itself is not available nor associated to the variable until the statement line has been reached during execution.

findTheClosestBeachNearMe(43.94151, 17.4194); // OH NO, HELL BREAKS LOOSE!

let findTheClosestBeachNearMe = function(lat, lng) {
 // here goes logic - function expression
}

Function Declaration vs. Function Expression

So we might ask ourselves - when can we use one or the other?

As seen above - we might use function declarations to create standalone functions, that are visible before any other code. (compared to function expressions which are only visible when the interpreter reaches the line of code).

Otherwise - we might be inclined to keep our global scope clean (due to hoisting declarations can pollute the global namespace). Then we would use IIFEs (Immediately invoked Function Expressions, quite a name huh?).

(function (bar){
  //Here we have an encapsulated local scope and the ability to return things
  return 'baz'
})('foo')

If you've ever worked with asynchronous code, you've might also come across callbacks which are another form of function expressions.

asyncFn(function (){
  console.log('Done!')
})

Yet another form of function expression is the named functions inside objects. Look below for an example:

const earth = {
  population: '7.674 billion',
  getPopulation: function() {
    return this.population;
  }
};

Final Words

As you can see - there are more differences between the two forms than just structural, and each can fit a certain use case better. Read up on this Stack Overflow question for additional examples and discussion regarding performance, mutability and availability.