Skip to main content
JavaScript

forEach( ), sort( ) and filter( ) for newbies

By February 9, 2020July 17th, 2022One Comment
forEach, sort and filter methods in JavaScript

forEach()

ES6 has introduced the forEach() method which allows you to loop through an array. Arrays as you may already know are of the type ‘object’. In contrast to the string,number,boolean, undefined and symbol types which are primitive data types. For example if we console.log the typeof operator to find the typeof array, objectwill be logged, as seen below:

Well, what does this mean in context of the forEach method which we’re talking about. To back track a bit more, methods are functions that are specific to an object. So we can apply an array method called ‘slice()’ which will take 2 parameters:

  1. The starting index in the array to begin the slice method
  2. The last index in the array before which you want to end your slice at

The slice method when applied on the ‘yummies’ array will return a new array with the sliced elements. For example:

Similarly we can apply the forEach() method on any array in JavaScript. This method also takes parameters. First gloss over the syntax.

Syntax:

arr.forEach(function fxnName(currentItem,index,arr),thisArg){
//some code here
});

The forEach() method takes the following parameters:

1st Parameter of the forEach() method:

The first parameter is a function that will be executed on/for each element in the array. This is called a callback function and it in turn can take 3 arguments:

  1. Current Item: The current item in the array. Required parameter. For example “Ice-cream” will be the starting/current item in the array.

Alt Text

  1. Index: The index of the current item in the array. Optional parameter. For example index 0.

Alt Text

  1. Array: The array on which forEach() will enact. Optional parameter. For example in this case[“Ice-cream”, “Cupcake”, “Donut”, “Cupcake”].

Alt Text

2nd Parameter of the forEach() method:

The 2nd parameter that the forEach method can take is:

1.thisArg: The value to use as this while executing callback. Optional parameter. This is covered later in another article.

Let’s have a look at the forEach() method on the yummies array:

In the above example, the forEach() method is applied on the yummies array via the ‘.’ notation like so yummies.forEach(). And the forEach() method takes as an argument a function called logYummies which in turn takes 3 parameters: item, index and the whole array

Let’s have a look at another simple example. There is an array with 5 elements of the number data type. You would like to multiply each element by 2 therefore, doubling the number.

With a for loop it will look like so:

And by using the forEach method, it will look like this:

filter()

The ES6 filter() method also acts upon arrays in JavaScript. It will filter an array based on some filter criteria and return a new array
with the filtered elements.

Syntax

Similiar to the forEach() method:

array.filter(function fxnName(currentItem, index, array), thisArg){
//some code
});

1st Parameter of the filter() method:

The first parameter is a function that will be executed on elements in the array. This is called a callback function and it in turn can take 3 arguments:

  1. Current Item: The current item in the array. Required parameter. For example “Ice-cream” will be the starting/current item in the array.
  2. Index: The index of the current item in the array. Optional parameter. For example index 0.
  3. Array: The array on which filter() will enact. Optional parameter. For example in this case[“Ice-cream”, “Cupcake”, “Donut”, “Cupcake”].

Alt Text

2nd Parameter of the filter() method:

The 2nd parameter that the filter method can take is:

1.thisArg: The value to use as this while executing callback. Optional parameter. This is covered later in another article.

Let’s filter the yummies array and remove the duplicate cupcakes

Alt Text

Alt Text

sort()

The sort() method as the name implies will sort elements in an array. By default elements in an array will be sorted in ascending or alphabetical order.

Syntax

nameOfArray.sort();

Example:

Alt Text

Alt Text

You can also sort according to an alternative order for example in descending order. In such a case you will pass a comparer function to the sort() method. And the syntax will now be:

nameOfArray.sort(compareFunction);

Let’s have a look at another example and sort the yummies array items in descending alphabetical order that is from Z-A.

Example 2

Alt Text

Leave a Reply