Post
Ask Question

JavaScript - Arrays Manipulation

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:
    1. // OLD STYLE
    2. const array0 = [1,2,3,4,5,6,7,8];    
    3. let result = [];    
    4. for(let i = 0; i < n; i++) {    
    5.     result.push(array0[i] + 10)    
    6. }    
    7. print(result);    
    8.     
    9. // OR JS style    
    10. result = array0.map(element => element += 10);    
    11. print(result);    
    12.     
    13. // 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. 
    1. //OLD STYLE    
    2. const array0 = [1,2,3,4,5,6,7,8];    
    3. let result = 0;    
    4. for(let i = 0; i < n; i++) {    
    5.     result = result + arr0[i];    
    6. }    
    7. print(result);    
    8.     
    9. // OR  JS Style    
    10. const array0 = [1,2,3,4,5,6,7,8];    
    11. const result = array0.reduce((sum, result) => sum+=result, 0);    
    12. print(result);    
    13.     
    14. // RESULT: 36    
    15. // 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:
    1. // OLD STYLE  
    2. const array0 = [1,2,3,4,5,6,7,8];  
    3. let array1 = [];  
    4. for(let i = 0; i < n; i++) {  
    5.         if(array0[i]%2==0) {  
    6.         array1.push(array0[i])  
    7.     }  
    8. }  
    9. print(array1);  
    10.   
    11. // OR  JS Style  
    12. let array1 = array0.filter(element => element %2==0);  
    13. print(array1);  
    14.   
    15. // 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.
    1. // OLD STYLE  
    2. const array0 = [1,2,3,4,5,6,7,8];  
    3. let result = false;  
    4. let position = -1;  
    5. for(let i = 0; i < n; i++) {  
    6.         if(array0[i]==3) {  
    7.            result = array0[i];  
    8.            position = i;  
    9.         }  
    10. }  
    11. print(result, position);  
    12. // Note  -1 means element not found inside the array.  
    13.   
    14. // OR JS Style  
    15. let result = array0.find(element => element==3);  
    16. let position = array0.findIndex(element => element==3);  
    17. print(result, position);  
    18.   
    19. // RESULT: 3, 2
    20. // 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.
    1. // OLD STYLE  
    2. const array0 = [1,2,3,4,5,6,7,8];  
    3. let _some = false;  
    4. let _every = false;  
    5. for(let i = 0; i < n; i++) {  
    6.         if(array0[i]>2) {  
    7.         _some = true;  
    8.         break;  
    9.     }  
    10. }  
    11.   
    12. for(let i = 0; i < n; i++) {  
    13.         if(!(array0[i]<10)) {  
    14.         _every = false;  
    15.         break;  
    16.     } else {  
    17.         _every = true;  
    18.     }  
    19. }  
    20.   
    21. // OR JS Style  
    22.   
    23. const array0 = [1,2,3,4,5,6,7,8];  
    24. let _some = array0.some(element => element > 2);  
    25. let _every = array0.every(element => element < 10);  
    26.   
    27. // RESULT: true, true