📘 Lesson · Lesson 26

Arrays

What Arrays Are

// Without an array — clumsy:
let student1 = "Aman";
let student2 = "Priya";
let student3 = "Ravi";

// With an array — one variable holds them all:
let students = ["Aman", "Priya", "Ravi"];

An array is an ordered list of values stored in a single variable. Instead of creating separate variables for every student, mark, or product, you keep them together in one list. Arrays are written with square brackets [ ], values separated by commas. They can hold any type — strings, numbers, booleans, even other arrays or objects — and they remember the ORDER you put things in. Almost every real program works with lists of data, which makes arrays one of the most-used structures in JavaScript.

Creating and Accessing Elements

let marks = [85, 92, 78, 64];

console.log(marks[0]);      // 85   ← the FIRST item is index 0
console.log(marks[2]);      // 78
console.log(marks.length);  // 4    ← how many items
console.log(marks[marks.length - 1]);  // 64  ← the LAST item

console.log(marks[10]);     // undefined — no error, just nothing there

Access an array element by its index in square brackets — and remember indexing starts at ZERO, exactly as it did with strings. So a 4-item array has indexes 0, 1, 2, 3. The .length property tells you how many items there are (a count, so it starts at 1), which means the last index is always length - 1. Reading an index that doesn't exist gives undefined rather than an error — quietly, so watch out. This zero-based / length-minus-one relationship is worth burning into memory; it prevents countless "off-by-one" bugs.

Changing Elements

let fruits = ["apple", "banana", "cherry"];

fruits[1] = "mango";              // replace an item
console.log(fruits);              // ["apple", "mango", "cherry"]

// Interesting: a const array CAN be modified!
const colors = ["red", "blue"];
colors[0] = "green";              // ✓ allowed — contents can change
colors.push("yellow");            // ✓ allowed
colors = ["black"];               // ✗ ERROR — can't REASSIGN the variable

Change an element by assigning to its index. Now, an important subtlety many beginners find confusing: declaring an array with const does NOT make its contents unchangeable. const only prevents you from REASSIGNING the variable to a whole new array. You can freely add, remove, and change elements inside it. That's why const is the normal choice for arrays — it protects the variable while letting you work with the data. Genuinely locking contents requires Object.freeze(), which is rarely needed.

Adding and Removing Items

let list = ["a", "b"];

list.push("c");        // ADD to the END      → ["a","b","c"]
list.pop();            // REMOVE from the END → ["a","b"]   (returns "c")

list.unshift("z");     // ADD to the START    → ["z","a","b"]
list.shift();          // REMOVE from START   → ["a","b"]   (returns "z")

console.log(list.length);   // 2

Method	What it does	Where
push()	Adds an item	End
pop()	Removes an item	End
unshift()	Adds an item	Start
shift()	Removes an item	Start

These four methods are the bread and butter of array manipulation. push and pop work at the END of the array and are the most commonly used — push especially, for building up a list. unshift and shift do the same at the START (they're slower, since every other element must move). A helpful memory aid: push/pop are a pair (like a stack of plates), and both pop() and shift() RETURN the item they removed, so you can capture it. Unlike string methods, these DO modify the original array.

Looping Over Arrays

let students = ["Aman", "Priya", "Ravi"];

// Classic for loop — gives you the index
for (let i = 0; i < students.length; i++) {
    console.log(i, students[i]);
}

// for...of — cleaner when you just need the values
for (let name of students) {
    console.log(name);
}

// forEach — a method that runs a function for each item
students.forEach(function(name) {
    console.log(name);
});
students.forEach(name => console.log(name));    // with an arrow function

You now have three ways to walk through an array, and each has its place. The classic for loop gives you the index i, needed when the position matters. for...of is cleaner when you only care about the values. forEach() is an array METHOD that calls a function once per item — notice how naturally an arrow function fits here. That last one is your first taste of passing functions to functions, which unlocks the powerful array methods coming in the next two chapters.

Exam Corner

Q: What index is the first element of an array? 0 — arrays are zero-indexed.

Q: How do you get the last element? arr[arr.length - 1]

Q: What do push() and pop() do? push adds to the end; pop removes from the end.

Q: Can you modify a const array? Yes — you can change its contents, but you can't reassign the variable.

Q: What does accessing a non-existent index return? undefined (not an error).

Arrays क्या हैं

// Array ke bina — bhadda:
let student1 = "Aman";
let student2 = "Priya";
let student3 = "Ravi";

// Array ke saath — ek variable sabko rakhta hai:
let students = ["Aman", "Priya", "Ravi"];

Array एक variable में रखी values की क्रमबद्ध list है. हर student, mark, या product के लिए अलग variables बनाने के बजाय, आप उन्हें एक list में साथ रखते हैं. Arrays square brackets [ ] से लिखे जाते हैं, values commas से अलग. वे कोई भी type रख सकते हैं — strings, numbers, booleans, यहां तक कि दूसरे arrays या objects — और वे उस ORDER को याद रखते हैं जिसमें आपने चीज़ें रखीं. लगभग हर असली program data की lists के साथ काम करता है, जो arrays को JavaScript की सबसे ज़्यादा इस्तेमाल होने वाली structures में से एक बनाता है.

बनाना और Elements तक पहुंचना

let marks = [85, 92, 78, 64];

console.log(marks[0]);      // 85   ← PEHLA item index 0 hai
console.log(marks[2]);      // 78
console.log(marks.length);  // 4    ← kitne items
console.log(marks[marks.length - 1]);  // 64  ← AAKHRI item

console.log(marks[10]);     // undefined — koi error nahi, bas kuch nahi

Array element को उसके index से square brackets में access कीजिए — और याद रखिए indexing SHUNYA से शुरू होती है, ठीक जैसे strings के साथ थी. तो 4-item array के indexes 0, 1, 2, 3 हैं. .length property बताती है कितने items हैं (गिनती, तो 1 से शुरू), मतलब आखिरी index हमेशा length - 1 है. न मौजूद index पढ़ना error के बजाय undefined देता है — चुपचाप, तो सावधान. यह zero-based / length-minus-one संबंध याद में जलाने लायक है; यह अनगिनत "off-by-one" bugs रोकता है.

Elements बदलना

let fruits = ["apple", "banana", "cherry"];

fruits[1] = "mango";              // item badlo
console.log(fruits);              // ["apple", "mango", "cherry"]

// Dilchasp: const array BADLA ja sakta hai!
const colors = ["red", "blue"];
colors[0] = "green";              // ✓ allowed — contents badal sakte
colors.push("yellow");            // ✓ allowed
colors = ["black"];               // ✗ ERROR — variable REASSIGN nahi kar sakte

Element बदलने को उसके index पर assign कीजिए. अब, एक ज़रूरी सूक्ष्मता जो कई beginners को उलझाती है: array को const से declare करना उसके contents को अपरिवर्तनीय NAHI बनाता. const सिर्फ variable को पूरी नई array में REASSIGN करने से रोकता है. आप उसके अंदर स्वतंत्र रूप से elements जोड़, हटा, और बदल सकते हैं. इसीलिए arrays के लिए const सामान्य choice है — यह variable की रक्षा करता है जबकि आपको data के साथ काम करने देता है. Contents को सच में lock करने को Object.freeze() चाहिए, जो शायद ही ज़रूरी होता है.

Items जोड़ना और हटाना

let list = ["a", "b"];

list.push("c");        // ANT me JODO      → ["a","b","c"]
list.pop();            // ANT se HATAO     → ["a","b"]   ("c" lautata hai)

list.unshift("z");     // SHURU me JODO    → ["z","a","b"]
list.shift();          // SHURU se HATAO   → ["a","b"]   ("z" lautata hai)

console.log(list.length);   // 2

Method	क्या करता है	कहां
push()	Item जोड़ता है	अंत
pop()	Item हटाता है	अंत
unshift()	Item जोड़ता है	शुरू
shift()	Item हटाता है	शुरू

ये चार methods array manipulation की रोटी-दाल हैं. push और pop array के ANT पर काम करते हैं और सबसे ज़्यादा इस्तेमाल होते हैं — खासकर push, list बनाने को. unshift और shift SHURU पर वही करते हैं (वे धीमे हैं, क्योंकि बाकी हर element को खिसकना पड़ता है). मददगार तरकीब: push/pop जोड़ी हैं (plates के ढेर जैसे), और pop() तथा shift() दोनों हटाया item LAUTATE हैं, तो आप उसे पकड़ सकते हैं. String methods के उलट, ये मूल array को BADAL देते हैं.

Arrays पर Loop

let students = ["Aman", "Priya", "Ravi"];

// Classic for loop — index deta hai
for (let i = 0; i < students.length; i++) {
    console.log(i, students[i]);
}

// for...of — jab bas values chahiye tab saaf
for (let name of students) {
    console.log(name);
}

// forEach — method jo har item ke liye function chalata hai
students.forEach(function(name) {
    console.log(name);
});
students.forEach(name => console.log(name));    // arrow function ke saath

अब आपके पास array पर चलने के तीन तरीके हैं, और हर एक की अपनी जगह है. Classic for loop आपको index i देता है, जो position मायने रखने पर चाहिए. for...of तब साफ है जब आपको सिर्फ values की परवाह हो. forEach() array METHOD है जो हर item के लिए एक बार function call करता है — ध्यान दीजिए arrow function यहां कितनी स्वाभाविकता से बैठता है. वह आखिरी functions को functions में भेजने का आपका पहला स्वाद है, जो अगले दो chapters के ताकतवर array methods खोलता है.

Exam Corner

Q: Array का पहला element किस index पर है? 0 — arrays zero-indexed हैं.

Q: आखिरी element कैसे पाते हैं? arr[arr.length - 1]

Q: push() और pop() क्या करते हैं? push अंत में जोड़ता; pop अंत से हटाता.

Q: क्या const array बदल सकते हैं? हां — contents बदल सकते हैं, पर variable reassign नहीं कर सकते.

Q: न मौजूद index access करने पर क्या मिलता है? undefined (error नहीं).

← Back to JavaScript Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.