Section 3.5 — Arrow Functions

Learning JavaScript

Course: The Complete JavaScript Course 2025: From Zero to Expert! by Jonas Schmedtmann

Section 3.5 — Arrow Functions

Introduction

So we learned about function declarations and expressions in the last video but there is actually a third type of function that was added to JavaScript in ES6 and that is the arrow function.

The Arrow Function is simply a special form of function expression that is shorter and therefore faster to write.

So let’s actually get back the function expression from the previous lecture, just so that we have a comparison/reference point.

// Function Expression

const calcAge2 = function (birthYear) {
 return 2025 - birthYear;
};

// Arrow function
const calcAge3 = (birthYear) => 2025 - birthYear;

As we can see that the arrow function is a special form of function expression because it is still a function expression actually.

The arrow function is just a lot easier and faster to write. The first reason for that is that we don’t need the curly braces; and secondly, the return happens implicitly, which means the value will automatically be returned without us having to explicitly write the return keyword.

The arrow function is excellent for simple one-liner functions and we will see throughout the course that this is going to be extremely helpful in certain situations.

Get GlobalDami’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Now, let’s properly check out the arrow function, we would see that it works just like the other functions.

// Arrow function

const calcAge3 = (birthYear) => 2025 - birthYear;
const age3 = calcAge3(1994);

console.log(age3);
// OUTPUT: 31

Now, let’s say that we want to calculate how many years a person has left until retirement.
For example;

const yearsUntilRetirement = (birthYear, firstName) => {
 const age = 2025 - birthYear;
 const retirement = 65 - age;
 return `${firstName} retires in ${retirement} years`;
};

console.log(yearsUntilRetirement(1994, "Dami"));

This is essentially how the arrow function works. You just need to keep in mind the couple of different scenarios regarding the number of lines of code that you need and the number of parameters.

So as you add more code and more parameters, it gets a little bit more complex and we kind of lose the advantage of using an arrow function.

So now you might ask the same question as before. What type of function should I use? Should I use arrow functions for everything, since they are so easy to write? Well, the answer is NO.

But it is also complicated. That’s because there is another fundamental difference between the arrow function and more traditional functions (i.e function declarations and function expressions); and it is the fact that arrow functions do not get a so-called this keyword. And this, once more, is a topic for much later.

So remember that learning is not at all a linear process and so topics need to build up on one another in an incremental way. Otherwise, we would just get super overwhelmed and super stressed if the instructor was to tell us everything all at once.

So for now, we will actually keep using mainly the normal functions, except for very simple one-liner functions. For example, like the one below:

const calcAge3 = (birthYear) => 2025 - birthYear;

And that doesn’t mean that arrow functions are not important. They absolutely are important and the instructor says he loves them and he uses them all the time and sometimes he doesn’t write regular functions at all.

But again, we cannot yet understand all the implications of using arrow functions. So for now again, we will keep using probably the function expressions the most.

It always gets better! 💪

Thank you for reading my blog post. Kindly follow me for more design and software development updates.

#JavaScript #LearningJavaScript #ArrowFunctions #Functions #Declaration #Expression #Objects #Arrays #Loops #100DaysofCode #CodingJourney #LogicalDami