How To Use Array Methods in JavaScript: Iteration Methods

Arrays are used everywhere in Javascript, Make your life easier by learning how to iterate them

Before we start…

What is Javascript and how is it different from Java 🤔??

JavaScript is most commonly used as a client-side scripting language. This means that JavaScript code is written into a HTML page. When a user requests an HTML page with JavaScript in it, the script is sent to the browser and it’s up to the browser to decide what to do with it.

• Java code must be compiled, and JavaScript code is all-text.
• Each language requires different plug-ins.
• JavaScript code is run on a browser only, whereas Java creates applications that run on a virtual machine or browser.
• Java is an OOP (object-oriented programming) language whereas JavaScript is specifically an OOP scripting language.

In addition to that, Java is typically used for all server-side development, ranging from Android apps to desktop applications while JavaScript is reserved for developing client-side scripts for functions like validation and interactivity.

I hope this clears the basic concept of JavaScript.

Understanding the Array iteration Methods

Methods which operates on every item in an array, one at a time is called the iteration methods. These methods are closely associated with loops. In this blog, we will be focusing on iteration methods.

Let’s start with the Arrow functions (=>)

The block of reusable code that can be executed is called function. Generally, we write function with the following syntax:

var example = function() {
// code to execute
}

example();

The latest version of JavaScript at the time of writing allows for the use of arrow functions, which can be written with the following syntax:

var example = () => {
  // code to execute
} 
example();
The parentheses, in either case, may contain parameters. When there is only one parameter, the parentheses can be omitted, as such:
var example = parameter1 => {
  // code to execute }

Filter( ):

The filter( ) the method creates a new array with the elements that pass the result of a given test. You can use filter to remove items of an array also; doesn't affect the original arrays instead it returns a new array.

Example:

• We have taken array “years” and we need an array “century” with only the years of 20th century(1901–2000)
• will use the Array filter method to remove the years which are not from the 20th century.

Code:
const years = [1989, 2015, 2000, 1999, 2013, 1973, 2012];
let century20;
century20 = years.filter(num => num <= 2000);

Output
[1989, 2000, 1999, 1973]

Map( )

It creates a new array with the results of a function call on each element in the array.

For an example , we can print each iteration of a loop to the console. The map() does not change the original array, it instead returns a new array value. Unlike, the forEach() method must be assigned to a new variable

Example:

“map” method on the daysOfWeek array, creating a new array of abbreviated weekdays.

Code:

const daysOfWeek = [“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”];

let abbreviatedDays= daysOfWeek.map(days => days.substr(0, 3));

console.log(abbreviatedDays);

Output:
[“Sun”, “Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”]

Reduce( )

The reduce() method will reduce an array to a single value.

This is commonly seen with numbers, such as finding the sum of all the numbers in an array.

code:

let numbers=[1,2,3,4,5,6]
let n = numbers.reduce((num1,num2) => num1+num2);

Output:
21

Summary:
We have seen the major built-in iteration array methods in JavaScript. Iteration methods operate on every item in an array and often perform a new function. We went over filter, and reduce array, how to loop through arrays, change the value of each item in an array

Happy learning ✨👨‍💻