this in functions in Javascript - Time & Space Complexity

Time Complexity: this in functions

O(n)

Understanding Time Complexity

Let's explore how the use of this inside functions affects the time it takes for code to run.

We want to see how the number of operations changes as the input grows when this is involved.

Scenario Under Consideration

Analyze the time complexity of the following code snippet.

function countItems(arr) {
  let count = 0;
  arr.forEach(function() {
    count++;
  });
  return count;
}

const items = [1, 2, 3, 4, 5];
countItems(items);
    

This code counts how many items are in an array using a function where this is not explicitly used.

Identify Repeating Operations

Identify the loops, recursion, array traversals that repeat.

• Primary operation: The forEach loop runs once for each item in the array.
• How many times: It runs exactly as many times as there are items in the array.

How Execution Grows With Input

As the array gets bigger, the function runs the counting step more times.

Input Size (n)	Approx. Operations
10	10
100	100
1000	1000

Pattern observation: The number of operations grows directly with the number of items.

Final Time Complexity

Time Complexity: O(n)

This means the time to run the function grows in a straight line as the input size grows.

Common Mistake

[X] Wrong: "Using this inside the function makes it slower or more complex."

[OK] Correct: The use of this does not add extra loops or repeated steps; it just changes what the function refers to, so it does not affect time complexity.

Interview Connect

Understanding how this works in functions helps you reason about code behavior and performance clearly, a skill valuable in many coding discussions.

Self-Check

"What if we replaced the regular function with an arrow function that uses this? How would the time complexity change?"

Practice

1. What does this refer to inside a regular function called as obj.method()?

easy

A. The function itself

B. The global object (like window)

C. Undefined

D. The object obj that calls the method

Solution

1. Step 1: Understand how this works in method calls

   When a function is called as a method of an object, this points to that object.

2. Step 2: Apply to the example obj.method()

   Since method is called by obj, this inside method refers to obj.

3. Final Answer:

   The object obj that calls the method -> Option D

4. Quick Check:

   obj.method() means this = obj [OK]

Hint: Remember: this is the caller object in method calls [OK]

Common Mistakes:

• Thinking this is always global
• Confusing this with the function itself
• Assuming this is undefined in method calls

2. Which of the following is the correct way to define a method inside an object so that this refers to the object?

easy

A. const obj = { method: () => { console.log(this); } };

B. const obj = { method() => { console.log(this); } };

C. const obj = { method() { console.log(this); } };

D. const obj = { method: function() => { console.log(this); } };

Solution

1. Step 1: Understand function types and this

   Arrow functions do not have their own this; they inherit from the outer scope. Regular functions have their own this.

2. Step 2: Check each option

   A uses arrow function, so this is inherited from outer scope (global), not the object. B uses concise method syntax, which binds this to the object. C uses invalid syntax (cannot define concise method with arrow). D uses invalid syntax (function() => not valid).

3. Final Answer:

   const obj = { method() { console.log(this); } }; -> Option C

4. Quick Check:

   Use concise method syntax for object methods [OK]

Hint: Use concise method syntax for correct this in objects [OK]

Common Mistakes:

• Using arrow functions for object methods expecting this as object
• Attempting invalid concise arrow syntax like method() => {}
• Using invalid syntax like function() => {} inside object

3. What will be the output of the following code?

const obj = {
  name: 'Alice',
  greet() {
    function inner() {
      console.log(this.name);
    }
    inner();
  }
};
obj.greet();

medium

A. undefined

B. Error

C. Alice

D. null

Solution

1. Step 1: Analyze this inside inner function

   The function inner is a regular function called without an object, so this inside it is undefined in strict mode (or global object in non-strict).

2. Step 2: Check what this.name prints

   Since this is undefined, this.name is undefined, so console.log prints undefined.

3. Final Answer:

   undefined -> Option A

4. Quick Check:

   Inner function called alone: this = undefined [OK]

Hint: Inner functions called alone have this undefined [OK]

Common Mistakes:

• Assuming this inside inner function is the object
• Expecting 'Alice' to print
• Confusing arrow functions with regular functions

4. Identify the error in the following code and fix it so that this.name inside inner refers to obj.

const obj = {
  name: 'Bob',
  greet() {
    function inner() {
      console.log(this.name);
    }
    inner();
  }
};
obj.greet();

medium

A. Bind inner to this using inner.bind(this)()

B. All of the above

C. Assign const self = this and use self.name inside inner

D. Change inner to an arrow function

Solution

1. Step 1: Understand why this is wrong inside inner

   Because inner is a regular function called alone, this is undefined, not obj.

2. Step 2: Explore fixes to bind this correctly

   Change inner to an arrow function: Using arrow function for inner inherits this from greet, which is obj. Bind inner to this using inner.bind(this)(): Using inner.bind(this)() explicitly sets this to obj. Assign const self = this and use self.name inside inner: Saving this in self and using self.name works because self is accessible inside inner.

3. Step 3: Conclusion

   All three methods correctly fix the problem.

4. Final Answer:

   All of the above -> Option B

5. Quick Check:

   Bind or arrow or self variable fixes this [OK]

Hint: Use arrow, bind, or self variable to fix this in inner functions [OK]

Common Mistakes:

• Only trying one fix and missing others
• Not understanding arrow functions inherit this
• Forgetting to call bind method

5. You want to create an object counter with a method count that increases a number every second and logs it using this.value. Which code correctly keeps this referring to counter inside setInterval callback?

const counter = {
  value: 0,
  count() {
    setInterval(function() {
      this.value++;
      console.log(this.value);
    }, 1000);
  }
};
counter.count();

hard

A. All of the above

B. Bind this to the callback: setInterval(function() { ... }.bind(this), 1000);

C. Save const self = this before setInterval and use self.value inside callback

D. Replace the callback with an arrow function: setInterval(() => { this.value++; console.log(this.value); }, 1000);

Solution

1. Step 1: Identify the problem with this in setInterval

   The callback function is a regular function, so this inside it is not counter but undefined or global object.

2. Step 2: Explore solutions to keep this as counter

   Replace the callback with an arrow function: setInterval(() => { this.value++; console.log(this.value); }, 1000);: Arrow functions inherit this from count, so this.value works. Bind this to the callback: setInterval(function() { ... }.bind(this), 1000);: Using bind(this) explicitly sets this inside callback. Save const self = this before setInterval and use self.value inside callback: Saving this in self and using self.value works because self is accessible inside callback.

3. Step 3: Conclusion

   All three methods correctly keep this referring to counter.

4. Final Answer:

   All of the above -> Option A

5. Quick Check:

   Arrow, bind, or self variable all fix this in callbacks [OK]

Hint: Use arrow, bind, or self variable to keep this in callbacks [OK]

Common Mistakes:

• Using regular function without binding this
• Expecting this to be counter automatically
• Not saving this before callback