(কোডিং জে এস)Coding JS
  • কোডিং JS
  • সূচিপত্র(Index)
  • ভূমিকা
  • লেখক পরিচিতি(Writer Intro)
  • ইতিহাস
  • জাভাস্ক্রিপ্টের বিস্তার কত দূর?
  • কাদের জন্য জাভাস্ক্রিপ্ট?
  • এনভায়রনমেন্ট সেটআপ
  • ব্রাউজার পরিচিতি
  • ভাল এডিটর বা আইডিই
  • জাভাস্ক্রিপ্টের ইঞ্জিন (JS Engine)
  • প্রথম প্রোগ্রাম = হ্যালো বাংলাদেশ
  • সিনট্যাক্স নিয়ে যত কথা।
  • ভেরি + এবল = ভেরিয়্যাবল কি?
  • ডেটা টাইপ
    • প্রিমিটিভ ডাটা টাইপ(Primitive data type)
      • বুলিয়ান (Boolean)
      • আন্ডিফাইন্ড (Undefined)
      • নাল (Null)
      • নাম্বার (Number)
      • বিগ ইন্টিজার (BigInt)
      • স্ট্রিং (String)
      • সিম্বল (Symbol)
    • নন-প্রিমিটিভ ডাটা টাইপ(Non-primitive data type)
      • অব্জেক্ট (Object)
      • অ্যারে(Array)
  • অপারেটর
  • কন্ডিশনাল কন্ট্রোল ফ্লো(Conditional Control flow)
  • লুপ এবং ইটারেশন(Loop & Iteration)
    • 🔃ফর লুপ(For loop)
    • 🔃ও্যাইয়ল লুপ (While Loop)
    • 📿পুনারাবৃত্তি (Iteration)
  • ফাংশন (Function)
    • রেগুলার ফাংশন (Regular Function)
    • অ্যারো ফাংশন(Arrow Function)
    • নেস্টেড ফাংশন ( Nested Function)
    • ক্লোজার ফাংশন(Closures Function)
    • আই. আই. এফ. ই. (IIFE)
    • হাইয়ার অর্ডার ফাংশন (Higher Order Function)
    • কারিং ফাংশন (Currying function)
    • এন এফ ই (NFE)
    • রিকার্সিভ ফংশন (Recursive Function)
    • জেনারেটর ফাংশন (Generator Function)
  • ক্লাস ও অবজেক্ট অরিয়েন্টেড (class & OOP)
    • মেম্বার ফাংশন (Member Function)
    • ইনহেরিটেন্স (Inhertance)
    • এনসকেপসুলেশন (Encapsulations)
    • অবস্ট্রাকশন(Abstraction)
    • পলিমরফিজম (Polymorphism)
  • কলব্যাক ফাংশন (callback function)
  • প্রমিস (Promise)
  • Async এবং await (Async & Await)
  • এজ্যাক্স (Ajax)
  • ফেচ (fetch)
  • ওয়েভ এপি আই(Web API)
    • ওয়েব স্টোরেজ (Web Storage)
      • বিস্কিটের টুকরো (Cookies)
      • সেশন (Session)
    • হিস্ট্রি এপি আই (History API)
    • জিওলোকেশন এপি আই (Geolocation API)
    • ওয়ার্কার এপি আই (Workers API)
    • ফর্ম এপি আই (Form API)
  • জে এস ডোম(JS DOM)
  • জে এস স্টাইল (JS Style)
  • এপিআই কী? (What is API)
    • SOAP API
    • রেস্ট এপি আই(REST API)
  • ফ্রেমওয়ার্ক লাইব্রেরী নিয়ে খোশ গল্প
  • জাভাস্ক্রিপ্টের বিল্ডইন কী ওয়ার্ড(Javascript Build in keyword)
  • কৃতজ্ঞতা স্বীকার
Powered by GitBook
On this page
Edit on GitHub
  1. ডেটা টাইপ
  2. নন-প্রিমিটিভ ডাটা টাইপ(Non-primitive data type)

অ্যারে(Array)

Note: অ্যারে কিন্তু একটি নন প্রিমিটিভ ডাটা টাইপ মানে যা পরিবর্তন যোগ্য।

Previousঅব্জেক্ট (Object)Nextঅপারেটর

Last updated 1 year ago

অ্যারে

অ্যারে মানে হলো বিন্যাস। যখন একই জাতীয় ডাটা গুলো একটি নির্দিষ্ট কোন লোকেশনে রাখতে চাই তাহলেই আমাদের অ্যারে এর প্রয়োজন পড়ে । অর্থাৎ একি জাতীয় কয়েকটা ডাটাকে সুবিন্যস্ত ভাবে সাজানোকেই অ্যারে বলে । অ্যারে কে অনেকটা সেই পুরনো দিনের দাদুর সাথে তুলনা করা যায়। যেখানে দাদুর অনেক ছেলেমেয়ে থাকত । এখন দাদু যদি হয় অ্যারে, দাদুর ছেলে পুলে গুলো হলো ঐ অ্যারের ইলিমেন্ট বা উপাদান । প্রোগ্রামিং সেক্টরে অ্যারে হচ্ছে সবচেয়ে গুরুত্ব পূর্ণ একটি টপিক। অ্যারে ব্যাবহার করে প্রোগ্রামিং সেক্টরে অনেক জটিল কাজ করা হয় প্রতিনিয়ত।

অ্যারে এর মধ্যে সবচেয়ে যে বিষয়টা গুরুত্ব পূর্ণ সেটা হচ্ছে ,অ্যারে কিভাবে ডাটা রাখে ? মানে সে কিভাবে কম্পিউটারে তার ডাটা গুলোকে স্টোর করে রাখে?

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

জাতীয় সঙ্গীত পরিবেশন এর চিত্র

এখানে যদি আপনি পুরো স্কুল মাঠটিকে অ্যারে হিসেবে কল্পনা করেন তাহলে স্কুল মাঠ হচ্ছে অ্যারে, আর ছাত্রছার্ত্রীরা হচ্চে এখানে ইলিমেন্ট। আর প্রতিটা ইলিমেন্ট বা উপাদান যে পজিশন বা জায়গায় অবস্থান করছে সেটা হচ্চে অ্যারে ইন্ডেক্স। বুঝেনি এখনো! তাই তো ? আরো পরিষ্কার করি বিষয়টা।

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

সিনট্যাক্সঃ-

const arrayName=[element1,element2,element3];
or
var arrayName=[element1,element2,element3];
or 
let arrayName=[element1,element2,element3];

উপরোক্ত যেকোনো একটি পদ্ধতি অনুসরন করে আপনি অ্যারে লিখতে পারেন । প্রথমে আপনাকে যেকোন একটি কীওয়ার্ড লিখতে হবে। সেটা হতে পারে const, let, var [বিঃদ্রঃ const, let es6 এর feature] এর মধ্যে যেকোনো একটা । তারপরের অংশ হলো অ্যারে একটা নাম দিতে হবে সেটা হতে পারে আপনার ডাটার ধরন বা তথ্য অনুযায়ী । অনেকেই বলে থাকে নিজের ইচ্ছা মত একটা নাম দিলেই তো হবে, কিন্তু আমি ঐ কথায় সহমত না কারণ আপনি প্রোগ্রাম শিখতে যাচ্ছেন আপনাকে মাথায় রাখতে হবে ক্লিন কোডিং করার বিষয়টা। যদি এমন টা অভ্যাস না হয় তাইলে ভবিষ্যৎ এ আপনি বিপদে পড়তে যাচ্ছেন নিশ্চিত। যা হোক অনেক জ্ঞানের বানী বলে দিলাম। এখন থেকে তাহলে আপনি যখন ই কোডিং করবেন তখনি চিন্তা করতে হবে কোন নামটা veriable এর জন্য সুন্দর ও উপযুক্ত বলে বিবেচনা করা যেতে পারে। যেমন আপনি মনে করেন এমন একটি অ্যারে বানাচ্ছেন যেটার মধ্যে মানুষ সম্পর্কিত তথ্য থাকবে তাহলে আপনি ভেরিএবল এর নাম দিতে পারেন people তাহলে হবে কি যখন কোন আমার মত ডামিস প্রোগ্রামার এসে কোড গুলো বুঝতে চাইবে তখনি বুঝে নিতে পারবে। ক্লিন কোডিং নিয়ে পরে আমি লিখে দিয়েছি সময় হলে পড়ে নিবেন।

এবার আসি আসল কথা হলো যে, এত যে বক বক করলাম এর পর যদি একটা উদাহরন দিতে না যায় তাহলে জনগন কি মানবে? মানবে না জানি? তাইলে কি আর হয়ে যাক একটা উদাহরনঃ-

var phones=['iPhone','Sumsung','Sony','Nokia','Oppo','symphony'];
console.log(phones);

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

array.html
<!DOCTYPE html>
<html>
  <head>
    <title>চকচকে ঝকঝকে অ্যারে</title>
  </head>
  <body>
      <p>
          দাদুর ছেলেদের লিস্ট
      </p>
    <ul id="sonOfGrandFather"></ul>
    <script>
      var sonOfGrandFather = [
        "children1",
        "children2",
        "children3",
        "children4",
        "children5",
        "children6",
        "children7",
        "children8",
        "children9",
        "children10"
      ];
      const sonOfGrandFatherList = document.getElementById("sonOfGrandFather");

      for (let son of sonOfGrandFather) {
        let li = document.createElement("li");
        li.textContent = son;
        sonOfGrandFatherList.append(li);
      }
    </script>
  </body>
</html>

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

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

এবার আমরা শিখব কিভাবে অ্যারে দিয়ে select menu তে অপশন তৈরি করে নেওয়া যায়

select-menu.html
<!DOCTYPE html>
<html>
  <head>
    <title>চকচকে জকঝকে অ্যারে</title>
  </head>
  <body>
      <p>
          দাদুর ছেলেদের লিস্ট
      </p>
    <select id="sonOfGrandFather">
        <option value="">choose...</option>
    </select>
    <script>
      var sonOfGrandFather = [
        "কেরামত আলী",
        "রহমত আলী",
        "আবুল আলী",
        "আক্কাস আলী",
        "সিদ্দিক আলী",
        "বরকত আলী",
        "মন্টু আলী",
        "রমজান আলী",
        "সুজন আলী",
        "ছোট আলী"
      ];
      const sonOfGrandFatherList = document.getElementById("sonOfGrandFather");
      for (let son of sonOfGrandFather) {
        let option = document.createElement("option");
        option.textContent = son;
        sonOfGrandFatherList.append(option);
      }
    </script>
  </body>
</html>
How to work with arrays
Array