Javascript BrainStorming | Output Questions

Here are the answers and explanations to the JavaScript questions:

1. Method vs. Regular Function Call

const obj = {
  a: 10,
  getA() {
    return this.a;
  },
  getB: function() {
    return this.a;
  }
};

const test1 = obj.getA;
const test2 = obj.getB;

console.log(obj.getA());      // 10
console.log(test1());         // undefined
console.log(obj.getB());      // 10
console.log(test2());         // undefined        

• obj.getA() and obj.getB() are called as methods, so this refers to obj, and this.a returns 10.
• test1() and test2() are standalone function calls, so this is either undefined (in strict mode) or refers to the global object, where this.a is undefined.

2. Arrow Function vs. Regular Function

const obj = {
  a: 5,
  regularFn: function() {
    return this.a;
  },
  arrowFn: () => {
    return this.a;
  }
};

console.log(obj.regularFn()); // 5
console.log(obj.arrowFn());   // undefined        

• regularFn() is a regular function, so this refers to obj, and this.a returns 5.
• arrowFn() is an arrow function, which does not have its own this. It captures this from the surrounding context, which is likely undefined in strict mode or the global object. So this.a is undefined.

3. Function Inside Method

const obj = {
  a: 42,
  getA() {
    function innerFn() {
      return this.a;
    }
    return innerFn();
  }
};

console.log(obj.getA());  // undefined        

• innerFn() is a regular function call, and since it's called without an object context, this is either undefined (in strict mode) or the global object. Therefore, this.a is undefined.

4 .Using bind()

const obj = {
  a: 7,
  getA() {
    return this.a;
  }
};

const test = obj.getA.bind({ a: 20 });

console.log(obj.getA()); // 7
console.log(test());     // 20        

• obj.getA() is called as a method, so this refers to obj and returns 7.
• test() is a function created by bind(), which permanently sets this to { a: 20 }, so it returns 20.

5. Changing this with call() and apply()

const obj = {
  a: 3,
  getA() {
    return this.a;
  }
};

const anotherObj = { a: 99 };

console.log(obj.getA());                  // 3
console.log(obj.getA.call(anotherObj));   // 99
console.log(obj.getA.apply(anotherObj));  // 99        

• obj.getA() is called as a method of obj, so this refers to obj, and it returns 3.
• obj.getA.call(anotherObj) and obj.getA.apply(anotherObj) explicitly set this to anotherObj, so they both return 99.

6. this in Callback Functions

const obj = {
  a: 8,
  getA() {
    setTimeout(function() {
      console.log(this.a);
    }, 100);
  }
};

obj.getA();  // undefined        

• The function passed to setTimeout is a regular function, and since it's executed in the global context, this inside the function refers to the global object (or undefined in strict mode). Therefore, this.a is undefined

7. Arrow Function as a Constructor

const MyClass = () => {
  this.a = 10;
};

const instance = new MyClass();
console.log(instance.a);  // TypeError: MyClass is not a constructor        

• Arrow functions cannot be used as constructors. When you try to instantiate MyClass with new, JavaScript throws a TypeError because arrow functions do not have a [[Construct]] internal method.

8. this in a Class

class MyClass {
  constructor() {
    this.a = 50;
  }

  getA() {
    return this.a;
  }

  static getStaticA() {
    return this.a;
  }
}

const instance = new MyClass();
console.log(instance.getA());        // 50
console.log(MyClass.getStaticA());   // undefined        

• instance.getA() returns 50 because this refers to the instance, and this.a is 50.
• MyClass.getStaticA() is a static method, and in static methods, this refers to the class itself, not an instance. Since MyClass doesn’t have a property a, it returns undefined