JavaScript JS Tutorial JS Objects JS Functions JS Classes JS Async JS HTML DOM JS Browser BOM JS Web APIs JS AJAX JS JSON JS vs jQuery JS Graphics



JS Array Iteration

JavaScript is a powerful programming language that is widely used in web development. One of the most important features of JavaScript is its ability to work with arrays. Arrays are a collection of values that can be accessed and manipulated using JavaScript. In this tutorial, we will explore the concept of JS Array Iteration.

Brief Explanation of JS Array Iteration

JS Array Iteration is the process of accessing and manipulating each element in an array. There are several methods available in JavaScript that can be used to iterate over an array. These methods include:

  • forEach()
  • map()
  • filter()
  • reduce()

The forEach() method is used to execute a function for each element in an array. The map() method is used to create a new array with the results of calling a function for every element in an array. The filter() method is used to create a new array with all elements that pass the test implemented by the provided function. The reduce() method is used to reduce the array to a single value by executing a provided function for each element.

Code Examples

Let's take a look at some code examples to better understand how JS Array Iteration works.

forEach()

The forEach() method is used to execute a function for each element in an array. Here is an example:


const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

This code will output the following:


1
2
3
4
5

The forEach() method can also take an optional second parameter that represents the index of the current element being processed. Here is an example:


const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number, index) {
  console.log(index + ": " + number);
});

This code will output the following:


0: 1
1: 2
2: 3
3: 4
4: 5

map()

The map() method is used to create a new array with the results of calling a function for every element in an array. Here is an example:


const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers);

This code will output the following:


[2, 4, 6, 8, 10]

filter()

The filter() method is used to create a new array with all elements that pass the test implemented by the provided function. Here is an example:


const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers);

This code will output the following:


[2, 4]

reduce()

The reduce() method is used to reduce the array to a single value by executing a provided function for each element. Here is an example:


const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(total, number) {
  return total + number;
}, 0);

console.log(sum);

This code will output the following:


15

Conclusion

JS Array Iteration is a powerful feature of JavaScript that allows developers to access and manipulate arrays in a variety of ways. By using methods like forEach(), map(), filter(), and reduce(), developers can write more efficient and effective code. If you are interested in learning more about JavaScript and web development, there are many resources available online.

References

Activity