When should I use an expression over a declaration?

Use expressions when: 1) Assigning to a variable conditionally, 2) Passing as a callback, 3) You want to prevent hoisting (enforce define-before-use). Use declarations for top-level named functions that should be available throughout the scope.

Are arrow functions also expressions?

Yes! Arrow functions are always expressions — they can never be declarations. 'const fn = () => {}' is an arrow function expression assigned to a variable.

Why would I name a function expression?

Named function expressions show the name in stack traces (easier debugging) and allow the function to call itself recursively. The name is only visible inside the function body.

Are IIFEs still useful?

Rarely in modern code with modules and block scoping. They're still used in: 1) Scripts that need to avoid global pollution without modules, 2) Creating async IIFEs: (async () => { await ... })(), 3) Some build tool patterns.

JavaScript Function Expressions

Functions as values. Store them, pass them, return them.

Expression vs Declaration

Two ways to create functions — different behavior.

// Function Declaration:
function greet(name) {
  return "Hello, " + name;
}

// ✓ Hoisted — can call before definition
// ✓ Has a name in stack traces
// ✓ Stands alone as a statement

✓ Hoisted to top of scope

// Declaration: works before definition
sayHi(); // "Hi!" ← hoisted
function sayHi() { return "Hi!"; }

// Expression: error before definition
sayBye(); // TypeError!
const sayBye = function() { return "Bye!"; };

Visualize

→ TypeError: sayBye is not a function

Anonymous Functions

Functions without a name — used as values.

// Anonymous — no name after 'function':
const greet = function(name) {
  return "Hello, " + name;
};

// Named expression — has a name:
const greet = function greetFn(name) {
  return "Hello, " + name;
};
// greetFn is only visible inside itself (for recursion)
// Outside, only 'greet' works

Common uses of anonymous functions:

// 1. Array callbacks:
[1, 2, 3].map(function(n) { return n * 2; });

// 2. Event handlers:
button.addEventListener("click", function() {
  console.log("clicked");
});

// 3. Immediately executed:
(function() {
  console.log("runs now!");
})();

First-Class Functions

In JavaScript, functions are values — just like numbers or strings.

Store in variable

const fn = function() {}

Store in array

const fns = [fn1, fn2]

Pass as argument

arr.map(fn)

Return from function

return function() {}

// Functions as object values:
const math = {
  add: function(a, b) { return a + b; },
  sub: function(a, b) { return a - b; },
};
math.add(2, 3); // 5

// Functions in an array:
const transforms = [
  function(x) { return x * 2; },
  function(x) { return x + 10; },
  function(x) { return x ** 2; },
];
transforms[0](5); // 10

IIFE

Immediately Invoked Function Expression — runs as soon as defined.

// IIFE pattern:
(function() {
  const secret = "hidden";
  console.log("I run immediately!");
})();

// 'secret' is not accessible here
// console.log(secret); // ReferenceError

// With parameters:
(function(name) {
  console.log("Hello, " + name);
})("World");
// "Hello, World"

You can pass arguments to an IIFE just like any function call.

1 / 2

FAQ

Common questions about function expressions.

// Declaration: works before definition sayHi(); // "Hi!" ← hoisted function sayHi() { return "Hi!"; } // Expression: error before definition sayBye(); // TypeError! const sayBye = function() { return "Bye!"; };

// Anonymous — no name after 'function': const greet = function(name) { return "Hello, " + name; }; // Named expression — has a name: const greet = function greetFn(name) { return "Hello, " + name; }; // greetFn is only visible inside itself (for recursion) // Outside, only 'greet' works

// 1. Array callbacks: [1, 2, 3].map(function(n) { return n * 2; }); // 2. Event handlers: button.addEventListener("click", function() { console.log("clicked"); }); // 3. Immediately executed: (function() { console.log("runs now!"); })();

// Functions as object values: const math = { add: function(a, b) { return a + b; }, sub: function(a, b) { return a - b; }, }; math.add(2, 3); // 5 // Functions in an array: const transforms = [ function(x) { return x * 2; }, function(x) { return x + 10; }, function(x) { return x ** 2; }, ]; transforms[0](5); // 10