Create and understand functions in Javascript!

Functions are one of the fundamental building blocks in JavaScript.

A function in JavaScript is similar to a procedure (a set of instructions that performs a task).

We can say that a function is a block of instructions where a certain algorithm/task/instruction will be performed that will return a result or modify certain values for the future.

And we can also emphasize that functions are mainly used to execute repetitive code.

Although we know what we can do with a function many times we do not understand whether to declare them in one way or another, this because we have several ways to declare them, so let's see them:

Function Declaration

This is the traditional one of always that consists of the keyword function, followed by:

1. The name of the function.
2. A list of parameters of the function, in parentheses and separated by commas, if there are no parameters, just leave the parentheses empty ().
3. The JavaScript declarations that define the function, enclosed in curly brackets, { ... }.

function my_name(a, b, ...) {
  // javascript declaration, operations, etc.
  // simply what the function will do when called
  return a * b;
}

Function Expression

The main difference between the function expression and the function declaration is that here they do not start with the reserved word function but start as if we were creating a variable:

const variable = function(a, b) {
  // javascript statement...
}

We can realize that these functions (function expression) can be anonymous, but we can make mention of them or send them to call with the name of the variable where we host it.

Also another of the differences with respect to these two functions, is the place where we declare them:

alert(foo()); // "soylenin" ✅
function foo () {return "soylenin";}

With the function declaration we can say that these functions once they are declared will be available anywhere, as long as they are within their scope, and it does not matter if they are called before or after.

But with function expressions (function expression) is different, because we know that the function is stored in a variable and remember that variables can not be called before having assigned them, otherwise it will simply be an error:

alert(foo()); // ERROR! foo is not declared
const foo = function() {return "soylenin";}

Arrow Functions

An arrow function is a compact alternative to a traditional function expression, but it is limited and cannot be used in all situations.

Instead of continuing to use the word function we can omit it but instead we have to put an equal sign (=) plus a closing square parenthesis (>) [or a better known "greater than"] after the closing parenthesis:

const variable = () => {
  return "soylenin"
}

console.log(variable()) // "soylenin"

This function is more compact and has its own benefits with respect to the rest, since if we only return a single value, we can remove the word return and the braces and implicitly the function will return the value.

const variable = () => "soylenin"

console.log(variable()) // "soylenin"

This is very practical because we eliminate code and the function is still as effective, and we must say that we can not only use arrow functions in this way, in the world the most common use that is given to this function is when they are used within iterator methods, for example .map() in an array.

const finalValue = arrayProduct.map((item) => item.id === 3)

Here simply the variable valueFinal will be assigned the value of the array that corresponds to the id of 3.

Also one of the other great benefits is that it is used to inherit the context.

Basically it was to remove the cumbersome and strange ways of using this in our code, making it more intuitive code.

In traditional functions by default this is in the window scope:

window.age = 10; // <-- can you feel me?
function Person() {
  this.age = 42; // <-- can you feel me?
  setTimeout(function () {// <-- The traditional function is running in the scope of window
  console.log("this.age", this.age); // generates "10" because the function is executed in the scope of window
  }, 100);
}

const p = Person();

The arrow functions do not default this to the scope of window, rather they are executed in the scope in which they are created:

window.age = 10; // <-- can you feel me?
function Person() {
  this.age = 42; // <-- can you feel me?
  setTimeout(() => {// <-- Arrow function executing in the scope of "p" (when the function is sent to be called and where it is hosted)
    console.log("this.age", this.age); // generates "42" because the function is executed in the scope of Person
  }, 100);
}

const p = Person();