The “FIRST-CLASS” citizens of JavaScript: FUNCTIONS Part 2

Handy Articles for Beginners: Functions Part-2

Welcome to the Part-2 of my Functions Series. In this post, I will explain 3 common ways of writing functions.
click here for Part-1.

1. Function Declaration
This is the most common way to write functions. We use the keyword “function” that is followed by the name of the function, pair of parentheses that accommodate parameters, and the curly braces holds the function body.

function divide(number1, number2) { 
   return number1 / number2;
}
divide(90, 15);
// 6

function sayHello() {
  console.log("Hello!");
}

function addNumbers(x, y) {
  let result = x + y;
  return result;
}

HOISTING
When we write our function with the function declaration, we can invoke our function before or after our function. This is called HOISTING and it is a privilege comes from using the 'function' keyword when creating a function.

greet("Anna");

function greet(name) {
    console.log('Hello, ' + name)
}
// Hello, Anna

2. Function Expression
Function expression involves defining a variable and assigning a function to that variable. This way of writing function is very useful to pass a function as an argument to another function.

const sayHello = function() {
  console.log("Hello!");
};
sayHello()
//Hello!

const divideNumbers = function (number1, number2) { 
   return number1 / number2;
}
divideNumbers(8, 2)
//4

-Xtra info- My variable divideNumbers has a value of an anonymous function. An anonymous function is a function without a name. It's a handy tool that programmers use to make their code more flexible and reusable (we create anonymous function on the fly, all the time). The syntax of an anonymous function is:

function (){ 
   function body
}

The function that is assigned to a variable also known as a function definition. I want to add an important note here. As you see, the function definition of my variable divideNumbers has the 'function' keyword. So, do you think if I try to invoke divideNumbers before function expression, will it work?

No, it will not work!
Why? The function here is a function definition that is assigned to a variable. I didn't invoke my function. I invoked my variable, to make my function definition to do the work, in this case dividing two numbers.

Remember;
HOISTING is a privilege comes from using the 'function' keyword when creating a function. We didn't create an independent function, we created a variable and assigned a function to that variable. This is the main difference between function declaration and function expression.

3. Arrow Function Expression
This function writing is a shorthand way to define a function using the => arrow notation. Arrow function expression is especially useful when you want to create an anonymous function or when you need to use a concise syntax.

Syntax of arrow function expression:

const divideNumbers = (number1, number2) => { 
   let result = number1 / number2;
   return results;
}
divideNumbers(8, 2)
//4

If your arrow function has only one line, you can remove the curly braces {}. You can also remove the word 'return' because arrow function will return the value automatically if the function is one line.

const functionName = (parameter1, parameter2) => parameter1 + parameter2;

const divideNumbers = (number1, number2) => number1 / number2;

If your arrow function has only one parameter, you can remove the parentheses ().

const greet = name => console.log("Hello, " + name);


const addTwo = number => number + 2;