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:
- 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:
- 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);
-
-
- result = array0.map(element => element += 10);
- print(result);
-
-
- 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.
-
- 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);
-
-
- const array0 = [1,2,3,4,5,6,7,8];
- const result = array0.reduce((sum, result) => sum+=result, 0);
- print(result);
-
-
- // Note: here 0, in the end, means the initial value of sum that's by default can be 0 or {} or "" as per requirement.
-
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:
-
- 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);
-
-
- let array1 = array0.filter(element => element %2==0);
- print(array1);
-
-
- 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.
-
- 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);
-
-
-
- let result = array0.find(element => element==3);
- let position = array0.findIndex(element => element==3);
- print(result, position);
-
- // RESULT: 3, 2
- example.
-
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.
-
- 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;
- }
- }
-
-
-
- const array0 = [1,2,3,4,5,6,7,8];
- let _some = array0.some(element => element > 2);
- let _every = array0.every(element => element < 10);
-