Learn Arrays in JavaScript in Hindi – Easy Guide for Beginners

By / / Leave a Comment / JavaScript Tutorial

JavaScript में Arrays ordered data structures हैं, जो heterogeneous collections को manage करने के लिए डिज़ाइन किए गए हैं। यह ब्लॉग HindiStudyHub के लिए Array Creation, Indexing, Length, Methods (push, pop, shift, unshift, slice, splice), और Looping (for, forEach) को सरल हिंदी में समझाता है। साथ ही, exercise (इवेन नंबर्स फिल्टर, नेम्स सॉर्ट), 5 MCQ quiz, और mini project (शॉपिंग लिस्ट ऐप) आपके JavaScript स्किल्स को बढ़ाएंगे। टेक्निकल टर्म्स (जैसे array, index, mutation) English में हैं, और कोड पूरी तरह English में है।

What is Arrays in JavaScript in Hindi (JavaScript में ऐरे क्या होते हैं)

Arrays zero-indexed, ordered collections हैं, जो heterogeneous elements (नंबर्स, स्ट्रिंग्स) को store और manipulate करते हैं। Reference types के रूप में heap memory में स्टोर होते हैं। गलत indexing या mutation से reference errors या data corruption हो सकता है। बेस्ट प्रैक्टिस: immutable methods यूज़ करें, validation करें। यूज़ केस: list processing, data storage। पिटफॉल्स: out-of-bounds access, unintended mutations।
Example:

const fruits = ["apple", "banana", "orange"];
console.log(fruits[1]); // banana

Array Creation: Array Initialization

Array Creation array literals ([]) या Array constructor से initializes arrays। Memory allocation runtime में होता है। Sparse arrays से performance degradation। बेस्ट प्रैक्टिस: literals यूज़ करें।
Example:

const numbers = [1, 2, 3];
const sparse = new Array(3); // [undefined, undefined, undefined]
console.log(numbers[0]); // 1

Indexing: Access Element

Indexing zero-based positions से elements को access करता है। Reference-based access तेज़ है, लेकिन गलत index से undefined या out-of-bounds errors। बेस्ट प्रैक्टिस: bounds checking करें।
Example:

const colors = ["red", "blue", "green"];
console.log(colors[2]); // green
colors[1] = "yellow";
console.log(colors); // ["red", "yellow", "green"]

Length: Dynamic size Managment

Length प्रॉपर्टी array size को tracks करती है और dynamic resizing को सपोर्ट करती है। Mutation से length अपडेट होता है। गलत length manipulation से data truncation। बेस्ट प्रैक्टिस: length चेक करें।
Example:

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

Explain Methods of an Array in JavaScript with Example in Hindi (JavaScript में ऐरे के मेथड्स को उदाहरण सहित समझाइए)

Array Methods mutator (push, splice) और accessor (slice) functions हैं, जो elements को manipulate करते हैं। Mutator methods array को in-place mutate करते हैं, जबकि immutable methods नया array रिटर्न करते हैं। Functional programmi

Example:

const arr = [1, 2, 3];
arr.push(4); // Mutates
console.log(arr.slice(1, 3)); // [2, 3], Immutable

push:

Push array के अंत में element को appends करता है, mutating array और length अपडेट करता है। Time complexity O(1), memory reallocation रेयर। Mutator method के रूप में in-place ऑपरेशन। Multiple elements जोड़ने से performance पर असर। बेस्ट प्रैक्टिस: सिंगल element जोड़ें, type checking करें। यूज़ केस: stack operations, dynamic lists। पिटफॉल्स: non-validated inputs।
Example:

const arr = [1, 2];
arr.push(3);
console.log(arr); // [1, 2, 3]

pop:

Pop array के अंत से element को removes और returns करता है। Time complexity O(1), length कम होता है। Mutator method, in-place ऑपरेशन। खाली array पर undefined रिटर्न। बेस्ट प्रैक्टिस: return value चेक करें, empty array हैंडल करें। यूज़ केस: stack operations, queue management। पिटफॉल्स: unhandled undefined।
Example:

const arr = [1, 2, 3];
const last = arr.pop();
console.log(last); // 3
console.log(arr); // [1, 2]

shift:

Shift array के पहले element को removes और returns करता है। Indices shift होते हैं, time complexity O(n)। Mutator method, in-place ऑपरेशन। Large arrays में performance bottleneck। बेस्ट प्रैक्टिस: performance-critical कोड में कम यूज़ करें। यूज़ केस: queue operations, FIFO processing। पिटफॉल्स: index errors, slow performance।
Example:

const arr = [1, 2, 3];
const first = arr.shift();
console.log(first); // 1
console.log(arr); // [2, 3]

unshift:

Unshift array के शुरू में element को appends करता है। Indices shift होते हैं, time complexity O(n)। Mutator method, in-place ऑपरेशन। Large arrays में performance overhead। बेस्ट प्रैक्टिस: वैकल्पिक methods (जैसे spread) यूज़ करें। यूज़ केस: queue management, priority lists। पिटफॉल्स: slow performance।
Example:

const arr = [2, 3];
arr.unshift(1);
console.log(arr); // [1, 2, 3]

slice:

Slice (start, end) immutable तरीके से subarray returns करता है। Time complexity O(k) (k = subarray size)। Accessor method, original array unmutated रहता है। गलत indices से empty array रिटर्न। बेस्ट प्रैक्टिस: functional programming के लिए यूज़ करें। यूज़ केस: data extraction, subset processing। पिटफॉल्स: negative indices गलत यूज़।
Example:

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

splice:

Splice (start, deleteCount, items) mutates array, elements को removes/adds करता है। Time complexity O(n)। Mutator method, in-place ऑपरेशन, हटाए गए elements returns करता है। गलत indices से logic errors। बेस्ट प्रैक्टिस: index validation करें। यूज़ केस: dynamic list updates, data insertion। पिटफॉल्स: unintended mutations।
Example:

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

Looping Arrays: Iteration and Traversal

Looping Arrays iteration और traversal के ज़रिए arrays को process करते हैं। for और forEach elements को access करते हैं। Callback-based forEach functional programming को बढ़ावा देता है। गलत loop bounds से index errors हो सकते हैं

Example:

const arr = [1, 2, 3];
arr.forEach(num => console.log(num)); // 1, 2, 3

for:

for लूप index-based iteration के लिए counter और condition यूज़ करता है। Control flow फ्लेक्सिबल, break/continue सपोर्ट करता है। Off-by-one errors और loop termination गलतियों से बचें। बेस्ट प्रैक्टिस: loop bounds चेक करें।
Example:

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // 1, 2, 3
}

forEach:

forEach callback-based iteration के लिए elements पर iterates। Index/element एक्सेस, break नहीं सपोर्ट करता। Functional programming और readability बढ़ाता है। गलत callback logic से runtime errors। बेस्ट प्रैक्टिस: सिम्पल callbacks यूज़ करें।
Example:

const arr = [1, 2, 3];
arr.forEach((num, index) => {
  console.log(`Index ${index}: ${num}`); // Index 0: 1, Index 1: 2, Index 2: 3
});

Exercise: Filter even numbers and sort names

Task 1: Array से even numbers को filter करें।
Task 2: नेम्स के array को alphabetically sort करें।
filter और sort मेथड्स यूज़ करें। गलत इनपुट से type errors। बेस्ट प्रैक्टिस: input validation, immutable methods। यूज़ केस: data filtering, sorting applications।

Code:

function filterEvenNumbers(arr) {
  if (!Array.isArray(arr)) return "Invalid input";
  return arr.filter(num => typeof num === "number" && num % 2 === 0);
}
console.log(filterEvenNumbers([1, 2, 3, 4, 5])); // [2, 4]

function sortNames(names) {
  if (!Array.isArray(names) || !names.every(name => typeof name === "string")) return "Invalid input";
  return [...names].sort(); // Immutable sort
}
console.log(sortNames(["Bob", "Alice", "Charlie"])); // ["Alice", "Bob", "Charlie"]

Quiz: Array Methods & Syntax

  1. What is the output of arr in const arr = [1, 2, 3]; arr.push(4);?

    • A) [1, 2, 3]

    • B) [1, 2, 3, 4]

    • C) [4, 1, 2, 3]

    • D) Error
      Answer: B) [1, 2, 3, 4]

  2. What is the output of arr in const arr = [1, 2, 3]; arr.pop();?

    • A) [1, 2]

    • B) [1, 2, 3]

    • C) 3

    • D) Error
      Answer: A) [1, 2]

  3. What is the output of arr in const arr = [1, 2, 3, 4]; arr.slice(1, 3);?

    • A) [1, 2, 3]

    • B) [2, 3]

    • C) [1, 2, 3, 4]

    • D) Error
      Answer: B) [2, 3]

  4. What is the output of arr in const arr = [1, 2, 3]; arr.splice(1, 1, 5);?

    • A) [1, 5, 3]

    • B) [1, 2, 5, 3]

    • C) [5]

    • D) Error
      Answer: A) [1, 5, 3]

  5. What is the output of arr in const arr = [1, 2, 3]; arr.forEach(num => console.log(num));?

    • A) 1, 2, 3

    • B) [1, 2, 3]

    • C) undefined

    • D) Error
      Answer: A) 1, 2, 3

Mini Project: शॉपिंग लिस्ट ऐप

Task: Array-based shopping list app बनाएँ, जो items को add/remove करे। push, splice, और validation यूज़ करें। गलत इनपुट से type errors। बेस्ट प्रैक्टिस: immutable returns, input validation। यूज़ केस: list management, inventory tracking।

Code:

function createShoppingList() {
  const items = [];
  
  function addItem(item) {
    if (typeof item !== "string" || item.trim() === "") return "Invalid item";
    items.push(item);
    return [...items]; // Immutable return
  }
  
  function removeItem(index) {
    if (!Number.isInteger(index) || index < 0 || index >= items.length) return "Invalid index";
    items.splice(index, 1);
    return [...items]; // Immutable return
  }
  
  function getList() {
    return [...items]; // Immutable return
  }
  
  return { addItem, removeItem, getList };
}

const myList = createShoppingList();
console.log(myList.addItem("Milk")); // ["Milk"]
console.log(myList.addItem("Bread")); // ["Milk", "Bread"]
console.log(myList.removeItem(0)); // ["Bread"]
console.log(myList.getList()); // ["Bread"]

Conclusion

Arrays JavaScript में data collections को manage करने का शक्तिशाली तरीका हैं। Indexing, Methods, और Looping से data processing आसान होता है। HindiStudyHub पर प्रैक्टिस करें और अगले मॉड्यूल में Objects सीखें।

Also Read: 

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *