The different ways to define a function in JavaScript

Samer Buna
Mar 19, 2020 · 3 min read
Image for post
Image for post

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.

EdgeCoders

Samer Buna

Written by

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

EdgeCoders

jsComplete’s Medium Publication — jsComplete is a FREE software educational library focused on JavaScript, Node, React & GraphQL. It has video courses, books, articles, and interactive lessons.

Samer Buna

Written by

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

EdgeCoders

jsComplete’s Medium Publication — jsComplete is a FREE software educational library focused on JavaScript, Node, React & GraphQL. It has video courses, books, articles, and interactive lessons.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store