Function Expressions and Anonymous Functions in JavaScript: What are They, When to Use Them, Arrow Functions, and IIFE

An expression evaluates into (results in) a single value.

If you put a function where the interpreter would expect to see an expression, then it is treated as an expression, and it is known as a function expression.

In function expressions, the name is usually omitted. A function with no name is called an anonymous function.

Below, the function is put inside a variable named area. You can use this variable to call the function just like you do with other functions.

let getArea = function (width, height) {
  return width * height;
};

let area = getArea(3, 4);

In a function expression, the function is not processed until the interpreter gets to that statement. This means you cannot call this function before the interpreter has discovered it.

It also means that any code that appears up to that point could potentially alter what goes on inside this function.

Arrow Function Expression

There’s another very simple and concise syntax for creating functions, that’s often better than function expressions.

It’s called “arrow functions”, because it looks like this:

let func = (arg1, arg2, ..., argN) => expression;

This creates a function func that accepts arguments arg1..argN, then evaluates the expression on the right side with their use and returns its result.

In other words, it’s the shorter version of:

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

Arrow functions can be used in the same way as function expressions. Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure.

• If we have only one argument, then parentheses around parameters can be omitted, making that even shorter.

let greet = name => "Hello, " + name;

• If there are no arguments, parentheses are empty, but they must be present.

let sayHello = () => "Hello";

Multiline arrow functions

The arrow functions that we’ve seen so far were very simple. They took arguments from the left of =>, evaluated and returned the right-side expression with them.

Sometimes we need a more complex function, with multiple expressions and statements. In that case, we can enclose them in curly braces. The major difference is that curly braces require a return within them to return a value (just like a regular function does).

const getSize = (width, height, depth) => {
  let area = width * height;
  let volume = width * height * depth;
  let sizes = [area, volume];
  return sizes;
};

Here we praised arrow functions for brevity. But that’s not all!

Arrow functions have other interesting features. To study them in-depth, we first need to get to know some other aspects of JavaScript, so we’ll return to arrow functions again.

Immediately Invoked Function Expressions

Pronounced "iffy," these functions are not given a name. Instead, they are executed once as the interpreter comes across them.

Below, the variable called area will hold the value returned from the function (rather than storing the function itself so that it can be called later).

The final parentheses (shown in green) after the closing curly brace of the code block tell the interpreter to call the function immediately.

The grouping operators (shown in red) are parentheses there to ensure the interpreter treats this as an expression.

You may see the final parentheses in an IIFE placed after the closing grouping operator but it is commonly considered better practice to place the final parentheses before the closing grouping operator, as shown in the code above.

When to use Anonymous functions

They are used for code that only needs to run once within a task, rather than repeatedly being called by other parts of the script. For example:

• As an argument when a function is called (to calculate a value for that function).

• To assign the value of a property to an object.

• In event handlers and listeners to perform a task when an event occurs.

• To prevent conflicts between two scripts that might use the same variable names

Reinforce what you’re learning

Once you've read the article, you understand how things work, but that's not the same as being able to use it by yourself.

My aim isn't just for you to comprehend what's taught in the article, but for you to feel confident using it on your own once you've grasped it.

To help you do that, I've put together exercises. These will assist you in practicing what you've learned and identifying any areas where you might have some gaps in your understanding.

Solve These Exercises