A really very important part of ES6 and that's an Arrow Function or Fat Arrow Functions.
- Actually, they give us a lot of benefits about saving lines of code and making things neater as well as clean code.
now, let just create a regular function expression.
const sayHello = function() {
console.log('Hello');
}
sayHello();
this is nothing new, we already know about this. so, now what I am now going to do is copy the above code and show you to convert it into the Arrow Function.
so, now we don't want the function keyword, we wanna short our code and get rid of the function name.
const sayHello = () => {
console.log('Hello');
}
sayHello();
so now we just left with parenthesis and then in the middle of parenthesis (opening curly brace) you wanna put an arrow which is an equal sign and greater than sign.
Since the function body is of one line, we can make this even more compact
const sayHello = () => console.log("Hello")
sayHello();
In simple one-line function does not need braces.
Now, where we can run into trouble is when you are returning an object literal.
const sayHello =()=> {msg: "Hello"}
console.log(sayHello());
now in the above code, we are going to get an undefined console because basically, it's looking at this {msg: "Hello"} as the function body instead of an object literal.
so to fix this all we have to do is just wrap this in parenthesis. Now, If we save our code below, we gonna see in the console it is actually an object.
const sayHello = () => ({ msg: "Hello"})
console.log(sayHello());
The above code will log as
{msg: "Hello"}
so it returns the object.
Now consider that we are having parameter
const sayHello = (name) => console.log(`Hello ${name}`);
sayHello("Justin")
we don't need a console at the bottom because we are doing that within the function body so just pass in the Justin and we get Hello Justin.
so if it's a single parameter we don't even need parenthesis.
const sayHello = name => console.log(`Hello ${name}`);
sayHello("Justin")
Please do note that more than two parameters will require parenthesis like below code.
const sayHello = (firstName, lastName) => console.log(`Hello ${firstName, lastName}`);
sayHello("Justin", "Hitesh")
So just make sure if you have more than one parameter or argument, please use your parenthesis.
And now let's see if we wanna use the map function
const users = ["Nathan", "John", "William"];
const nameLengths = users.map(function(name){
return name.length;
})
console.log(nameLengths);
In the console the output, we get an array of [6, 4, 7] so that's the length of each of these users. That's what a map is being used to maps different things. And it returns an array of something different such as the length in this case.
Now we could now make this a little shorter by using an arrow function.
const users = ["Nathan", "John", "William"];
const nameLengths = users.map((name) => {
return name.length;
})
console.log(nameLengths);
and now much shortest code by removing the parenthesis and return
const users = ["Nathan", "John", "William"];
const nameLengths = users.map(name=> name.length);
console.log(nameLengths);