As normal functions, but arrow functions. Almost.
Arrow functions are a way to save lines of code and make your code readable, but they can also turn your code into a mess. Let's take a look at how arrow functions work in JavaScript.
What is it about
// create a function that will hack the Kremlin
const hackKremlin = () => {
// establish a connection
setConection();
// and hack
hackAttack();
//
secretDocs= kremlin.querySelectorAll(".putinBearsPhoto");
}
The comment says that we are declaring a function, but there is no standard form of declaring function(){}
in the code. Instead, there is a constant, then an assignment operator, parentheses, an arrow, and some code. So, this is an example of an arrow function declaration. Let's explain in more detail now.
How to declare an arrow function
To declare an arrow function, do this:
let FunctionName = (Argument1, Argument2 ...) => FunctionActions
You can use const
instead of let
— the result will be the same. It turns out that we are, as it were, declaring a variable that can do something. To use such a variable, you need to write its name and pass arguments in parentheses — just like when using a regular function.
Here's the simplest example of using an arrow function:
let sum = (a, b) => a + b;
Here we have declared the function sum()
, which is passed two arguments. Inside the function, they are added together, and the result of the additional return when the function calls up. For this reason, calling sum(10,3)
will return 13.
If you need to execute more than one command inside a function, then use curly braces:
let compare = (a, b) => {
if (a < b) return 'a < b'
else if(a > b ) return 'a > b'
else if(a === b) return 'a = b'
else return 'Error compare function'
}
Difference between regular and arrow functions
On the most excellent, almost none — these are the same functions as the usual ones. For example,
let sum = (a, b) => a + b;
is the same as if we did this:
let sum = function(a, b) {
return a + b;
};
It's all about the brevity of the notation, so that sometimes you can write more elegant code. But if arrow functions make the code less readable, then it is better not to use them and declare the functions as usual.
The only difference between arrow and normal functions is actually. In this case, you already know to figure it out on your own.
Dynamically creating functions
A really useful feature of arrow functions is the ability to select the contents of a function based on the values of other variables.
Let's create a function with the following logic:
- Ask how old a person is
- If the age is over 18 we say “You're still a teenager in the EU”
- Otherwise, we say “Congratulations, you're an adult! (Pay your taxes)”.
// ask how old a person is
let age = prompt("How old are you?", 18);
// define the code that will be executed inside the function
// if age is less than 18 years old - the code from the first line will be inside the function
let welcomeToEU = (age < 18) ?
() => alert("You are still a teenager in EU") :
// and if the age is over 18 - then this line will be inside the function
() => alert("Congratulations, you are an adult! (Pay your taxes)");
// start a function
welcomeToEU();
Why do we need arrow functions when there are regular functions?
If you are just starting to learn how to code, then there is no difference between them. In this case, use regular functions — they are less likely to make a mistake.
But if you have already pumped over and are studying or trying to write complex projects where you need to refer to this method inside a function using the properties of an external object, then yes, it is better to use arrow functions.
The takeaway is simple: if you’re asking yourself this question, you don’t need arrow functions yet. But it's worth knowing about them now.