JavaScript - Arrays Manipulation

This blog will help developers understand the concept of arrays in JavaScript.

JavaScript Array Manipulation

 

Array manipulation is one of the most important concepts in not only JavaScript but in other programming languages also. We know about an array that it's a collection of the same types of data, it's inside [] brackets, etc. blah blah blah.

 

A lot of beginners think that it's rocket science and they can't understand it completely. Real-life examples are most important for learning, not only with coding but with any concept. Well, what is the profit of learning a concept that you can't use in your life?

 

 

But what exactly is Array?

 

The array is everywhere. It's some buttons in a circuit board, it's a line of trees on the roadside, it's the buttons on the keyboard. It's your pant's zip teeth, your phonebook, your money, notes in your wallet, etc. When there is a traffic jam on RedLight, some call it a jam but someone will call it an array of vehicles [car1, car2, truck1, bike1, car3, bike2, truck2, scooter1, bike3, car4 ].

 

All we have to understand is what, when, and where we have to change to get what we want in an array; i.e another array, like we want only cars [car1, car2, car3, car4].

 

So, the basic concepts of arrays are:

1. map
    
   An array emerges from another array without touching the first array; i.e. clone an array and apply operations. Let's go for an example: for an array [1,2,3,4,5,6,7,8] I want an another array with every element 10 greater than first array i.e. [11,12,13,14,15,16,17,18] then we have to:

   // OLD STYLE
   const array0 = [1,2,3,4,5,6,7,8];
   let result = [];
   for(let i = 0; i < n; i++) {
       result.push(array0[i] + 10)
   }
   print(result);
   
   // OR JS style
   result = array0.map(element => element += 10);
   print(result);
   
   // RESULT: [11, 12, 13, 14, 15, 16, 17, 18]

2. reduce
    
   It will perform operations in an array and provide you a single array which can be an array or not depending on the requirement. Finding the sum of all elements in an array is one of the most asked questions in the programming world. 

   //OLD STYLE
   const array0 = [1,2,3,4,5,6,7,8];
   let result = 0;
   for(let i = 0; i < n; i++) {
       result = result + arr0[i];
   }
   print(result);
   
   // OR  JS Style
   const array0 = [1,2,3,4,5,6,7,8];
   const result = array0.reduce((sum, result) => sum+=result, 0);
   print(result);
   
   // RESULT: 36
   // Note: here 0, in the end, means the initial value of sum that's by default can be 0 or {} or "" as per requirement.

3. filter

    

   As the name suggests, it will filter the entire Array and give you a result in the form of an array. Another most asked question is how to find even numbers in an array of elements or greater number. Example:

   // OLD STYLE
   const array0 = [1,2,3,4,5,6,7,8];
   let array1 = [];
   for(let i = 0; i < n; i++) {
           if(array0[i]%2==0) {
           array1.push(array0[i])
       }
   }
   print(array1);
   
   // OR  JS Style
   let array1 = array0.filter(element => element %2==0);
   print(array1);
   
   // RESULT: [2, 4, 6, 8];

4. find and findIndex
    
   To find an element i.e. find or the position of an element i.e. findIndex in an array, it will return the element or the position of the element from the array so the output will be an element that can be an integer, string or an object.

   // OLD STYLE
   const array0 = [1,2,3,4,5,6,7,8];
   let result = false;
   let position = -1;
   for(let i = 0; i < n; i++) {
           if(array0[i]==3) {
              result = array0[i];
              position = i;
           }
   }
   print(result, position);
   // Note  -1 means element not found inside the array.
   
   // OR JS Style
   let result = array0.find(element => element==3);
   let position = array0.findIndex(element => element==3);
   print(result, position);
   
   // RESULT: 3, 2
   // Note: We can do let result = array0[position] also but this is only an example.

5. some and every

    

   Both some and every are most likely methods in JavaScript arrays. With it, someone can find if at least one element satisfies the condition in Array or not. Also every means all the elements satisfy the given condition too. The return type of those methods is boolean i.e. true or false.
   
   Example

    

   Let's check if the array has an element greater than 2 and all elements are smaller than 10.

   // OLD STYLE
   const array0 = [1,2,3,4,5,6,7,8];
   let _some = false;
   let _every = false;
   for(let i = 0; i < n; i++) {
           if(array0[i]>2) {
           _some = true;
           break;
       }
   }
   
   for(let i = 0; i < n; i++) {
           if(!(array0[i]<10)) {
           _every = false;
           break;
       } else {
           _every = true;
       }
   }
   
   // OR JS Style
   
   const array0 = [1,2,3,4,5,6,7,8];
   let _some = array0.some(element => element > 2);
   let _every = array0.every(element => element < 10);
   
   // RESULT: true, true