const - JS | lectureJavaScript Fundamentals 2

In the last lecture, we learned about function declarations and function expressions; but there is a third type of function added to JavaScipt in ES6, which is the arrow function.

An arrow function is a particular form of function expression that is shorter and faster to write. Let's consider the below function expression we wrote in the previous lecture.

const greetUser = function (userName) {
  const text = `Good morning ${userName}`;
  return text;
};

If we want to write this function using an arrow function, here is how we do it:

const greetUser1 = userName => `Good morning ${userName}`;

As we can see, we have a variable greetUser1 in which we store our function, which we use to call our function just like in our first function expression, an arrow (=>) which is the main reason why we wall this type of functions arrow functions, and after that our return value.

As I said previously, this is a special function expression because it's still a function expression (It's kind of redundant I know 😅). We assign the value of userName => `Good morning ${userName}` to greetUser1 just like in the case of greetUser above. But as you can see, greetUser1 is much easier and faster to write.

There are two main reasons why I consider an arrow function to be easier and faster to write:

1. First, we don't need the curly braces like in the greetUser function to define a code block.

2. The second reason is that the return in an arrow function happens implicitly. That is, the value of `Good morning ${userName}` will automatically be returned without us having to write the return keyword explicitly.

These two reasons apply and are simple for one-liner functions, and through the upcoming lectures, you will see that it will be extremely useful in certain situations.

Using an arrow function works the same way as using all other functions. We call it just like we called the other functions in the previous lectures and save the returned value in a new variable that is:

const returnedValue = greetUser1('Ulrich');

You may have also noticed that we did not add parenthesis around our arrow function parameter userName. This applies only when we have exactly one parameter. If we try logging the value of the variable returnedValue, we get the same result as in the previous lecture.

Let's write another function to calculate how many years someone has until retirement.

const yearsLeft = (yearOfBirth) => {
  const age = 2021 - yearOfBirth;
  const retirement = 65 - age;
  return retirement;
};

console.log(yearsLeft(1990)); // 31

From the above code, there are three things you have to keep in mind.

1. You can notice that we still didn't add parenthesis around our parameters because we only had one parameter: yearOfBirth.

2. We added curly braces after the arrow to define a code block (more lines of code).

3. We explicitly added the return keyword because we needed to return the value of retirement. We can only omit the return keyword in case we have a one-liner function like in the previous arrow function.

So in case, we had multiple parameters, for example, let's say we also wanted the person's name to return a message and not just a number. In such a situation, we will now need to wrap our parameters with parenthesis:

const yearsLeft = (yearOfBirth, name) => {
  const age = 2021 - yearOfBirth;
  const retirement = 65 - age;
  return `Hey ${name}, your are left with ${retiremrnt} years before retirement`;
};
console.log(yearsLeft(1990, 'Ulrich'));

This is essentially how arrow functions work. You have to keep in mind a couple of different scenarios regarding the number of lines of code that you need and the number of parameters. Adding more code and more parameters makes your function more complex, thus losing the advantage of using an arrow function.

You might now ask yourself that same question from the previous lecture. What type of function should I use? Should I use arrow functions for everything? I will say no because there is another fundamental difference between arrow functions and more traditional functions (function declarations and function expressions). It's the fact that arrow functions do not get a so-called this keyword. More about this later.