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.