Learn JavaScript - Scope, Closures, and the this Context

#Introduction

Episode 12 is the peak of phase two — three interrelated concepts often considered the most confusing in JavaScript: scope, closures, and this. In episode 4 you already saw global, function, and block scope briefly. Now we go deeper: how the scope chain works, the closure mechanism underpinning many production patterns, and the four this binding rules.

Why discuss these three together? Because they're all about one question: when code runs, which values or variables are accessible from that point? Scope answers for variables, closures exploit that answer, and this answers for the currently active object. These three concepts come up often in job interviews, so understand the mechanics, not just memorize them.

#Scope and the Scope Chain

#Lexical Scope

Scope is determined when code is written, not when it runs — that's what lexical means. A function inside another function can access variables in its outer scope, but not the other way around:

The scope chain

const nama = "Global";
 
function luar() {
  const namaLuar = "Di fungsi luar";
 
  function dalam() {
    const namaDalam = "Di fungsi dalam";
    console.log(nama);
    console.log(namaLuar);
    console.log(namaDalam);
  }
 
  dalam();
}
 
luar();

dalam can access namaLuar from luar and nama from the global scope — this is the scope chain. Each function adds one layer upward when searching for a variable. Conversely, luar can't access namaDalam belonging to dalam, and the global scope can't access either of them. Lookups always go up, never down.

#Closures

#Functions That Remember Their Environment

A closure happens when a function "carries" variables from its birth scope, even after that scope has finished executing:

The most basic closure

function buatPenghitung() {
  let hitung = 0;
 
  return function () {
    hitung += 1;
    return hitung;
  };
}
 
const counter = buatPenghitung();
 
console.log(counter());
console.log(counter());
console.log(counter());

buatPenghitung returns a function that increments hitung. Normally hitung would die after buatPenghitung finishes — but because the inner function closes over it, hitung stays alive. Each call to counter() yields 1, 2, 3. This is the mechanism of private state in JavaScript, and the foundation of the function factory pattern from episode 8.

#The Closure Trap in Loops

The classic trap: creating closures inside a loop with var. The modern solution is let, which creates a per-iteration variable:

Closures and let inside a loop

for (let i = 1; i <= 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 100);
}

let gives i per-iteration scope, so each callback closes over a different value: 1, 2, 3. If replaced with var, all callbacks close over the same variable and all print 4. This is the main reason let replaced var in modern code.

#The this Context: Four Binding Rules

#Default Binding and Implicit Binding

this in regular functions is determined by how the function is called. Its four rules:

Default binding: this points to the global object (or undefined in strict mode) when a function is called standalone.
Implicit binding: this points to the object in front of the dot when a function is called as a method.
Explicit binding: forced via call, apply, or bind.
New binding: forced via the new operator.

Implicit binding

const pengguna = {
  nama: "Arman",
  panggil: function () {
    console.log(this.nama);
  },
};
 
pengguna.panggil();

pengguna.panggil() uses implicit binding: because it's called via pengguna, this points to pengguna, so the result is "Arman". If the function were separated and called standalone, this would no longer point to pengguna.

#Arrow Functions Have No this of Their Own

Arrow functions don't have their own this — they inherit this from the nearest scope that has one:

Arrow functions inherit this

const tim = {
  nama: "Squad Dev",
  anggota: ["Arman", "Sari"],
  perkenalan: function () {
    this.anggota.forEach((nama) => {
      console.log(`${nama} dari ${this.nama}`);
    });
  },
};
 
tim.perkenalan();

perkenalan is a regular function, so this points to tim. The arrow function inside inherits that this — rather than creating its own — so this.nama stays "Squad Dev". If it were replaced with a regular function, this inside the callback would detach from tim.

#Controlling this with call, apply, and bind

#call and apply: Calling with a Specific this

call and apply invoke a function immediately with a this you specify. The only difference is how arguments are passed: call one by one, apply via an array:

call and apply

function perkenalkan(kota, tahun) {
  console.log(`${this.nama} dari ${kota}, sejak ${tahun}`);
}
 
const arman = { nama: "Arman" };
 
perkenalkan.call(arman, "Jakarta", 2020);
perkenalkan.apply(arman, ["Jakarta", 2020]);

perkenalkan.call(arman, "Jakarta", 2020) and the apply version with an array produce the same output. Here this is forced to point at arman even though perkenalkan isn't an arman method.

#bind: Creating a New Function with a Fixed this

Unlike call and apply, which call immediately, bind creates a new function with this locked in:

bind locks this

const pengguna = {
  nama: "Arman",
  sapaan: function () {
    return `Halo, ${this.nama}`;
  },
};
 
const ambilSapaan = pengguna.sapaan;
const ambilSapaanKunci = pengguna.sapaan.bind(pengguna);
 
console.log(ambilSapaanKunci());

ambilSapaan called standalone loses this — but ambilSapaanKunci, created with .bind(pengguna), always points to pengguna no matter how it's called. bind is the classic solution when a method is detached from its object, for example when passed as a callback.

#Wrap-Up

Episode 12 completed the three hardest concepts: the scope chain that determines variable visibility lexically, closures that make functions remember their birth environment with private state, and the four this binding rules plus call, apply, and bind to control it.

Key takeaways:

Scope is lexical: determined when code is written, and lookups always go up.
Closures make functions remember variables from their birth scope.
let in a loop gives closures a per-iteration value; var does not.
this is determined by how a function is called, not where it's written.
Arrow functions have no this of their own; they inherit from above.
call and apply call immediately; bind creates a new locked function.

In the next episode 13 we enter phase three: the DOM API and element manipulation — selecting elements with selectors, changing content and style, creating new elements, and managing classes and attributes. This is when JavaScript starts interacting with real web pages.