15 Ways to define a JavaScript Function

1. Function Declaration:

A named function defined using the function keyword. It can be called before it is defined due to hoisting.

function greet() {
  console.log("Hello, world!");
}
greet()

2. Function Expression

A function defined within an expression. It’s assigned to a variable and not hoisted.

const greet = function() {
  console.log("Hello, world!");
};
greet()

3. Named function

Similar to a function expression but with a name. Useful for recursion or debugging.

const greet = function greeting() {
  console.log("Hello, world!");
};
greet()

4. Arrow function

A concise syntax for function expressions introduced in ES6. It does not have its own this context.

const greetings = () => {
  console.log("Hello, world!");
};
greetings()

5. Anonymous Function

A function without a name, often used as a callback or immediately invoked function.

setTimeout(function() {
  console.log("Hello, world!");
}, 1000);

6. Immediately Invoked Function Expression (IIFE)

A function that is defined and executed immediately. Used to create a private scope.

(function() {
  console.log("Hello, world!");
})();

7. Function as a Method (within an object)

A function defined as a property of an object, called a method.

const obj = {
  greet: function() {
    console.log("Hello, world!");
  }
};
obj.greet()

8. Function as a Method — Short Method Syntax (ES6)

A shorthand way to define methods in objects, introduced in ES6.

const obj = {
  greet() {
    console.log("Hello, world!");
  }
};
obj.greet();

9. Constructor Function

A function used to create objects with the new keyword. It sets properties on the created object.

function Person(name) {
  this.name = name;
}
const person = new Person("John");
console.log(person.name)

10. Class Method (ES6)

Methods defined within an ES6 class. Classes are syntactical sugar over constructor functions.

class Person {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    console.log(`Hello, ${this.name}`);
  }
}
const person = new Person("John");
person.greet();

11. Object Method Shorthand in Class (ES6)

This is another variation of defining methods within classes, using the shorthand syntax.

class Person {
  greet(name) {
    console.log(`Hello, ${name}!`);
  }
}
const person = new Person();
person.greet("John");

12. Generator Function

Generator functions allow you to define an iterative algorithm by writing a single function whose execution is not continuous.

function* generatorFunction() {
  yield 'Hello';
  yield 'world';
}
const generator = generatorFunction();
console.log(generator.next().value); // Hello
console.log(generator.next().value); // world

13. Function Constructor

The Function constructor creates a new Function object. It can be used to dynamically create functions, though it is generally discouraged due to performance and readability issues.

const greet = new Function('console.log("Hello, world!");');
greet();

14. Async Function (ES2017)

Async functions are a special type of function that returns a Promise and allows the use of the await keyword.

async function greet() {
  const message = await Promise.resolve("Hello, world!");
  console.log(message);
}
greet();

15. Object Method with Computed Property Names (ES6)

Functions can be defined as methods with dynamic property names within objects.

const methodName = 'greet';

const obj = {
  [methodName]() {
    console.log("Hello, world!");
  }
};
obj.greet();

Watch on YouTube