An arrow function expression is a compact alternative to a traditional function expression. They allow us to write a function without actually having to use the keyword function. Arrow Functions have some semantic differences and deliberate limitations in usage:

• Arrow functions don't have their own bindings to this, arguments, or super, and should not be used as methods.
• Arrow functions can not be used as constructors. Calling them with new throws a TypeError. They also don't have access to the new.target keyword.
• Arrow functions can not use yield within their body and cannot be created as generator functions.
• Also: Arrow Functions are NOT supported in Internet Explorer.

example:
if we had a regular function, something like:

• const add = function(x, y) {
  • return x + y;
• }

we could simplify it with the arrow function and remove the function keyword, like so:

• const add = (x, y) => {
  • return x + y;
• }

The => Arrow Function is telling us that add = (x, y) is a function, simplifying the code.

Also, if you have a function that does not have any parameters passed in,you can use the Arrow Function with empty parenthesis (), like so:

• const rollDie = () => {
  • return math.floor(math.random() * 6) + 1;
• }

Also, if you only have one parameter to pass in to the function, you can eliminate the perenthesis () altogether, like so:

• const square = num => {
  • return num * num;
• }

Implicit Returns

Implicit Returns are a way of compacting the callback code even further. If your callback code only has ONE process to return such as in the previous example:

• const rollDie = () => {
  • return math.floor(math.random() * 6) + 1;
• }

We can use an Implicit Return to simplify this code by removing the return keyword.

*note: When you use Implicit Returns, you must replace the curly braces {} with parenthesis (), like so:

• const rollDie = () => (
  • math.floor(math.random() * 6) + 1;
• )

We can simplify this even more by removing the parenthesis () and putting everything on one line:

• const rollDie = () => math.floor(math.random() * 6) + 1;

Remember, Implicit Returns

• must contain ONLY one line of code to process
• must use parenthesis instead of curly braces if you are using a multi-line format.
  (if you are using single-line format, curly braces can be omitted)

Summary with Examples

The function call is : isEven(x).

We pass in a number and the "Callback Function" determines if the number is an even number, then returns true or false.

*note: (All of the following functions do the same thing).

Regular function expression:

• const isEven = function(num) {
  • return num % 2 === 0;
• }

Arrow function with parenthesis around the parameter. This removes the function keyword:

• const isEven = (num) => {
  • return num % 2 === 0;
• }

No parenthesis around the parameter (or just empty parenthesis () if no parameters are passed in):

• const isEven = num => {
  • return num % 2 === 0;
• }

Since the callback function only contains one line of code (the return line)

We can use an Implicit Return which eliminates the return keyword, but we must use parenthesis () instead of curly braces {}.

• const isEven = num => (
  • num % 2 === 0;
• )

With an Implicit Return we can simplify this even more to one line of code.

• const isEven = num => num % 2 === 0;
  • isEven: is the name given for the callback function
  • num: is the parameter being passed in to the function
    • this could also be empty parenthesis () if we were not passing any parameters into the function
  • =>: is saying that this is a function
  • num % 2 === 0: is the single line of code that we are processing and returning