Working with iteration methods in Array

+Understanding Arrow Functions

JavaScript arrow function expressions, which are represented by an equals sign followed by a greater than sign: =>.

A function is a block of reusable code that can be executed. Traditionally, a function can be written 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:

find()

The find() method returns the first value in an array that passes a given test.

As an example, we will create an array of sea creatures.

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

Then we will use the find() method to test if any of the creatures in the array are cephalopods.

// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
    return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Outputoctopus

Since octopus was the first entry in the array to satisfy the test in the isCephalopod() function, it is the first value to be returned.

The find() method can help you work with arrays that contain many values.

findIndex()

The findIndex() method returns the first index in an array that passes a given test.

We can use the same seaCreatures example from the find() method.

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

Using the isCephalopod test, we will find the index number instead of the value of the first match.

// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
    return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);

Output1

octopus is the first item to match the test and has an index of 1, therefore it is the index number that is returned.

If the test is not satisfied, findIndex() will return -1.

const isThereAnEel = eel => {
    return [ "eel" ].includes(eel);
}

seaCreatures.findIndex

Output-1

The findIndex() method is particularly useful when working with arrays containing many items.

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
}

Throughout the examples in this tutorial, we will use the arrow function syntax. To read and understand more about functions in JavaScript, read the Functions reference on the Mozilla Developer Network.

const prices = [10.99, 5.99, 3.9, 6.59]
const tax = 0.19
const taxAdjustedprice = [];

// using for loop

for (const price of prices) {
    taxAdjustedprice.push(price * (1 + tax))
}

console.log(taxAdjustedprice)

Now , if you need index for some reason then you dont have have avaiable here.

use forEach() method for indexes

Solutions : the most efficient method to be used in array is forEach() method

alternative to for of loop.

forEach()

The forEach() method calls a function for each element in an array.

syntax : array.forEach(function(value, index, fullarray){

// write block of code }

Note :

first parameter always display your value and is mandatory.
second and third parametr are optional

Let’s start with the following array assigned to the variable fish:

let fish = [ "piranha", "barracuda", "cod", "eel" ];

We can use forEach() to print each item in the fish array to the console.

// Print out each item in the array
let fish = ["piranha", "barracuda", "cod", "eel"];

fish.forEach((value, index, fish) => {
    console.log(index + ":" + value)
})

Once we do so, we’ll receive the following output:

Output0:piranha
1:barracuda
2:cod
3:eel

Another way to do this is using the for loop keyword and testing it against the length property of the array.

// Loop through the length of the array
for (let i = 0; i < fish.length; i++) {
    console.log(fish[i]);
}

The above code will have the same output as using the forEach() method. As an iteration method specifically intended for use with arrays, forEach() is more concise and straightforward for this particular task.

map()

Note :

An easiest method alternative to for of loop and forEach method is map method.

The map() method creates a new array with the results of a function call on each element in the array.

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

"The map() method creates a new array with the results of calling a function for every array element.

The map() method calls the provided function once for each element in an array, in order.

Note: map() does not execute the function for array elements without values."

let fish = [ "piranha", "barracuda", "cod", "eel" ];

// Print out each item in the array
let printFish = fish.map(individualFish => {
    console.log(individualFish);
});

printFish;

Outputpiranha
barracuda
cod
eel

We can also use map() to change the values of each item in an array. To demonstrate this, we’ll add an s to the end of each item in the fish array to pluralize each word.

// Pluralize all items in the fish array
let pluralFish = fish.map(individualFish => {
    return `${individualFish}s`;
});

pluralFish;

Output[ 'piranhas', 'barracudas', 'cods', 'eels' ]

The original fish variable is unchanged, but pluralFish now contains a modified version of the original variable.

// next eg for map()

const prices = [1.9, 2, 6, 9.9, 10.9]
const tax = 0.1;

const adjustedPrice = prices.map((value, index) => {
    return (value, index)
})

console.log(adjustedPrice);





filter()The filter() method creates a new array with the elements that pass the result of a given test.
We could use filter() to return a new array containing only the items in a list that start with a specific letter. To do this, we can utilize string indexing to call the first item (or letter) in each string item of the array.
let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];

// Filter all creatures that start with "s" into a new list
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

filteredList;
Output
[ 'shark', 'squid', 'starfish' ]
We tested which items in the array have an s at the 0 index, and assigned the result into a new variable.
filter() is an iteration method, and does not mutate the original array
Reducing the array by using filter method.
reduce()The reduce() method will reduce an array to a single value.
This is seen commonly with numbers, such as finding the sum of all the numbers in an array.
let numbers = [ 42, 23, 16, 15, 4, 8 ];

// Get the sum of all numerical values
let sum = numbers.reduce((a, b) => {
    return a + b;
});

sum;
Output
108
reduce() can also be used with strings and other data types. The value returned by reduce() can be a number, string, array, or other data type. reduce() is an iteration method that does not mutate the original array.

// Importance of Reduce function


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

let sum = 0;
prices.forEach((price) => {
    sum += price;
    return sum;
})

console.log(sum);

 Note:in above code snippet the working of code is fine but lets do it with 
 much easy with shorter syntax


 Reduce method():

const reducedValue = prices.reduce((previousValue, CurrentValue, currentIndex, prices) => {

    return previousValue + CurrentValue
}, 0);
console.log(reducedValue);

where in above code snippet 0 is the initial Value and work same as mapfun

Search This Blog

Modern_javascript