The different ways to define a function in JavaScript

javascript
1function sum(a, b) { return a + b; }
2 — Expression Function
javascript
1// Can be named:2(function sum(a, b) {3 return a + b;4});56// Or anonymous (AVOID):7(function(a, b) {8 return a + b;9 });10 // Or assigned to a variable11const sum = function sum(a, b) {12 return a + b;13 })
3 — Arrow Function
javascript
1// Single argument, one line return:2 name => name.split(' ');34// Multi arguments, one line return:5 (a, b) => a + b;67// Single argument, full body:8name => {9 return name.split(' ');10}1112// Regular:13 (a, b) => { return a + b };
4 — Generator Function
javascript
1function *sum(a, b) { yield a + b; };
5 — Async Function
javascript
1async function sum(a, b) {2 return await a + b;3};
6 — Constructor Function (AVOID)
javascript
1new Function(‘a’, ‘b’, ‘return a + b;’);
7 — Exported Function
javascript
1// Default exports2export default function(a, b) {3 return a + b;4};56// Named exports7export function sum(a, b) {8 return a + b;9};
8 — Object Property Function
javascript
1// Regular:2const object = {3 sum: function(a, b) {4 return a + b;5 },6};78// Shorthand:9const object = {10 sum(a, b) {11 return a + b;12 },13};
9 — Object Dynamic Property Function
javascript
1const functionName = "sum";23const object = {4 [functionName]: function(a, b) {5 return a + b;6 },7};
10 — Object Property Getter/Setter Function
javascript
1// Regular:2const object = {3 get answer {4 return 42;5 },6 set answer(value) { /* do something with value */ },7};89// With defineProperty10const obj = {};1112Object.defineProperty(obj, "answer", {13 get() {14 return 42;15 },16 set(value) { /* do something with value */ },17});
11 — Object Dynamic Property Getter/Setter Function
javascript
1const functionName = "answer";23const object = {4 get [functionName]() {5 return 42;6 },78 set [functionName](value) { /* do something with value */ },9};
12 — Class Method Function
javascript
1class Compute {2 // Regular:3 sum(a, b) {4 return a + b;5 };6};78class Compute {9 // Static:10 static sum(a, b) {11 return a + b;12 };13}
13 — Class Property Function
javascript
1class Compute {2 // Regular:3 sum = function (a, b) {4 return a + b;5 };6};78class Compute {9 // Static:10 static sum = function(a, b) {11 return a + b;12 };13}
14 — Class Private Function
javascript
1class Compute {2 // Regular:3 #sum(a, b) {4 return a + b;5 }67 // Static:8 static #sum(a, b) {9 return a + b;10 }11}
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.
Comments (1)

Rukon Uddin
Nics

2mo ago
Please login to join the conversation.