আমাদের কাজের বিভিন্ন প্রয়োজনে প্রায় সময়ই একটা অ্যারে কপি বা ক্লোন করার প্রয়োজন হয়ে থাকে। অ্যারে ক্লোন করতে গেলে মাথায় রাখতে হবে আমরা অ্যারেকে মিউটেবল ওয়েতে ক্লোন করবো নাকি ইমমিউটেবল ওয়েতে ক্লোন করবো। মিউটেবল আর ইমমিউটেবল ওয়ে কি সেটা নিয়ে আমি নিচে আলোচনা করছি।

মিউটেবল ওয়ে

নিচের কোড স্নিপেটটি লক্ষ্য করুন।

const arr1 = [1, 2, 3, 4];
const arr2 = arr1;
arr2[1] = 5;

console.log(arr2); // [1, 5, 3, 4]
console.log(arr1); // [1, 5, 3, 4]

আমরা arr1 কে কপি করে arr2 ভ্যারিয়েবলের মধ্যে রাখলাম। এরপর arr2 এর ইনডেক্স 1 এর আইটেম চেইঞ্জ করে দিলাম। লক্ষ্য করুন arr2 এর সাথে সাথে arr1 এরও ইনডেক্স 1 এর ভ্যালু চেইঞ্জ হয়ে গেছে। একে বলে মিউটেবল ওয়ে। যদি ক্লোনড অ্যারের কোনো চেইঞ্জ আসলে তা অরিজিনাল অ্যারেকেও চেইঞ্জ করে সেটাকে আমরা বলি মিউটেবল ক্লোন।

ইমমিউটেবল ওয়ে

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

Slice Method

const arr1 = [1, 2, 3, 4];
const arr2 = arr1.slice(0);

arr2[1] = 5;

console.log(arr2); // [1, 5, 3, 4]
console.log(arr1); // [1, 2, 3, 4]

স্লাইস মেথডের মাধ্যমে আমরা ক্লোন করার পর দেখা যাচ্ছে arr2 চেইঞ্জ করার পরও arr1 এ কোনো চেইঞ্জ আসেনি। সুতরাং এটি একটি ইমমিউটেবল ওয়ে। আরো অনেক ওয়ে আছে। সেগুলো এক এক করে আমি দিচ্ছি।

Rest Parameter

রেস্ট প্যারামিটার (...) এর অর্থ হলো যা আছে সব। ...arr1 এর মানে হলো arr1 এর সব আইটেম। এর মাধ্যমে আমরা ক্লোন করতে আরি।

const arr1 = [1, 2, 3, 4];
const arr2 = [...arr1];

arr2[1] = 5;

console.log(arr2); // [1, 5, 3, 4]
console.log(arr1); // [1, 2, 3, 4]

Array.from()

এর মাধ্যমে আমরা কোনো অ্যারের সমস্ত আইটেম কপি করে নিতে পারি।

const arr1 = [1, 2, 3, 4];
const arr2 = Array.from(arr1);

arr2[1] = 5;

console.log(arr2); // [1, 5, 3, 4]
console.log(arr1); // [1, 2, 3, 4]

Map method

এই মেথডের মাধ্যমে আমরা কোনো অ্যারের আইটেমসমূহকে ইচ্ছামতো ম্যানিপুলেট করতে পারি। এবং তা অবশ্যই ইমমিউটেবল ওয়েতে।

const arr1 = [1, 2, 3, 4];
const arr2 = arr1.map(item => item);

arr2[1] = 5;

console.log(arr2); // [1, 5, 3, 4]
console.log(arr1); // [1, 2, 3, 4]

JSON.parse() and JSON.stringify()

আমরা যখন সার্ভার থেকে কোনো কিছু আনতে চাই তখন তা থাকে স্ট্রিং ফরম্যাটে। সেই স্ট্রিং ফরম্যাটকে অ্যারে বা অবজেক্ট হিসেবে আনার জন্য ব্যবহার করা হয় JSON.parse()। আবার যখন কোনো অ্যারে বা অবজেক্ট আমরা সার্ভারে রাখতে চাইছি তখন সেটাকে স্ট্রিং ফরম্যাটে রাখতে হবে। তখন আমরা ব্যবহার করবো JSON.stringify()। এটার মাধ্যমে স্ট্রিং ফরম্যাটে ডাটা সেইভ হবে।

const arr1 = [1, 2, 3, 4];
const arr2 = JSON.parse(JSON.stringify(arr1));

arr2[1] = 5;

console.log(arr2); // [1, 5, 3, 4]
console.log(arr1); // [1, 2, 3, 4]

Concat method

এই মেথড ব্যবহার করা হয় দুইটা অ্যারে যুক্ত করার কাজে। আমরা এটা ব্যবহার করে ইমমিউটেবল ওয়েতে অ্যারে ক্লোন করতে পারি।

const arr1 = [1, 2, 3, 4];
const arr2 = arr1.concat([]);

arr2[1] = 5;

console.log(arr2); // [1, 5, 3, 4]
console.log(arr1); // [1, 2, 3, 4]

Conclusion

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