DEV Community

Buket [/boʊˈkeɪ/]
Buket [/boʊˈkeɪ/]

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode
function sayHello() {
  console.log("Hello!");
}
Enter fullscreen mode Exit fullscreen mode
function addNumbers(x, y) {
  let result = x + y;
  return result;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Hoisting example console screenshot.

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!
Enter fullscreen mode Exit fullscreen mode
const divideNumbers = function (number1, number2) { 
   return number1 / number2;
}
divideNumbers(8, 2)
//4
Enter fullscreen mode Exit fullscreen mode

-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
}
Enter fullscreen mode Exit fullscreen mode

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?

Screenshot of trying to invoke divideNumbers

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Top comments (0)