Function Expressions in JavaScript
Anonymous, Named & IIFE Explained

What is a Function Expression in JavaScript?

A function expression in JavaScript is when a function is defined inside an expression, often assigned to a variable. Unlike function declarations, function expressions are not hoisted, making their position in code important for execution.

Syntax of a Function Expression

const greet = function() {
  console.log("Hello, world!");
};
greet(); // Function call

Hello, world!

Function Expression vs Function Declaration

Let’s first understand the key difference between these two:

// Function Declaration
sayHello(); // Works - hoisted
function sayHello() {
  console.log("Hello from declaration");
}

// Function Expression
sayHi(); // ❌ Error - not hoisted
const sayHi = function() {
  console.log("Hi from expression");
};

Hello from declaration
Uncaught ReferenceError: Cannot access 'sayHi' before initialization

Types of Function Expressions

1. Anonymous Function Expression

This is a function without a name, assigned to a variable.

const add = function(a, b) {
  return a + b;
};
console.log(add(3, 4));

7

2. Named Function Expression

A function with a name, still assigned to a variable. Useful for recursion or debugging.

const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1);
};
console.log(factorial(5));

120

Note: fact is only available inside the function body, not outside.

3. Immediately Invoked Function Expression (IIFE)

Also known as self-executing functions, IIFEs run as soon as they are defined.

(function() {
  console.log("IIFE runs instantly!");
})();

IIFE runs instantly!

Why Use Function Expressions?

• To control when a function is available
• Encapsulation with IIFEs
• Assigning functions to variables, properties, or passing them as arguments

Example: Passing a Function Expression as an Argument

function execute(callback) {
  callback("JavaScript");
}

execute(function(name) {
  console.log("Learning " + name);
});

Learning JavaScript

Function Expressions Inside Objects

You can assign function expressions to object properties to define methods.

const person = {
  name: "Alice",
  greet: function() {
    return "Hello, " + this.name;
  }
};
console.log(person.greet());

Hello, Alice

Arrow Functions – A Special Type of Function Expression

Arrow functions provide a more concise syntax but come with some differences in this binding.

const square = (x) => x * x;
console.log(square(5));

25

Arrow functions don’t have their own this, which can be beneficial inside callbacks or when working with methods.

Key Differences at a Glance

Aspect	Function Declaration	Function Expression
Hoisting	Yes	No
Can be anonymous	No	Yes
Executed immediately	No	Possible via IIFE

Summary

Function expressions in JavaScript offer great flexibility. Whether you’re using them to encapsulate logic, pass behaviors, or write more modular code, mastering function expressions will help you write cleaner and more dynamic JavaScript.

In particular, pay attention to scope, hoisting, and how anonymous vs named expressions behave. Use IIFE when you want private scope execution. Prefer arrow functions for brevity and lexical scoping of this.

Practice Task

// Task: Create an IIFE that prints the square of 8

Try solving it and explore how scoping works within function expressions.