২ অক্টোবর, ২০২২
পড়তে মিনিট লাগতে পারে

জাভাস্ক্রিপ্ট ইএস ৬(ES6): অ্যারে

শেয়ার করুনঃ

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

জাভাস্ক্রিপ্ট এ অ্যারের মতো দেখতে আরেক ধরনের অবজেক্ট আছে নোডলিস্ট(nodeList) নামে। এখন এই নোডলিস্ট টাইপের অবজেক্ট দেখতে পুরো অ্যারের মতোই, এমনকি এটার অ্যারের মতো length প্রপার্টিও আছে। ডম ম্যানিপুলেশনের সময় আমাদের অনেকসময় এই নোডলিস্ট টাইপের অবজেক্ট এর সাথে কাজ করতে হয়। এরা দেখতে হুবহুব অ্যারের মতো হলেও অ্যারে আর নোডলিস্ট সম্পূর্ন দুইটা ভিন্ন জিনিস। আর তাই আপনি অ্যারের মতো ভেবে, বিশেষ করে length প্রপার্টি আছে ভেবে অ্যারের আরো অন্যান্য মেথড ইউজ করতে চাইতে পারেন। কিন্তু নোডলিস্ট আর অ্যারে একই টাইপের না হওয়ায় সেক্ষেত্রে আপনার এরর আসতে পারে। তাই এই অবস্থায় করণীয় হচ্ছে এই নোডলিস্টকে অ্যারেতে কনভার্ট করে নিয়ে তারপর কাজ করা।

নিচে আমাদের এই একটা ডিমো আছে। এখানে কয়েকটা বক্স আছে। সবগুলো বক্সেরই একটা কমন ক্লাশ আছে box-content নামে।

এখন এই box-content কে জাভাস্ক্রিপ্ট এর document.querySelectorAll দিয়ে সিলেক্ট করলে আমরা একটা নোডলিস্ট পাবোঃ

const nodeList = document.querySelectorAll('.box-content');

এখন এটার টাইপ দেখলে দেখবেন এটা একটা অবজেক্ট(নোডলিস্ট অবজেক্ট)ঃ

typeof nodeList

কিন্তু এটা ওপেন করলে দেখবেন এটা অনেকটা অ্যারের মতোইঃ

console.dir(nodeList);

এটার এমনকি অ্যারের মতো length প্রপার্টিও আছে, তাই নোডলিস্টকে অ্যারে ভেবে আমরা অনেকে কাজ শুরু করি, কিন্তু কাঙ্ক্ষিত ফলাফল পাই না। আরেকটু নিচে তাকালে দেখতে পাবেন এটার ডান্ডার প্রোটো NodeList মানে এটা NodeList থেকে মেথডগুলো ইনহেরিট করেছে, তাই আপনি অ্যারের সব মেথড পাবেন না। এটাকে নিয়ে অ্যারের মতোও কাজ করতে পারবে না। তাই অ্যারেতে কনভার্ট করার প্রয়োজন হতে পারে। ইএস৫ এ এই nodeList কে অ্যারেতে কনভার্ট করতে চাইলেঃ

const nodeToArr = Array.prototype.slice.call(nodeList);

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

const nodeToArr = Array.prototype.slice.call(nodeList);

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

const nodeToArr6 = Array.from(nodeList);

ব্যাস! হয়ে গেলো আপনার কাজঃ

console.dir(nodeToArr6);

একটা অ্যারে থেকে প্রত্যেকটা আইটেমে লুপ করে অপারেশন করার জন্যে যদিও আমাদের স্মার্ট forEach ,map বা এরকম আরো অনেক মেথড আছে। কিন্তু স্পেশাল কিছু সিচুয়েশনে হয়তো এগুলো আমাদের কাজে নাও লাগতে পারে। যেমন আমরা চাইলেও break অথবা continue স্টেটমেন্ট ইউজ করতে পারি না forEach , map বা এরকম মেথডগুলোয়। তাই আমাদের এরজন্যে for লুপ ইউজ করা লাগতে পারে।

ধরি আমাদের নিচে একটা অ্যারে আছেঃ

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

এখন এখানে নাম্বার 5 পর্যন্ত একটা অপারেশন করতে চাচ্ছি, তারপর break করে দিতে চাচ্ছি। ইএস৫ এর for লুপঃ

for(var i = 0; i < numbers.length; i++) {
   if(numbers[i] === 5) break;
   console.log('Number printed: ' + numbers[i]);
}

অনেক কাজ করতে হলো সিম্পল একটা জিনিসের জন্যে। তাই ইএস৬ এ এটার একটা সহজ সলুশ্যান চলে এসেছেঃ

for(const number of numbers) {
   if(number === 5) break;
   console.log(`Number printed ${number}`);
}

এখন একইরকমভাবে কোনো অ্যারে থেকে কোনো ইলিমেন্ট খুঁজতে চাইলে ইএস৫ এ আমাদের অনেক কোড লিখতে হয়। যেমন ধরি আমি উপরের অ্যারেটাথেকে নাম্বার 65 খুজতেছি। অ্যারেতে কি আছে সেই নাম্বার, নাকি নাই সেটা জানতে চাচ্ছি। ধরি আমাদের আরেকটা অ্যারে আছেঃ

var numbers = [19, 23, 14, 56, 32, 65, 10, 45];

ইএস৫ এ যা করতে হতোঃ

var findNum = numbers.map(function(theNum) {
   return theNum === 65;
})

এখন findNum প্রিন্ট করলে দেখবেন এখানে 65 যেখানে ছিলো সেটা সত্য দেখাচ্ছেঃ

console.log(findNum)

এখন অ্যারের indexOf মেথড ইউজ করে এটার ইন্ডেক্স নাম্বার বের করতে পারবোঃ

findNum.indexOf(true);

এখন সেইমভাবে ইন্ডেক্স নাম্বার থেকে আবার উক্ত ইলিমেন্টটাকেও খুঁজে বের করতে পারবোঃ

numbers[findNum.indexOf(true)]

এখন এরকমভাবে ইন্ডেক্স নাম্বার বের করা বা আসল ইলিমেন্ট বের করা অনেকটাই হাস্যকর… এখন নতুন নতুন আরো অনেক মেথড যেমন filter , some , every ইত্যাদি ইত্যাদি চলে আসছে। কিন্তু তাও আমি দেখালাম ব্যাপারগুলো গভীরভাবে অনুধাবন করার জন্যে।

এখন গেলো তো ইএস৫ এর কোড, কিন্তু ইএস৬ এ সেইম কাজের জন্যে, মানে ইন্ডেক্স নাম্বার খোঁজার জন্যে নতুন অ্যারের মেথড এসেছে। যেমন ঠিক উপরের অ্যারে থেকে নাম্বার 65 এর ইন্ডেক্স নাম্বার খুঁজতে চাইলেঃ

numbers.findIndex(number => number === 65);

তো আজকে এই পর্যন্তই, আশা করি অ্যারে নিয়ে কাজ করতে আর বেশী লাইনের কোড লিখতে হবে না। একলাইনেই সব কাজ সেরে ফেলা যাবে এখন থেকে।

ট্যাগঃ
শেয়ার করুনঃ

ক্রমানুসারে এই জাভাস্ক্রিপ্ট সিরিজঃ

জাভাস্ক্রিপ্ট ব্যাসিক
জাভাস্ক্রিপ্টঃ কি, কেন, কখন? জাভাস্ক্রিপ্টঃ কোথায় এবং কিভাবে ইউজ করা হয়? জাভাস্ক্রিপ্টঃ ব্যাসিক ক্রোম ডেভেলপার কন্সোল জাভাস্ক্রিপ্টঃ ভ্যারিয়েবল এবং ডাটা টাইপ জাভাস্ক্রিপ্টঃ অপারেটর নিয়ে সবকিছু জাভাস্ক্রিপ্টঃ কন্ডিশনাল স্টেটমেন্ট নিয়ে সবকিছু জাভাস্ক্রিপ্টঃ লুপ নিয়ে সবকিছু জাভাস্ক্রিপ্টঃ অ্যারে নিয়ে সবকিছু জাভাস্ক্রিপ্টঃ ব্যাসিক অবজেক্ট জাভাস্ক্রিপ্টঃ ব্যাসিক ফাংশন জাভাস্ক্রিপ্টঃ স্টেটমেন্ট আর এক্সপ্রেশন জাভাস্ক্রিপ্টঃ ড্রাই প্রিন্সিপ্যাল জাভাস্ক্রিপ্টঃ নাকি ইকমাস্ক্রিপ্ট? জাভাস্ক্রিপ্টঃ বিহ্যাইন্ড দ্যা সীন জাভাস্ক্রিপ্টঃ হোইস্টিং(Hoisting) নিয়ে ধারণা জাভাস্ক্রিপ্টঃ স্কোপ(Scope) নিয়ে ধারণা জাভাস্ক্রিপ্টঃ ক্লোজারস(Closures) নিয়ে ধারণা জাভাস্ক্রিপ্টঃ ইফি, Immediately Invoked Function Expressions (IIFE)
জাভাস্ক্রিপ্ট অ্যাডভান্স
জাভাস্ক্রিপ্ট অ্যাডভান্সঃ ‘this’ কীওয়ার্ড জাভাস্ক্রিপ্ট অ্যাডভান্সঃ call(), bind() এবং apply() মেথড জাভাস্ক্রিপ্ট অ্যাডভান্সঃ অবজেক্ট ওরিয়েন্টেড জাভাস্ক্রিপ্ট জাভাস্ক্রিপ্ট অ্যাডভান্সঃ ফাংশন কন্সট্রাকটর(Constructor) এবং ‘new’ কীওয়ার্ড জাভাস্ক্রিপ্ট অ্যাডভান্সঃ ইনহেরিট্যান্স (Inheritance) জাভাস্ক্রিপ্ট অ্যাডভান্সঃ স্ট্রিক্ট (Strict) মোড
জাভাস্ক্রিপ্ট ইএস ৬(ES6)
জাভাস্ক্রিপ্ট ইএস ৬(ES6): নতুন কি আছে? জাভাস্ক্রিপ্ট ইএস ৬(ES6): let এবং const দিয়ে ভ্যারিয়েবল ডিক্লেয়ার করা জাভাস্ক্রিপ্ট ইএস ৬(ES6):ইফি (Immediately Invoked Function Expressions) জাভাস্ক্রিপ্ট ইএস ৬(ES6): টেমপ্লেট লিটারেল(Template Literal) ও স্ট্রিং মেথড জাভাস্ক্রিপ্ট ইএস ৬(ES6): অ্যারো (Arrow) ফাংশন ও লেক্সিক্যাল(Lexical) ‘this’ কীওয়ার্ড জাভাস্ক্রিপ্ট ইএস ৬(ES6): অ্যারে জাভাস্ক্রিপ্ট ইএস ৬(ES6): স্প্রেড(Spread) অপারেটর জাভাস্ক্রিপ্ট ইএস ৬(ES6): ডি-স্ট্রাকচারিং (Destructuring) জাভাস্ক্রিপ্ট ইএস ৬(ES6): রেস্ট(Rest) প্যারামিটার জাভাস্ক্রিপ্ট ইএস ৬(ES6): ডিফল্ট(Default) প্যারামিটার জাভাস্ক্রিপ্ট ইএস ৬(ES6): ম্যাপ (Map) জাভাস্ক্রিপ্ট ইএস ৬(ES6): ক্লাস (Class) জাভাস্ক্রিপ্ট ইএস ৬(ES6): ক্লাস ও ইনহেরিট্যান্স (Inheritance) জাভাস্ক্রিপ্ট ইএস ৬(ES6): সব ইনভারোমেন্ট এ ইএস৬
নিত্যদিনের জাভাস্ক্রিপ্ট
নিত্যদিনের জাভাস্ক্রিপ্টঃ ফার্স্ট ক্লাস ফাংশন ও হাইয়ার অর্ডার ফাংশন নিত্যদিনের জাভাস্ক্রিপ্টঃ map(), filter() ও reduce() নিত্যদিনের জাভাস্ক্রিপ্টঃ some() ও every() মেথড নিত্যদিনের জাভাস্ক্রিপ্টঃ অবজেক্ট এ লুপ চালানো নিত্যদিনের জাভাস্ক্রিপ্টঃ ডট নোটেশন এবং ব্র্যাকেট নোটেশন নিত্যদিনের জাভাস্ক্রিপ্টঃ ম্যাথ (Math) অবজেক্ট নিত্যদিনের জাভাস্ক্রিপ্টঃ ডেট (Date) অবজেক্ট নিত্যদিনের জাভাস্ক্রিপ্টঃ লজিক্যাল অপারেটর অর (।।) এবং অ্যান্ড (&&) নিত্যদিনের জাভাস্ক্রিপ্টঃ কন্ডিশনাল/টার্নারি (Ternary) অপারেটর নিত্যদিনের জাভাস্ক্রিপ্টঃ রেগুলার এক্সপ্রেশন (Regular Expression) নিত্যদিনের জাভাস্ক্রিপ্টঃ এরর হ্যান্ডলিং (Error Handling) নিত্যদিনের জাভাস্ক্রিপ্টঃ ডেভেলপার কন্সোল (Console) নিত্যদিনের জাভাস্ক্রিপ্টঃ অ্যাসিনক্রোনাস (Asynchronous) নিত্যদিনের জাভাস্ক্রিপ্টঃ কলব্যাক(Callback) ফাংশন নিত্যদিনের জাভাস্ক্রিপ্টঃ প্রমিস (Promise) নিত্যদিনের জাভাস্ক্রিপ্টঃ async এবং await