this with arrow functions in Javascript - Time & Space Complexity

Time Complexity: this with arrow functions

O(n)

Understanding Time Complexity

Let's explore how the use of this inside arrow functions affects the number of operations in JavaScript code.

We want to see how the way this works with arrow functions changes the work done as input grows.

Scenario Under Consideration

Analyze the time complexity of the following code snippet.

const obj = {
  values: [1, 2, 3, 4, 5],
  multiply(factor) {
    return this.values.map(x => x * factor);
  }
};

const result = obj.multiply(2);
console.log(result);
    

This code multiplies each number in an array by a factor using an arrow function inside map.

Identify Repeating Operations

Identify the loops, recursion, array traversals that repeat.

• Primary operation: The map method loops through each element of the values array.
• How many times: It runs once for each item in the array, so as many times as the array length.

How Execution Grows With Input

As the array gets bigger, the number of times the arrow function runs grows directly with the array size.

Input Size (n)	Approx. Operations
10	10 calls to the arrow function
100	100 calls to the arrow function
1000	1000 calls to the arrow function

Pattern observation: The work grows evenly as the input size grows.

Final Time Complexity

Time Complexity: O(n)

This means the time to finish grows in a straight line with the number of items in the array.

Common Mistake

[X] Wrong: "Using an arrow function changes how many times the loop runs or makes it faster."

[OK] Correct: The arrow function only changes how this behaves inside it, not how many times the loop runs or the overall work done.

Interview Connect

Understanding how this works with arrow functions helps you write clearer code and explain your choices confidently in interviews.

Self-Check

What if we replaced the arrow function with a regular function inside map? How would the time complexity change?

Practice

1.

What is true about this in arrow functions compared to regular functions?

easy

A. this in arrow functions is inherited from the surrounding code where they are created.

B. this in arrow functions always refers to the global object.

C. this in arrow functions is undefined.

D. this in arrow functions refers to the function itself.

Solution

1. Step 1: Understand how this works in arrow functions

   Arrow functions do not have their own this. Instead, they use the this value from the surrounding (lexical) context where they are created.

2. Step 2: Compare with other options

   Options B, C, and D are incorrect because arrow functions do not bind this to the global object, undefined, or themselves.

3. Final Answer:

   this in arrow functions is inherited from the surrounding code where they are created. -> Option A

4. Quick Check:

   this in arrow functions = lexical this [OK]

Hint: Arrow functions use surrounding this, not their own [OK]

Common Mistakes:

• Thinking arrow functions have their own this
• Confusing arrow functions with regular functions
• Assuming this is always global in arrow functions

2.

Which of the following is the correct syntax to define an arrow function that logs this.name?

const obj = { name: 'Alice', logName: ??? }

easy

A. logName: function log() { console.log(this.name) }

B. logName: function() { console.log(this.name) }

C. logName: () { console.log(this.name) }

D. logName: () => console.log(this.name)

Solution

1. Step 1: Identify arrow function syntax

   Arrow functions use the syntax () => expression or () => { statements }. logName: () => console.log(this.name) uses the correct concise syntax.

2. Step 2: Check other options

   Options B and D use regular function() syntax, not arrow functions. logName: () { console.log(this.name) } () { console.log(this.name) } is missing the fat arrow =>, resulting in a syntax error. Note: even with correct arrow syntax as an object method, this would refer to the lexical scope (global), not the object.

3. Final Answer:

   logName: () => console.log(this.name) -> Option D

4. Quick Check:

   Arrow function syntax = logName: () => console.log(this.name) [OK]

Hint: Arrow function syntax: () => expression or () => { } [OK]

Common Mistakes:

• Forgetting the fat arrow '=>'
• Using function keyword instead of arrow syntax
• Confusing arrow function with method shorthand

3.

What will be the output of this code?

const person = {
  name: 'Bob',
  greet: () => {
    console.log(this.name);
  }
};
person.greet();

medium

A. undefined

B. '' (empty string)

C. Error

D. Bob

Solution

1. Step 1: Understand this in arrow functions inside objects

   The arrow function greet does not have its own this. It uses this from the surrounding scope, which is the global scope here.

2. Step 2: Check global this.name

   In most environments, this.name in global scope is undefined unless explicitly set.

3. Final Answer:

   undefined -> Option A

4. Quick Check:

   Arrow function this = lexical this (global) [OK]

Hint: Arrow functions use outer this, not object [OK]

Common Mistakes:

• Expecting this to be the object
• Confusing arrow function with regular method
• Assuming global this.name is set

4.

Find the error in this code and fix it so that this.name inside greet refers to the user object:

const user = {
  name: 'Carol',
  greet: () => {
    console.log(this.name);
  }
};
user.greet();

medium

A. Use function greet() { console.log(this.name); } outside the object

B. Add bind(user) to the arrow function

C. Change greet to a regular function: greet() { console.log(this.name); }

D. Replace this.name with user.name inside arrow function

Solution

1. Step 1: Identify why this.name is incorrect

   Arrow functions do not have their own this, so inside greet, this is not the user object.

2. Step 2: Fix by using a regular function method

   Defining greet as a regular function method binds this to the user object when called as user.greet().

3. Final Answer:

   Change greet to a regular function: greet() { console.log(this.name); } -> Option C

4. Quick Check:

   Use regular function for object methods needing this [OK]

Hint: Use regular functions for object methods needing this [OK]

Common Mistakes:

• Trying to bind this to arrow functions
• Using arrow functions for object methods expecting this
• Accessing object properties via global this

5.

You want to create an object with a method that uses a callback to print the object's name property after 1 second. Which code correctly uses arrow functions to keep this referring to the object?

const obj = {
  name: 'Dave',
  printName: function() {
    setTimeout(??? , 1000);
  }
};
obj.printName();

hard

A. function() { console.log(this.name) }

B. () => console.log(this.name)

C. function() { console.log(obj.name) }

D. () => { console.log(obj.name) }

Solution

1. Step 1: Understand this inside setTimeout callback

   Inside setTimeout, a regular function's this is global or undefined, so it loses the object context.

2. Step 2: Use arrow function to inherit this from printName

   Using an arrow function as callback keeps this from printName, which is the object obj.

3. Final Answer:

   () => console.log(this.name) -> Option B

4. Quick Check:

   Arrow function callback keeps this from method [OK]

Hint: Use arrow function callbacks to keep this context [OK]

Common Mistakes:

• Using regular function losing this context
• Referencing object by name inside callback (less flexible)
• Not using arrow function for callbacks needing this