The different ways to define a function in JavaScript

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.