JavaScript Arrow Functions: How to replace old functions with new ES6 syntax

Learn how to use ES6 JavaScript arrow functions.

JavaScript Arrow Functions are just another way of defining function and they can replace existing JavaScript functions declarations. In this tutorial you’ll learn about the syntax of JavaScript Arrow Functions and how they differ from existing functions in JavaScript declared with the ‘function’ keyword. You’ll start by examining the structure of am existing JavaScript function and then bit by bit you’ll learn how to replace one of these existing functions with the updated ES6 JavaScript Arrow Functions syntax. Whilst they can seem a bit confusing at first, JavaScript Arrow Functions, can be a powerful feature for writing your code. They not only make your code more succinct and easier to read but they can also provide some benefits. One of these benefits that you’ll learn about is the implicit return. This is where your function doesn’t include a return statement and the value or expression that appears within your function definition is implicitly returned from the function when it is called. The only caveat to be aware of with the implicit return is that you should not include the curly braces after the ‘fat arrow’ as this would lead JavaScript to expect a return statement. The final point you’ll pick up from the tutorial is that JavaScript Arrow Functions are only used for anonymous function declarations (or function expressions). There is still a place for the function keyword if you’re not going to use a function expression which is then assigned to a variable. for example you can’t use the syntax to create a new function with a name, it must be assigned to a variable.