- You know how, when you create anonymous functions in JavaScript, so maybe you're creating a function expression, or you're using a function inside an event listener or something like that. You end up writing out a bunch of code that seems unnecessary. Case in point, standard function expression. So here we have the var sumTotal. Then we create an anonymous function that grabs the two properties, price and tax. Then we return, price times tax over 100 plus one. So that gives us the price plus whatever tax value on top of that. And then we console log out sumTotal, six and 12, so that would give us $6 plus 12% tax is, like, 7.64, whatever. So this works fine, but you see that this function expression here is really clunky. We have to declare that we have a function. But this is a throwaway anonymous function. We're only going to use it once, it doesn't have a name. And it's captured inside this variable anyway. So this syntax seems unnecessary, especially because, for this function expression to work, we need to return to value, otherwise there's no point putting it inside a variable to begin with, eh? So that's why we now have this thing. This arrow, fat arrow, an arrow function. So this is an equal sign, uh, this is an equal sign, plus a bigger than symbol, and it looks like an arrow. Poof, finding, going in that direction. This function here makes things a lot easier because with an arrow function, we can do the exact same thing with a lot less code. And it's actually easier to read, once you understand how to read it. So we're saying the same thing. We have this variable called sumTotal, and we're going to capture a function inside it. So anytime we call the variable and pass some properties to it, then we get the result return back. Now, this time we're using an arrow function, so we're saying inside sumTotal, we are taking the two properties, price and tax. Then we are sending it over to this calculation here, and the calculation, it returns the result to sumTotal. So we're saying price and tax, send to price times tax over 100 plus one, let me return the result. So when we go down here and say console, log, sumTotal, six, 12, we get the same result. Except this is much cleaner than that old function expression. Now, like I said, you'll see these arrow functions used either in anonymous functions or in function expressions like here, and you'll also see them used a lot inside event listeners. Because that's when, if you have some sort of anonymous function you need to execute inside an event listener, you then have the writing your event listener and then saying function, parentheses, and then curly brackets, and then blah, blah, blah, blah, blah, blah. And it becomes really hard to read. And then you solve that by then breaking that out into a separate function that you can then call from the event listener, and it gets really clunky. Well, with this arrow function, you can get that to be a lot cleaner because you don't have to declare the function and it can make it really tight and small. In fact, if you have an empty, like, if you have an anonymous function that doesn't have any properties to it, you just put in the two parentheses, and then you put the arrow after, and then you say what you want, and that automatically gets returned. So that's why the arrow function exists. That's how to read it, and that's why you'll end up using it.
Author
Updated
4/1/2019Released
5/17/2017Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting. Along the way, you will also be introduced to some ES6 and the basics of JavaScript libraries.
- What is JavaScript?
- Working with data
- Using functions and objects
- Working with JavaScript and the DOM
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality
- Minifying JavaScript
Skill Level Beginner
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 7s
-
-
1. JavaScript: An Introduction
-
What is JavaScript?2m 38s
-
-
2. The Basics
-
Introducing the browser console10m 31s
-
3. Working with data
-
Data types in JavaScript4m 2s
-
Arrays2m 20s
-
4. Functions and Objects
-
Functions in JavaScript3m 28s
-
Build a basic function3m 29s
-
Anonymous functions5m 11s
-
Variable scope3m 17s
-
ES2015: let and const6m 12s
-
Make sense of objects3m 19s
-
Object constructors6m 16s
-
Closures8m 11s
-
-
5. JavaScript and the DOM, Part 1: Changing DOM Elements
-
Access and change elements4m 33s
-
Access and change classes3m 45s
-
Access and change attributes4m 53s
-
Add DOM elements6m 56s
-
6. Project: Create an Analog Clock
-
Use CSS to move clock hands3m 49s
-
7. JavaScript and the DOM, Part 2: Events
-
What are DOM events?1m 31s
-
Some typical DOM events1m 59s
-
Add and use event listeners6m 51s
-
-
8. Project: Typing Speed Tester
-
Rundown of HTML markup2m 58s
-
Build a count-up timer5m 56s
-
Add a reset button5m 3s
-
-
9. Loops
-
Loops3m 37s
-
Looping through arrays4m 7s
-
Break and continue loops7m 9s
-
-
10. Project: Automated Responsive Images Markup
-
Project breakdown1m 55s
-
Rundown of project setup3m 26s
-
-
11. Troubleshooting, Validating, and Minifying JavaScript
-
Troubleshooting JavaScript7m 20s
-
Online script linting5m 57s
-
Automate script linting8m 24s
-
Online script minification2m 50s
-
Automate script minification2m 24s
-
12. Bonus Chapter: Ask the Instructor
-
What are arrow functions?3m 11s
-
What does the % symbol do?3m 47s
-
-
Conclusion
-
Next Steps1m 55s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: What are arrow functions?