JavaScript Function Expression: What, Why, and How

Functions are one of the most fundamental and powerful features of JavaScript. They allow you to define reusable blocks of code that can perform specific tasks and return values. However, did you know that there are different ways of creating functions in JavaScript? One of them is called a function expression.

In this blog, I will explain what a function expression is, why you might want to use it, and how to use it effectively. By the end of this blog, you will have a better understanding of function expressions and how to use them in your code.

What is a function expression?

A function expression is a way of defining a function inside any expression. It allows you to create an anonymous function that doesn’t have any function name. Function Expressions allow us to define functions as variables, which is the main difference between a function expression and a function declaration. For example:

// function expression
let sayHi = function () {
  alert("Hello");
};

// function declaration
function sayHi() {
  alert("Hello");
}

Function Declaration vs. Function Expression

• In a Function Declaration, we use the 'function' keyword to define a named function.

• In a Function Expression, we assign an anonymous function to a variable.

Calling a Function Expression

Just like with Function Declarations, we can call a Function Expression using the variable name followed by parentheses. For example:

// define a function expression and assign it to a variable
let sayHi = function (name) {
  // use template literals to create a greeting message
  alert(`Hello, ${name}`);
};

// call the function expression by using the variable name and
// passing an argument
sayHi("Alice"); // Hello, Alice

Anonymous Function in JavaScript

An anonymous function in JavaScript is a function that does not have any name associated with it. Normally we use the function keyword before the function name to define a function in JavaScript, however, in anonymous functions, we use only the function keyword without the function name. For example:

// anonymous function
function () {
  alert("Hello");
}

An anonymous function is not accessible after its initial creation, it can only be accessed by a variable it is stored in as a function as a value. For example:

// anonymous function
function (a, b) {
  return a + b;
}

// not accessible
// trying to print an anonymous function without calling it
console.log(function (a, b) {
  return a + b;
}); // function (a, b) { return a + b; }

// trying to print the result of calling an anonymous
// function with arguments
console.log(function (a, b) {
  return a + b;
}(1, 2)); // 3

// accessible by a variable
// assigning an anonymous function to a variable
let add = function (a, b) {
  return a + b;
};

// printing the variable that holds the anonymous function
console.log(add); // function (a, b) { return a + b; }

// printing the result of calling the anonymous function
// through the variable with arguments
console.log(add(1, 2)); // 3

IIFE (Immediately Invoked Function Expression)

• An anonymous function can be used as an IIFE (Immediately Invoked Function Expression) which runs as soon as it is defined.

• It's wrapped in parentheses to distinguish it from a function declaration.

For example:

// IIFE
// creating an anonymous function and wrapping it with parentheses
(function () {
  // displaying a message in an alert box
  alert("Code runs!");
// adding another pair of parentheses to immediately invoke
// the anonymous function
})();

IIFE (Immediately Invoked Function Expression) Benefits:

• IIFEs are commonly used to create a private scope for variables, avoiding global scope pollution.

• They're also useful for executing code immediately without the need for a separate function call.

I hope this blog has helped you understand function expressions and how to use them in your code.

Until next time, stay awesome!

If you enjoyed this article , follow me Salman