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

জাভাস্ক্রিপ্ট অ্যারে টিউটোরিয়াল (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' কে করছে। এভাবে কনস্ট্রাক্টর দিয়ে অ্যারে বানানোর চেয়ে প্রথম উদাহরনের মত করে অর্থ্যাৎ "অ্যারে লিটারেল" এইভাবে অ্যারে তৈরী করা ভাল।

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

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 নাম্বার হবে ৩।



অ্যারে ক্রমানুসারে সাজানো
একটা অ্যারের এলিমেন্টগুলি যদি অগোছালো থাক তাহলে sort() মেথড দিয়ে অ্যারে ক্রমানুসারে সাজাতে পারেন (ছোট থেকে বড় তবে নাম্বার অনুযায়ী নয় - অক্ষর অনুযায়ী) যেমন

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

2.tutorial.sort();

3.document.write(tutorial[0] + ', ' + tutorial[1] + ', ' + tutorial[2] + ', ' + tutorial[3]);

4.//now array becomes ['CSS', 'HTML', 'JavaScript', 'PHP']

আউটপুট
CSS, HTML, JavaScript, PHP

sort() দিয়ে a - z এভাবে ক্রমানুসারে আসে আপনি যদি এর বিপরীতভাবে অ্যারে সাজাতে চান  তাহলে আছে reverse() মেথড।

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

2.tutorial.sort();

3.tutorial.reverse();

4.document.write(tutorial[0] + ', ' + tutorial[1] + ', ' + tutorial[2] + ', ' + tutorial[3]);

5. 

6.//now array becomes ['PHP', 'JavaScript', 'CSS', 'HTML']

আউটপুট
PHP, JavaScript, HTML, CSS

sort() মেথডে একটা ফাংশন প্যারামিটার হিসেবে পাঠানো যায়। চাইলে এই ফাংশন ব্যবহার করে অ্যারেকে সংখ্যার ক্রমানুসারে সাজাতে পারেন। যেমন

01.var tutorial = [1,60,3,55,8,40];

02.tutorial.sort(comparison);

03.function comparison(x, y){

04.if(x > y){

05.return 1;

06.}else if (x < y){

07.return -1;

08.}else{

09.return 0;

10.}

11. 

12.}

13.document.write(tutorial);

আউটপুট
1,3,8,40,55,60
অথচ এই ফাংশন ব্যবহার না করলে আউটপুট এভাবে ছোট থেকে বড় আসতনা। এবার এখান reverse() মেথড ভ্রবহার করে বড় থেকে ছোট করতে পারেন।

shift() মেথড ব্যবহার করে অ্যারের প্রথম এলিমেন্ট টিকে মোছা যায় যেমন

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

2.tutorial.shift();

3. 

4.//now array becomes ['CSS','JavaScript','PHP']

pop() মেথড ব্যবহার করে অ্যারের শেষ এলিমেন্ট মোছা যায় যেমন

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

2.tutorial.pop();

3.//now array becomes ['HTML', 'CSS', 'JavaScript']

একটা অ্যারে থেকে কিছু এলিমেন্ট নিয়ে আরেকটা নতুন অ্যারে তৈরী করা যায় slice() মেথড দিয়ে যেমন

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

02.tutorial.slice(1);

03.// now array becomes ['CSS', 'JavaScript', 'PHP']

04. 

05. 

06. 

07. 

08.tutorial.slice(1,3);

09.//no array becomes ['CSS', 'JavaScript']

** slice() মেথডে দুটি প্যারামিটার পাঠানো যায় সংখ্যা দিয়ে। প্রথম প্যারামিটার (সংখ্যা) দিয়ে সে ঠিক করবে কোন্ এলিমেন্ট থেকে নেয়া শুরু হবে এবং পরের প্যারামিটার দিয়ে ঠিক করবে কোথা পর্যন্ত নিবে। যেমন slice(1,3) দেয়াতে ১ নম্বর এলিমেন্ট থেকে ৩ নাম্বারের আগে পর্যন্ত নিয়েছে (শেষেরটি নেয়না)।

** একটা প্যারামিটার দিলে ঐ নাম্বার থেকে শুরু করে শেষ পর্যন্ত নিবে।

splice() মেথড ব্যবহার করে মুলত অ্যারের মাঝখানে এলিমেন্ট ঢুকানো যায় তবে এটা দিয়ে আরো কাজ হয়। যেমন আপনি একটা অ্যারের ১ থেকে ৩ নাম্বার পর্যন্ত যদি সব এলিমেন্ট মুছতে চান তাহলে

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

2.tutorial.splice(1,3);

3.//now array becomes ['HTML']

যদি অ্যারের মাঝে কোন এলিমেন্ট ঢুকাতে চান তাহলে

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

2.tutorial.splice(1, 1, 'jQuery', 'MySQL');

3.//now array becomes ['HTML', 'jQuery', 'MySQL', 'JavaScript', 'PHP']

splice() এর ভিতর প্রথম প্যারামিটার 1 দিয়ে ১ নম্বর ইনডেক্স থেকে এলিমেন্ট প্রবেশ করবে এ নির্দেশনা দেয়া হয়েছে এরপরের প্যারামিটার 1 দিয়ে ১ নম্বর ইনডেক্সধারী এলিমেন্ট টি মুছে দেয়া হয়েছে ("CSS")। সবশেষে "jQuery" এবং "MySQL" হচ্ছে নতুন এলিমেন্টগুলি যেগুলি প্রবেশ করানো হচ্ছে। আপনি চাইলে আরো এলিমেন্ট দিতে পারে আমি ২টি দিলাম।
২য় প্যারামিটারে যদি 0 দেন তাহলে কোন এলিমেন্ট মুছবেনা। এখানে যে সংখ্যা দিবেন ততটি এলিমেন্ট মুছে যাবে আর মোছা শুরু হবে ১ম প্যারামিটারে যে সংখ্যাটি দিবেন সেই সংখ্যা যার ইনডেক্স হবে সেখান থেকে। সোজা কথা ১ম প্যারামিটারে যে সংখ্যা থাকবে সেই পজিশন থেকে ততটা এলিমেন্ট মুছে দিবে যেটা ২য় প্যারামিটারে (যে সংখ্যা) থাকবে। এরপর পরের প্যারামিটারগুলিতে দেয়া এলিমেন্টগুলি ঢুকিয়ে দেবে।

indexOf() এবং lastIndexOf() মেথড
একটা অ্যারের কোন একটা এলিমেন্ট কোন্ পজিশনে আছে সেটা খুজে বের করতে indexOf() মেথড ব্যবহার করা হয়। যেমন

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

2.var ind = tutorial.indexOf('JavaScript');

3.document.write(ind);

আউটপুট
2
অর্থ্যাৎ 'JavaScript' এলিমেন্ট টি অ্যারের ২ নাম্বার পজিশনে আছে।

** indexOf() এ আরেকটা প্যারামিটার (পূর্নসংখ্যা) দেয়া যায়। এই প্যারামিটার দিয়ে ঠিক করে দিতে পারেন যে কত নম্বর পজিশন থেকে খোজা শুরু করবে। যেমন

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

2.var ind = tutorial.indexOf('HTML', 3);

3.document.write(ind);

আউটপুট
4
কারন ৪ নম্বর পজিশনে 'HTML' নামে আরেকটা এলিমেন্ট আছে এবং indexOf('HTML', 3) দেয়াতে ৩ নম্বর পজিশন থেকে 'HTML' খোজা শুরু করেছে। যদি এই প্যারামিটারটি (3) না দিতাম তাহলে আউটপুট ০ আসত। কারন তখন প্রথম থেকে খোজা শুরু করত।

lastIndexOf() দিয়ে অ্যারের শেষ দিকে থেকে খোজা শুরু করে যেখানে indexOf() দিয়ে অ্যারের প্রথম দিক থেকে খোজা শুরু করে।

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

02.var ind = tutorial.lastIndexOf('HTML');

03.document.write(ind + '<br/>');

04. 

05. 

06.// with two parameter

07. 

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

09.var ind1 = tutorial.lastIndexOf('HTML', 1);

10.document.write(ind1);

আউটপুট
4
0


join() ফাংশন
এই ফাংশন দিয়ে অ্যারের এলিমেন্টকে স্ট্রিং এ রুপান্তর করা যায় এবং আপনি চাইলে যেকোন চিহ্ন দিয়ে স্ট্রিংগুলিকে আলাদা করে দেখতে পারেন। join() এর ভিতর ঐ চিহ্নটি প্যারামিটার হিসেবে পাঠাতে হয়। যেমন

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

2.var atoS = tutorial.join(',');

3.document.write(atoS );

আউটপুট
HTML,CSS,JavaScript,PHP

** দেখুন অ্যারের প্রতিটি এলিমেন্ট কে স্ট্রিং বানিয়েছে এবং কমা দিয়ে আলাদা করেছে। যদি join() এর ভিতর কমা না দিয়ে অন্য চিহ্ন দিতাম তখন সেই চেহ্ন থাকত প্রতিটি স্ট্রিংয়ের মাঝে।

আবার split() একটা ফাংশন আছে এটা দিয়ে স্ট্রিংকে অ্যারে বানানো যায় যেমন

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

2.tutorial.split(',');

3.//now an array created ['HTML', 'CSS', 'JavaScript', 'PHP']

** স্ট্রিং যে চিহ্ন দিয়ে আলাদা থাকবে সেটা join() এর ভিতর প্রথম প্যারামিটার হিসেবে পাঠাতে হবে যেমন আমি পাঠিয়েছি (কমা চিহ্ন)। সাধারনত স্ট্রিং স্পেস দিয়ে আলাদা থাকে তখন split(' ') এভাবে দিতে হবে। এছাড়া join() এ পূর্নসংখ্যা হিসেবে আরেকটা ২য় প্যারামিটার পাঠানো যায় সেটা দিলে ঐ সংখ্যা পরিমান দীর্ঘ হবে অ্যারেটি। আর যদি কিছু না দেন তাহলে split() ফাংশন পুরো স্ট্রিং কে ভেঙ্গে ভেঙ্গে অ্যারে বানিয়ে ছাড়বে।