This content originally appeared on DEV Community and was authored by David Tetreau
Welcome to Part 8 of the "JavaScript Made Easy" series. Last time, we talked about function scope and nested functions. For part 8, we will continue talking functions and introduce a few new concepts related to that topic. Open up a repl and code along!
Arrow Function Expressions
An arrow function expression (or just "arrow function") is another way to write a function. As of 2015 (ES6), traditional functions and arrow functions are both valid ways to write functions. Some code bases will have traditional functions and some will have arrow functions. That is why it is important to know both. Also, you cannot use arrow functions in all situations and vice versa.
Formatting Differences
// Traditional Function
function cubed (num){
return num * num * num;
}
cubed(2);//returns 8
// Arrow Function
const cubed = num => num * num * num;
cubed(2);
Let's break this down:
- The word "function" was removed.
- A fat arrow was placed between the parameter and opening body bracket.
- The brackets and the word return was removed.
- The parameter parenthesis were removed.
- The function was assigned to a variable. This makes it easy to use the function other places in the codebase.
As previously stated, both of these functions are valid. They will return the same value. However, arrow functions are considered to be short-hand of traditional functions.
Additional Formatting Differences
If you have multiple parameters or no parameters, you'll need to leave the parentheses around the parameters. For example:
// Arrow Function
const sum = (num1, num2) => num1 + num2;
sum(25, 50);//returns 75
Notice that there are two parameters listed (and two arguments passed in, so the parenthesis are required. Also, the same will be true for an arrow function with no parameters:
// Arrow Function (no arguments)
let num1 = 2;
let num2 = 4;
const sum = () => num1 + num2;
sum();//returns 6
Instead of listing parameters and taking arguments when the function is called, this function used variables that were declared outside the function. Therefore, since the arrow function does not have any parameters, you must include the parenthesis.
More Formatting Differences
If the information between the brackets in a function is complex, you'll have to leave the brackets. That is to say, there are multiple lines within the function (such as declaring local variables and also having a return statement). For these, situations, brackets should be left on the arrow function as well as the return keyword. It looks like kind of a mix between a traditional function and an arrow function. Here's an example:
// Arrow Function
const interpolateExpressions = (firstName, job) => {
let age = 38;
return `My name is ${firstName}, I am ${age} years old, and I am a ${job}.`;
}
interpolateExpressions("David", "Web Developer");
Notice that since there were several lines of code within the function body (between the brackets), there had to be brackets included as well as a return statement. Remember we learned about interpolation. This is a good example of how that concept is used within a function.
There is some additional syntax to note relevant to arrow functions once we get to objects, but you should have a good handle on arrow functions once you practice the concepts above. Experiment with these examples, and make them your own!
I hope you have enjoyed this post! Please check out the entire "JavaScript Made Easy" series by David Tetreau. There will be a new post daily.
This content originally appeared on DEV Community and was authored by David Tetreau
David Tetreau | Sciencx (2021-05-05T02:31:38+00:00) JavaScript Made Easy: Part 8. Retrieved from https://www.scien.cx/2021/05/05/javascript-made-easy-part-8/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.