Thursday, 31 January 2019

Arrays in JavaScript : Part 3

In this article, we are going to discuss "Arrays" in Javascript in great detail. Following is the list of topics we are going to cover:

Let us go through it in a bit detail:

Filtering and Sorting of Arrays:

Let's start with Filtering in Arrays:


Basically, Filtering is the process where we take an existing array and create a whole new array out of it with some of the items based on whatever the filter is.



We can use <array>.filter() API provided by Javascript which accepts a callback function which in  turn accepts two parameters (order is important!) :
  1. item: it refers to the current element. 
  2. index: it refers to the index of the current element.
The callback function gets executed n number of times where n is the number of items in the array. The filter() API returns the filtered array based upon the boolean returned inside the callback.


Consider the following example:

Here, we would filter out the objects based on the fact that either the title or the body of that particular object must contain a string "ne".

 const notes = [{  
   title: 'My next trip',  
   body: 'I would like to go to Spain'  
 }, {  
   title: 'Habbits to work on',  
   body: 'Exercise. Eating a bit better.'  
 }, {  
   title: 'Office modification',  
   body: 'Get a new seat'  
 }]  
 const filteredArrays = notes.filter(function(note, index) {  
   const isTitleMatch = note.title.toLowerCase().includes('ne');  
   const isBodyMatch = note.body.toLowerCase().includes('ne');  
   return isTitleMatch || isBodyMatch;  
 });  
 console.log(filteredArrays);  

It produces the following output:

 [ { title: 'My next trip', body: 'I would like to go to Spain' },  
  { title: 'Office modification', body: 'Get a new seat' } ]  

As can be seen from the produced output, only two entries out of three are returned to filteredArrays.

Let us move on to Sorting of Arrays in Javascript:

We can use sort() API provided by Javascript which again accepts a callback function (called compareFunction) which in turn accepts two parameters a and b and it works as follows:

  1. a is the first element we need to compare.
  2. b is the second element we need to compare.
  3. if compareFunction(a, b) returns a 0, a and b are left as it is with respect to each other.
  4. if compareFunction(a, b) returns a negative number, just sort a to a lesser index as compared to b. i.e, a would come first.
  5. if compareFunction(a, b) returns a positive number, just sort b to a lesser index as compared to a. i.e, b would come first.


Consider the following example:

 const notes = [{  
   title: 'My next trip',  
   body: 'I would like to go to Spain'  
 }, {  
   title: 'Habbits to work on',  
   body: 'Exercise. Eating a bit better.'  
 }, {  
   title: 'Office modification',  
   body: 'Get a new seat'  
 }]  
 console.log('Initial Array of Objects:');  
 console.log(notes);  
 const sortedNotes = function(notes) {  
   notes.sort(function(a, b) {  
     if(a.title.toLowerCase() < b.title.toLowerCase()) {  
       return -1;  
     } else if(a.title.toLowerCase() > b.title.toLowerCase()) {  
       return 1;    
     } else {  
       return 0;  
     }  
   });  
 }  
 sortedNotes(notes)  
 console.log('Array after sorting:');  
 console.log(notes);  

It produces the following output:

 Initial Array of Objects:  
 [ { title: 'My next trip', body: 'I would like to go to Spain' },  
  { title: 'Habbits to work on',  
   body: 'Exercise. Eating a bit better.' },  
  { title: 'Office modification', body: 'Get a new seat' } ]  
 Array after sorting:  
 [ { title: 'Habbits to work on',  
   body: 'Exercise. Eating a bit better.' },  
  { title: 'My next trip', body: 'I would like to go to Spain' },  
  { title: 'Office modification', body: 'Get a new seat' } ]  



If you have any doubts, write down in comments so that we can discuss that further. Thanks!

No comments:

Post a comment