Arrow functions

Arrow Functions are a short-form technique of expressing JavaScript Functions. The MDN website discusses them in great detail and the limitations of their use.

The example that I give below also contains a "Template Literal" and shows its use in my example of "Bubbling and Capturing" of events. The useage of the Arrow Function syntax in this case was not particularly helpful as it only was used to add an event to an element using the addEventListener() Method.

I consider the use of an Arrow Function and its syntax as an advanced JavaScript technique and there are far better places on the Internet that explain their use.

I came across this when looking at Event Bubbling and Capture - the use of the useCapture parameter in the addEventListener() Method

How I saw this used first - or actually noticed it.

    elem.addEventListener("click", e => alert(`Capturing: ${elem.tagName}`), true);

The JavaScript statement above also uses a Template Literal - this is enclosed using the ` character (grave accent - to the left of the 1 on my keyboard)

`Capturing: ${elem.tagName}`

There two new concepts (to me) here

The code that I noticed the use of them were pretty advanced to start with. Adding Arrow Functions and Template literals to the mix does not really help with the understanding of how the code works.

Top

What mozila.org say about arrow functions:

An arrow function expression is a compact alternative to a traditional function expression, with 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 cannot be used as constructors. Calling them with new throws a TypeError. They also don't have access to the new.target keyword.
Arrow functions cannot use yield within their body and cannot be created as generator functions.

A breakdown of the syntax

I am not sure what x => x.text() - this was from the Fetch API example that I am trying to adapt to determine IP addresses.

// Traditional anonymous function (function (a) { return a + 100; }); // 1. Remove the word "function" and place arrow between the argument and opening body brace (a) => { return a + 100; }; // 2. Remove the body braces and word "return" — the return is implied. (a) => a + 100; // 3. Remove the parameter parentheses a => a + 100;

Arrow functions

Links