Array-র ছবি: ক্রম মেনে সাজানো list আর map, filter, reduce-এর pipeline

Maria তিরিশ জনের একটা quiz class পড়ায়। প্রতিটা quiz-এর পরে ওর হাতে তিরিশটা mark। এখন পর্যন্ত যা শিখেছ তা দিয়ে করতে গেলে লাগবে তিরিশটা variable: mark1, mark2, এভাবে mark30 পর্যন্ত। গড় বের করতে এক লম্বা লাইনে তিরিশটা নাম লিখতে হবে। একজন নতুন student এলে program-এর চার জায়গায় বদলাতে হবে।

সমাধানটা তুমি আসলে আগেই দেখেছ, চুপচাপ। যে starter তোমার input পড়ে, সে input-এর প্রতিটা শব্দ রাখে tokens-এ, আর tokens একটা array। এই module-এ array ঠিকঠাক শিখবে: array কী, ওর প্রতিটা method, আর map, filter, reduce-এর সেই pipeline, যেটা list-এর বেশিরভাগ কাজকে এক লাইনের পড়ার মতো code বানিয়ে দেয়।

Array মানে ক্রম মেনে সাজানো একটা list

Array হলো এমন একটা value যার ভেতরে অন্য value-দের একটা list থাকে, ক্রম মেনে। ভেতরের প্রতিটা value-কে বলে element। Array লেখো square bracket দিয়ে, element-গুলোর মাঝে comma। একে বলে array literal, কারণ ভেতরে কী আছে সেটা তুমি code-এ হুবহু লিখে দিচ্ছ।

const marks = [72, 45, 88, 91, 60];
console.log(marks);
console.log(marks.length);

[ 72, 45, 88, 91, 60 ]
5

প্রথম লাইন পুরো array-টা print করে। দ্বিতীয়টা print করে length, মানে কয়টা element আছে। ক্রম গুরুত্বপূর্ণ: [72, 45] আর [45, 72] দুটো আলাদা array।

Array-তে যেকোনো value রাখা যায়, এমনকি মিশিয়েও: সংখ্যা, string, boolean, আরেকটা array। কাজের বেলায় অবশ্য এক array-তে এক রকম জিনিস রাখো। Mark-এর list-এ শুধু mark থাকুক, তাহলে প্রতিটা element-এর সাথে একইভাবে কাজ করা যায়।

Index শুরু হয় 0 থেকে

প্রতিটা element একটা নম্বর দেওয়া জায়গায় বসে, ওটাকে বলে index। প্রথম element থাকে index 0-তে, দ্বিতীয়টা index 1-এ, আর শেষটা index length - 1-এ। কোনো element পড়তে array-র নামের পরে square bracket-এ index লেখো।

const marks = [72, 45, 88, 91, 60];
console.log(marks[0]);
console.log(marks[2]);
console.log(marks[marks.length - 1]);
console.log(marks[5]);

72
88
60
undefined

শেষ লাইনটা চেয়েছে index 5, মানে শেষেরও এক ঘর পরে। JavaScript program থামায় না। দেয় undefined, যে value-র মানে "এখানে কিছু নেই"। এটা ভদ্র ব্যবহার, আবার বিপজ্জনকও: ভুল index চিৎকার করে না, চুপচাপ ফাঁকা হাতে ফেরত পাঠায়।

0 থেকে গোনাটা দুই-এক দিন অদ্ভুত লাগবে। Index-কে ভাবো "এই element-এর আগে কয়টা element আছে"। প্রথম element-এর আগে কেউ নেই, তাই 0।

at(-1) শেষ থেকে পড়ে

শেষ element পড়তে marks[marks.length - 1] লেখা লম্বা ব্যাপার, আর Bob সপ্তাহে একবার - 1-টা গুলিয়ে ফেলে। ES2022 থেকে array-তে আছে at। Positive সংখ্যা দিলে এটা bracket-এর মতোই কাজ করে। Negative দিলে গোনে শেষ থেকে: at(-1) শেষ element, at(-2) তার আগেরটা।

const marks = [72, 45, 88, 91, 60];
console.log(marks.at(0));
console.log(marks.at(-1));
console.log(marks.at(-2));

72
60
91

Square bracket কিন্তু শেষ থেকে গোনে না। marks[-1] হলো undefined, কারণ -1 কোনো index-ই না।

Array বড় হয়

Array-র মাপ বাঁধা না। push শেষে একটা element যোগ করে আর length এক বাড়িয়ে দেয়। Starter ঠিক এভাবেই out বানায়: তোমার উত্তরের প্রতিটা লাইন ওতে push হয়, শেষে join করে print।

const marks = [];
console.log(marks.length);
marks.push(72);
marks.push(45);
marks.push(88);
console.log(marks);
console.log(marks.length);

0
[ 72, 45, 88 ]
3

const-টা খেয়াল করো। এটা array-কে জমিয়ে দেয় না। শুধু বলে, marks নামটা সবসময় একই array-কে দেখাবে। সেই array-র ভেতরটা কিন্তু বদলাতে পারে, তাই const array-তেও push চলে। Module 8 এটা reference আর copy দিয়ে খুলে বলবে।

সরাসরি কোনো index-এ লেখাও যায়: marks[1] = 50 দ্বিতীয় element-টা বদলে দেয়। শেষের অনেক পরে লিখলে মাঝে ফাঁক থেকে যায়, আর Lesson 02 দেখাবে কেন সেটা একটা ফাঁদ।

Pipeline-এর ছবি

List-এর বেশিরভাগ কাজ তিন রকমের একটা। হয় প্রতিটা element-এর জন্য একটা নতুন value চাও, যেমন প্রতিটা mark-এ 5 grace mark যোগ। নয়তো শুধু কিছু element চাও, যেমন 80 বা তার বেশি mark। নয়তো সবগুলো থেকে একটা উত্তর চাও, যেমন মোট বা কয়টা।

JavaScript প্রতিটা রকমের জন্য আলাদা method দেয়:

• map প্রতিটা element-এর জন্য তোমার function একবার call করে, আর উত্তরগুলো দিয়ে একটা নতুন array বানায়। নতুন array-র length একই।
• filter প্রতিটা element-এর জন্য তোমার function একবার call করে, আর যেগুলোতে true এসেছে শুধু সেগুলো রাখে। নতুন array ছোট হতে পারে।
• reduce একটা চলতি value নিয়ে array-র ভেতর দিয়ে হাঁটে, আর শেষে সেই একটা value ফেরত দেয়।

তিনটার কোনোটাই যে array-তে call করছ সেটাকে বদলায় না। প্রতিটা নতুন কিছু ফেরত দেয়, তাই এদের পরপর জোড়া যায়: এক ধাপের output পরের ধাপের input। এই জোড়া লাগানো শিকলটাই pipeline।

const marks = [72, 45, 88, 91, 60];
const graced = marks.map((m) => m + 5);
const high = graced.filter((m) => m >= 80);
const count = high.reduce((c, m) => c + 1, 0);
console.log(graced);
console.log(high);
console.log(count);
console.log(marks);

[ 77, 50, 93, 96, 65 ]
[ 93, 96 ]
2
[ 72, 45, 88, 91, 60 ]

শেষ লাইনটাই প্রমাণ: marks যেমন ছিল ঠিক তেমনই আছে। প্রতিটা ধাপে যে function দিচ্ছ, সেটা Module 5-এর arrow function। (m) => m + 5 একটা element নেয় আর তার নতুন value ফেরত দেয়।

এবার একই pipeline একটা একটা element করে দেখো। প্রতিটা ধাপে একটা element একটা stage পার হয়। 45 element-টা map-এ 50 হয়, তারপর filter-এর test-এ আটকে যায়, তাই reduce পর্যন্ত আর পৌঁছায় না।

reduce-এর চলতি value চোখের সামনে দেখলে ওকে বিশ্বাস করা সহজ হয়। নিচে একই mark-গুলোর যোগফল, প্রতি element-এ এক row।

শেষ row-এর "sum after"-টাই reduce ফেরত দেয়। Call-এর শেষের 0 হলো শুরুর value: প্রথম element-এর আগে চলতি যোগফল।

const a = [x, y, z];                    // an array literal
a[0]          a.at(-1)      a.length    // first element, last element, size
a.push(v);                              // add v at the end
a.map((el) => newValue)                 // new array, same length
a.filter((el) => trueOrFalse)           // new array, the elements that passed
a.reduce((soFar, el) => next, start)    // one value

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
const marks = tokens.slice(1).map(Number);

const total = marks.reduce((sum, m) => sum + m, 0);
const best = marks.reduce((hi, m) => (m > hi ? m : hi), marks[0]);
const high = marks.filter((m) => m >= 80);

console.log("average " + total / marks.length);
console.log("best " + best);
console.log("80 or more: " + high.join(" "));

average 73.33333333333333
best 91
80 or more: 88 91 84

const marks = [72, 45, 88, 91, 60, 84, 39, 77];
const graced = marks.map((m) => m + 5);
const high = graced.filter((m) => m >= 80);
console.log("input " + marks.length);
console.log("map " + graced.length);
console.log("filter " + high.length);

input 8
map 8
filter 4

const marks = [72, 45, 88];
for (let i = 0; i <= marks.length; i++) {
  console.log(marks[i]);
}

72
45
88
undefined

let marks;
marks.push(72);
console.log(marks);

TypeError: Cannot read properties of undefined (reading 'push')

const marks = [72 45 88];
console.log(marks.length);

const a = [10, 20, 30];
a[6] = 70;
console.log(a.length);

6
3 0 -2 10 1 0

15 50 5
70

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

5
40 75 50 120 30

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

80 150 100 240 60
2
630

6
21 25 19 19 30 27

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

11 5

পরের lesson: array-র প্রতিটা method, একটা একটা করে, কী ফেরত দেয় আর array বদলায় কিনা।