JavaScript: Demystifying Execution Context, the Call Stack and the 'this' Keyword

JavaScript: Demystifying Execution Context, the Call Stack and the 'this' Keyword | TaQtiQ

console.log(eval("2 + 2"));
// Expected output: 4

console.log(eval(new String("2 + 2")));
// Expected output: 2 + 2

console.log(eval("2 + 2") === eval("4"));
// Expected output: true

console.log(eval("2 + 2") === eval(new String("2 + 2")));
// Expected output: false

function testScope() {
  let localSecret = "secret42";
  
  // Direct eval shares the lexical environment
  let result = eval("localSecret + ' evaluated'");
  console.log(result); // Output: secret42 evaluated
}
testScope();

// Direct call
eval("x + y");

// Indirect call using the comma operator to return eval
(0, eval)("x + y");

// Indirect call through optional chaining
eval?.("x + y");

// Indirect call using a variable to store and return eval
const myEval = eval;
myEval("x + y");

// Indirect call through member access
const obj = { eval };
obj.eval("x + y");

const button = {
  text: "Click me",
  click: function() {
    console.log(`Button text is: ${this.text}`);
  }
};

// If passed directly as a callback, 'this' would be lost (pointing to global/undefined)
// setTimeout(button.click, 1000); 

// Using bind fixes the context:
const boundClick = button.click.bind(button);
setTimeout(boundClick, 1000); 
// Output after 1 second: "Button text is: Click me"

const numbers = [5, 6, 2, 3, 7];

// Math.max doesn't accept arrays directly, but we can use apply
const max = Math.max.apply(null, numbers);
console.log(max); // Output: 7

// Alternatively, with an object context:
console.log(person.fullName.apply(person1, ["New York", "USA"]));
// Output: "John Doe from New York, USA"

const person = {
  fullName: function(city, country) {
    return `${this.firstName} ${this.lastName} from ${city}, ${country}`;
  }
};

const person1 = { firstName: "John", lastName: "Doe" };

// Arguments are passed individually separated by commas
console.log(person.fullName.call(person1, "New York", "USA"));
// Output: "John Doe from New York, USA"

Feature	`call`	`apply()`	`bind()`
Execution	Executes immediately	Executes immediately	Returns a new function (does not execute immediately)
Argument Passing	Passed individually as a comma-separated list (`arg1, arg2`)	Passed as a single array (`[arg1, arg2]`)	Passed individually (at binding time or execution time)
Use Case	Borrowing methods with known arguments

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const car1 = new Car("Eagle", "Talon TSi", 1993);

console.log(car1.make);
// Expected output: "Eagle"

const group = {
  title: "Engineering",
  members: ["Alice", "Bob"],
  
  showMembers() {
    // Regular function here would lose 'this' inside the callback,
    // but arrow function lexically inherits 'this' from showMembers()
    this.members.forEach(member => {
      console.log(`${member} is in ${this.title}`);
    });
  }
};

group.showMembers(); 
// Output: 
// Alice is in Engineering
// Bob is in Engineering

JavaScript: Demystifying Execution Context, the Call Stack and the 'this' Keyword

How does JavaScript code run?

JavaScript: Objects, Prototypes and Object-Oriented Programming

JavaScript: Mastering the Event Loop, Callbacks and Asynchronous Code

JavaScript: Understanding Variables and Scope

What Is the Document Object Model in Web Applications?

Next.js: What Is Hydration?

What is an 'execution context'?

What are the different types of execution contexts?

Direct `eval()` (shares the caller's scope)

Indirect `eval()` (uses global scope)

Why should you avoid using `eval()`?

What is the call stack?

What is "Last In, First Out" (LIFO)?

How does the call stack work in JavaScript?

Stack overflows

What is the `this` keyword?

Rule 1: Default binding

Rule 2: Implicit binding

Rule 3: Explicit binding

Rule 4: `new` binding

How do arrow functions handle `this`?

Stay in the loop

Comments (0)

JavaScript: Objects, Prototypes and Object-Oriented Programming

JavaScript: Mastering the Event Loop, Callbacks and Asynchronous Code

JavaScript: Understanding Variables and Scope

What Is the Document Object Model in Web Applications?

Next.js: What Is Hydration?

What is an 'execution context'?

Direct eval() (shares the caller's scope)

Indirect eval() (uses global scope)

Why should you avoid using eval()?

What is "Last In, First Out" (LIFO)?

What is the this keyword?

Rule 4: new binding

How do arrow functions handle this?

Stay in the loop

Comments (0)

Direct `eval()` (shares the caller's scope)

Indirect `eval()` (uses global scope)

Why should you avoid using `eval()`?

What is the `this` keyword?

Rule 4: `new` binding

How do arrow functions handle `this`?