Professor Wolfgar on JavaScript

Explore

Arrow Functions

Arrow operator
`https://javascript.info/arrow-functions-basics`⁠

Recipe delivered by the Arrow Arrow Operator:

Take a bag of stuff (the input array - Arrow Operators only do their job on an input array): On each thing in that bag of stuff : Do some activity: output the result maybe storing each output element into another array.

const inputArray = ['Sara', 'Suzan', 'Mira', 'Zara', 'Alisha'];

const characterDescriptions = {'Sara':'studious', 'Suzan':'life of the party', 'Mira':'world traveller', 'Zara':'techno geek', 'Alisha':'social influencer'};

const describeCharacters = (names, descriptions) => {

let characterProfiles = [];

names.forEach(name => {

if (descriptions[name]) {

characterProfiles.push(`${name} is ${descriptions[name]}`);

} else {

characterProfiles.push(`${name} is a mysterious individual`);

}

});

return characterProfiles;

}

console.log(describeCharacters(inputArray, characterDescriptions));

Key concepts:

Arrow functions do not have their own this value. Instead, they inherit the this value from the enclosing lexical context. This enables their use in event handlers and call backs.

The arrow operator, also known as the arrow function syntax, is a shorthand syntax for defining functions in JavaScript.

Arrow functions were introduced in ECMAScript 6 (ES6) and provide a more concise way to write functions compared to the traditional function syntax.

Here's an example of an arrow function that takes in two parameters and returns their sum:

const add = (a, b) => {

return a + b;

};

This is equivalent to the following function written using the traditional function syntax:

function add(a, b) {

return a + b;

}

Arrow functions have a few key differences compared to traditional functions:

Arrow functions are always anonymous. In other words, you cannot give them a name like you can with traditional functions.

Arrow functions have a more concise syntax. If the function only contains a single statement, you can omit the curly braces and the return keyword.

Arrow functions do not have their own this value. Instead, they inherit the this value from the enclosing lexical context.

Here's an example of an arrow function that has a single statement and omits the curly braces and return keyword:

const multiply = (a, b) => a * b;

This is equivalent to the following function written using the traditional function syntax:

function multiply(a, b) {

return a * b;

}

Arrow functions are commonly used in JavaScript for their concise syntax and for certain use cases where their lexical this behavior is desirable, such as in

event handlers

callbacks

However, they are not a replacement for traditional functions and should be used judiciously depending on the specific requirements of your code.

In JavaScript, the this keyword refers to the object that the current code is being executed on. However, the value of this can be affected by how a function is called, which can lead to unexpected behavior and bugs.

One of the benefits of arrow functions is that they have a "lexical this" behavior, which means that they inherit the this value from the surrounding lexical scope. This can be particularly useful in certain situations, such as when you want to use an arrow function as a callback function or in a closure.

Consider the following example:

const person = {

name: 'Alice',

sayHello: function() {

console.log(`Hello, my name is ${this.name}`);

}

};

setTimeout(person.sayHello, 1000);

In this example, person.sayHello is passed as a callback function to setTimeout. However, when sayHello is executed, its this value will not refer to person, but rather to the global object (or undefined in strict mode), because setTimeout calls the function with a different this value.

To get around this issue, you can use an arrow function instead:

const person = {

name: 'Alice',

sayHello: function() {

console.log(`Hello, my name is ${this.name}`);

}

};

setTimeout(() => person.sayHello(), 1000);

In this example, the arrow function that wraps person.sayHello() inherits the this value from the surrounding lexical scope, which is person. As a result, this.name correctly refers to the name property of person.

In general, arrow functions should be used carefully and thoughtfully, as their lexical this behavior can also be a drawback in certain situations where you need to access the this value of the current object.

const getanswer = (a, b) => {

d = a + b;

return d

}

var z = getanswer(1,2);

console.log("b ", z);

console.log("c ", d);

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.