Bindings in Arrow Function

Lecture 193:- Bindings in Arrow Function

Arrow functions in JavaScript are a shorthand way of writing function expressions. They are commonly used in modern JavaScript programming due to their concise syntax and the way they handle the this keyword.

In an arrow function, this refers to the this value of the enclosing lexical context, unlike regular functions where this can be bound to different values based on the way the function is called. Arrow functions also have a simpler syntax than regular functions and automatically return the result of the expression they contain.

Regarding bindings in arrow functions, it's important to note that arrow functions do not have their own this, arguments, super, or new.target bindings. Instead, they use the this value of the enclosing lexical context, which means that arrow functions can be used to preserve the value of this from the surrounding code.

For example, consider the following code:

javascriptCopy code

const person = {  name: 'John',  sayHi: function() {    console.log(`Hi, my name is ${this.name}`);  } }; person.sayHi(); // Output: Hi, my name is John

In the above code, this inside the sayHi function refers to the person object. If we were to use an arrow function instead, this would refer to the this value of the enclosing lexical context, which would be the global object in this case.

However, if we use an arrow function to define sayHi as follows:

javascriptCopy code

const person = {  name: 'John',  sayHi: () => {    console.log(`Hi, my name is ${this.name}`);  } }; person.sayHi(); // Output: Hi, my name is undefined

In the above code, this inside the arrow function refers to the this value of the enclosing lexical context, which is the global object. This means that this.name is undefined, since the global object does not have a name property.