নাম কোথায় থাকে: scope আর closure, পুরো ছবিটা

Kenji-র বইয়ের দোকানের page তার visitor গোনে count নামের একটা variable-এ, file-এর একদম ওপরে। Bob একটা like button যোগ করল, ওরও একটা counter লাগবে, তাই like reset করার সময় ও লিখল count = 0। এখন যতবার like reset হয়, ততবার দিনের সব visitor-এর হিসাব মুছে যায়, আর কেউ কোনো error দেখে না। দুটো feature একটাই নাম ভাগ করে নিচ্ছে, আর file-এর যেকোনো লাইন ওটা বদলে দিতে পারে। এই lesson প্রতিটা counter-কে একটা private count দেবে, যেটা শুধু ওর নিজের code-ই ছুঁতে পারে।

Kenji-র ভাগাভাগির count

এই হলো bug-টা, কয়েক লাইনে ছোট করে আনা। Kenji-র addView আর Bob-এর resetLikes দুজনেই একই count-এ লেখে।

let count = 0;

function addView() {
  count++;
}
function resetLikes() {
  count = 0;
}

addView();
addView();
addView();
resetLikes();
addView();
console.log("views: " + count);

views: 1

চারজন visitor এসেছিল, আর page বলছে একজন। দুটো function-এর কোনোটাই আলাদাভাবে ভুল না। গোলমালটা হলো count কোথায় থাকে: file-এর একদম ওপরে, যেখান থেকে প্রতিটা function ওটা দেখতে পায় আর বদলাতে পারে। তাই সমাধান আরও ভালো একটা function না। সমাধান হলো নামটার জন্য আরও ভালো একটা জায়গা, যেখানে শুধু counter-এর নিজের code পৌঁছাতে পারে। JavaScript এই জায়গাটাকে বলে scope।

Scope হলো কয়েক লাইন code-এর চারপাশে একটা বাক্স

Scope, মানে program-এর যে অংশে একটা নাম দেখা যায়। এটাকে কয়েক লাইন code-এর চারপাশে আঁকা একটা বাক্স হিসেবে ভাবো। বাক্সের ভেতরে declare করা নাম ওই বাক্সের। বাক্স তিন রকম।

• File। File-এর একদম বাইরের স্তরে declare করা নাম ওই file-এর যেকোনো জায়গা থেকে দেখা যায়।
• একটা function। Function-এর ভেতরে declare করা নাম, আর প্রতিটা parameter, দেখা যায় শুধু ওই function-এর ভেতর থেকে।
• একটা block। Block মানে এক জোড়া curly brace, যেমন একটা if বা একটা for-এর body। ভেতরে declare করা let বা const দেখা যায় শুধু ওই brace দুটোর মাঝখান থেকে।

Block-এর সাথে তোমার দেখা হয়েছে আগেই। Module 4-এ for loop-এর i থাকত শুধু loop-এর ভেতরে, আর পরে ওটা পড়তে গেলে program থেমে যেত। নিচের program-এ তিন রকম বাক্সই আছে।

const shop = "Progsity Books";

function openShop() {
  const hours = "9 to 5";
  console.log(shop + " opens " + hours);
}

openShop();
if (shop.length > 5) {
  const note = "long name";
  console.log(note);
}
console.log(typeof hours, typeof note);

Progsity Books opens 9 to 5
long name
undefined undefined

shop থাকে file-এ, তাই openShop ওটা পড়তে পারে। hours থাকে function-এ, আর note থাকে block-এ। শেষ লাইনটা দুটো বাক্সেরই বাইরে, সেখানে কোনো নামেরই অস্তিত্ব নেই। যে নাম নেই, তার জন্য typeof program থামায় না, উত্তর দেয় "undefined", তাই উঁকি দেওয়ার জন্য এটা নিরাপদ। মানে একটা নাম দেখা যায় ওর নিজের বাক্সের ভেতরে, বাইরে কোথাও না।

নাম খোঁজা, ভেতর থেকে বাইরে

বাক্স বসে থাকে অন্য বাক্সের ভেতরে। একটা function-এর বাক্স বসে file-এর বাক্সের ভেতরে, আর function-এর ভেতরের একটা block বসে function-এর বাক্সে। কোনো লাইন একটা নাম ব্যবহার করলে JavaScript একটা lookup চালায়, মানে নামটা খোঁজে। আগে খোঁজে লাইনটা যে বাক্সে আছে সেখানে, তারপর তার চারপাশের বাক্সে, এভাবে বাইরের দিকে। প্রথম যে বাক্সে নামটা পাওয়া যায়, সেটাই জেতে। File-এও না থাকলে program একটা ReferenceError দিয়ে থেমে যায়।

মানে ভেতরের বাক্স তার চারপাশের সব বাক্সের প্রতিটা নাম দেখতে পায়, আর বাইরের বাক্স ভেতরের বাক্সের কিছুই দেখতে পায় না। পরের program দুই দিকই দেখায়।

const rate = 0.05;

function addTax(price) {
  const tax = price * rate;
  return price + tax;
}

console.log(addTax(200));
console.log(tax);

210
ReferenceError: tax is not defined

addTax-এর ভেতরে rate খুঁজতে গিয়ে function-এর বাক্সে কিছু পাওয়া যায়নি, খোঁজা এক ধাপ বাইরে গিয়ে ওটা পেয়েছে file-এ। শেষ লাইনে tax-এর খোঁজা শুরু হয়েছে file থেকে, যেটা সবচেয়ে বাইরের বাক্স, আর যাওয়ার মতো আর কোনো জায়গা ছিল না। মানে খোঁজা বাইরের দিকে হাঁটে, আর থামে প্রথম মিলে যাওয়া নামে, নয়তো file-এ পৌঁছে error দিয়ে।

প্রতিটা call একটা নতুন বাক্স বানায়

Function লেখার সময় ওর বাক্স একবারই তৈরি হয়ে যায়, ব্যাপারটা এমন না। Function যতবার call হয়, ততবার একটা নতুন বাক্স তৈরি হয়, আর ভেতরের নামগুলো সেখানে নতুন করে শুরু হয়। Call শেষ হলে বাক্সটা সাধারণত ফেলে দেওয়া হয়। Module 5-এ তুমি দেখেছ call-গুলো কীভাবে একটার ওপর আরেকটা জমে। ওই প্রতিটা call-এর নিজের একটা বাক্স ছিল।

function visit(name) {
  let cups = 0;
  cups++;
  console.log(name + " has had " + cups + " cup");
}

visit("Zara");
visit("Zara");

Zara has had 1 cup
Zara has had 1 cup

দ্বিতীয় call প্রথমটার কথা মনে রাখে না। ওর let cups = 0 আবার চলেছে, একটা নতুন বাক্সে। মানে function-এর ভেতরের নাম প্রতিটা call-এ নতুন করে শুরু হয়। Kenji-র counter-এর ঠিক এটাই করা চলবে না, আর পরের অংশে বের হওয়ার রাস্তা।

Closure তার বাক্সটাকে বাঁচিয়ে রাখে

এবার আসল কৌশলটা। একটা function-এর ভেতরে তৈরি আরেকটা function মনে রাখে, ও কোন বাক্সে তৈরি হয়েছিল। বাইরের function যদি ভেতরের function-টা return করে, তাহলে বাইরের call শেষ হয়ে যায়, কিন্তু ওর বাক্সটা ফেলে দেওয়া যায় না। ভেতরের function এখনো ওটাকে ধরে রেখেছে। একটা function আর ও যে বাক্সটা মনে রাখে, দুটো মিলিয়ে বলে closure।

নিচের program-টা এক ধাপ এক ধাপ করে চালাও। makeCounter() call 1-এর বাক্সটার দিকে চোখ রাখো। makeCounter return করার পরেও ওটা টিকে থাকে, আর ticket-এর প্রতিটা call-এ ওর ভেতরে count বাড়ে।

এই সেই program, চালানো অবস্থায়।

const shop = "Progsity Books";
function makeCounter() {
  let count = 0;
  return function next() {
    count++;
    return shop + " #" + count;
  };
}
const ticket = makeCounter();
console.log(ticket());
console.log(ticket());
console.log(count);

Progsity Books #1
Progsity Books #2
ReferenceError: count is not defined

এখান থেকে তিনটা কথা বের হয়। count থাকে makeCounter call-এর বাক্সে, তাই ticket-এর এক call থেকে পরের call পর্যন্ত টিকে থাকে। File count পড়তে পারে না, তাই অন্য কোনো code ওটা reset করতে পারে না। আর let count = 0 চলেছে একবার, makeCounter call হওয়ার সময়, প্রতিটা ticket-এ না। মানে closure হলো একটা private variable, যেটা ততদিন বাঁচে যতদিন ওকে ব্যবহার করা function-টা বাঁচে।

দুটো call, দুটো counter

makeCounter-এর প্রতিটা call একটা নতুন count নিয়ে একটা নতুন বাক্স বানায়। তাই একই factory থেকে বানানো দুটো counter কখনো একটা count ভাগ করে না, আর Kenji আর Bob দুজনেই নিজের নিজের counter পেতে পারে।

মানে factory লেখা হয় একবার, আর প্রতিটা counter-এর জন্য call হয় একবার করে। প্রতিটা call এমন একটা function ফেরত দেয়, যেটা নিজের বাক্সটা মনে রাখে।

const a = 1;              // file-এর scope: নিচের প্রতিটা লাইন দেখতে পায়

function outer(p) {       // outer-এর scope: p আর b, প্রতিটা call-এ নতুন করে
  const b = 2;
  if (b > 1) {
    const c = 3;          // একটা block-এর scope: c দেখা যায় শুধু এই brace দুটোর ভেতরে
  }
}

function makeCounter() {  // factory
  let count = 0;          // private variable, makeCounter-এর প্রতিটা call-এ একটা
  return function () {    // ভেতরের function, যেটা এই call-এর scope মনে রাখে
    count++;
    return count;
  };
}
const next = makeCounter(); // closure: এটাকে call করো, count এক call থেকে পরের call-এ টিকে থাকে

const price = 450;
if (price > 400) {
  const discount = 45;
  console.log("pay " + (price - discount));
}
console.log("listed at " + price);

pay 405
listed at 450

function receipt(item, price) {
  const total = price + price * 0.05;
  return item + ": " + total;
}
function stock(item, count) {
  const total = count * 12;
  return item + ": " + total + " pieces";
}
console.log(receipt("pen", 20));
console.log(stock("pen", 3));
console.log(typeof total);

pen: 21
pen: 36 pieces
undefined

function makeCounter() {
  let count = 0;
  return {
    add: () => ++count,
    reset: () => {
      count = 0;
    },
    read: () => count,
  };
}

const views = makeCounter();
const likes = makeCounter();
views.add();
views.add();
likes.add();
views.add();
likes.reset();
views.add();
console.log("views: " + views.read());
console.log("likes: " + likes.read());

views: 4
likes: 0

const marks = 72;
if (marks >= 40) {
  let result = "pass";
}
console.log(result);

ReferenceError: result is not defined

function makeCounter() {
  let count = 0;
  function next() {
    count++;
    return count;
  }
}
const ticket = makeCounter();
console.log(ticket());

TypeError: ticket is not a function

let count = 0;
function makeCounter() {
  return () => ++count;
}
const tea = makeCounter();
const coffee = makeCounter();
tea();
tea();
console.log("coffee " + coffee());

coffee 3

function makeCounter() {
  let count = 0;
  return () => ++count;
}
console.log(makeCounter()());
console.log(makeCounter()());

1
1

function makeCounter() {
  let count = 0;
  return () => (count += 10);
}
const a = makeCounter();
const b = a;
const c = makeCounter();
console.log(a(), b(), c());

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

এরপর lesson 02 প্রতিটা নিয়ম একটা একটা করে ধরবে: global object, var আর ওর function scope, shadowing, hoisting আর dead zone।