JavaScript · Lesson 14 / 32 · தமிழ்

JavaScript Arrays

கருத்தைப் புரிந்துகொள்ளுங்கள். Code-ஐ மாற்றி இயக்குங்கள். ஒரு சிறிய பயிற்சியால் கற்றதை உறுதி செய்யுங்கள்.

Detailed notesRunnable JavaScriptPractice + answer

மூலப் பாட விளக்கங்கள் தமிழில் உள்ளன. கூடுதல் concept, practice மற்றும் answer notes ஆங்கிலத்தில் உள்ளன.

01 / Understand

முக்கியக் கருத்து

Arrays keep values in an ordered sequence. map transforms each item into a new array; filter selects items; reduce combines them into one result.

Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.

02 / Explore

விரிவான விளக்கங்கள்

Arrays என்னன்னு தெரியுமா?

Arrays என்பது ordered lists of values. JavaScript-ல arrays mixed types hold பண்ணலாம், built-in methods மிகவும் rich-ஆ இருக்கு.

Array Create மற்றும் Access

JavaScript reference fragmentCODE

const fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]);        // "apple"
console.log(fruits.length);    // 3
console.log(fruits.at(-1));    // "cherry" (ES2022 — last element)

// Destructuring
const [first, second, ...rest] = fruits;
console.log(first);  // "apple"
console.log(rest);   // ["cherry"]

Mutating Methods (original-ஐ மாத்தும்)

JavaScript reference fragmentCODE

const arr = [1, 2, 3];

arr.push(4);       // end-ல add    → [1, 2, 3, 4]
arr.pop();         // end-ல remove  → [1, 2, 3]
arr.unshift(0);    // start-ல add  → [0, 1, 2, 3]
arr.shift();       // start-ல remove → [1, 2, 3]
arr.splice(1, 1);  // index 1-ல 1 element remove → [1, 3]
arr.reverse();     // in place reverse → [3, 1]
arr.sort();        // in place sort

Non-Mutating Methods (புது array return பண்ணும்)

JavaScript reference fragmentCODE

const nums = [1, 2, 3, 4, 5];

nums.map(n => n * 2);            // [2, 4, 6, 8, 10]
nums.filter(n => n > 3);         // [4, 5]
nums.reduce((acc, n) => acc + n, 0); // 15
nums.find(n => n > 3);           // 4
nums.some(n => n > 4);           // true
nums.every(n => n > 0);          // true
nums.slice(1, 3);                // [2, 3]
[1, 2].concat([3, 4]);           // [1, 2, 3, 4]

Modern JavaScript-ல non-mutating methods prefer பண்ணு. இவை code-ஐ reason பண்றதை easy-யா பண்ணும், functional programming patterns-உடன் நன்னா work ஆகும்.

03 / Read & predict

முழுமையான உதாரணம்

Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.

index.js · complete exampleCODE

const prices = [100, 200, 300];
const discounted = prices.map(price => price * 0.9);
console.log(discounted.join(", "));
console.log(discounted.reduce((sum, price) => sum + price, 0));

எதிர்பார்க்கும் முடிவைப் பாருங்கள்

90, 180, 270
540

04 / Experiment

மாற்றி இயக்கிப் பாருங்கள்

Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.

Open editor ↗

Editor load ஆனதும் code-ஐ ஏற்றி Run அழுத்துங்கள்.

OneCompiler என்ற இலவச வெளிப்புற சேவை code-ஐ இயக்குகிறது. Run செய்யும் code அங்கு அனுப்பப்படும். தனிப்பட்ட தகவல்கள் அல்லது secret keys உள்ளிட வேண்டாம்.

05 / Your turn

சிறிய பயிற்சி

Practice challenge

Filter discounted prices to keep only values at least 180.

விடை மற்றும் விளக்கம்

discounted.filter(price => price >= 180) gives [180, 270].

தவிர்க்க வேண்டிய தவறு: Arrays are zero-indexed. map needs a returned value; a braced callback without return produces undefined entries.

அடுத்த பாடத்திற்குத் தயாரா?

Explain the example in your own words.
Complete the challenge before revealing its answer.
Describe the common mistake and how to avoid it.