4 Ways to Make A Function in Javascript

A function is a recipe that lets you group together many repeating tasks for you to call it again and again. JavaScript lets you create functions in many different ways; of course, JavaScript is a functional programming language. So here are 4 ways you can make a function in JS:

Photo by La-Rel Easter on Unsplash

(Do let me know if I missed anything)

1. Function keyword

Make a function by using the function keyword, followed by the name of the function in parentheses:

function sayHello(name) {
  // Do something
}

This function can be called by sayHello("Tamal"); This also has access to the globalthis and arguments object.

2. Anonymous function

You can remove the sayHello part but now this is an anonymous function.

function() {
  // Do something
}

This is mostly used when you are passing a function as a parameter to another function.

setTimeout(function() {
  // Do something
}, 1000)

But you can assign this function to a variable like this:

var sayHello = function() {
  // Do something
}

Then you can call it simply sayHello()

The one caveat for using this approach is, you can only use the function after you have declared it.

sayHello()
// ERROR! doesn't work, because it's not declared yet
var sayHello = function() {
  // Do something
}

For regular functions, you can use them before you even declared them.

sayHello()
// Works like a charm!
function sayHello() {
  // Do something
}

3. Arrow functions (lambda)

Create a function without using the function keyword but you have to use the fat arrow => symbol.

() => {
  // Do something
}

It’s a compact way of making anonymous functions, you can even write in a single line: () => // Do something

Assign it to a variable so you can call it from elsewhere:

var sayHello = (name) => // Do something

One downside of using arrow function is that you don’t have access to the global this object and the arguments(array of parameters) property of the function

4. Immediately Invoked Function Expression

A function that runs immediately and you won’t have any access to it anymore. It looks like this:

(function(){
  // Do something
})()

The function body is inside a set of parentheses and there is another set of parentheses after it to execute it. You will put any parameters in the second set of parentheses.

(function(name){
  // Do something
})(“Tamal”)

Bonus: 5. Methods are also functions

You can put a function inside an object, they are called methods. A function inside an object can look like this:

var person = {
  sayName: function() { // Do something }
}

You can also define a method with this neat syntax:

var person = {
  sayName() { // Do something }
}

Which one to use and why?

When I first started out and learned about the arrow function, I used them every chance I got. Slowly I learned about all the many uses and now I use all of them sparingly across my programs.

I mostly use the function keyword now to make my code more readable. For one-liner or small placeholder functions, I use the arrow function syntax like in this example:

fetch(url)
  .then(// Do something)
  .catch(err => console.log(err))

I use anonymous functions in place of arrow functions when I want to make my code more readable.

I don’t use the var keyword to create functions (assigning an anonymous function to a variable) because I want to keep my functions flexible.

Finally, I don’t get to use the immediately invoked function because I don’t use any of the design patterns that makes use of it.

Whatever you use is totally up to you but make sure you are being consistent with your code.

If you are into Nodejs, you can check out my other posts:

Which Node JS Version Should I Use? - TamalWeb

What is Node JS? Explained in Simple Terms For Beginners - TamalWeb

Should I Learn JavaScript Before Learning Node JS? - TamalWeb