Arrow functions in JavaScript

Arrow functions were introduced in ES6 or ECMAScript 2015. 

Source: Javascript: The Big Picture

They allow us to write smaller function syntax. Due to the reduction in characters typed, JavaScript size is lesser. 

The => symbol in JavaScript is called the "arrow function" syntax, and it allows you to create anonymous functions (functions without names) more concisely than with the traditional function keyword. The syntax of an arrow function is as follows:

(parameters) => expression

Here, parameters are the parameters passed to the function (enclosed in parentheses),  => is an arrow operator and expression is the expression to be evaluated and returned by the function. For example, the following two code snippets are equivalent:

// Traditional function syntax 

function double(x) 

{ 

return x * 2; 

} 

// Arrow function syntax 

const double = (x) => x * 2;

In the case of single-line function definition or body, the return keyword and curly braces ({}) are optional.

Examples of arrow functions showing implicit return & explicit return values:

const add = (a, b) => a + b; //Single line functions return statement result

console.log(add(1, 2)); // 3

const subtract = (a, b) => { 

// Use {} to introduce multiple lines as in a traditional JavaScript function 

return a - b;

};

console.log(subtract(2, 1)); // 1

Return value must be assigned to a variable immediately. 

const and let, which were introduced in ES6 (ECMAScript 2015), have block scope, meaning that they are only accessible within the block in which they are declared. Another benefit of using const instead of var is that it makes it clear that the value of the variable cannot be reassigned once it has been declared. 

In the below example involving addEventListener method, the arrow function is used to define the action that should be taken when the specified event occurs:

const button = document.querySelector('button');

button.addEventListener('click', () => { console.log('Button clicked!'); });

We select the first button element in the HTML document and add a 'click' event listener to it. The arrow function () => { console.log('Button clicked!'); } is the action that should be performed when the 'click' event occurs (in this case, it logs the message 'Button clicked!' to the console).

The addEventListener function is a method that allows you to add an event listener to an HTML element, which listens for a specific type of event (such as a mouse click, a key press, or a form submission) and performs a specified action when that event occurs. The syntax of addEventListener is as follows:

element.addEventListener(event, function, useCapture);

Here, element is the HTML element to which the event listener is being added, event is the name of the event to listen for (as a string), and function is the function that should be called when the event occurs. The useCapture argument is optional and specifies whether the event should be captured during the "capture" phase (when the event first enters the target element's ancestors) rather than during the "bubble" phase (when the event "bubbles up" from the target element to its ancestors)

const form = document.querySelector('form'); 

form.addEventListener('submit', function(event) { 

// prevent the form from submitting normally 

event.preventDefault(); 

console.log('Form submitted!');

console.log(event.target); // logs the form element that was submitted 

});

The second argument to addEventListener is a function that takes an event  parameter, which provides information about the event that occurred.

References:

Beginner's Series to: JavaScript - 39/51 

ChatGPT