জাভাস্ক্রিপ্ট অ্যারে টিউটোরিয়াল (JavaScript Array Tutorial in Bangla)

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

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

tutorial ভেরিয়েবলে সব মানগুলি রাখা হয়েছে, একসাথে ৪টি। এখন যদি এই মানগুলি access করতে চাই তাহলে index নাম্বার দিয়ে access করতে হবে। জাভাস্ক্রিপ্ট অটোমেটিক প্রতিটি মানের জন্য একটা index নাম্বার দিয়ে রাখে (ক্রমানুসারে)। যেমন আমি যদি প্রথম মানটি দেখতে চাই তবে tutorial[0] এভাবে দিতে হবে যেমন

1.document.write(tutorial[0]);

প্রয়োগ দেখুন

এভাবে যদি দ্বিতীয় মানটি দেখতে চান তাহলে tutorial[1] এবং এরুপে অন্যান্যগুলি।

** অ্যারের প্রতিটি মানকে এলিমেন্ট বলে অর্থ্যাৎ উপরের tutorial অ্যারেতে ৪টি এলিমেন্ট আছে। প্রত্যেকটি এলিমেন্ট যেকোন কিছু হতে পারে, একটা স্ট্রিং কিংবা একটা পূর্নসংখ্যা এমনকি একটা অবজেক্ট।

** প্রথম মানের জন্য ০ শূন্য দিয়ে শুরু করে এভাবে ক্রমানুসারে পরেরগুলির জন্য জাভাস্ক্রিপ্ট index নাম্বার দেয়। একসেস নেয়ার সময় প্রথমে ভেরিয়েবলের নাম এরপর তৃতীয় বন্ধনীর (square bracket) এর ভিতর index নাম্বারটি। যেমন ২য় মানটি একসেস করতে চাইলে tutorial[1] এভাবে।

** অ্যারে বানাতে হয় প্রথম উদাহরনের মত, তৃতীয় বন্ধনীর ভিতর single বা double কোটেশনের ভিতর মান দিতে হয় এবং প্রতিটি মান কমা (,) দিয়ে আলাদা রাখতে হবে। এভাবে অ্যারে তৈরীর প্রক্রিয়ার টেকনিকাল নাম হচ্ছে "অ্যারে লিটারেল"।

এছাড়া new কিওয়ার্ড Array() ফাংশন (এটার নাম আসলে কনস্ট্রাক্টর) ব্যবহার করে অ্যারে বানানো যায় যেমন উপরের অ্যারেটি চাইলে নিচের মত করে তৈরী করতে পারেন।

1.var tutorial = new Array('HTML', 'CSS', 'JavaScript', 'PHP');

** যদি কনস্ট্রাক্টর দিয়ে অ্যারে বানান তাহলে এর ভিতরে দেয়া মানগুলি (যেগুলি কোটেশনের ভিতর রাখা হচ্ছে এবং কমা দিয়ে আলাদা করা হচ্ছে) অ্যারের এলিমেন্ট হয়ে যায়। এখানে একটু সমস্যা হচ্ছে যদি কনস্ট্রাক্টর এর মান একটি দেন এবং সেটা হয় পূর্নসংখ্যা তাহলে অ্যারেতে মোট সেই সংখ্যা পরিমান এলিমেন্ট আছে বলে জাভাস্ক্রিপ্ট ধরে নেয়।

যেমন যদি var tutorial = new Array(8); দিলে জাভাস্ক্রিপ্ট ধরবে tutorial একটি অ্যারে এবং এখানে ৮টি এলিমেন্ট আছে আর যদি var tutorial = new Array(8, 'HTML', 'CSS'....); এভাবে দেন তাহলে ৮ কে সে একটা এলিমেন্ট হিসেবে গন্য করবে যেমন 'HTML' কে করছে। এভাবে কনস্ট্রাক্টর দিয়ে অ্যারে বানানোর চেয়ে প্রথম উদাহরনের মত করে অর্থ্যাৎ "অ্যারে লিটারেল" এইভাবে অ্যারে তৈরী করা ভাল।

কনস্ট্রাক্টর ব্যবহার করে বানানো অ্যারেকে আবার নিচের মত করেও লিখতে পারেন

view source

print?

1.var tutorial = new Array();

2.tutorial[0] = 'HTML';

3.tutorial[1] = 'CSS';

4. 

5.tutorial[2] = 'JavaScript';

6.tutorial[3] = 'PHP';

অ্যারে কিন্তু বিশেষ ধরনরে একটা অবজেক্ট। ভেরিয়েবল টিউটোরিয়ালে typeof অপারেটর দিয়ে কিভাবে ভেরিয়েবলের ধরন বের করতে হয় সেটা দেখানো হয়েছে। যেকোন একটা চেক করে দেখবেন "object" দেখাবে। যাইহোক এর length নামে একটা প্রোপার্টি যেটা দিয়ে অ্যারেতে কয়টি এলিমেন্ট আছে সেটা দেখা যায়। যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.document.write (tutorial . length);

আউটপুট 4 দেখাবে। কারন অ্যারেতে ৪টি এলিমেন্ট আছে।

এই length প্রোপার্টি দিয়ে শুধু অ্যারের এলিমেন্ট সংখ্যা দেখার কাজ ছাড়াও আরও কয়েকটি কাজ হয়, যেমন আপনি চাইলে অ্যারে থেকে একটি এলিমেন্ট বাদ দিয়ে দিতে পারেন এভাবে

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.tutorial . length = 3;

ব্যাস ৪ টি এলিমেন্ট থেকে এখন অ্যারেতে ৩টি এলিমেন্ট হয়ে গেছে, শেষেরটি বাদ পরেছে। যদি পরীক্ষা করে দেখতে চান তাহলে ৪ নম্বর এলিমেন্ট টিতে একসেস নিতে চেষ্টা করুন।

1.document.write(tutorial[3]);

আউটপুট দেখুন "undefined" আসবে। কেননা শেষের এলিমেন্টটি আর নেই। এভাবে ইচ্ছে করলে এলিমেন্ট সংখ্যা বাড়াতেও পারেন যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.tutorial . length = 20;

এখন অ্যারের এলিমেন্ট সংখ্যা ২০ হয়ে গেছে, তবে ৪ এর পরের এলিমেন্টগুলির মান হবে "undefined". tutorial[18] দিয়ে একসেস করুন "undefined" দেখাবে।

length প্রোপার্টি দিয়ে অ্যারের শেষে এলিমেন্ট যোগ করা যায় যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.tutorial[tutorial.length] = 'Framework';

3.tutorial[tutorial.length] = 'jQuery';

4.tutorial[tutorial.length] = 'Database';

5.document.write(tutorial[5]);

প্রয়োগ দেখুন

আউটপুট "jQuery" দেখাবে। উপরের উদাহরেন tutorial অ্যারেতে tutorial[tutorial.length] এভাবে আরো মোট ৩টি এলিমেন্ট একটার পর একটা যোগ করা হয়েছে এবং জাভাস্ক্রিপ্ট অটোমেটিক এসব যোগকৃত এলিমেনন্টের index নাম্বার আপডেট করে নেয়। এমনকি document.write(tutorial.length); দিয়ে চেক করে দেখুন ৭ দেখাবে অর্থ্যাৎ এলিমেন্ট সংখ্যাও আপডেট হয়ে যায়।

তবে এভাবে অ্যারেতে এলিমেন্ট যোগ করা হয়না বরং push() নামে একটা মেথড আছে এটা দিয়ে অ্যারেতে এলিমেন্ট যোগ করা হয়। push() এর ভিতর একাধিক এলিমেন্ট সিঙ্গেল বা ডাবল কোটেশনের ভিতর রেখে কমা (,) চিহ্ন দিয়ে আলাদা রাখা হয় এবং এগুলি সব অ্যারের শেষে গিয়ে যুক্ত হয় যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.tutorial.push('Framework', 'jQuery', 'Database');

3.document.write(tutorial.length + '<br/>');

4.document.write(tutorial[6]);

আউটপুট

7
Database

** অ্যারের নাম tutorial এরপর ডট (.) দিয়ে push() এর ভিতর যেসব এলিমেন্ট দিতে চান সেগুলি কমা দিয়ে দিয়ে কোটেশনের ভিতরে রাখলেই অ্যারেতে যোগ হয়ে যাবে।

যদি অ্যারের প্রথমেই এলিমেন্ট যোগ করতে চান তাহলে unshift() মেথড আছে যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2. 

3.tutorial.unshift('Framework', 'jQuery', 'Database');

4. 

5.document.write(tutorial.length + '<br/>');

6.document.write(tutorial[0]);

আউটপুট

7
Framework

দেখুন অ্যারের প্রথমে ছিল "HTML" এবং এর index নাম্বার ছিল ০। unshift() দিয়ে শুরুতে এলিমেন্ট যোগ করাতে যোগকৃত এলিমেন্টগুলির index শূন্য (০) থেকে শুরু হয়েছে। ফলে এখন "HTML" এর index নাম্বার হবে ৩।