Reference VS Value in JavaScript - Part 1

এই হ্যান্ডনোটে আমরা জাভাস্ক্রিপ্ট শেখার প্রথম অবস্থায় Data Type সংক্রান্ত যেসকল কুল টার্ম হরহামেশায় শুনি সেগুলো নিয়ে অল্পবিস্তর আলোচনা করবো। কোড করতে করতে নোট তুলবো।
Primitive,Non-Primitive,Value,Reference,Objects,Stack,Heap,Dynamic,Static,pass by value etc...

এই Word গুলো জাভাস্ক্রিপ্ট জানার সুবাদে আমরা অনেকবার শুনে ফেলসি। কিন্তু মাঝেমধ্যেই এগুলোর শানে-নুযূল আমার মতো Beginner জনতার বুঝতে একটু এলোমেলো লেগে যায় আরকি। সেজন্যই আজকের নোট

---

JavaScript-এ আমরা যাই লিখি না কেনো সেগুলো Run করার জন্য তো Memory তে Save করে রাখতে হবে তাই না? এই Data সংরক্ষণ জাভাস্ক্রিপ্ট দুইভাবে করে। অর্থাৎ আমরা আমাদের কোডে Varriable, Function, Array, Object যায় লেখি না কেনো এগুলো পর্দার পিছনে মেমরিতে Save হয় দুইভাবে। দুইটার আচরণও আলাদা এজন্য।

Data Types:

1. Primitive Types : string, number, bigInt, boolean, undefined, symbol, null.

2. Non-Primitive Types: All Objects(Array,Function)

"string, numb.." এই সাতধরনের ডাটাকে প্রিমিটিভ টাইপ বলে। আমরা এগুলোর ডিটেইলস নিয়ে কথা বলবো না। আপনারা অবশ্যই এগুলো জানেন।

তবে মজার বিষয় হলো নন-প্রিমিটিভ কিন্তু একজনেই। Object, হ্যা জাভাস্ক্রিপ্টে Object ই হলো একমাত্র Non-Primitive ডাটা টাইপ। ওয়েট,অবজেক্ট সম্পর্কে আমাদের সঠিক ধারনা আছে তো? না থাকলে অবশ্যই এই নোটটা আগে দেখে নেই।
যেহেতু Function, Array এগুলাও জাভাস্ক্রিপ্টে দিনশেষে Object ই তাই এগুলাও নন-প্রিমিটিভ।

---

Stack and Heap :

আমরা ইতিমধ্যে জেনে গেছি জাভাস্ক্রিপ্টে Data টাইপ দুই ধরনের। ধরন অনুযায়ী JavaScricpt
এই দুই টাইপের Data তার মেমোরিতে দুই জায়গায় সেভ করে।

1. Stack memory (সব primitive types ডাটা সেভ হয়)
2. Heap memory (সব non-primitive types ডাটা সেভ হয়)

Value:

আমরা যখন Primitive type কোনো ডাটা তৈরি বা স্টোর করবো আমাদের মেমোরিতে তখন এটাকে বলে Value দিয়ে তৈরি বা Pass করা। এখন ভ্যালু দিয়ে কি তৈরি হবে,ভ্যালু দিয়ে তৈরি হবে Variable. অর্থাৎ Variable এর মধ্যে থাকবে Value. বিষয়গুলো মজার না?

ভ্যারিয়েবল নিয়ে আর দুকথা নোট নেয়া যাক:

• ভ্যারিয়েবলে আমরা ভ্যালু রাখতে পারি
• প্রয়োজনমতো সেই ভ্যারিয়েবলের নাম ধরে কোডে তার ভ্যালুর এক্সেস নিতে পারি।
• ভ্যালুটা পরিবর্তন মানে Re-Assign করতে পারি।

Example: let num = 10; let word = "hello";

Reference:

এদিকে যখন Non-Primitive type কোনো ডাটা তৈরি করবো আমাদের মেমরিতে তখন এটাকে বলে রেফারেন্স(Reference) রাখা।

Example: let myObj = {a:5}

এজন্য অনেকেই Primitive কে Value টাইপ ও বলে। অনেকে আবার Non-Primitive কে Reference, Object টাইপ বলে আমাদের এলোমেলো করে দেয়।

টিপসঃ Object মানেই নন-প্রিমিটিভ/রেফারেন্স বাকি সব প্রিমিটিভ/ভ্যালু এভাবে মনে রাখা যেতে পারে।

এখন চলুন একটু Behind The Scene ঘুরে আসি।

জাভাস্ক্রিপ্ট তার V8 ইঞ্জিনে যেখানে আমাদের কোড কম্পাইল,রান হয় সেখানে ডাটা স্টোর করে দুই জায়গায় 1.Stack ও 2. Heap
এগুলো নিয়ে এখন মাথা না ঘামালেও চলবে, চলুন নিচের কোডটা একটু দেখি

let bag = "Book";

let tholi;

tholi = bag;

bag = "Vegetables";

console.log(`I am inside bag - ${bag}`);
console.log(`I am inside Tholi - ${tholi}`);


// I am inside bag - Book
// I am inside Tholi - Vegetables

এখানে প্রথমে আমি bag নামে একটা Variable-এ "Book" String Value রাখসি। সব primitive ব্যাপার-স্যাপার। এরপরে আরেকটা variable তৈরি করসি tholi নামে। এখন tholi-এর ভ্যালু হিসেবে পাস করছি bag কে। এটুকু আমাদের স্ট্যকে(Memory) কিভাবে জমা হলো চলুন সেটা আগে দেখে আসি

১. দ্বিতীয় লাইনে আমি tholi ভ্যারিয়েবলটা তৈরি করলাম কিন্তু এর কোনো ভ্যালু দেই নি,তাই দ্বিতীয় লাইনে যখন কম্পাইলার আসবে সে এর ভ্যালু undefined সেট করবে।

২. এরপরে যখন আমি tholi = bag স্ট্যাটমেন্ট রান করলাম আমার tholi ভ্যারিয়েবলটিতে bagএর যে ভ্যালু সেটার একটা কপি তৈরি করে নিলো।
আমরা জানি ভ্যারিয়েবল ডিক্লেয়ার করার পরে এর নাম ধরে ডাকলে আমরা তার ভ্যালুটার এক্সেস পাই। bag এর ভ্যালু এখানে "Book". যেটাকে আমরা এসাইন করেছি tholi ভ্যারিয়েবলে। তাই এখন tholi এর ভ্যালুও "Book" ।

এখন যদি আমি bag বা থলি যে কোনো একটার ভ্যালু এর পরে কোডে কোথাও পরিবর্তন বা Re-assign করি, তাহলে কি হবে? চলুন নিচের কোডটি রান করি।

let bag = "Book";

let tholi;

tholi = bag;

bag = "Vegetables";

console.log(`I am inside bag - ${bag}`);
console.log(`I am inside Tholi - ${tholi}`);


//I am inside bag - Vegetables
//I am inside Tholi - Book

আউটপুটে আমরা দেখতে পাচ্ছি যে চতুর্থ লাইনে আমি bag এর Value পরিবর্তন করলেও সেটা আমার tholi ভ্যারিয়েবলের কোনো পরিবর্তন ঘটাচ্ছে না। কারন কি?

উপরের বর্ণনাটুকু পড়লে আপনারা নিশ্চয় তা বুঝে গেছেন। এখানে bag আর tholi দুইটা স্বাধীন variable. যদিও তারা একি value হোল্ড করে (তৃতীয় লাইনে আমরা সেই কাজ করসি) কিন্তু মেমরিতে তাদের আলাদা আলাদা ঠিকানা আছে। তাই আমরা যদি তৃতীয় লাইনের পরে একটার ভ্যালু পরিবর্তন করি তাহলে আরেকটার উপরে কোনো প্রভাব পরবে না

চলুন স্ট্যাক দেখে আসি

কুইজঃ নিচের কোডটি দেখে এর আউটপুট অনুমান করুন এবং Stack এ Behind the Scene কি হচ্ছে সেটাও চিন্তা করুন।

`
let bag = "Book";
let tholi;

bag = "Vegetables";

tholi = bag;

console.log(I am inside bag - ${bag});
console.log(I am inside Tholi - ${tholi});
`

হিন্টসঃ এখানে আমি tholi ভ্যারিয়েবলে bag এর ভ্যালু এসাইন করেছি, চতুর্থ লাইনে কিন্তু তার আগে আমি bag এর ভ্যালু পরিবর্তন করেছি। তাই চতুর্থ লাইনে এসে যখন আমার কোড রান করবে তখন সে থলির মধ্যে আমার ব্যাগের পরিবর্তিত ভ্যালুটা কপি করে রেখে দিবে।