Functions

Functions are predefined instructions that the coder can provide to call upon later. They are a set of instructions for the computer to follow. Think about it like this; you can write code to create an object and everytime you want to create that object again you would have to write all the same lines of code in your project. Instead you can put all that code into a function and everytime you want to create that object again invoke the original function.

Writing a Function consists of two main things: Defining the function Calling/Invoking the function

Ex.

//Function Definition
function sum(a, b) {
  return a + b;
}
//Function Declaration
sum(10, 5);

In JavaScript there are 3 different types of functions you need to know about...

Function Declarations

Function Declaration is one of the types of functions you will find in JS. A function declaration behaves the same way as a normal function; which means it has a name, parameters, and arguments. The main advantage of using function declaration is that they are hoisted. This means that JavaScript moves the function declaration to the top scope block during the compilation phase. For more about hoisting you can look into my article Variable Hoisting in JS. Ex.

sum(10, 5);
function sum(a, b) {
  return a + b;
}

In the above example the function declaration sum is invoked before the function definition. The result will still be 15 though, JS won't throw any error. During compilation, the above code is changed by JavaScript to be:

function sum(a, b) {
  return a + b;
}
sum(10, 5);

Function Expressions

Another type of function in JavaScript is Function Expressions. A function expression is very similar and has almost the same syntax as a function declaration. The main difference between function declarations and function expressions is that, function expressions are not hoisted. This means that JavaScript does not move the function expression to the top scope block during the compilation phase. You cannot declare a function expression before it's defined this will throw a TypeError. Ex.

sum(10, 5);
var sum = function (a, b) {
  return a + b;
};

In example above, sum is a function expression; JavaScript throws an error when we declare (call/invoke) sum before it's defined. Ex.

var sum = function (a, b) {
  return a + b;
};
sum(10, 5);

This example will not throw an error since we are declaring (invoking) the function expression after it has been defined.

A function expression has great use cases for IIFE (immediately invoked function expression) which runs as soon as it's defined.

Arrow Functions

Arrow functions were introduced to JavaScript in ES6. They allow us to write shorter function syntax alternative to a traditional function syntax; with some limitations in usage.

Before arrow functions:

hello = function() {
   return='hello world!'
}

With arrow functions:

hello = () => {
   return='hello world!'
}

It gets better than that though, if the function only has one statement and the statement returns a value, you can remove the brackets and the return keyword.

hello = () => "hello world!";

You can put parameters into the parentheses and if you only have one parameter you don't need the parenthesis.

hello = (name) => "hello" + name;

Now onto the limitations: Arrow Functions don't have their own bindings to this, arguments, or super, and should not be used as methods.

They can not be used as constructors. Calling them with the new keyword will throw a TypeError.

Summary: There is more than one way to create a function and they all are useful for different scenarios like a box of tools to help you finish your project. Functions are a set of instructions given to the computer to complete certain tasks. You can pass parameters that you want to use inside of the function; that you can then specify when you invoke it. The main advantage of function declarations are that they are hoisted, function expressions are not but they can be useful if you want to immediately invoke the function. Arrow functions behave as normal functions but alternatively have shorter syntax and some limitations that normal functions wouldn't have; like their own bindings to this, arguments, or super. Hence they should not be used as methods, and they cannot be used as constructors.