Introduction to Arrow Functions
What are Arrow Functions?
An arrow function is a concise alternative way to write functions in JavaScript(introduced in ES6, modern JavaScript). Arrow functions may be concise, but have a few limitations.
Changing a regular function into an arrow function
Lets start off with a regular function:
An arrow function does not need the ‘function’ keyword so that can be taken out, and add the ‘=>’ after the parameter:
Right now this is an arrow function, but cannot be invoked. The way we can invoke it is to give it a name:
This arrow function works the same way as regular functions, but advantage is that the syntax will become concise.
The reason why this is possible is because JavaScript doesn’t care about ‘white-space’. JS doesn’t need the parameter ‘num’ to be enclosed with ‘()’ and for single parameters, it doesn’t need ‘{}’ for single lined code, and can be written in one line.
For cases of functions that have two or more parameters, the ‘()’ are required as well as the curly braces ‘{}. After the ‘=>’, when there is an open curly ‘{‘, JS thinks that this is the ‘{‘ for the function’s body. JS is now expecting you the developer to explicitly return the code, and does not recognize the object unless they are enclosed within parentheses.
Other Use Cases
Let’s say we have an array of numbers and we want to do something to the array. We can use arrow functions to simplify the code into one line.
Here is the syntax of arrow functions for the map function from MDN Web Docs.
For another example, let’s say we wanted to use the filter method to filter out song titles by length > 4 characters. It’s important to note that filter method returns a ‘subarray’ that satisfies a condition, does not mutate the original array, and the callback returns a boolean.
Here we have an array of ‘songTitles’ set to a variable ‘filteredArr’. We are using ‘.filter’ method on the array with a callback function of ‘songTitle’. The callback function is used for each of the elements within the ‘songTitles’ array with the condition ‘songTitle.length > 4’. This code is telling us that we wish to get back all the song titles that have a character length greater than 4. This block of code however, can be simplified into one line due to the capabilities of arrow functions
Using arrow functions for ‘fetch’
As a full-stack developer, you should be able to manipulate data both in the front and back end of the app. When working on the front-end (JS), you may need to ‘fetch’ data from the back end then bring to the front. For these cases of changing data from both the back end and the front end, arrow functions are key for keeping our code concise.
From this fetch example, we are fetching the url from the back end. Then, the ‘.then’ s represent the front end where we first see an arrow function. The first ‘.then’ can also be written as .then(response => response.json()). The second .then() is what is being changed in the front end. It is good practice to console.log within the ‘()’, to see what you are working with: .then(console.log). In this case, we have an object that we named ‘postObj’ that is used as a callback for another function ‘loadDetail’ that takes in this callback as the parameters: ‘loadDetail(postObj)’. Now, whatever the loadDetail function does will manipulate the front end, which is pretty self explanatory with the naming of the function.
Another example in the case where, in the second .then() after console.log, we find that we have an array. The comArr is used as the callback function which a .forEach function is called on, with another callback function or parameter of comObj, then a function called showComments is called with comObj as the parameter.
As shown in the few examples in this blog, arrow functions are used for simplicity and compacting down our code, which is the goal as developers. However, there are limitations for arrow functions. Here is a screenshot of these limitations from MDN Web Docs:
Despite these limitations, for the purpose of simplicity in our code, and ease of access, arrow functions can be of great use to developers. The limitations will not be covered in this blog, but hopefully this has helped you understand the basics of how arrow functions work.
