Create and understand functions in Javascript!
Tags: showdev, webdev, javascript, codenewbie
Published: 2021-02-21 18:20:15

[![promo](//rollercoin.com/static/img/referral/banners/ref_72890.gif) ](https://rollercoin.com/?r=kl3gfn3b)

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, { ... }.

```javascript

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**:

```javascript

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:

```javascript

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:

```javascript

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:

```javascript

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.

```javascript

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.

```javascript

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:

```javascript

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:

```javascript

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();

```

<center>
If you liked the content you can support me in:
</center>

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/G2G42SCZF)

<center>
Want to earn free Bitcoins and Dogecoins? Click on the banner!
</center>

[![promo](//rollercoin.com/static/img/referral/banners/ref_72890.gif) ](https://rollercoin.com/?r=kl3gfn3b)