What is Array?
In simple terms, An ordered list of values makes up an array. The term "Element" designated by an index refers to each value. In another way, everything in square brackets becomes an array. Items inside an array are called elements. It can be boolean values or integer/numbers, floating values or string values, etc.
Array Methods
There are many array methods, but I only cover the most used ones in this article. Array methods play a vital role in the JS programming world. If you master these methods, your soft life will be a cakewalk. There are many parameters in each array method. I'm discussing only the basics to understand their significance in the JS world.
array.filter()
As the name says, the filter method will return specific elements from the array based on filter method properties.
let people = [
{name : 'jaan', height: 6.2 , weight : 85, haircolor: 'brown'} ,
{name : 'shane', height: 5.11 , weight : 75, haircolor: 'black'},
{name : 'praveen', height: 6.1 , weight : 79, haircolor: 'black'},
{name : 'marco', height: 5.9 , weight : 80, haircolor: 'brown'},
{name : 'kim', height: 5.6 , weight : 67, haircolor: 'black'},
];
let result = people.filter (feature => feature.haircolor == 'black');
console.log(result)
# output : [
{ name: 'shane', height: 5.11, weight: 75, haircolor: 'black' },
{ name: 'praveen', height: 6.1, weight: 79, haircolor: 'black' },
{ name: 'kim', height: 5.6, weight: 67, haircolor: 'black' }
]
Here, I filtered the elements in the array called people based on the hair color property.
callbackfn: Any function passed as an argument to another function so that it can be executed in that other function is called a callback function. You can see this in the above example.
Many JavaScript operations are asynchronous, which means that unlike how you're probably used to them, they don't stop the program (or a function) from running until they're finished. For this reason, callback functions are necessary. Instead, while the rest of the code runs, it will run in the background.
array.find()
This method returns the first satisfying element value in the array among the other elements based on index position.
let x = [1,2,4,3,6,9]
let y = x.find(element => element > 2);
console.log(y)
# output: 4
As per the math theory, the "3" should be the answer, but if we observe the array index positioning, "4" is on the 2nd index, and "3" is on the 3rd index; hence the answer is 4.
array.forEach()
The forEach() method iterates through an array's items while calling a function. Maps and Sets can both be utilized using the forEach() method.
Note: There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool.
let x =[2,4,7,3];
let y = x.forEach(z => console.log(z+2));
#output:
4
6
9
5
array.every()
The every method determines if every component satisfies the requirement. The method only returns true after that. False is given if just one element fails the test.
let x =[5,4,12,3];
let y = x.every(z => z>10);
console.log(y)
# output: false
Each element should satisfy the condition mentioned in every() method. Then it results as a true output. If any element in the array fails to meet the requirement, this returns false. In the above example, not all the numbers are greater than ten; hence the output is false.
array.some()
some is a special array method. It tests whether at least one element within the array tests positive for a specific condition. If so, some returns true; otherwise, it returns false.
let x =[5,4,12,3];
let y = x.some(z => z>10);
console.log(y)
# output: true
some() is the other way around of every() method.
array.includes()
In simple terms, includes works like a checklist. It will check whether the element is present in the array or not. Based on the result, it returns true or false. It contains the exact matching of an object.
let x =['Ramesh', 'suresh', 'mahesh', 'naresh', 'Rajesh',]
let y = x.includes('ramesh');
console.log(y)
#output : false
If you observe close enough, the condition is not met in the above example. As I said, it follows the strict equality principle. The case sensitivity is the reason for the False result in the above example.
array.map()
One of the most significant array techniques available is map. It is the method to use if you wish to alter every value in an array.
let x =[5,4,12,3];
let y = x.map(z => z*2);
console.log(y)
output: [ 10, 8, 24, 6 ]
So y is the whole new array now holding the above output elements, and x is still the same. It won't change any element in the x array. It only uses the elements to form a new array.
array.reduce()
The most effective array approach currently in use is reduce() It is the most versatile and may be used to reimplement all current array methods. It would require a whole post to discuss all the benefits it provides, but you will quickly get a taste of it.
Returning the total of an array's elements may be the simplest use case for reduce(). Example:
let x =[5,4,12,3];
let z= 1;
let y = x.reduce((ftvalue,sdvalue) => ftvalue + sdvalue,z );
console.log(y)
output: 25
The backend operation of the above example is 1+5+4+12+3 = 25
reduce is difficult to understand. It does the same as all other array methods, reduce iterates through every element. The procedure must first determine whether an initialValue was provided. If not, the array's first element is assumed to be such. The callback's output is then substituted for the accumulator each time it is called and is ultimately returned in its complete form.
array.sort()
The name already tells you everything. This technique must always be used if you wish to sort an array.
let x =[22,45,17,81,23,15,93,54,36,75];
let y = x.sort();
console.log(y);
output: [
15, 17, 22, 23, 36,
45, 54, 75, 81, 93
]
The default sort order is ascending, built upon converting the elements into strings and comparing their UTF-16 code unit value sequences.
array.findIndex()
You may use the function findindex() to determine an element's index inside an array. Similar to find, it ends at the first element that meets the requirement. Thus, it will never return anything other than the index of the first element that passes the test.
let x =[22,45,17,81,23,15,93,54,36,75];
let y = x.findIndex(z => z>70);
console.log(y)
output: 3
Here, the condition satisfies the 4th element in the array. Its index is 3 as indexing starts from0.
That's It for now
you have now learned some most used array methods in javascript. They are all similar to miner distinguishes. Once you understand the significance, you will know where and how to use them.
Before you leave
If you like the content, please follow my social hangouts for exciting discussions.
That's it all, folks... Keep Learning & Keep Sharing !!!
Cheers
