Arrow Functions

What will be logged to the console?

const obj = {
  name: 'Object',
  regularFunction: function() {
    console.log(this.name);
  },
  arrowFunction: () => {
    console.log(this.name);
  }
};

obj.regularFunction();
obj.arrowFunction();

'Object', 'Object'
'Object', undefined
The output will be `'Object'` followed by `undefined` (or possibly `''` if run in a browser where `window.name` is an empty string). This demonstrates the critical difference in `this` binding between regular and arrow functions. In `regularFunction`, `this` refers to the object that calls the method (`obj`), so `this.name` is `'Object'`. However, in `arrowFunction`, `this` is inherited from the enclosing lexical scope where the object literal was defined, which is typically the global scope (or the module scope in modules). In the global scope, `this` usually refers to the global object (`window` in browsers, `global` in Node.js), where `this.name` might be undefined or an empty string. This behavior shows why arrow functions aren't suitable for object methods that need to access the object via `this`—regular functions are generally more appropriate for such cases. The example highlights how important it is to understand the lexical `this` binding behavior when choosing between arrow functions and regular functions.
undefined, 'Object'
undefined, undefined

Next Question (4/20)