Store a Function as a Value

A function expression creates a function value that can be assigned or passed to another operation. Defining a function does not execute its body; the later call supplies the actual mark.

Before this topic, review Name a Reusable Task if its terms are unfamiliar.

This is JavaScript using language features and the host console. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

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.

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

Hello, world!

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

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!

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

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

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

Learning JavaScript

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

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.

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

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

A const function expression cannot be called before its binding initializes. A named expression's internal name is useful for self-reference.

Your task: Replace passed(72) with passed(40). Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

The stored function is unchanged; only its argument changes.

A function expression creates a function value that can be assigned or passed to another operation. Defining a function does not execute its body; the later call supplies the actual mark.

Check your variation against this explanation: The stored function is unchanged; only its argument changes.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.