Understanding JavaScript Function Types: Declaration, Expression, and IIFEPermalink

JavaScript offers a flexible and powerful way to define and use functions. However, this flexibility can also lead to confusion—especially for new developers—about the different types of functions and how they behave.

In this article, we’ll break down the three primary ways of defining functions in JavaScript:

1. Function Declaration
2. Function Expression (including Arrow Functions and other variants)
3. Immediately Invoked Function Expression (IIFE)

We’ll explore each type with real code examples, compare their differences, and understand when and why to use each one.

1. Function DeclarationPermalink

Syntax

function greet(name) {
  console.log("Hello, " + name);
}

Characteristics

• Hoisted: Yes. Function declarations are hoisted to the top of their scope, so you can use them before they’re defined.
• Named: Always have a name.
• this Binding: Uses dynamic binding based on how the function is called.

Example

greet("Alice"); // Works even before the function is defined

function greet(name) {
  console.log("Hello, " + name);
}

Best For

Reusable functions that are called in multiple places throughout the code.

2. Function ExpressionPermalink

A function expression is when a function is assigned to a variable. These are not hoisted, and they can be either anonymous or named.

Syntax

const greet = function(name) {
  console.log("Hello, " + name);
};

Characteristics

• Hoisted: No. You cannot call the function before the expression.
• Named or Anonymous: Can be either.
• this Binding: Dynamic binding.

Variants of Function ExpressionsPermalink

2.1 Anonymous Function ExpressionPermalink

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

2.2 Named Function ExpressionPermalink

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

2.3 Arrow Function ExpressionPermalink

Introduced in ES6, arrow functions are a shorthand form of function expressions.

const greet = (name) => {
  console.log("Hello, " + name);
};

const double = n => n * 2; // concise body

2.4 Callback Function ExpressionPermalink

Function expressions are often used as callbacks, passed to other functions.

setTimeout(function() {
  console.log("This runs after 1 second");
}, 1000);

2.5 Function Expression as a Return ValuePermalink

You can return a function expression from another function (closure pattern).

function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
console.log(double(5)); // 10

2.6 Function Expression in Objects (Method Shorthand)Permalink

You can define methods directly in objects using shorthand.

const calculator = {
  add(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};

console.log(calculator.add(2, 3));      // 5
console.log(calculator.subtract(5, 2)); // 3

Characteristics of Arrow FunctionsPermalink

• Hoisted: No
• this Binding: Lexical (inherits from parent scope)
• Good For: Short, inline logic and callbacks

Example with this

const obj = {
  name: "Test",
  normalFunc: function() {
    console.log(this.name); // "Test"
  },
  arrowFunc: () => {
    console.log(this.name); // undefined (lexical scope)
  }
};

obj.normalFunc();
obj.arrowFunc();

3. Immediately Invoked Function Expression (IIFE)Permalink

Syntax

(function() {
  console.log("I run immediately!");
})();

Characteristics

• Executed Immediately: As soon as the script engine encounters it.
• Used for: Creating private scopes, avoiding polluting global namespace.
• Not Reusable: Typically used once.

Example

(function(name) {
  console.log("Hello, " + name);
})("Alice");

Comparison TablePermalink

Visual Summary (Mental Model)Permalink

Function Definitions
├── Declaration
├── Expression
│   ├── Anonymous
│   ├── Named
│   ├── Arrow
│   ├── Callback
│   ├── Return Value
│   └── Object Methods
└── IIFE (Special Expression)

ConclusionPermalink

Understanding the difference between function declarations, expressions, and IIFEs helps you write cleaner, more maintainable JavaScript. Each serves different purposes depending on the structure and need of your application. Once you’re comfortable with how hoisting and this behave across them, you’ll find yourself writing more reliable and predictable code.

Try Javascript Live?Permalink

• JSFiddle
• CodePen
• PlayCode