Buaya Terbang Blog

Saturday, January 7, 2023

Learn forEach Array Method in Javascript

Learn Array Method - forEach, map, reduce, filter

buayaberdiri.blogspot.com - The forEach() method is an array method that is used to execute a function on each element of an array. It is defined as follows:

Example code :

arr.forEach(callback(currentValue[, index[, array]])[, thisArg]);

Here, callback is a function to execute on each element of the array. It takes three arguments:

currentValue: The current element being processed in the array.
index (optional): The index of the current element being processed in the array.
array (optional): The array that forEach() is being applied to.
thisArg (optional) is a value to use as this when executing the callback.

Here is an example of using forEach() to print out all the elements of an array:

Example code :

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

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

// Output:
// 1
// 2
// 3
// 4
// 5

You can also use an arrow function as the callback function:

Example code :

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

numbers.forEach(number => console.log(number));

// Output:
// 1
// 2
// 3
// 4
// 5

Note that forEach() does not return a value and is used for side effects. If you want to transform the elements of an array and return a new array, you can use the map() method instead.

Learn Array.map()

The map() method is an array method that is used to transform the elements of an array. It is defined as follows:

Example code :

const newArray = arr.map(callback(currentValue[, index[, array]])[, thisArg])

Here, callback is a function that is applied to each element of the array. It takes three arguments:

currentValue: The current element being processed in the array.
index (optional): The index of the current element being processed in the array.
array (optional): The array that map() is being applied to.
thisArg (optional) is a value to use as this when executing the callback.

map() returns a new array with the results of calling the callback function on every element in the array.

Here is an example of using map() to create a new array with the square of each element in an array:

Example code :

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(number => number * number);

console.log(squares);
// Output: [1, 4, 9, 16, 25]

You can also use a function expression as the callback function:

Example code :

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(function(number) {
  return number * number;
});

console.log(squares);
// Output: [1, 4, 9, 16, 25]

Note that map() does not modify the original array. It creates a new array with the transformed elements.

You can use the map() method with any type of array, not just arrays of numbers. For example, you can use it to transform an array of strings or an array of objects.

Learn Array.filter()

The filter() method is an array method that is used to create a new array with elements that pass a test specified in a callback function. It is defined as follows:

Example code :

const newArray = arr.filter(callback(currentValue[, index[, array]])[, thisArg]);

Here, callback is a function that is applied to each element of the array. It takes three arguments:

currentValue: The current element being processed in the array.
index (optional): The index of the current element being processed in the array.
array (optional): The array that filter() is being applied to.
thisArg (optional) is a value to use as this when executing the callback.

filter() returns a new array with all elements that pass the test implemented by the callback function. The test is a boolean function, and it should return true if the element should be included in the new array, and false otherwise.

Here is an example of using filter() to create a new array with only the even numbers from an array:

Example code :

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers);
// Output: [2, 4]

You can also use a function expression as the callback function:

Example code :

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers);
// Output: [2, 4]

Note that filter() does not modify the original array. It creates a new array with the elements that pass the test.

You can use the filter() method with any type of array, not just arrays of numbers. For example, you can use it to filter an array of strings or an array of objects.

Learn Array.reduce()

The reduce() method is an array method that is used to reduce the elements of an array to a single value. It is defined as follows:

Example code :

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

Here, callback is a function that is applied to each element of the array. It takes four arguments:

accumulator: The accumulator accumulates the callback's return values. It is the accumulated value previously returned in the last invocation of the callback, or initialValue, if supplied.
currentValue: The current element being processed in the array.
index (optional): The index of the current element being processed in the array.
array (optional): The array reduce() was called upon.

initialValue (optional) is a value to use as the first argument to the first call of the callback. If no initialValue is supplied, the first element in the array will be used as the initialValue and the callback will be called for all elements in the array.

reduce() applies the callback function to each element in the array, left to right, to reduce the array to a single value. The return value of the callback function is the accumulated result, and is provided to the next call as the accumulator argument.

Here is an example of using reduce() to sum all the elements in an array:

Example code :

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum);
// Output: 15

You can also use a function expression as the callback function:

Example code :

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum);
// Output: 15

Note that reduce() does not modify the original array. It returns a single value that is the result of the reduction.

You can use the reduce() method with any type of array, not just arrays of numbers. For example, you can use it to concatenate all the elements in an array of strings or to create an object from an array of objects.

Check out other articles about Javascript

Check out other articles about HTML & CSS: