The different ways to define a function in JavaScript

Samer Buna
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.

jsComplete EdgeCoders

Samer Buna

Written by

Author for Pluralsight, O'Reilly, Manning, and LinkedIn Learning. Curator of jsComplete.com

jsComplete EdgeCoders

We write about the new and leading edge technologies with a focus on JavaScript

More From Medium

More from jsComplete EdgeCoders

More from jsComplete EdgeCoders

More from jsComplete EdgeCoders

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade