JavaScript Function Expressions: Storing Functions in Variables

you learned to create functions the classic way:

function greet(name) {
  return `Hello, ${name}! 👋`;
}

But here's something that bends beginners' minds. RememberLesson 5, where we said functions are adata type— avalue, like numbers and strings? That wasn't trivia. It means this is perfectly legal:

const greet = function(name) {
  return `Hello, ${name}! 👋`;
};
console.log(greet("Priya"));
// "Hello, Priya! 👋" — works the same!

A function… stored in a variable… like a number. This is called afunction expression, and it's not just a syntax variant — it unlocks entirely new superpowers: passing functions to other functions, storing them in arrays, and returning them from factories (the closure magic fromLesson 22!).

In this lesson: expressions vs declarations, the hoisting difference that explains a famous error, anonymous functions, and why "functions are values" is the most important sentence in JavaScript. Let's store some functions. 📦

The Two Ways to Create a Function

// ① FUNCTION DECLARATION — the standalone statement:function double(n) {  return n * 2;}
// ② FUNCTION EXPRESSION — a function as a VALUE, stored in a variable:const triple = function(n) {  return n * 3;};
console.log(double(5));
// 10console.log(triple(5));    // 15

Both call identically. Both work. The difference is what theyare:

🚨 The Hoisting Difference (The Famous Error!)

This is the difference that actually bites you in real code:

Declarations Are Hoisted — Callable Before Definition

sayHello();
// ✅ WORKS — even though it's defined below!
function sayHello() {
  console.log("Hello! 👋");
}

JavaScript hoists theentire declarationto the top of its scope — the function exists before its line is reached. This is why declaration order feels "flexible."

Expressions Are NOT Callable Before Definition

sayHi();
// ❌ TypeError: sayHi is not a function!
const sayHi = function() {
  console.log("Hi! 👋");
};

What happened?Remember Lesson 4 —constvariables exist in the "temporal dead zone" before their line. ThevariablesayHiis hoisted, but thefunction valueisn't assigned yet:

// What JavaScript effectively sees:const sayHi;                   // hoisted but uninitialized 💀
sayHi();
// 😱 calling something that isn't a function yet!
sayHi = function() {
  …
};
// assignment happens HERE

Which Should You Use? 🏆

// Declarations — for your main named functions (clear + hoisted):function calculateTotal(price) { … }
// Expressions — when a function IS a value:// (callbacks, arrays of functions, conditionally created functions)const handler = function() { … };

Modern team convention:many teams use expressions withconsteverywhere (predictable, no hoisting surprises); others use declarations for top-level functions. Either is fine — just be consistent. The interview answer is knowingwhy they differ:hoisting.

Anonymous Functions: The Nameless Workers 🥷

Function expressions usually skip the name — the variableisthe name:

const greet = function(name) {
  // 👈 no name after "function"  return `Hello, ${
  name
}!`;
}
;

A function without a name is ananonymous function. You've already used dozens:

// In event handlers (Lesson 30):btn.addEventListener("click", function() {  console.log("Clicked!");});
// In timers (Lesson 32):setTimeout(function() {  console.log("Time's up!");}, 1000);
// In array methods:[1, 2, 3].forEach(function(n) {  console.log(n);});

All anonymous function expressions — created on the spot, handed directly to another function. (And yes, arrow functions from Lesson 38 are just shorter anonymous expressions:n => console.log(n)🏹)

💡 Debugging tip:named expressions show their name in error stack traces, anonymous ones show "(anonymous)". For complex callbacks, a name helps:

script.js

Copy Code Run Online

const handleClick = function onButtonClick() {
  …
};
// traceable name ✅

The Superpowers of "Functions as Values" 🦸

Why does storing functions in variables matter? Because values can goanywhere— and now functions can too:

① Pass Functions INTO Other Functions (Callbacks!)

function processOrder(order, onSuccess, onFailure) {
  if (order.inStock) {
    onSuccess(order);
    // call whatever function was passed in!  } else {    onFailure(order);  }}
    const celebrate = order => console.log(`🎉 ${order.item} is yours!`);
    const apologize = order => console.log(`😢 Sorry, ${order.item} sold out`);
    processOrder( {
      item: "Laptop", inStock: true
    }, celebrate, apologize);
    // 🎉 Laptop is yours!

The callerinjectedbehavior. This is the foundation of event handling, array methods, and all of async JavaScript (Lessons 24/26's.then(fn)— you're passing functions!).

② Store Functions in Arrays/Objects

const operations = {
  add:(a, b) => a + b, subtract:(a, b) => a - b, multiply:(a, b) => a * b
};
console.log(operations.add(10, 5));
// 15console.log(operations["multiply"](4, 3)); // 12

A calculator that picks its operation byname— no if/else chain needed! This pattern (alookup table of functions) replaces long switch statements elegantly (compare Lesson 20!).

③ Return Functions FROM Functions (Factories!)

Lesson 22's closure magic, now fully decoded — it only works because functions are values:

function createGreeter(greeting) {
  return function(name) {
    // returning a function VALUE    return `${greeting}, ${name}!`;  };}
    const sayHello = createGreeter("Hello");
    const sayNamaste = createGreeter("Namaste");
    console.log(sayHello("Priya"));
    // "Hello, Priya!" 🎒console.log(sayNamaste("Amit"));     // "Namaste, Amit!" 🎒

🛠️ Mini Project: Command Processor 🤖

A mini chatbot brain — function expressions in a lookup table:

// 🤖 Command Processor — functions stored by name
const commands = {
  "/hello":(name) => `Hello, ${name}! 👋`, "/time":() => `It's ${new Date().toLocaleTimeString("en-IN")} 🕐`, "/joke":() => "Why do programmers prefer dark mode? Light attracts bugs! 🐛", "/square":(n) => `${n}² = ${n ** 2} 🔢`, "/help":() => "Commands: /hello /time /joke /square /help 📋"
};
function runCommand(input) {
  const[command, ...args] = input.split(" ");
  // split + rest — Lessons 14! ✨
  const action = commands[command];
  if (action) {
    // truthy check — Lesson 7!
    return action(...args);
    // spread the args in!
  } return "❓ Unknown command — try /help";
}console.log(runCommand("/hello Priya"));
// "Hello, Priya! 👋"
console.log(runCommand("/square 9"));
// "9² = 81 🔢"
console.log(runCommand("/time"));
// "It's 2:30:45 pm 🕐"
console.log(runCommand("/dance"));
// "❓ Unknown command — try /help"

Notice the architecture:adding a new command = adding one entry to the object. Noifchains, noswitch— the function expressionsarethe command table. This exact pattern powers real chatbots, CLI tools, and game command systems. 🏆

Common Beginner Mistakes (And Fixes)

Quick Self-Check: Lesson 39 Quiz 🧠

1. What's the core difference between a function declaration and a function expression?
2. What's the output (or error)?
   script.js

   Copy Code Run Online

   sayHi();
   const sayHi = function() {
     console.log("Hi!");
   };

3. What is an anonymous function?
4. Why can functions be stored in objects and passed as arguments in JavaScript?
5. Write a one-line arrow expressionhalfthat returns n/2.

(Answers: 1. A declaration is a standalone hoisted statement; an expression is a function value assigned to a variable, usable only after its line runs · 2. TypeError: sayHi is not a function — const variables exist uninitialized before their line (temporal dead zone) · 3. A function without a name — commonly used as callbacks:function() {…}or() => {…}· 4. Because functions are first-class values — a data type like numbers and strings, so they can go anywhere a value goes · 5.const half = n => n / 2;)