জাভাস্ক্রিপ্ট টিউটোরিয়াল-শিখুন গল্পে গল্পে সাথে 1100+ Exercise

  • জাভাস্ক্রিপ্ট পরিচিতি-Introduction to JavaScript
  • প্রোগ্রামিং শুরু করতে কতটুকু গণিত লাগে?
  • প্রোগ্রামিং শুরু করতে কতটুকু ইংরেজি জানা লাগে?
  • ভালো প্রোগ্রামার কিভাবে হবো? [+৭টি গুরুত্বপূর্ণ টিপস]
  • মোস্ট কনফিউজিং this
  • সহজ-সরল সিম্পল this
  • this-কে bind দিয়া call কর
  • ক্লোজ আপ-এর Closure
  • Hoisting-এর মরণ কামড়
  • Execution context-এর গোমর ফাঁস

Execution context-এর গোমর ফাঁস


তুই যখন একটা ফাংশনকে কল করিস, তোর মনে হতে পারে, জাস্ট কল করলাম আর আউটপুট দিয়ে দিলো। তবে বিষয়টা ওতো সিম্পল হলেও তলে তলে অনেক কিছু ঘটতে থাকে, যা তোর খালি চোখে পড়ে না। 


Global Context

কোড শুরু হওয়ার একদম শুরুতে জাভাস্ক্রিপ্ট global execution context তৈরি করে। যেটার মধ্যে সব গ্লোবাল ভেরিয়েবল, সব গ্লোবাল ফাংশন এবং জাভাস্ক্রিপ্টের বিল্ট-ইন ফাংশন, যেমন setTimeout, console.log এগুলো গ্লোবাল স্কোপে রেডি করে রাখে। 


এই গ্লোবাল কনটেক্সট হলো জাভাস্ক্রিপ্ট প্রোগ্রামের সবচেয়ে বড় এবং মেইন স্কোপ। এখানে ডিক্লেয়ার করা যেকোনো ভেরিয়েবল, ফাংশন অবজেক্ট গ্লোবাল স্কোপে থাকলে সেটাকে যেকোনো জায়গা থেকে এক্সেস করা যায়। গ্লোবাল কনটেক্সটের নাম ডিপেন্ড করে জাভাস্ক্রিপ্ট কোড কোথায় রান হচ্ছে তার ওপর। ব্রাউজারে জাভাস্ক্রিপ্ট রান করলে এই গ্লোবাল কনটেক্সটের নাম: window, Node.js-এ: global, আর ES2020-এর পর সব এনভায়রনমেন্ট চলে আসছে globalThis।


Function Declare

কোড চলতে চলতে যখন একটা ফাংশন পায়, তখন জাভাস্ক্রিপ্ট ওই ফাংশনের reference তৈরি করে। কিন্তু ফাংশন execute করে না বা কল করে না। ভিতরে কী হবে, সেটাও চেক করে না। কারণ, ফাংশনকে কে কীভাবে কল করবে বা কোন সিচুয়েশনে কল করবে, সেটা অনুসারে ভিতরের জিনিস চেইঞ্জ হতে পারে। অর্থাৎ context চেইঞ্জ হতে পারে। তাই ফাংশন কল না করা পর্যন্ত ফাংশনের ভিতরের কিছুই ঘটবে না। 


ফাংশনের reference তৈরি করা মানে হলো ওই ফাংশন কোথায় আছে, সেটা মেমোরিতে উল্লেখ করে রাখে।


Function Execution Context

কোনো একটা ফাংশনকে কল করলে একদম ফার্স্ট কাজ হচ্ছে এই ফাংশনের জন্য নতুন একটা Execution Context তৈরি করা। এই Execution Context হলো কোন কনটেক্সটে ফাংশন রান হবে, সেটা ঠিক করা। 


তখন ঠিক করে, এই ফাংশনের কী কী আছে, কী কী করতে পারবে, কয়টা প্যারামিটার আছে। ফাংশন কী কী ভেরিয়েবল এক্সেস করতে পারবে। তার স্কোপ, স্কোপ চেইন— সব ঠিক করার কাজ কল করার পর শুরু হয়। 


Execution Context তৈরি হয় দুইটা ধাপে:


Creation Phase: একটা Execution Context তৈরি হলে ছোট করে বললে কয়েকটা কাজ হয়।


যে যে আর্গুমেন্ট পাস করছে, সেই অনুসারে ফাংশনের প্যারামিটারগুলোর মান সেট করে। 

যা যা hoisting করা দরকার, সব hoisting করে ফেলে। 

let এবং const দিয়ে ডিক্লেয়ার করা ভেরিয়েবলগুলোর জন্য মেমোরিতে জায়গা ঠিক করে রাখে। তবে সেগুলাকে ইনিশিয়ালাইজ করে না; বরং সেগুলাকে টেম্পোরারি ডেড জোনে রেখে দেয়। যাতে এগুলা ডিক্লেয়ার করার আগেই অ্যাক্সেস করার চেষ্টা করলে Reference Error দিতে পারে। 

var দিয়ে ডিক্লেয়ার করা ভেরিয়েবলগুলাকে undefined মান দিয়ে ওপরে উঠায় নেয় তাদের ইনিশিয়ালাইজ করে। 

কোডের স্কোপ আর স্কোপ চেইন তৈরি করে। যাতে আউটার স্কোপ বা গ্লোবাল স্কোপের ভেরিয়েবল এক্সেস করতে পারে। 

ফাংশন কল করার ধরন অনুসারে ঠিক করে, this-এর মান কী হবে। 


Execution Phase: এখন কোডটা এক্সিকিউট করা শুরু হবে। তখন প্রতিটা ভ্যারিয়েবল তার আসল ভ্যালু পাবে, ফাংশন চলবে, আর সব ক্যালকুলেশন বা লজিক এক্সিকিউট হবে। আউটপুট দিবে বা রিটার্ন করবে। 


Practice: 

  1. Execution Context কী জিনিস? এইটা কীভাবে কাজ করে?
  2. গ্লোবাল কনটেক্সটের এর কাজ কী? এইটা কেন দরকার পড়ে?


Previous PageNext Chapter