Different Ways to Declare Functions in JavaScript

In this article, you’ll learn the different ways you can declare functions in JavaScript. One of the coolest thing about JavaScript is that functions can be:

• Passed into other functions
• Stored in variables
• Moved around like any other piece of data in JavaScript.

There are 2 ways to declare a function in JavaScript:

A. Known Declarations

B. Unknown (Anonymous) Declarations

KNOWN FUNCTION DECLARATIONS

These are function declarations that has a name. This is the normal way of declaring a function in JavaScript. For instance:

function myCalculator(a, b) {
  total = a + b;
  return total;
}

Some key takeaways:

• Function declarations allows for hoisting (which means that JavaScript will take all function keyword and hoist them up, up and up and says “you’re a function, you belong at the top of the file”. That means that anywhere you call the function, it’ll be available to you.
• It allows only for explicit return (having to type the return keyword)
• There are curly brackets {}
• There’s a need for parenthesis () even with a single function parameter

UNKNOWN/ANONYMOUS FUNCTION DECLARATIONS

Anonymous functions are functions without a name. For instance:

function(name) {
  return `Your name is ${name}`;
}

Some key takeaways:

• It displays error if you try running it directly on the console
• Anonymous functions are only valid in some use cases like callbacks, IIFE (immediately invoked function expression)

Examples of Anonymous function Declarations:

METHOD 1— Variable Function Expressions

Function expressions are also called Variable expressions. It’s a method of storing a function inside a variable.

const myCalculator = function(a, b) {
  total = a + b;
  return total;
}

Some key takeaways:

• JavaScript does not hoist variable functions
• Variables functions are anonymous functions (which means they are functions without a name
• They are Explicitly returned (which means you have to type the return keyword)
• They make use of curly brackets for statements {}
• There is always a need for parenthesis () even with a single function parameter.

METHOD 2 — Arrow Function Expressions

These are function expressions that make use of the fat arrow => for the return statements.

const myCalculator = (a, b) => a + b;

Some key takeaways:

• Arrow function is also an anonymous function
• They are Implicitly returned (Not having to type the return keyword)
• They don’t make use of curly brackets for statements
• There’s no need of parenthesis () around a single function parameter

METHOD 3 — IFFY Function Expressions (immediately invoked function expression)

(function(a, b) {
  total = a + b;
  return total;
})();

Some key takeaways:

• Function will be wrapped by parenthesis (parenthesis always run first in JavaScript)
• It returns the value which you can immediately run by putting parenthesis on the end
• It can as well takes in parameters

METHOD 4 — Method Function Expressions

Method is simply a function that lives inside of an object.

const calNum = {
  name: "victor",
  myAdd: function(a, b) {
    total = a + b;
    console.log(`${this.name.toUpperCase()}, Your result is ${total}`);
  },
  // Short hand Method
  mySub(a, b) {
    total = a - b;
    console.log(`${this.victor.toUpperCase()}, Your result is ${total}`);
  },
  // Arrow function
  myDiv: (a, b) => {
    total = Math.floor(a / b);
    // this.name won't work here because they take the parent scope of *this*
    console.log(`Your result is ${total}`);
  },
};

METHOD 5 — Callback Function Expressions

This is a function that is passed as an argument to another function.

Some key take aways:

• Callback function run after another function has finished
• Types: Click callback & Timer callback

// Click callback
const press = document.querySelector(".clickMe");
press.addEventListener("click", 
  function() {
    console.log("Nice Job!");
  });

// Timer callback
setTimeout(function() {
  console.log("IT'S TIME TO EAT YOUR BREAKFAST!")}, 2000);

I hope this article has been helpful to you. Don’t forget to give me a clap 👏 and follow me on twitter , facebook and youtube.