JavaScript ऐरे
4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
ऐरे (array) एक ऐसा variable है जिसमें क्रम से सजे कई मान रहते हैं। एक क्लास में 40 छात्र हैं — आप 40 variable बना सकते हैं, या एक ऐरे students बना सकते हैं जिसमें सभी 40 नाम हों। इसे ट्रेन की तरह समझें: हर डिब्बे का एक नंबर होता है, और डिब्बे क्रम से लगे होते हैं। ऐरे में हर मान एक नंबर वाली सीट पर बैठता है, जिसे index कहते हैं, और पहली सीट का नंबर 0 होता है।
ऐरे JavaScript का सबसे मेहनती साथी है। मेनू, छात्रों की सूची, परीक्षा के नंबर, क्रिकेट स्कोर, फोटो गैलरी — जब भी किसी चीज़ की एक से ज़्यादा संख्या हो, तो शायद ऐरे ही सही डिब्बा है।
ऐरे बनाना और पढ़ना
आप square brackets से ऐरे बनाते हैं, मानों को comma से अलग करके। एक मान को उसके index से square brackets में पढ़ते हैं।
let students = ["Rahul", "Priya", "Amit", "Sana"]; students[0]; // "Rahul" — पहली सीट 0 है students[2]; // "Amit" students.length; // 4 — मानों की संख्या
length property बताती है कि ऐरे में कितने मान हैं। आखिरी मान हमेशा index length - 1 पर होता है — 4 छात्रों के लिए आखिरी छात्र index 3 पर बैठता है।
मान जोड़ना और हटाना
चार मेथड जोड़ने और हटाने का लगभग सारा काम कर देते हैं। push() अंत में जोड़ता है, pop() अंत से हटाता है, unshift() शुरुआत में जोड़ता है, और shift() शुरुआत से हटाता है।
let queue = ["Rahul", "Priya"];
queue.push("Amit"); // ["Rahul", "Priya", "Amit"]
queue.pop(); // "Amit" हटाता है, और उसे लौटाता है
queue.unshift("Sana"); // ["Sana", "Rahul", "Priya"]
queue.shift(); // "Sana" हटाता है, और उसे लौटाता है
ध्यान दें, pop() और shift() हटाए गए मान को लौटाते हैं। यह काम का है: आप कतार से अगले छात्र को ले सकते हैं और उसी लाइन में उसका नाम इस्तेमाल कर सकते हैं।
typeof students से "object" मिलता है, "array" नहीं। यह जाँचने के लिए कि कुछ सच में ऐरे है या नहीं, Array.isArray(students) इस्तेमाल करें — यह ऐरे के लिए true और बाकी सबके लिए false लौटाता है।मान बदलना और लूप चलाना
आप index पर assign करके मान बदलते हैं: students[1] = "Priya Sharma"। और हर मान को for लूप से देखते हैं — लूप counter 0 से length - 1 तक चलता है। लूप आप अगले पाठों में ठीक से सीखेंगे, लेकिन यह pattern आप सौ बार इस्तेमाल करेंगे:
for (let i = 0; i < students.length; i++) {
console.log(students[i]);
}
i < students.length की जगह i <= students.length से लूप चलाना। आखिरी सही index length - 1 है, इसलिए <= एक सीट ज़्यादा चलता है और undefined पढ़ता है। < लिखिए और यह bug कभी नहीं आएगा।आम गलतियाँ
- 1 से गिनना शुरू करना — पहला element index 0 पर है, 1 पर नहीं।
- अंत से आगे पढ़ना — 4 मानों वाले ऐरे में
students[4]हैundefined, error नहीं, इसलिए यह चुपचाप fail होता है। - लूप में
<= lengthइस्तेमाल करना — एक कदम ज़्यादा, अंत में एकundefined। - यह भूल जाना कि
push()नई length लौटाता है, ऐरे नहीं —let x = queue.push("Amit")सेxएक नंबर बन जाता है।
याद रखें
- ऐरे square brackets में क्रम से सजी सूची है:
["Rahul", "Priya", "Amit"]। - Indexing 0 से शुरू होती है; आखिरी मान
length - 1पर होता है। push()/pop()अंत में काम करते हैं;unshift()/shift()शुरुआत में काम करते हैं।Array.isArray()ही असली जाँच है कि "क्या यह ऐरे है?"- ऐरे शून्य से गिनते हैं — पहला छात्र सीट नंबर 0 पर बैठता है।
उदाहरण समझिए
let students = ["Rahul", "Priya", "Amit"];— एक ऐरे जिसमें तीन नाम क्रम से हैं। Rahul index 0 पर बैठता है।students.push("Sana")— सूची के अंत में Sana को जोड़ता है, जिससे ऐरे में 4 नाम हो जाते हैं।students.pop()— सूची से आखिरी नाम हटाता है और उसे लौटाता है, ताकि पेज बता सके कि किसे हटाया गया।students.length— हर बदलाव के बाद पेज नई गिनती दिखाता है, ताकि देखने वाले को सूची बढ़ती और घटती दिखे।document.getElementById("list").innerHTML = ...— ऐरे से दिखने वाली सूची को दोबारा बनाता है, ताकि पेज हमेशा डेटा से मेल खाए।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>KAMALDNP Student List</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #1e3a5f; }
ul { background-color: white; border: 2px solid #1e3a5f; padding: 14px 30px; width: 280px; }
button { background-color: #04aa6d; color: white; padding: 10px 18px; border: none; margin: 4px; }
</style>
</head>
<body>
<h1>KAMALDNP Student List</h1>
<ul id="list">
<li>Rahul</li>
<li>Priya</li>
<li>Amit</li>
</ul>
<button onclick="addStudent()">Add Sana (push)</button>
<button onclick="removeStudent()">Remove Last (pop)</button>
<p id="count">Total students: 3</p>
<script>
let students = ["Rahul", "Priya", "Amit"];
function showList() {
let html = "";
for (let i = 0; i < students.length; i++) {
html = html + "<li>" + students[i] + "</li>";
}
document.getElementById("list").innerHTML = html;
document.getElementById("count").innerHTML = "Total students: " + students.length;
}
function addStudent() {
students.push("Sana");
showList();
}
function removeStudent() {
let removed = students.pop();
showList();
if (removed) {
document.getElementById("count").innerHTML = "Removed: " + removed + " — Total students: " + students.length;
}
}
</script>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 30 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
