How to Print Array Elements in JavaScript?

Given an array and the task is to print array elements using JavaScript. It is often useful while debugging or displaying the data. There are several methods to print array elements, which are explained below:

1. Using a for Loop

The classic for loop is one of the most straightforward ways to iterate through an array and print each element.

let arr = [10, 20, 30, 40, 50];

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

2. Using a for…of Loop

The for...of loop simplifies array iteration by directly accessing each element.

let arr = [10, 20, 30, 40, 50];

for (let item of arr) {
    console.log(item);
}

3. Using the forEach() Method

The forEach() method is a built-in array method that executes a callback function for each element in the array.

let arr = [10, 20, 30, 40, 50];

arr.forEach((item) => {
    console.log(item);
});

Advanced Example:

arr.forEach((item, index) => {
    console.log(`Element ${index}: ${item}`);
});

4. Using the map() Method

The map() method creates a new array by applying a callback function to each element of the original array. Although primarily used for transformation, it can also be used to print elements.

let arr = [10, 20, 30, 40, 50];
arr.map((item) => console.log(item));

5. Using the join() Method

The join() method concatenates all elements of an array into a single string. This is particularly useful for printing array elements in a specific format.

Default Separator (comma)

let arr = [10, 20, 30, 40, 50];
console.log(arr.join());

Custom Separator

console.log(arr.join(' - '));

6. Using console.log() Directly

You can directly print the entire array using console.log().

let arr = [10, 20, 30, 40, 50];
console.log(arr); 
// Output: [10, 20, 30, 40, 50]

7. Using the toString() Method

The toString() method converts an array into a string separated by commas. It behaves similarly to join() with the default separator.

let arr = [10, 20, 30, 40, 50];
console.log(arr.toString()); 
// Output: 10,20,30,40,50

8. Using the reduce() Method

The reduce() method aggregates array elements, and it can also be used to construct a formatted string of elements.

let arr = [10, 20, 30, 40, 50];
let result = arr.reduce((acc, item) => acc + item + ' ', '');
console.log(result.trim()); // Output: 10 20 30 40 50

9. Using a while Loop

A while loop can be used to iterate through an array and print each element. This approach is less common but still effective.

let arr = [10, 20, 30, 40, 50];
let i = 0;
while (i < arr.length) {
    console.log(arr[i]);
    i++;
}

10. Using a do…while Loop

A do...while loop ensures that the code inside the loop is executed at least once, even if the condition is false.

let arr = [10, 20, 30, 40, 50];
let i = 0;
do {
    console.log(arr[i]);
    i++;
} while (i < arr.length);

11. Using Recursion

For a more functional approach, you can use recursion to iterate through and print array elements.

let arr = [10, 20, 30, 40, 50];
function printArray(arr, index = 0) {
    if (index >= arr.length) 
        return;
    console.log(arr[index]);
    printArray(arr, index + 1);
}
printArray(arr);

12. Using the Spread Operator (…)

The spread operator expands the array elements, making them easier to print.

let arr = [10, 20, 30, 40, 50];
console.log(...arr); 
// Output: 10 20 30 40 50

13. Using JSON.stringify()

The JSON.stringify() method converts an array into a JSON-formatted string, which can be useful for printing structured data.

let arr = [10, 20, 30, 40, 50];
console.log(JSON.stringify(arr)); 
// Output: [10,20,30,40,50]