Understanding JavaScript Function Types: Declaration, Expression, and IIFE

Understanding JavaScript Function Types: Declaration, Expression, and IIFE

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 Declaration

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 Expression

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 Expressions

2.1 Anonymous Function Expression

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

2.2 Named Function Expression

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

2.3 Arrow Function Expression

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 Expression

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 Value

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)

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 Functions

• 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)

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 Table

Feature	Function Declaration	Function Expression	Arrow Function	IIFE
Syntax	function fn() {}	const fn = function() {}	const fn = () => {}	(function() {})();
Hoisted	✅ Yes	❌ No	❌ No	❌ No
Named	✅ Required	Optional	Optional	Optional
this Binding	Dynamic	Dynamic	Lexical	Lexical/Dynamic
Reusability	✅ Yes	✅ Yes	✅ Yes	❌ No (runs once)
Use Case	Reusable logic	Scoped/conditional logic	Callbacks, concise logic	Private execution scope

---

Visual Summary (Mental Model)

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

---

Conclusion

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?

• JSFiddle
• CodePen
• PlayCode