Types of Functions in JavaScript — Differences Explained

JavaScript has several ways to define functions. They look similar, but they differ in hoisting, this, arguments, and whether they can be used with new.

If you’ve ever wondered why fn() works before its line for one function but throws for another — or why an arrow “method” prints undefined — this guide is for you.

Table of contents
  1. Function Declaration
  2. Function Expression
  3. Arrow Function
  4. Object Method
  5. Constructor Function & Class
  6. Generator Function
  7. Async Function
  8. IIFE (Immediately Invoked Function Expression)
  9. Quick Comparison Table
  10. Key Differences
  11. When to Use What
  12. Interview Gotchas

1. Function Declaration 

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

greet("Amit"); // "Hello, Amit"

Enter fullscreen mode Exit fullscreen mode

Key traits

  • Fully hoisted — you can call it before its definition
  • Has its own this (depends on how it’s called)
  • Has arguments
  • Can be used with new, but prefer class / dedicated constructors — don’t treat that as the normal pattern
  • Best for named, reusable top-level functions 
sayHi(); // works — hoisted

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

Enter fullscreen mode Exit fullscreen mode

2. Function Expression 

const greet = function (name) {
  return `Hello, ${name}`;
};

Enter fullscreen mode Exit fullscreen mode

Named function expression (useful for stack traces / recursion):

const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1);
};

Enter fullscreen mode Exit fullscreen mode

Key traits

  • The variable may be hoisted (var), but the function value is not available until the assignment runs
  • With const / let, accessing before the line is a TDZ ReferenceError
  • With var, calling before assignment is usually a TypeError (undefined is not a function)
  • Same this / arguments behavior as a declaration
  • Can be anonymous or named
  • Common when assigning functions to variables or passing as callbacks 
// var → TypeError
sayHiVar(); // TypeError: sayHiVar is not a function
var sayHiVar = function () {
  console.log("Hi");
};

// const / let → ReferenceError (TDZ)
sayHiConst(); // ReferenceError: Cannot access 'sayHiConst' before initialization
const sayHiConst = function () {
  console.log("Hi");
};

Enter fullscreen mode Exit fullscreen mode

3. Arrow Function 

const greet = (name) => `Hello, ${name}`;

const add = (a, b) => {
  return a + b;
};

Enter fullscreen mode Exit fullscreen mode

Key traits

  • Not hoisted
  • No own this — uses lexical this from the surrounding scope
  • No arguments object (use rest params: (...args) => {})
  • Cannot be used as a constructor (new throws)
  • No prototype
  • Perfect for callbacks, map / filter / reduce, and preserving outer this

Lexical this example 

const user = {
  name: "Amit",
  regular() {
    setTimeout(function () {
      console.log(this.name); // undefined (or global) — lost this
    }, 0);
  },
  arrow() {
    setTimeout(() => {
      console.log(this.name); // "Amit" — lexical this
    }, 0);
  },
};

user.regular();
user.arrow();

Enter fullscreen mode Exit fullscreen mode

Rest instead of arguments 

const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
sum(1, 2, 3); // 6

Enter fullscreen mode Exit fullscreen mode

Guess the output? 
const user = {
  name: "Amit",
  greet: () => this.name,
};
console.log(user.greet());

Enter fullscreen mode Exit fullscreen mode

Answer: undefined in a typical module / strict runtime — the arrow does not take this from user.


4. Object Method 

const user = {
  name: "Amit",
  greet() {
    return `Hello, ${this.name}`;
  },
};

user.greet(); // "Hello, Amit"

Enter fullscreen mode Exit fullscreen mode

Key traits

  • this is usually the object that owns the method (when called as obj.method())
  • Shorthand method syntax is preferred over greet: function () {}
  • Avoid arrow functions as object methods if you need this to be the object 
const user = {
  name: "Amit",
  greet: () => `Hello, ${this.name}`, // wrong — lexical this
};

user.greet(); // "Hello, undefined" (in modules / strict mode)

Enter fullscreen mode Exit fullscreen mode

5. Constructor Function & Class

Constructor function 

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function () {
  return `Hello, ${this.name}`;
};

const p = new Person("Amit");
p.greet(); // "Hello, Amit"

Enter fullscreen mode Exit fullscreen mode

Class (modern syntax) 

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, ${this.name}`;
  }
}

const p = new Person("Amit");

Enter fullscreen mode Exit fullscreen mode

Key traits

  • Meant to be called with new
  • Creates instance objects
  • Methods usually live on the prototype (shared across instances)
  • Prefer class in modern code; behavior is still prototype-based under the hood
  • Classes are hoisted into the TDZ — you cannot use them before the class line (ReferenceError) 
const user = new User(); // ReferenceError
class User {}

Enter fullscreen mode Exit fullscreen mode

React / class-fields note 

class Button {
  label = "Save";

  // Per-instance arrow — lexical this (handy for callbacks)
  onPress = () => this.label;

  // Prototype method — this depends on call site
  handle() {
    return this.label;
  }
}

Enter fullscreen mode Exit fullscreen mode

6. Generator Function 

function* idGenerator() {
  let id = 1;
  while (true) {
    yield id++;
  }
}

const gen = idGenerator();
gen.next().value; // 1
gen.next().value; // 2
gen.next().value; // 3

Enter fullscreen mode Exit fullscreen mode

Key traits

  • Defined with function*
  • Can pause and resume with yield
  • Returns an iterator
  • Useful for lazy sequences, custom iteration, infinite lists

Also works as a generator method:

const obj = {
  *range(n) {
    for (let i = 1; i <= n; i++) yield i;
  },
};

[...obj.range(3)]; // [1, 2, 3]

Enter fullscreen mode Exit fullscreen mode

There are also async generators (async function*) used with for await...of — same pause/resume idea for async streams.

7. Async Function 

async function loadUser() {
  const res = await fetch("/api/user");
  return res.json();
}

// async arrow
const loadUserArrow = async () => {
  const res = await fetch("/api/user");
  return res.json();
};

Enter fullscreen mode Exit fullscreen mode

Key traits

  • Always returns a Promise
  • Lets you write async code with await in a sync-looking style
  • Thrown errors become rejected promises (use try/catch or .catch())
  • await on a non-Promise still works — the value is wrapped 
async function example() {
  return 42;
}

example(); // Promise that resolves to 42

Enter fullscreen mode Exit fullscreen mode

8. IIFE (Immediately Invoked Function Expression)

Also called a self-calling or self-invoking function.

An IIFE is defined and executed in the same step — you don’t call it later by name.

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

// Arrow version
(() => {
  console.log("I also run immediately");
})();

Enter fullscreen mode Exit fullscreen mode

Why wrap in parentheses?

Without wrapping, JS treats function as a declaration, and declarations can’t be invoked that way as a statement.

// Valid — force an expression, then invoke
(function () {
  console.log("works");
})();

Enter fullscreen mode Exit fullscreen mode

Other (less common) IIFE forms 
(function () {
  console.log("form 1");
})();

(function () {
  console.log("form 2");
}());

!function () {
  console.log("form 3");
}();

Enter fullscreen mode Exit fullscreen mode

Prefer the (function () { ... })() or (() => { ... })() style in real code.


Pass arguments 

(function (name) {
  console.log(`Hello, ${name}`);
})("Amit");

Enter fullscreen mode Exit fullscreen mode

Create private scope 

(function () {
  const secret = "hidden";
  // secret is not accessible outside
})();

// console.log(secret); // ReferenceError

Enter fullscreen mode Exit fullscreen mode

Return a value / module-like API 

const counter = (function () {
  let count = 0;

  return {
    increment() {
      count++;
      return count;
    },
    getCount() {
      return count;
    },
  };
})();

counter.increment(); // 1
counter.getCount(); // 1
// count itself is private

Enter fullscreen mode Exit fullscreen mode

Async IIFE

Useful for top-level async setup when you can’t use top-level await:

(async function () {
  const res = await fetch("/api/user");
  console.log(await res.json());
})();

Enter fullscreen mode Exit fullscreen mode

Key traits

  • Defined and executed immediately
  • Creates a private scope
  • Can take parameters and return values
  • Common before ES modules; still used in bundles, polyfills, one-off setup, and interviews
Guess the output? 
const result = (function () {
  var x = 10;
  return x;
})();

console.log(result);
// console.log(x);

Enter fullscreen mode Exit fullscreen mode

Answer: result is 10. Logging x throws ReferenceError — x stayed private inside the IIFE.


9. Quick Comparison Table

Feature Declaration Expression Arrow Method Constructor / Class Generator Async
Hoisting Yes (full) No (assignment); var/const differ No No Function ctor: yes · Class: TDZ Like its form Like its form
Own this Yes Yes No (lexical) Yes (usually) Yes (instance) Yes Yes (unless arrow)
arguments Yes Yes No Yes Yes Yes Yes (unless arrow)
Can use new Possible* Possible* No Not intended Yes Avoid No
Returns Any Any Any Any Instance Iterator Promise
Best for Named utils Assigned fns Callbacks Object behavior OOP / instances Lazy iteration Async / await

* Technically allowed for classic functions, but prefer class for constructors.

10. Key Differences

Declaration vs Expression

Point Function Declaration Function Expression
Syntax function fn() {} const fn = function () {}
Before definition Callable var → TypeError · const/let → ReferenceError
Name required Yes Optional
Use case Top-level helpers Assign to vars, pass as values 
hello(); // works
function hello() {
  console.log("declaration");
}

bye(); // ReferenceError with const
const bye = function () {
  console.log("expression");
};

Enter fullscreen mode Exit fullscreen mode

Arrow Function vs Normal Function

“Normal function” = declaration or classic expression.

Feature Normal Function Arrow Function
Own this Yes — depends on how it’s called No — lexical
arguments Yes No — use ...args
Can use new Yes No (TypeError)
prototype Yes No
Implicit return No Yes — () => value
Best for Methods, constructors, own this Callbacks, keep outer this

this binding 

const user = {
  name: "Amit",
  normal: function () {
    console.log(this.name); // "Amit"
  },
  arrow: () => {
    console.log(this.name); // undefined (not the object)
  },
};

user.normal();
user.arrow();

Enter fullscreen mode Exit fullscreen mode

Constructor usage 

function Person(name) {
  this.name = name;
}
new Person("Amit"); // OK

const PersonArrow = (name) => {
  this.name = name;
};
new PersonArrow("Amit"); // TypeError

Enter fullscreen mode Exit fullscreen mode

When to use which

  • Normal function → object methods, constructors, handlers where you need call-site this
  • Arrow function → callbacks (map, filter, setTimeout) where you want the parent’s this

Method vs Arrow as Method

Point Method greet() {} Arrow property greet: () => {}
this Owning object (usual call) Outer / lexical this
Recommended for objects? Yes Usually no 
const user = {
  name: "Amit",
  method() {
    return this.name; // "Amit"
  },
  arrow: () => this.name, // wrong for object method
};

Enter fullscreen mode Exit fullscreen mode

Constructor Function vs Class

Point Constructor Function Class
Syntax function Person() {} class Person {}
Style Older / prototype style Modern syntactic sugar
Before definition Function is hoisted TDZ — ReferenceError
Internals Prototype model Same prototype model 
function PersonFn(name) {
  this.name = name;
}

class PersonClass {
  constructor(name) {
    this.name = name;
  }
}

Enter fullscreen mode Exit fullscreen mode

Function Expression vs IIFE

Point Function Expression IIFE
When it runs When you call it later Immediately
Stored in variable? Usually yes Often not needed
Purpose Reuse later One-time run + private scope 
const greet = function (name) {
  console.log(name);
};
greet("Amit");

(function (name) {
  console.log(name);
})("Amit");

Enter fullscreen mode Exit fullscreen mode

An IIFE can be an arrow:

(() => {
  console.log("arrow IIFE");
})();

Enter fullscreen mode Exit fullscreen mode

Normal vs Async vs Generator (quick)

Point Normal Async Generator
Keyword function async function function*
Returns Any value Always a Promise An iterator
Special — await yield / .next() 
function syncFn() {
  return 10; // number
}

async function asyncFn() {
  return 10; // Promise → 10
}

function* gen() {
  yield 1;
  yield 2;
}

Enter fullscreen mode Exit fullscreen mode

11. When to Use What

Need Prefer
Named reusable helper Function declaration
Pass / assign a function Function expression or arrow
Callback / array method / keep outer this Arrow function
Behavior on an object Object method / class method
Create many similar objects class
Pause / resume / lazy values Generator
Fetch / timers / promises Async function
Run once + private variables IIFE (or an ES module)

12. Interview Gotchas

1. Hoisting: declaration vs expression 

fnDecl(); // works

function fnDecl() {}

fnVar(); // TypeError
var fnVar = function () {};

fnConst(); // ReferenceError (TDZ)
const fnConst = function () {};

Enter fullscreen mode Exit fullscreen mode

2. Arrow functions don’t bind their own this 

const button = {
  id: "save",
  bindRegular() {
    setTimeout(function () {
      console.log(this.id); // undefined — lost this
    }, 0);
  },
  bindArrow() {
    setTimeout(() => {
      console.log(this.id); // "save" — lexical this
    }, 0);
  },
};

Enter fullscreen mode Exit fullscreen mode

In the browser, a regular addEventListener callback gets the element as this; an arrow does not.

3. Losing this when extracting a method 

const user = {
  name: "Amit",
  greet() {
    return this.name;
  },
};

const fn = user.greet;
fn(); // undefined (this is lost)

fn.call(user); // "Amit"

Enter fullscreen mode Exit fullscreen mode

4. Async always returns a Promise 

async function getValue() {
  return 10;
}

getValue().then(console.log); // 10

Enter fullscreen mode Exit fullscreen mode

5. Don’t use arrow functions as constructors 

const Person = (name) => {
  this.name = name;
};

new Person("Amit"); // TypeError

Enter fullscreen mode Exit fullscreen mode

6. IIFE creates private scope 

(function () {
  var x = 10;
})();

// console.log(x); // ReferenceError

Enter fullscreen mode Exit fullscreen mode

Practical Rule of Thumb

  • Declaration → top-level named functions
  • Arrow → callbacks and short logic where lexical this helps
  • Method / class → object behavior and OOP
  • Async → anything that waits on promises
  • Generator → when you need yield or custom iterators
  • IIFE → run once immediately with private scope (or just use a module)

Master these differences and you can explain not just how to write a function, but why one form is better than another — in interviews and in real projects.

If this helped, leave a ❤️ and comment which function type still confuses you the most.