{"id":12763,"date":"2020-06-25T15:40:29","date_gmt":"2020-06-25T22:40:29","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=12763"},"modified":"2023-12-01T03:34:38","modified_gmt":"2023-12-01T11:34:38","slug":"javascript-arrow-function","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-arrow-function\/","title":{"rendered":"JavaScript Arrow Functions: A Step-By-Step Guide"},"content":{"rendered":"\n

JavaScript arrow functions are a way of declaring functions. Arrow functions can be used to write JavaScript functions more efficiently and using more concise syntax. Arrow function syntax supports implicit returns for single expressions.<\/em><\/p>\n\n\n\n

\n\n\n\n

A function is a block of code that performs a specific action and\/or returns a value. Functions are used by programmers to create code that can be reused multiple times. This helps reduce the number of lines in a program, thereby making it more efficient.<\/p>\n\n\n\n

Traditionally, JavaScript offered one way to declare a function: using the function<\/code> keyword. However, since ES6, JavaScript supports arrow functions<\/code> which can be used to more efficiently define a function.<\/p>\n\n\n\n

In this guide, we are going to explore the basics of functions in JavaScript and discuss how the JavaScript arrow function can be used. We\u2019ll also discuss where you may want to use an arrow function, and explore a few examples to illustrate how arrow functions can be used in practice.<\/p>\n\n\n\n

JavaScript Function Refresher<\/h2>\n\n\n\n

The most common method used to declare a function in JavaScript is by using the regular function<\/code> keyword. The function<\/code> keyword allows coders to declare a function that can be referenced throughout their code.<\/p>\n\n\n\n

Here\u2019s the syntax for a JavaScript function:<\/p>\n\n\n\n

function nameOfTheFunction() {\n   \/\/ Code\n  }<\/pre><\/div>\n\n\n\n
Our function contains a number of parts. Firstly, we use the function<\/code> keyword to tell our program that we are going to declare a function. Then, we specify the name of our function, which in the above example is nameOfTheFunction<\/code>. It\u2019s important to note that function names use the same rules as variables, and so they are written in camel case.<\/p>\n\n\n\n
Our function then is followed by a set of brackets, which can optionally be used to parse parameters. Then, our code is contained within a set of curly brackets ({}<\/code>).<\/p>\n\n\n\n
Let\u2019s use an example to illustrate how a function works in JavaScript. The following code creates a function called wakeUpRoutine<\/code> which prints a morning message to the console:<\/p>\n\n\n\n
function wakeUpRoutine() {\n   console.log(\"Good morning! Today is a great day.\");\n  }\n<\/pre><\/div>\n\n\n\n
Right now, if we run our program, nothing will happen. This is because our function has been declared, but we have not yet called the function. If we want to run our function, we can call it by writing out the name of the function:<\/p>\n\n\n\n
wakeUpRoutine();\n<\/pre><\/div>\n\n\n\n
Our program returns: <\/p>\n\n\n\n
Good morning! Today is a great day.<\/pre><\/div>\n\n\n\n
We can use our function as many times as we want throughout our program by calling it where we want it to be executed.<\/p>\n\n\n\n
JavaScript functions can also take parameters. Parameters are input that are passed into a function and act as local variables within the function. So, let\u2019s say that we wanted our wake up message to include our name. We could use the following code to include our name in the wake up message:<\/p>\n\n\n\n
function wakeUpRoutine(name) {\n   console.log(`Good morning, ${name}! Today is a great day.`);\n}\n<\/pre><\/div>\n\n\n\n
In our code, we have not defined our name<\/code> parameter. That\u2019s because we assign it a value when we call our function. Let\u2019s say that our name is Peter<\/code>. In order to make our message appear with our name, we would use the following code:<\/p>\n\n\n\n
wakeUpRoutine(\"Peter\");\n<\/pre><\/div>\n\n\n\n
Our program returns: <\/p>\n\n\n\n
Good morning, Peter! Today is a great day.<\/pre><\/div>\n\n\n\n
The value of our name<\/code> parameter is passed into the wakeUpRoutine function, which in this case is Peter<\/code>. We then use the name<\/code> variable in our function to reference the name our program has specified.<\/p>\n\n\n\n
JavaScript Arrow Function<\/h2>\n\n\n\n
JavaScript arrow functions, sometimes referred to as fat arrow<\/code> functions, are one of the most popular features introduced in ES6. These function expressions can be used to write functions more efficiently and using more concise syntax.<\/p>\n\n\n\n
The syntax for a JavaScript arrow function is as follows:<\/p>\n\n\n\n
functionName = (parameters) => {\n   \/\/ Code\n  }\n<\/pre><\/div>\n\n\n\n
Let\u2019s use the wake up routine example to illustrate how the JavaScript arrow functions. In our above code, we had to use the \u201cfunction\u201d keyword.\u201d However, with an arrow function, we use the =><\/code> syntax instead. Here\u2019s an example of our wake up routine function written as an arrow function:<\/p>\n\n\n\n
wakeUpRoutine = (name) => {\n   console.log(`Good morning, ${name}! Today is a great day.`);\n  }\n<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
In order to call our function, we use the same syntax as we would with a traditional function:
<\/p>\n\n\n\n
wakeUpRoutine(\"Sophia\")<\/pre><\/div>\n\n\n\n
Our function returns: <\/p>\n\n\n\n
Good morning, Sophia! Today is a great day.<\/pre><\/div>\n\n\n\n
The structure for arrow functions is very similar to that of a traditional function. The only differences are that we don\u2019t use the function<\/code> keyword in an arrow function, and instead we use a =><\/code> arrow.
<\/p>\n\n\n\n
In addition, notice that we did not need to use the return<\/code> keyword in our arrow function, which makes our code even more concise.
<\/p>\n\n\n\n
Implicit Returns<\/h2>\n\n\n\n
Arrow functions are particularly useful if the function body is a single expression. If the function body is a single expression, you can remove the curly brackets and create an implicit return to simplify your function. This is different from a traditional function where the number of lines used in your function did not affect how the function was defined.
<\/p>\n\n\n\n
Here\u2019s an example of a one-line arrow function:
<\/p>\n\n\n\n
const multiplyNumbers = (a, b) => a * b;\nmultiplyNumbers(2, 2);\n<\/pre><\/div>\n\n\n\n
Our code returns: 4<\/code>. As you can see, our arrow function has multiplied our two numbers.
<\/p>\n\n\n\n
The implicit return syntax is usually used if you are returning values, like we did above. However, you can also use the syntax to execute code that will not return any values. So, if you wanted to use implicit syntax to recreate our wake up routine function, you could use this code:
<\/p>\n\n\n\n
const wakeUpRoutine = name => console.log(`Good morning, ${name}! Today is a great day.`);\nwakeUpRoutine(\"Ava\");\n<\/pre><\/div>\n\n\n\n
Our code returns the following: <\/p>\n\n\n\n
Good morning, Ava! Today is a great day.<\/pre><\/div>\n\n\n\n
Removing Parentheses<\/h2>\n\n\n\n
JavaScript arrow functions only need parenthesis around the parameters if there are no parameters or more than one. So, if your arrow function only has one parameter, you can remove the parentheses like this:
<\/p>\n\n\n\n
wakeUpRoutine = name => {\n   console.log(`Good morning, ${name}! Today is a great day.`);\n}\n<\/pre><\/div>\n\n\n\n
As you can see, our name<\/code> parameter is no longer surrounded by parentheses.
<\/p>\n\n\n\n
Arrow Functions with Map, Filter, and Reduce<\/h2>\n\n\n\n
Arrow functions are commonly used with the map, filter, and reduce JavaScript array methods, as arrow functions allow you to transform an array in only one line.
<\/p>\n\n\n\n
Let\u2019s say that we have an array of student grades. We want to add 1<\/code> to each student grade because there was an error in a recent test that meant students could not answer a certain question, and so nobody could get a perfect score of 30<\/code>. Here\u2019s an example of an arrow function we could use to fix the test scores:
<\/p>\n\n\n\n
const grades = [25, 26, 22, 28];\nconst fixStudentGrades = grades.map( score => score + 1 );\nconsole.log(fixStudentGrades);\n<\/pre><\/div>\n\n\n\n
Our code returns:<\/p>\n\n\n\n
[26, 27, 23, 29]<\/pre><\/div>\n\n\n\n
As you can see, our code has added 1<\/code> to each grade in our grades<\/code> array.<\/p>\n\n\n\n