প্রাইমারি স্কুলের Primitive
Number, String, Boolean এদেরকে বলা হয় primitive type, মানে এগুলো হচ্ছে basic ডাটা টাইপ। নাম্বারের মধ্যে তুই শুধু একটা নাম্বার রাখতে পারবি, স্ট্রিংয়ের মধ্যে একটা string রাখতে পারবি, আর Boolean-এর মধ্যে শুধু true অথবা false রাখতে পারবি। অর্থাৎ এগুলো হচ্ছে সিম্পল ডাটা টাইপ, প্রাথমিক বা primitive ডাটা টাইপ।
এখন আমরা primitive সম্পর্কে জানলাম, এটার অপজিট আরেকটা জিনিস রয়েছে, সেটা হচ্ছে non-primitive (এখানে তুই মাল্টিপল বা একের অধিক ভ্যালু রাখতে পারবি)। সেগুলো হলো Object, Array।
আরেকটা জিনিস সম্পর্কে জানি—
let x = 5;
let y = x;
console.log(x, y);
y = 7;
console.log(x, y);
Output:
5 5
5 7এখানে আমরা যে কাজটা করেছি, সেটা হলো reassign করা। অর্থাৎ একটা ভ্যারিয়েবলের মান আমরা পুনরায় সেটার মধ্যে আরেকটা ভ্যালু assign করেছি। এখানে x-এর জন্য আলাদা একটা মেমোরি স্পেস তোর কম্পিউটারে সেভ হয়েছে, সিমিলার y-এর জন্য আলাদা মেমোরি স্পেস সেভ হয়েছে। যখন y-এর মান চেঞ্জ করেছি, তখন শুধু y-এর মেমোরি স্পেসে ভ্যালু চেঞ্জ হয়েছে, x-এর কোনো পরিবর্তন হয়নি।
এতক্ষণ তো আমরা primitive নিয়ে কাজ করছিলাম, এখন non-primitive নিয়ে কিছু ব্যতিক্রম কিছু আছে কি না, সেটা জানার চেষ্টা করি।
let p = {
job: 'web developer'
};
let q = p;
console.log(p, q);
Output:
{ job: 'web developer' } { job: 'web developer' }
এতটুকু পর্যন্ত তো সবকিছু ঠিকঠাকই আছে। এখন re-assign করে দেখি—
let p = {
job: 'web developer'
};
let q = p;
console.log(p, q);
q = {
job: 'backend developer'
};
Output:
{ job: 'web developer' } { job: 'web developer' }এখানেও কোনো সমস্যা দেখছি না, primitive-এর মতোই কাজ করছে। আমরা যখন reassign করেছি, তখন আলাদা ভ্যালু সেট হয়েছে।
Reference Types
তুই যদি একটা ভেরিয়েবল, যেটার মান একটা অবজেক্ট। সেই ভেরিয়েবলের মান অন্য আরেকটা ভেরিয়েবলে সেট করিস, তারপর যেকোনো একটা অবজেক্টের প্রোপার্টির মান চেইঞ্জ করিস বা নতুন কোনো প্রোপার্টি যোগ করস, তাহলে কী হবে?
তাহলেও দুইটার মধ্যেই সেই প্রোপার্টির মান চেইঞ্জ হয়ে যাবে। যদিও তুই একটা ভেরিয়েবলের মধ্যে চেইঞ্জ করছস। সেটা দুই জায়গায় চেইঞ্জ হয়ে যাবে।
let p = {
job: 'web developer'
};
let q = p;
console.log(p, q);
q.job = 'front-end developer';
console.log(p, q);
Output:
{ job: 'web developer' } { job: 'web developer' }
{ job: 'front-end developer' } { job: 'front-end developer' }কেন এমন হলো? আমি তো শুধু q অবজেক্টের মান চেঞ্জ করেছিলাম, কিন্তু p অবজেক্টের কেন মান চেঞ্জ হয়ে গেল?
এটা হওয়ার কারণ হচ্ছে— আমরা যখন কোনো অবজেক্টকে অন্য আরেকটা ভেরিয়েবলে সেট করি, তখন নতুন কোনো জিনিস বানায় না; বরং আগের জিনিসটার এক্সেস দিয়ে দেয়।
অনেকটা ধর, তুই কাউকে তোর বাসার চাবি দিলি। হয়তো তোর হাতে যে চাবি আছে, সেটার একটা কপি বানিয়ে দিলি। তাহলে সে কিন্তু নতুন কোনো বাড়ির এক্সেস পাচ্ছে না; বরং সে একই বাড়িতে ঢুকার সুযোগ পাচ্ছে। এখন সে যদি সেই বাড়িতে ঢুকে কিছু অগুছালো করে যায়, সেটা কিন্তু তুই বাড়িতে ঢুকলেও দেখতে পারবি।
এইবার যদি কোডিংয়ের ভাষায় বলি, তাহলে বলতে হবে— non-primitive কোনো মান যদি অন্য কোনো ভেরিয়েবলে সেট হয়, তখন সেটা reference টা ধরে রাখে এবং সেইম জিনিসের এক্সেসই দুই জায়গায় থাকে।
Pass By Value
যখন কোনো primitive টাইপ (যেমন: Number, String, Boolean) পাস করিস, সেটা ফাংশনে pass by value হয়। এর মানে হলো, ভ্যারিয়েবলের আসল মানের কপি ফাংশনের মধ্যে পাস করা হয়। তারপর ফাংশনের ভিতরে সেই প্যারামিটারের মান চেইঞ্জ করা হলেও যে ভেরিয়েবলকে ফাংশনের ভিতরে পাঠানো হলো, সেটার মান চেইঞ্জ হবে না।
function changeValue(num) {
num = 20;
console.log('Inside function:', num);
}
let x = 10;
console.log('Before function call:', x);
changeValue(x);
console.log('After function call:', x);
Output:
Before function call: 10
Inside function: 20
After function call: 10 এখানে x-এর মান ফাংশনের মধ্যে num-এ কপি করা হয়েছে। যখন num = 20 করা হলো, সেটা শুধু ফাংশনের ভেতরে পরিবর্তিত হয়েছে। x-এর আসল মান একই থেকে গেছে। কারণ, primitive টাইপ pass by value হয়।
Pass by Reference
যখন কোনো ফাংশনে non-primitive টাইপ (যেমন: Object, Array) পাস করিস, সেটা ফাংশনে pass by reference হয়। এর মানে হলো, ভ্যারিয়েবলের reference (অর্থাৎ, মেমোরি লোকেশন) পাস করা হয়। ফলে ফাংশনের ভিতরে ভ্যারিয়েবলটি চেইঞ্জ করলে আসল ভ্যারিয়েবলও চেইঞ্জ হয়। এইটা মাঝেমধ্যে ঝামেলা করে ফেলে। তাই এই বিষয়ে মাঝেমধ্যে বাগ হয়ে যায়।
function updateJob(person) {
person.job = 'designer';
console.log('Inside function:', person);
}
let employee = { job: 'developer' };
console.log('Before function call:', employee);
updateJob(employee);
console.log('After function call:', employee);
Output:
Before function call: {job: 'developer'}
Inside function: {job: 'designer'}
After function call: {job: 'designer'}এখানে employee অবজেক্টের reference person-এ পাস করা হয়েছে। যখন person.job = 'designer' করা হলো, সেটা আসল employee অবজেক্টেও পরিবর্তিত হয়েছে। কারণ, non-primitive টাইপ pass by reference, অর্থাৎ একই মেমোরি স্পেস শেয়ার করে।
ফাইনাল কথা হচ্ছে, Primitive টাইপ ভ্যালুর কপি পাস করে। কোনো কানেকশন রাখে না। আর Non-Primitive টাইপ রেফারেন্স পাস করে। কানেকশন ধরে রাখে।
Practice:
- একটি ভ্যারিয়েবল বানা, যার নাম হবে num এবং সেটাতে 15 রাখ। আরেকটি ভ্যারিয়েবল বানা, যার নাম হবে copy এবং num-এর মান সেট কর। এবার copy-এর মান পরিবর্তন করে 25 কর। এরপর console.log-এ num এবং copy-এর মান দেখ। দুইটা কি সেইম নাকি আলাদা আলাদা।
- একটি অ্যারে তৈরি কর, যার নাম হবে arr এবং সেটাতে [1, 2, 3] থাকবে। সেটি আরেকটি ভ্যারিয়েবলে সেট কর। কপি করা ভ্যারিয়েবলে 88 যোগ কর। তারপর প্রথম এবং কপি করা অ্যারে কনসোল লগ করে দেখ, দুইটা কি ডিফারেন্ট আউটপুট দেখাচ্ছে?
- একটি অবজেক্ট বানা, যার নাম হবে language, যার মধ্যে দুটি প্রোপার্টি থাকবে name এবং age। name হবে JS এবং age হবে 30। language অবজেক্টটি একটি নতুন ভ্যারিয়েবল newVersion-এ সেট কর। এরপর newVersion-এ নতুন প্রোপার্টি যোগ কর, যেটার key হবে location এবং value হবে Browser। console.log ব্যবহার করে person এবং newPerson-এর মান দেখাও।