What is lexical scoping in JavaScript arrow functions?

What is lexical scoping in JavaScript arrow functions?

Lexical scoping means that a function's scope is determined by its location in the source code. In arrow functions, this means they inherit the 'this' value from their enclosing context.

Can you give me an example of how lexical scoping works with arrow functions?

Sure! Here's a simple example:

const obj = {
  value: 42,
  getValue: function() {
    return () => this.value;
  }
};

const getValue = obj.getValue();
console.log(getValue()); // Outputs: 42

In this case, the arrow function inherits 'this' from 'getValue', which refers to 'obj'.

What happens if I use a regular function instead of an arrow function?

If you use a regular function, 'this' will refer to the calling context, not the enclosing one. For example:

const obj = {
  value: 42,
  getValue: function() {
    return function() { return this.value; };
  }
};

const getValue = obj.getValue();
console.log(getValue()); // Outputs: undefined

Here, 'this' inside the regular function does not refer to 'obj'.

Why should I use arrow functions over regular functions?

Arrow functions are often preferred for their concise syntax and because they automatically bind 'this' to the surrounding context, making them easier to work with in many scenarios.