js.md

Arrow functions — simple comparison

ES5 (need .bind to keep this):

const result = {
  name: "Hello",
  data: function () {
    setTimeout(function () {
      console.log(this.name);
    }.bind(this), 5000);
  }
};

ES6 (arrow keeps surrounding this):

const result = {
  name: "Hello",
  data() {
    setTimeout(() => {
      console.log(this.name);
    }, 5000);
  }
};

Key takeaway: arrow functions inherit this from the outer scope; regular functions get their own this.

---

Closures — quick pattern

Factory that returns a function which "remembers" i:

function getAdder(i) {
  return function (number) {
    return i + number;
  };
}

const add6 = getAdder(6);
console.log(add6(4));        // 10
console.log(getAdder(6)(4)); // 10

Takeaway: inner function retains access to outer scope variables even after outer returns.

---

Stale closures and incrementer example — step-by-step

Small demo: simple curried function

const closure = a => b => console.log(a, b);
closure(1)(2); // 1 2

Incrementer that returns helpers and shows how closures capture current values:

function createIncrement(init = 0) {
  let value = init;

  return function increment() {
    value += 1;
    console.log(value); // current value

    const message = `Current value is ${value}`;

    function logger() {
      console.log(message); // message captured at this call
    }

    function getValue() {
      return value; // always reads latest value
    }

    return [logger, getValue];
  };
}

const counter = createIncrement(); // value starts 0

const [logger, getValue] = counter(); // value -> 1, message = 'Current value is 1'
counter(); // value -> 2
counter(); // value -> 3

logger();            // logs: 'Current value is 1'  (captured message)
console.log(getValue()); // logs: 3  (reads latest value)