• Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JS Array Iteration

← Previous Next →

📘 JavaScript Array Iteration – Looping Through Array Elements

Array iteration refers to looping through each element of an array and performing an action like logging, modifying, or calculating values.

JavaScript provides multiple ways to iterate through arrays:

🔹 1. for Loop (Traditional)

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

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

✅ Best for flexibility and index-based logic.

🔹 2. forEach() Method

fruits.forEach(function(fruit) {
  console.log(fruit);
});

✅ Runs a function for each element — doesn't return a new array.

🔹 3. map() Method

let lengths = fruits.map(fruit => fruit.length);
// [5, 6, 5]

✅ Transforms elements and returns a new array.

🔹 4. for...of Loop

for (let fruit of fruits) {
  console.log(fruit);
}

✅ Simple and clean for reading array values directly.

🔹 5. filter() Method

let longNames = fruits.filter(fruit => fruit.length > 5);
// ["Banana"]

✅ Returns a new array based on a condition.

🔹 6. reduce() Method

let sum = [1, 2, 3].reduce((total, num) => total + num, 0);
// 6

✅ Reduces the array to a single value.

🔹 7. for...in Loop (less preferred for arrays)

for (let index in fruits) {
  console.log(index + ": " + fruits[index]);
}

⚠️ Used for objects — may include unexpected keys in arrays.

Practice Questions

Q1. How do you print each element of an array using a traditional for loop?

Q2. Which method is used to execute a function on every element without returning a new array?

Q3. How do you create a new array where each value is doubled?

Q4. Which loop allows you to access each value directly without an index?

Q5. What method returns a new array of elements that pass a test condition?

Q6. How do you find the total of an array like [5, 10, 15] using one function?

Q7. How is the for...in loop different from for...of when used on arrays?

Q8. What method would you use to count how many items in an array are longer than 5 characters?

Q9. Which array method does not mutate the original array but returns a new one?

Q10. How do you iterate and log both index and value using forEach()?

JS Array Iteration Quiz

Q1: Which method is best to apply a function to each item in an array?

A. filter()
B. map()
C. forEach()
D. find()

Q2: What is the output of [1, 2, 3].map(x => x * 2)?

A. [1, 2, 3]
B. [2, 4, 6]
C. 6
D. undefined

Q3: Which loop directly gives you values from an array?

A. for...in
B. for
C. for...of
D. while

Q4: What does reduce() return?

A. An array
B. The last item
C. A single value
D. Nothing

Q5: Which method creates a new array by filtering based on a condition?

A. forEach()
B. filter()
C. map()
D. some()

Q6: Which method is not ideal for iterating over arrays?

A. for...of
B. for...in
C. forEach()
D. map()

Q7: Which loop gives you the index while looping over an array?

A. for...of
B. forEach() with index parameter
C. map()
D. filter()

Q8: Which iteration method always returns a new array?

A. forEach()
B. reduce()
C. map()
D. for

Q9: How many arguments can forEach() take in its callback function?

A. One
B. Two
C. Three
D. Four

Q10: What is the output of ["a", "b"].forEach(console.log)?

A. "a" "b"
B. a 0, b 1
C. Each element with its index
D. Error
← Previous Next →
Login
Go Back Top