পাউরুটির ওপর মাখন এর Spread
ইংরেজি সেন্টেন্সের পরে একটা ডট দিলে সেন্টেন্স শেষ। ফুল স্টপ হয়ে যায়। কোনো জায়গায় দুইটা ডট দিলে মনে হয় থেমেও থামতে চাচ্ছে না; বরং তোতলাচ্ছে।
আর তিন ডটের কথা শুনে তোর মামা-খালু-চাচা থেকে কেউ বলে উঠতে পারে, সে ছোটবেলায় একটা সিনেমা দেখছিল, যেটার নাম ছিল 3 idiots। এই 3 idiots-এর কথা মনে করে তোকে আবার তোর সেই আঙ্কেল বলে বসতে পারে, তুই হচ্ছস i ওয়ালা 3 dots।
[ কারণ, dots-এর মধ্যে i বসালে idiot হয়ে যেতে পারে ]
তিন ডটের দুইটা ইউজ আছে
১. rest অপারেটর (অবজেক্ট, array-এর বাকি উপাদানগুলা বা ফাংশনের বাকি প্যারামিটারগুলা পাওয়ার জন্য ইউজ করা হয়)
২. Spread Operator মানে হলো ‘বিছিয়ে দেওয়া’ বা ‘মাখিয়ে দেওয়া’।
তবে ডট শেখার আগে কিছু সংখ্যার মধ্যে সবচেয়ে বড় সংখ্যা বের করার সিস্টেমটা আরেকবার দেখে আসি।
const max = Math.max(5, 23, 45, 1, 89, 34);
console.log(max);
Output: 89এখানে আমরা Math.max() ফাংশন ব্যবহার করে কিছু সংখ্যার মধ্যে সবচেয়ে বড় সংখ্যাটি বের করেছি। কিন্তু যদি আমাদের একটি অ্যারে থাকে এবং আমরা তার মধ্যে থেকে সবচেয়ে বড় সংখ্যাটি বের করতে চাই, তাহলে কী হবে?
const numbers = [3, 5, 2, 45, 5, 43, 90, 32, 15];
const arrayMax = Math.max(numbers);
console.log(arrayMax);
Output: NaNএবার একটু খেয়াল কর, আমরা Math.max() ফাংশনের আগে যে কাজটি করেছি, তা সঠিকভাবে কাজ করছিল। কিন্তু যখন একটি অ্যারে ব্যবহার করলাম, তখন NaN আউটপুট পেলাম। কারণ, Math.max() সরাসরি একটি অ্যারের সাথে কাজ করে না, এটি একাধিক প্যারামিটার নেয়।
অ্যারের ক্ষেত্রে আমরা যদি তিনটি ডট ... ব্যবহার করি, যা spread operator নামে পরিচিত, তাহলে অ্যারের প্রতিটি উপাদানকে আলাদা আলাদা করে নেওয়া সম্ভব হবে।
const arrayMax = Math.max(...numbers);
console.log(arrayMax);
Output: 90এখন আমরা Math.max() ব্যবহার করে অ্যারের মধ্য থেকে সবচেয়ে বড় সংখ্যাটি বের করতে পারছি। Spread operator-এর মাধ্যমে অ্যারের প্রতিটি উপাদানকে আলাদা করে পাঠিয়েছি, ঠিক যেমন আগের উদাহরণে একাধিক সংখ্যা দিয়েছিলাম।
Spread Operator দিয়ে কপি
Spread operator শুধু Math.max()-এর মতো ফাংশনগুলিতে কাজ করতেই ব্যবহার করা হয় না; বরং এটাকে কপি করার ক্ষেত্রেও ব্যবহার করা যায়। উদাহরণস্বরূপ, আমরা যদি দুটি অ্যারে নেই এবং একটি অ্যারের উপাদানগুলো অন্যটিতে কপি করতে চাই—
const friends = [4, 5, 87, 9];
const boundu = friends;
boundu.push(12);
console.log(boundu);
Output:
[4, 5, 87, 9, 12]এখন আমরা যদি friends অ্যারেটা প্রিন্ট করি, দেখা যাবে friends অ্যারের মধ্যে 12 যুক্ত হয়ে গেছে, যদিও আমরা শুধু boundu-তে push করেছিলাম।
console.log(friends);
Output:
[4, 5, 87, 9, 12]এটা ঘটছে, কারণ friends এবং boundu একই রেফারেন্স ধরে আছে। যখন তুই কোনো non-primitive টাইপ (যেমন অ্যারে বা অবজেক্ট) কপি করবি, তখন আসলে নতুন ভ্যালু কপি হয় না; বরং একই রেফারেন্স শেয়ার করে।
Spread Operator দিয়ে রেফারেন্স সমস্যা এড়ানো
তুই যদি Spread operator ইউজ করস, তাহলে রেফারেন্সের এই সমস্যা হবে না এবং friends-এ নতুন কোনো উপাদান যোগ করলেও সে কপি করা dosto নামক অ্যারেতে যোগ হবে না।
const friends = [4, 5, 87, 9];
const dosto = [...friends];
console.log(dosto);
friends.push(100);
console.log(dosto);
console.log(friends);
Output:
[4, 5, 87, 9]
[4, 5, 87, 9]
[4, 5, 87, 9, 100]এখানে দেখা যাচ্ছে, friends-এ নতুন উপাদান যোগ করার পরেও dosto অ্যারের ভ্যালু পরিবর্তিত হয়নি। কারণ, আমরা spread operator ব্যবহার করে friends-এর একটি নতুন কপি তৈরি করেছি এবং তাদের রেফারেন্স থেকে আলাদা হয়েছে।
কপির সময় নতুন উপাদান যোগ করা
তুই চাইলে কপির সময় একইসাথে অ্যারের মধ্যে নতুন উপাদানও যোগ করতে পারবি spread operator-এর মাধ্যমে।
const friends = [4, 5, 87, 9];
const sonkha = [...friends, 9999];
console.log(sonkha);
Output: [4, 5, 87, 9, 100, 9999]এটা ছিল spread operator ব্যবহারের কিছু উদাহরণ, যা আমাদের অ্যারের বা অবজেক্টের মধ্যে উপাদানগুলো বা প্রোপার্টি নিয়ে কাজ করতে এবং রেফারেন্সের সমস্যা এড়াতে সাহায্য করে।
স্প্রেড অপারেটর দিয়ে অ্যারের মধ্যে যেকোনো জায়গায় অন্য অ্যারের সব উপাদান সহজেই যোগ করা যায়।
const fruits = ["Apple", "Banana"];
const moreFruits = ["Mango", ...fruits, "Orange"];
console.log(moreFruits);
Output: ["Mango", "Apple", "Banana", "Orange"]একসাথে একাধিক অ্যারেকে জোড়া লাগানো (Concatenate)
স্প্রেড অপারেটর দিয়ে সহজেই দুই বা তার বেশি অ্যারেকে একসাথে যোগ করা যায়।
const array1 = [1, 2];
const array2 = [3, 4];
const combinedArray = [...array1, ...array2];
console.log(combinedArray);
Output: [1, 2, 3, 4]এইভাবে অনেকগুলো অ্যারেকে একসাথে যোগ করতে পারবি।
অবজেক্ট কপি করা
অবজেক্ট ক্লোন বা কপি করার জন্যও স্প্রেড অপারেটর দারুণ কাজ করে।
const person = { name: "Amit", age: 30 };
const clonedPerson = { ...person };
console.log(clonedPerson);
Output: { name: "Amit", age: 30 }তবে খেয়াল রাখবি, এটি shallow copy তৈরি করে। যদি অবজেক্টের ভেতরে nested অবজেক্ট থাকে, সেটাকে ডিপ কপি করবে না।
অবজেক্টে নতুন প্রোপার্টি যোগ করা
অবজেক্ট কপি করার সময় চাইলে নতুন কিছু প্রোপার্টি যোগ করে দিতে পারবি।
const student = { name: "Rafi" };
const updatedStudent = { ...student, age: 22 };
console.log(updatedStudent);
Output: { name: "Rafi", age: 22 }অ্যারে বা অবজেক্টকে মিক্স, ক্লোন বা আপডেট করতে চাইলে স্প্রেড অপারেটর খুবই দরকারি।
মনে রাখবি, Spread Operator কিছু জিনিস ‘বিছিয়ে দেয়’, আর Rest Operator বাকি জিনিসগুলো ‘জমা’ করে।
Practice:
- নতুন একটা অ্যারে বানা, যেখানে প্রথম উপাদান হবে "variable", তারপরের উপাদানগুলো আসবে const technologies = ["Condition", "array", "loop"], অ্যারে Spread Operator দিয়ে কপি করে।
- myFruits নামে নতুন একটা অ্যারে তৈরি কর, যেখানে const fruits = ["Apple", "Banana", "Mango"], এই অ্যারেটার উপাদানগুলো থাকবে আর শেষে papaya, orange থাকবে।
- তিনটা অ্যারে আছে const frontEnd = ["JavaScript"], const backEnd = ["Node.js"], const database = ["MongoDB"], এগুলোকে Spread Operator দিয়ে একটাতে একত্রিত কর।
- const website = { name: "MySite", type: "e-commerce", status: "active" } এই অবজেক্টে নতুন প্রোপার্টি theme: "dark" যোগ করে নতুন অবজেক্ট তৈরি কর এবং প্রিন্ট কর।
- const young = { name: "Arif", age: 30, country: "B Baria" } এই অবজেক্টের একটি কপি তৈরি কর এবং country বাদে বাকিসব প্রোপার্টি নতুন অবজেক্টে রেখে প্রিন্ট কর।
- const car = { make: "Toyota", model: "Corolla", year: 2020 } এই অবজেক্টের একটি কপি তৈরি কর এবং year আপডেট করে 2032 করে নতুন অবজেক্ট তৈরি কর।