As a beginner JavaScript Programmer, I had a difficult time trying to understand the JavaScript arrow Functions. However, I believe that the best way to grasp such concepts is by explaining them to other junior developers. In fact, my name dictates that I should teach! In this article, you will learn about arrow functions, the syntax, parameters, and when to omit the arrow functions.
Introduction
The arrow functions were the most popular features added to JavaScript, and they were added with ES6 specification. They are the most discussed features, because of their look of simplicity but proof of complexity when writing a JavaScript code using them. Let us dive in deep and dissect Arrow functions.
Syntax for arrow functions
The most notable feature of the arrow function is the (=>). It is nicknamed the “fat arrow”, which is the source of their name. This “fat arrow” is placed between parentheses for parameters, which start the arrow function, and the function body where the code to be executed is placed. The arrow function ends at the body function.
// Arrow function syntax
let myArrowFunction = () => // concise function body with piece of code
// Or
let myArrowFunction = () => {/* block function body with piece of code */}
// Call myArrowFunction
myArrowFunction()
Take note that the syntax of arrow functions and that of functions is similar. This is the reason as to why arrow functions are used as an alternative to the regular function expressions.
// Arrow function
const myArrowFunction = () => {/* function body with some code */}
// Function expression
const myArrowFunction = function() {}
But wait! The similarity should not dupe you. Despite the similarity, there exist notable differences. Don’t worry, my next tutorial will cover this.
Parameters and (optional) parentheses
Normally, arrow functions begin with parentheses. Nevertheless, this is not mandatory. The parentheses are optional and can be omitted. The major concern for you as a programmer is whether an arrow function accepts any parameter. If it does not accept any, then you have to use empty parentheses (()).
The same case applies to arrow functions which accept more than one parameter. Here, you have to enclose these parameters with parentheses (()). Remember to separate each parameter with a coma. This leaves you with one instance where parentheses (()) are optional.
If an arrow function accepts only one parameter, you can choose to use or omit parentheses (()). You are not obliged to use them. Parentheses may be used anytime regardless of how many parameters exist, the arrow functions will still work correctly. Here is an illustration;
// Arrow function with 0 parameters
// Parentheses are required here
const myArrowFunction = () => // some code
// Arrow function with 1 parameter
// Parentheses are optional here
const myArrowFunction = paramOne => // some code
// This will also work
const myArrowFunction = (param1) => // some code
const myArrowFunction = (param1) => console.log(param1)
// Call myArrowFunction
myArrowFunction('doSomething')
// Arrow function with 2+ parameters
// Parentheses are required here
const myArrowFunction = (param1, param2) => // some code
const myArrowFunction = (param1, param2) => param1 + param2
// Call myArrowFunc
myArrowFunction(20, 60)
Optional curly brackets
Curly brackets are another optional cases of arrow functions. Here, it’s easier than the instance of parentheses. What matters here is if the arrow function has one line of code or more. You can omit the curly brackets if it is a one-liner code function and it will work correctly. However, if code spans more than one line, curly brackets should be used. An arrow function is said to have a “concise body” if it has no curly brackets, while the one with curly brackets is said to have a “block body”.
Just like parentheses we discussed earlier, you have latitude to use curly brackets anytime and the code will be fine. But remember, you can only omit them in an instance of one-line arrow functions.
// One-line arrow function
// Arrow function with concise body
// Curly brackets are optional here
const myArrowFunc = () => // some code
const myArrowFunc = () => console.log('Welcome to this place!')
// This will also work
() => {/* some code */}
const myArrowFunction = () => {/* some code */}
const myArrowFunction = () => { console.log('Hello!') }
// Call myArrowFunction
myArrowFunction()
// Hello!
// Multi-line arrow function
// Arrow function with block body
// Curly brackets are required here
const myArrowFunction = () => {
// some code
}
const myArrowFunction = () => {
console.log('This is a useful tutorial')
}
// Call myArrowFunction
myArrowFunction()
// 'This is a multi-line arrow function.'
Looking at it keenly, you realize it makes sense. For a one-liner function, JavaScript easily determines where arrow function bodies begin and where they end. This is different from a block function which spans over many lines. Here, JavaScript cannot guess the exact boundaries of function body.
Implicit and explicit return
An interesting feature about arrow functions is that they implicitly return values. Simply put, they return values automatically. You don’t need to use the return keyword. This works in two specific instances. The first one is when arrow function has only one line of code.
When it is a one-liner arrow function, it will automatically return any code in function body. If arrow function is not a one-liner, you must use return statement.
// One-line arrow function
// Explicit return statement is not needed
() => // some code
const myArrowFunction = () => // some code
// Call myArrowFunction
myArrowFunction()
// Multi-line arrow function
// Explicit return statement is necessary
() => {
return /* some code */
}
const myArrowFunction = () => {
return /* some code */
}
// Call myArrowFunc
myArrowFunction()
The second situation where you have to use return statement is when arrow function uses block body, i.e. function body with curly brackets. This is another thing you have to consider when deciding what syntax you want to use. Whether you want to use “block body” and curly bracket or “concise body” without curly bracket.
If it is the later, concise body, you don’t have to use explicit return statement. If the former, block body, make sure to use return statement.
// One-line arrow function
// Explicit return statement is not needed
() => // some code
const myArrowFunction = () => // some code
// Call myArrowFunction
myArrowFunction()
// Multi-line arrow function
// Explicit return statement is necessary
() => {
return /* some code */
}
const myArrowFunction = () => {
return /* some code */
}
// Call myArrowFunction
myArrowFunction()
Immediately invoked arrow functions
JavaScript allows you to declare and invoke functions co-currently. We call these functions immediately invoked functions. Here are two ways to create these types of functions;
- Wrapping the function with parentheses and adding additional pair of parentheses after the wrapping parentheses
- Wrapping the function with parentheses and adding additional pair of parentheses after the curly brackets, still inside the wrapping parentheses.
- Omitting the wrapping parentheses and putting NOT operator (!) at the beginning of the line, in front of the function keyword.
- Fourth way is similar to the previous, except that you replace the NOT operator with unary operator +.
// Immediately invoked function no.1:
// invoking parentheses outside wrapping parentheses
(function() {
// some code
})()
// Immediately invoked function no.2:
// invoking parentheses inside wrapping parentheses
(function() {
// some code
}())
// Immediately invoked function no.3:
// using ! (NOT operator)
!function() {
// some code
}()
// Immediately invoked function no.4:
// Using + (unary operator)
+function() {
// some code
}()
Top comments (0)