JavaScript లో Arrays & Array Methods

Array ని చతురస్ర బ్రాకెట్లు [ ] లో, విలువలను కామాలతో వేరు చేసి (comma-separated) రాస్తాం.

const fruits = ["Apple", "Banana", "Mango"];
console.log(fruits);
console.log(fruits.length);

• fruits అనేది array పేరు. లోపల 3 విలువలు (elements) ఉన్నాయి.
• .length అనే property array లో మొత్తం ఎన్ని elements ఉన్నాయో ఖచ్చితంగా చెబుతుంది.

ఏ రకం విలువలైనా పెట్టొచ్చు (Mixed Data Types)

JavaScript arrays చాలా సరళమైనవి (flexible). Array లో numbers, strings, booleans, null, ఇంకా వేరే arrays కూడా పెట్టొచ్చు. ఒకే array లో వేర్వేరు రకాల డేటాను కలిపి కూడా ఉంచవచ్చు (కానీ నిజ జీవితంలో క్లీన్ కోడ్ కోసం ఒకే రకం డేటాను పెడతాం).

const mixed = ["రవి", 25, true, null];
const empty = [];
console.log(mixed);
console.log(empty, empty.length);

[] అనేది ఖాళీ array (empty array). మొదట ఖాళీ array ని తయారుచేసి, ప్రోగ్రామ్ రన్ అవుతున్నప్పుడు డేటాను దాచుకోవడానికి ఇది బాగా ఉపయోగపడుతుంది.

Array అంటే ఏ డేటా రకం? (Type of Array)

const fruits = ["Apple", "Banana", "Mango"];
console.log(typeof fruits, Array.isArray(fruits));

Array లోని ప్రతి విలువకు ఒక index (స్థాన సంఖ్య) ఉంటుంది. కంప్యూటర్ సైన్స్ లో అతి ముఖ్యమైన నియమం: ఇండెక్స్ ఎప్పుడూ 0 నుంచి మొదలవుతుంది, 1 నుంచి కాదు!

రైలు పెట్టెలకు (train compartments) 0 నుంచి నంబర్లు వేసినట్లు ఊహించుకోండి. మొదటి విలువ index 0 లో, రెండోది index 1 లో, మూడోది index 2 లో ఉంటుంది.

const fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[0], fruits[2], fruits[3]);

• fruits[0] → మొదటి విలువ "Apple".
• fruits[2] → మూడో విలువ "Mango".
• fruits[3] → అలాంటి స్థానమే లేదు (ఎందుకంటే ఉన్నవే 3 elements, వాటి ఇండెక్సులు 0, 1, 2). కాబట్టి JavaScript లో ఎర్రర్ రాకుండా undefined వస్తుంది.

చివరి విలువను తీసుకోవడం (Last Element)

Array లో చివరి index ఎప్పుడూ length - 1 అవుతుంది (3 elements ఉంటే చివరి index 2).

const fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[fruits.length - 1]);
console.log(fruits.at(-1));

.at(-1) అనేది ఆధునిక (ES2022+) చిన్న పద్ధతి: ఋణ సంఖ్య (negative index) ఇస్తే చివరి నుంచి లెక్కిస్తుంది (-1 చివరిది, -2 చివరి నుంచి రెండోది). పాత బ్రౌజర్లను దృష్టిలో పెట్టుకున్నప్పుడు arr[arr.length - 1] పద్ధతి కూడా తెలుసుకోవడం ఉత్తమం.

ఇండెక్స్ ద్వారా ఒక స్థానంలోని విలువను నేరుగా కొత్త విలువతో రీప్లేస్ చేయవచ్చు.

const fruits = ["Apple", "Banana", "Mango"];
fruits[1] = "Orange";
console.log(fruits);

const తో పెట్టిన Array ని మార్చవచ్చా?

అవును, ఖచ్చితంగా మార్చవచ్చు! చాలా మంది బిగినర్స్ const ఉంది కదా, లోపలి విలువలు ఎలా మారతాయి అని అయోమయానికి గురవుతారు. const అంటే "ఈ వేరియబుల్ కి వేరే సరికొత్త array అడ్రస్ ని అసైన్ చేయలేం" అని మాత్రమే అర్థం. కానీ array లోపలి బాక్సుల్లోని విలువలను సులభంగా మార్చుకోవచ్చు.

const f2 = ["a"];
f2 = []; // ❌ Error! Reassignment not allowed

కొత్త array ని f2 = [] అని ఇవ్వలేం. కానీ f2[0] = "b" లేదా f2.push("c") చేయడం 100% చెల్లుబాటు అవుతుంది.

Array చివరన లేదా మొదట్లో elements ని చేర్చడానికి, తీసేయడానికి 4 ప్రధాన మెథడ్స్ ఉన్నాయి. వీటిని సినిమా టికెట్ క్యూ లైన్ లో నిల్చున్న వ్యక్తుల్లా ఊహించుకోండి:

const nums = [10, 20, 30];

console.log(nums.push(40));   // 40 ని చివర చేర్చింది
console.log(nums);

console.log(nums.pop());      // చివరిది తీసేసింది
console.log(nums);

console.log(nums.unshift(5)); // 5 ని మొదట్లో చేర్చింది
console.log(nums);

console.log(nums.shift());    // మొదటిది తీసేసింది
console.log(nums);

ఈ Methods ఏమి రిటర్న్ చేస్తాయి? (Return Values)

console.log([].pop()); // Output: undefined

Array లోని ప్రతి ఎలిమెంట్‌ని ఒక్కొక్కటిగా విజిట్ చేసి చూడాలంటే loops వాడతాం (Chapter 10 లో మనం నేర్చుకున్న లూప్స్ ఇక్కడ ఎంతగానో తోడ్పడతాయి).

1. సాధారణ for loop (ఇండెక్స్ అవసరమైనప్పుడు):

const marks = [80, 65, 90, 55];
for (let i = 0; i < marks.length; i++) {
  console.log(`marks[${i}] = ${marks[i]}`);
}

• let i = 0: array index ఎప్పుడూ 0 తో మొదలవుతుంది.
• i < marks.length: ఇక్కడ < మాత్రమే వాడాలి, <= వాడకూడదు! ఒకవేళ <= వాడితే, marks[4] ని కూడా చదువుతుంది, అక్కడ ఏమీ ఉండదు కాబట్టి undefined వస్తుంది (దీన్ని off-by-one బగ్ అంటారు).

2. for...of loop (విలువలు మాత్రమే కావాలంటే — అత్యంత సులభం):

const fruits = ["Apple", "Banana", "Mango"];
for (const fruit of fruits) {
  console.log(fruit);
}

మీకు index నంబర్ తో పనిలేకుండా కేవలం అరే లోని విలువలు (values) మాత్రమే కావాలంటే for...of రాయడం మరియు చదవడం రెండూ ఎంతో సులభం.

ఉదాహరణ 1: మార్కుల మొత్తం మరియు సగటు (Sum & Average)

const marks = [80, 65, 90, 55];
let sum = 0;
for (let i = 0; i < marks.length; i++) {
  sum += marks[i];
}
console.log("మొత్తం:", sum);
console.log("సగటు:", sum / marks.length);

sum ని లూప్ బయట 0 తో ప్రారంభించాం. లూప్ లో ప్రతి మార్కుని దానికి జోడిస్తూ వెళ్ళాం.

ఉదాహరణ 2: అత్యధిక విలువను కనుగొనడం (Find Maximum)

const marks = [80, 65, 90, 55];
let max = marks[0];
for (const m of marks) {
  if (m > max) {
    max = m;
  }
}
console.log("అతి పెద్ద మార్కు:", max);

ఉదాహరణ 3: సరి సంఖ్యలను లెక్కించడం (Count Evens)

let count = 0;
for (const n of [3, 8, 12, 7, 4]) {
  if (n % 2 === 0) {
    count++;
  }
}
console.log("సరి సంఖ్యలు:", count);

ఒక array లోపల మరిన్ని arrays ని పెట్టవచ్చు. దీన్ని 2D Array (పట్టిక, matrix లేదా గ్రిడ్) అంటారు. ఒక క్లాస్ రూమ్ లో వరుసలు (rows) మరియు కాలమ్ లు (columns) లాగా ఊహించుకోవచ్చు.

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]);
console.log(matrix[0]);
console.log(matrix);
console.log(matrix[0][0], matrix[1][1], matrix[2][2]);

• matrix[1] అంటే రెండవ అడ్డు వరుస (row): [4, 5, 6].
• matrix[1][2] అంటే రెండవ వరుసలో మూడవ విలువ: 6. మొదటి [ ] వరుసను (row), రెండవ [ ] నిలువు కాలమ్‌ను (column) సూచిస్తుంది.
• matrix[0][0], matrix[1][1], matrix[2][2] అనేవి ప్రధాన వికర్ణం (diagonal) విలువలు: 1 5 9.

1. forEach: ప్రతి element తో ఏదైనా ఒక పని చేయడం

forEach ప్రతి ఎలిమెంట్ కి ఇచ్చిన ఫంక్షన్‌ని ఒకసారి రన్ చేస్తుంది. ఇది ఎలాంటి కొత్త array ని return చేయదు; కేవలం ప్రింట్ చేయడం లేదా ఏదైనా పని చేయడానికి వాడతాం.

["Apple", "Banana", "Mango"].forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});

2. map: ప్రతి element ని మార్చి (transform) కొత్త array తయారు చేయడం

map ప్రతి విలువపై ఫంక్షన్ ని అప్లై చేసి, అసలు array కి సమానమైన పొడవు (length) ఉన్న సరికొత్త array ని ఇస్తుంది. అసలు array ఏమాత్రం మారదు.

// డబుల్ చేయడం
console.log([10, 20, 30].map(n => n * 2));

// షాప్ వస్తువుల ధరలకు 18% GST కలపడం
console.log([100, 250, 400].map(p => p + p * 18 / 100));

3. filter: షరతుకు సరిపోయే elements ని మాత్రమే వడకట్టడం (Filtering)

మనం ఇచ్చే ఫంక్షన్ ఏ ఎలిమెంట్స్ కి అయితే true ని రిటర్న్ చేస్తుందో, వాటిని మాత్రమే ఎంపిక చేసి కొత్త array లో ఉంచుతుంది.

// పాస్ మార్కులు (35 లేదా అంతకంటే ఎక్కువ) మాత్రమే వడకట్టడం
console.log([80, 30, 55, 20, 90].filter(m => m >= 35));

4. reduce: అన్ని విలువలనూ కలిపి ఒకే విలువగా సంగ్రహించడం (Accumulator)

మొత్తం array ని చదివి, చివరకు ఒకే సంఖ్య లేదా స్ట్రింగ్ వంటి ఒకే ఒక్క విలువగా మార్చడానికి reduce వాడతాం.

console.log([10, 20, 30].reduce((total, n) => total + n, 0));

ఇది తెరవెనుక ఎలా పనిచేసిందో దశలవారీగా చూద్దాం: reduce కి ఫంక్షన్ తో పాటు ప్రారంభ విలువగా 0 ఇచ్చాం:

ఈ నాలుగింటి మధ్య స్పష్టమైన తేడా (Quick Comparison Table)

అరే లోని నిర్దిష్ట విలువలను శోధించడానికి మరియు ధృవీకరించడానికి ఈ మెథడ్స్ వాడతాం:

const numbers = [5, 12, 8, 130, 44];

console.log(numbers.find(n => n > 10));
console.log(numbers.findIndex(n => n > 10));
console.log(numbers.find(n => n > 1000));

• find: షరతుకు సరిపోయే మొట్టమొదటి element ని ఇస్తుంది (12). ఏదీ సరిపోకపోతే undefined వస్తుంది.
• findIndex: ఆ మొట్టమొదటి element యొక్క index స్థానాన్ని ఇస్తుంది (1). సరిపోయేది ఏదీ లేకపోతే -1 ఇస్తుంది.

const numbers = [5, 12, 8, 130];

console.log(numbers.some(n => n > 100)); // కనీసం ఒక్కటైనా ఉందా?
console.log(numbers.every(n => n > 0));   // అన్నీ 0 కంటే పెద్దవేనా?
console.log(numbers.every(n => n > 10));  // అన్నీ 10 కంటే పెద్దవేనా?

• some: కనీసం ఒక్క element అయినా షరతును పాటిస్తే true ఇస్తుంది (130 > 100 ఉంది కాబట్టి true).
• every: అన్నీ elements ఖచ్చితంగా షరతును పాటిస్తేనే true ఇస్తుంది. (5 మరియు 8 లు 10 కంటే పెద్దవి కావు కాబట్టి ఆఖరి దానికి false వచ్చింది).

ఒక సాధారణ విలువ array లో ఉందా లేదా అని త్వరగా తెలుసుకోవడానికి:

const fruits = ["Apple", "Banana", "Mango"];

console.log(fruits.includes("Mango"), fruits.includes("Grapes"));
console.log(fruits.indexOf("Banana"), fruits.indexOf("Grapes"));

• includes(x): ఉందా లేదా అని సింపుల్ గా true / false చెబుతుంది.
• indexOf(x): అది ఏ index స్థానంలో ఉందో నంబర్ ఇస్తుంది. ఒకవేళ లిస్ట్ లో లేకపోతే -1 ఇస్తుంది.

పేర్లు దాదాపు ఒకేలా ఉన్నా, ఈ రెండూ పూర్తిగా భిన్నమైన పనులు చేస్తాయి. ఇంటర్వ్యూలలో ఇది రెగ్యులర్ ప్రశ్న!

slice(start, end): ఒక భాగాన్ని కాపీ చేయడం (అసలు array మారదు)

కేక్ ముక్కను చూసి ఫోటో తీసుకున్నట్లు. అసలు కేక్ అలాగే ఉంటుంది.

const arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 3));
console.log(arr);

slice(1, 3) index 1 నుండి మొదలుపెట్టి, index 3 కంటే ముందు వరకు (3 ని కలపకుండా) కాపీ చేస్తుంది: అంటే index 1 మరియు 2 విలువలు [2, 3]. అసలు array arr ఏమాత్రం మారలేదు.

splice(start, deleteCount, ...items): array ని కత్తిరించడం / అతికించడం (అసలు array మారుతుంది)

కేక్ లోని భాగాన్ని కత్తిరించి తీసివేయడం లేదా కొత్త ముక్కను అతికించడం వంటిది. అసలు array మారిపోతుంది.

const letters = ["a", "b", "c", "d"];

// index 1 వద్ద 2 elements ని తీసేయడం
console.log(letters.splice(1, 2));
console.log(letters);

// index 1 వద్ద ఏదీ తీసేయకుండా (0) "X" ని చేర్చడం
console.log(letters.splice(1, 0, "X"));
console.log(letters);

sort: క్రమంలో అమర్చడం

console.log(["Mango", "Apple", "Banana"].sort());
console.log([10, 9, 1, 100].sort());

అక్షరాలకి (strings) చక్కగా ఆల్ఫాబెటికల్ ఆర్డర్ లో పని చేసింది. కానీ సంఖ్యలకు చూడండి: [ 1, 10, 100, 9 ] అని వచ్చింది! [1, 9, 10, 100] రావాలి కదా? 9 కంటే 100 ముందెందుకు వచ్చింది?

కారణం: sort() మెథడ్ డిఫాల్ట్‌గా సంఖ్యలను కూడా టెక్స్ట్ (String) గా మార్చి ఆల్ఫాబెటికల్ ఆర్డర్ లో చూస్తుంది. డిక్షనరీ లో "100" అనేది "1" తో మొదలవుతుంది కాబట్టి "9" కంటే ముందు వస్తుంది!

పరిష్కారం: సంఖ్యలను sort చేసేటప్పుడు ఎప్పుడూ ఒక compare function ఇవ్వాలి:

// పెరుగుతున్న క్రమం (Ascending)
console.log([10, 9, 1, 100].sort((a, b) => a - b));

// తగ్గుతున్న క్రమం (Descending)
console.log([10, 9, 1, 100].sort((a, b) => b - a));

reverse, join, concat:

console.log([1, 2, 3].reverse());
console.log(["a", "b", "c"].join("-"));
console.log(["a", "b", "c"].join(""));
console.log([1, 2].concat([3, 4]));

• reverse(): array ని వెనక్కి తిప్పుతుంది (ఇది అసలు array నే మారుస్తుంది).
• join(separator): array లోని అన్ని అంశాలను కలిపి ఒక string గా మారుస్తుంది.
• concat(other): రెండు arrays ని కలిపి ఒక కొత్త సంయుక్త array ని ఇస్తుంది.

map, filter వంటి non-mutating methods కొత్త array ని ఇస్తాయి కాబట్టి, వాటి వెంటనే డాట్ . పెట్టి ఇంకో మెథడ్‌ని అనుసంధానించవచ్చు. దీనిని Method Chaining అంటారు.

const total = [80, 30, 55, 20, 90]
  .filter(m => m >= 35)         // మొదట పాస్ అయిన మార్కులు: [80, 55, 90]
  .reduce((t, m) => t + m, 0);  // తర్వాత వాటి మొత్తం: 80 + 55 + 90

console.log(total);

"క్లాస్ లో పాస్ అయిన విద్యార్థుల మొత్తం మార్కులు ఎంత?" అనే పెద్ద సమస్యను లూప్స్, తాత్కాలిక వేరియబుల్స్ లేకుండా కేవలం 3 లైన్లలో సాధించాం. ఇదే ఆధునిక JavaScript Array Methods యొక్క సూపర్ పవర్!

ఈ క్రింది 8 ప్రశ్నలకు మీ సొంతంగా కోడ్ రాయడానికి ప్రయత్నించండి. ఆ తర్వాత సమాధానాలను పరిశీలించండి:

1. [12, 18, 25, 30, 15] array లోని సంఖ్యల మొత్తం మరియు సగటు కనుక్కోండి (loop తో).
2. [45, 12, 89, 34] లో అతి పెద్ద సంఖ్యను loop తో కనుక్కోండి.
3. [20, 60, 45, 80, 55] లో 50 కంటే ఎక్కువ ఉన్న సంఖ్యలు ఎన్ని? (filter వాడండి).
4. [100, 200] ధరలను "₹100", "₹200" రూపంలో మార్చండి (map వాడండి).
5. [3, 14, 21, 8] లో 7 తో భాగింపబడే మొదటి సంఖ్యను కనుక్కోండి (find).
6. [5, 1, 9, 3] ని తగ్గుతున్న క్రమంలో (descending order) sort చేయండి.
7. [1, 2, 3, 4, 5, 6] లో సరి సంఖ్యల మొత్తం కనుక్కోండి (filter + reduce chaining).
8. [1, 2, 3, 4] ని reverse() వాడకుండా, loop తో తిరగేసి కొత్త array తయారు చేయండి.

const nums = [12, 18, 25, 30, 15];
let sum = 0;
for (const n of nums) {
  sum += n;
}
console.log(sum, sum / nums.length);
// Output: 100 20

const nums = [45, 12, 89, 34];
let max = nums[0];
for (const n of nums) {
  if (n > max) {
    max = n;
  }
}
console.log(max);
// Output: 89

console.log([20, 60, 45, 80, 55].filter(n => n > 50).length);
// Output: 3 (filter ఫలితం [60, 80, 55], దాని .length 3)

console.log([100, 200].map(p => `₹${p}`));
// Output: [ '₹100', '₹200' ]

console.log([3, 14, 21, 8].find(n => n % 7 === 0));
// Output: 14

console.log([5, 1, 9, 3].sort((a, b) => b - a));
// Output: [ 9, 5, 3, 1 ]

const total = [1, 2, 3, 4, 5, 6]
  .filter(n => n % 2 === 0)
  .reduce((t, n) => t + n, 0);
console.log(total);
// Output: 12 (సరి సంఖ్యలు [2, 4, 6], మొత్తం 12)

const original = [1, 2, 3, 4];
const reversed = [];
for (let i = original.length - 1; i >= 0; i--) {
  reversed.push(original[i]);
}
console.log(reversed);
// Output: [ 4, 3, 2, 1 ]