engine তোমার code চালায় কীভাবে: parse, bytecode, JIT

David দশ লাইনের একটা program লেখে, যেটা বিক্রির ছোট একটা report ছাপে। প্রথম লাইনটা console.log("Starting the report..."), তাই সে ধরে নেয় অন্তত ওইটুকু তো আসবে। Run চাপে, আর কিছুই ছাপে না। Playground বলে "Compile error", দেখায় SyntaxError: Unexpected token ')', আর দোষ দেয় লাইন 10-কে।

লাইন 10 তো শেষ লাইন। শেষ লাইন কীভাবে প্রথম লাইনকে চলতে দেয় না? Engine তো তখনো লাইন 10 পর্যন্ত পৌঁছায়ইনি। নাকি পৌঁছেছিল?

পৌঁছেছিল। একটা লাইনও চালানোর আগে engine পুরো file-টা পড়ে নেয়। এই lesson-এ আমরা এক লাইন code-এর পিছু নেব, আর দেখব engine ওটার সঙ্গে কী কী করে। শেষে David-এর ফাঁকা output-এর মানে বুঝবে। সামনে যত error message পাবে, তার বেশিরভাগের মানেও বুঝবে।

Engine কী

Engine হলো সেই program, যেটা JavaScript-এর লেখা পড়ে আর চালায়। Lesson 02-এ এটাকেই বলা হয়েছিল চার socket-এর মাঝখানের বাক্স। হিসাবে ধরার মতো engine আছে তিনটা, প্রতিটা আলাদা প্রতিষ্ঠানের বানানো।

তিনটাই একই নিয়মের বই মেনে চলে, যার নাম ECMAScript। তাই তোমার code তিনটাতেই একইভাবে চলে। ভেতরে ওদের গড়ন আলাদা, অংশগুলোর নামও আলাদা। এই lesson V8-এর নামগুলো ব্যবহার করে, কারণ তোমার Playground-এর code V8-ই চালায়।

তাই engine একটা program, আর প্রায় সব browser আর server-এর JavaScript চালায় এই তিনটা।

ধাপ 1: parser আগে পুরো file পড়ে

Engine-এর প্রথম অংশটা হলো parser। সে তোমার লেখা পড়ে, আর দেখে সেটা JavaScript-এর ব্যাকরণ মানছে কি না। কিছু চলার আগেই সে পুরো file-এর জন্য এই কাজটা করে।

Parser কাজটা করে দুইটা ছোট ধাপে। প্রথমে লেখাটা কেটে tokens বানায়, মানে ভাষার শব্দ আর চিহ্নগুলো: return, price, *, count, ;। তারপর token-গুলো সাজিয়ে একটা parse tree বানায়, লাইনটার মানে কী তার একটা ছবি।

File-এর কোথাও token দিয়ে ঠিকঠাক tree না বানানো গেলে parser থেমে যায়, আর একটা SyntaxError জানায়। Syntax error মানে "এটা ব্যাকরণ মেনে লেখা JavaScript না"। তখনো কিছুই চলেনি, তাই কিছুই ছাপে না। David-এর সঙ্গে ঠিক এটাই হয়েছে।

তাই SyntaxError আসে ধাপ 1 থেকে, আর সেটা শুধু নিজের লাইন না, পুরো file থামিয়ে দেয়।

ধাপ 2: bytecode, যেটা চালায় একটা interpreter

এরপর engine tree-টাকে বানায় bytecode: খুব ছোট আর সহজ কিছু instruction-এর একটা তালিকা, JavaScript statement-এর চেয়ে অনেক ছোট। V8-এর যে অংশ bytecode বানায় আর চালায়, তার নাম Ignition। এটা একটা interpreter, মানে এমন একটা program, যেটা একটা একটা করে instruction চালায়।

সত্যিকারের bytecode তুমি নিজেও দেখতে পারো। নিজের মেশিনে একটা flag দিলে Node.js এটা ছেপে দেয়। ছবি 1-এর লাইনটা নিচের Example 1-এর ছোট function-এর ভেতরে রেখে চালালে Node 22 এটা ছেপেছিল:

Ldar a1
Mul a0, [0]
Return

তিনটা instruction। Ldar a1 দ্বিতীয় argument, মানে count, তুলে রাখে accumulator নামের একটা কাজের খোপে। Mul a0, [0] সেটাকে প্রথম argument price দিয়ে গুণ করে। Return ফলটা ফেরত দেয়। [0] দেখিয়ে দেয় একটা খোপ, যেখানে engine লিখে রাখে সে কোন type-এর মান দেখেছে। ধাপ 3-এ এটা কাজে লাগে।

নিচের widget এক লাইনকে পুরো যাত্রাটা ধাপে ধাপে ঘুরিয়ে দেখায়। এক ধাপ থেকে পরের ধাপে যেতে step button চাপো।

তাই bytecode হলো engine-এর নিজের ছোট instruction-এর তালিকা, আর interpreter সেটা সঙ্গে সঙ্গে চালায়।

ধাপ 3: JIT ব্যস্ত code compile করে

Bytecode একটা একটা instruction করে চালালে শুরুটা দ্রুত হয়, কিন্তু চলাটা সবচেয়ে দ্রুত হয় না। Processor তার নিজের machine code অনেক দ্রুত চালায়। তাই V8 খেয়াল রাখে, কোন function বারবার চলছে। কোনোটা "hot" হয়ে গেলে দ্বিতীয় একটা অংশ ওটাকে machine code বানিয়ে দেয়। এই অংশটা TurboFan নামের optimising compiler।

JIT মানে এটাই: just-in-time compilation। Program চলার সময়ই engine code compile করে, আর শুধু সেই code, যেটার পেছনে খাটুনিটা পোষায়। Ignition আর TurboFan-এর মাঝে V8-এর আরো দুইটা মাঝারি স্তর আছে, Sparkplug আর Maglev। অন্য engine-গুলোতেও এমন স্তর আছে, অন্য নামে।

দ্রুত চলার জন্য TurboFan কিছু অনুমান করে নেয়। price আর count সব সময় সংখ্যা হলে সে সংখ্যার জন্য machine code বানায়। হঠাৎ একটা string চলে এলে engine ওই machine code ফেলে দিয়ে bytecode-এ ফিরে যায়। তোমার program তবুও ঠিক উত্তর দেয়; শুধু কিছুক্ষণ ধীরে চলে।

তাই JIT হলো এমন একটা compiler, যেটা run চলার সময় কাজ করে, আর শুধু বারবার চলা code-এর উপর।

Interpreted নাকি compiled? দুইটাই, আর দুইটাই আধা ঠিক

কোথাও পড়বে "JavaScript একটা interpreted language", আবার কোথাও "JavaScript compiled"। দুইটাই আধা সত্য। প্রতিটা লাইন প্রথমে bytecode হিসেবে interpret হয়। ব্যস্ত অংশগুলো পরে machine code-এ compile হয়। কোনো একটা নাম দিয়ে পুরো engine-টা বোঝানো যায় না।

কাজের পার্থক্যটা হলো, compile কখন হয়। একটা C compiler program চালানোর আগেই একবারে পুরোটা machine code বানিয়ে ফেলে। JavaScript engine সঙ্গে সঙ্গে চালানো শুরু করে, আর চলার মাঝে hot অংশগুলো compile করে। সেজন্যই একটা JavaScript program চোখের পলকে শুরু হয়, তারপর ধীরে ধীরে গতি বাড়ে।

তাই JavaScript "শুধু interpreted"-ও না, "আগে থেকে compiled"-ও না; এটা compile হয় just in time।

দুইটা error, দুইটা ধাপ

প্রতিটা error message প্রথমে তার class-এর নাম বলে। আজ দুইটা class pipeline-এর উপর বসিয়ে দেখার মতো, কারণ ওরা আসে আলাদা ধাপ থেকে।

SyntaxError আসে parser থেকে। File-টা ব্যাকরণ মানেনি, তাই কিছুই চলে না, লাইন 1-ও না। এই হলো David-এর program, ভুলসহ:

console.log("Starting the report...");
const shop = "Bob's Books";
const sold = 12;
const price = 250;
const total = sold * price;
console.log(shop);
console.log("Books sold: " + sold);
console.log("Price each: " + price);
console.log("Total: " + total);
console.log("Done." +);

Playground run-টাকে "Compile error" হিসেবে দেখায়, আর তার "Compile output" tab-এ এটা ছাপে:

/box/main.js:10
console.log("Done." +);
                     ^

SyntaxError: Unexpected token ')'

চালানোর আগে Playground parser দিয়ে তোমার file পরীক্ষা করে, সেজন্যই সে "compile" বলে। + কথা দিয়েছিল দ্বিতীয় একটা মান আসবে, এসেছে )। Playground-এর বাক্সের ভেতরে তোমার code-এর নাম হয় /box/main.js, আর :10 হলো লাইন নম্বর। Message-এর নিচে Node আরো দুইটা ভেতরের লাইন আর নিজের version নম্বর ছাপে; এখানে সেগুলো বাদ দেওয়া হয়েছে।

ReferenceError আসে code চলার সময়। ব্যাকরণ ঠিক ছিল, তাই program শুরু হয়েছে। তারপর সে এমন একটা নামে পৌঁছেছে, যেটার অস্তিত্বই নেই। ওই লাইনের আগের সবকিছু ততক্ষণে চলে গেছে, Example 2-এ যেমন দেখবে।

তাই SyntaxError মানে "কিছুই চলেনি", আর ReferenceError মানে "এই লাইন পর্যন্ত চলেছে"।

function total(price, count) {
  return price * count;
}

console.log(total(250, 3));

750

console.log("Line 1 runs.");
const total = 5;
console.log(totl);
console.log("Line 4 never runs.");

Line 1 runs.

/box/main.js:3
console.log(totl);
            ^

ReferenceError: totl is not defined

function add(a, b) { return a + b; }
for (let round = 1; round <= 5; round++) {
  const start = process.hrtime.bigint();
  let sum = 0;
  for (let i = 0; i < 100000; i++) sum = add(sum, i);
  const micros = Number(process.hrtime.bigint() - start) / 1000;
  console.log("Round " + round + ": " + micros.toFixed(0) + " microseconds");
}

Round 1: 5415 microseconds
Round 2: 4376 microseconds
Round 3: 4169 microseconds
Round 4: 492 microseconds
Round 5: 147 microseconds

const total = 750;
console.log(Total);

function total(price, count {
  return price * count;
}

console.log("Line 1");

function neverCalled() {
  console.log("inside");
}

function alsoNeverCalled() {
  const x = 1;
  return x +;
}

console.log("Line 1");

function neverCalled() {
  console.log("inside");
}

function alsoNeverCalled() {
  const x = 1;
  return y + x;
}

node --print-bytecode --print-bytecode-filter=total total.js

এরপর তুমি নিজের প্রথম লাইনটা চালাবে, তিন জায়গায়, আর তিন জায়গা থেকেই একই উত্তর পাবে।