The different ways to define a function in JavaScript

Samer Buna

Follow

Mar 19 · 3 min read

So you want to create a function in JavaScript?

You. Have. Options:

1 — Declaration Function

function sum(a, b) { return a + b; } 

2 — Expression Function

// Can be named:
(function sum(a, b) { return a + b; }); // Or anonymous (AVOID):
(function(a, b) { return a + b; });// Or assigned to a variable
const sum = function sum(a, b) { return a + b; })

3 — Arrow Function

// Single argument, one line return:
name => name.split(' ')// Multi arguments, one line return:
(a, b) => a + b// Single argument, full body:
name => { return name.split(' '); }// Regular:
(a, b) => { return a + b };

4— Generator Function

function *sum(a, b) { yield a + b; }

5— Async Function

async function sum(a, b) { return await a + b; }

6— Constructor Function (AVOID)

new Function(‘a’, ‘b’, ‘return a + b;’);

7— Exported Function

// Default exports
export default function(a, b) { return a + b; };// Named exports
export function sum(a, b) { return a + b; };

8— Object Property Function

// Regular:
const object = {
  sum: function(a, b) { return a + b; },
};// Shorthand:
const object = {
  sum(a, b) { return a + b; },
};

9— Object Dynamic Property Function

const functionName = "sum";const object = {
  [functionName]: function(a, b) { return a + b; },
};

10 — Object Property Getter/Setter Function

// Regular:
const object = {
  get answer { return 42; },
  set answer(value) { /* do something with value */ },
};

//  With defineProperty
const obj = {};
Object.defineProperty(obj, "answer", {
  get() { return 42; },
  set(value) { /* do something with value */ },
});

11 — Object Dynamic Property Getter/Setter Function

const functionName = "answer";const object = {
  get [functionName]() { return 42; },
  set [functionName](value) { /* do something with value */ },
};

12 — Class Method Function

class Compute {
  // Regular:
  sum(a, b) { return a + b; }
}class Compute {
  // Static:
  static sum(a, b) { return a + b; };
}

13 — Class Property Function

class Compute {
  // Regular:
  sum = function (a, b) { return a + b; };
}class Compute {
  // Static:
  static sum = function(a, b) { return a + b; };
}

14 — Class Private Function

class Compute {
  // Regular:
  #sum(a, b) {
    return a + b;
  }  // Static:
  static #sum(a, b) {
    return a + b;
  }
}

I tried to keep the list to only the uniquely different ways to create a function. If you start thinking about combining some of these ways there would be a lot more options.

Did I miss anything? Let me know.

This article was originally published at jsComplete.