Crash Course
A mini guide on JavaScript array iterators
JavaScript Iterators can be a difficult bunch and as such need to be handled with care. However, when you understand them and care for them they become some of the best tools in your programing belt. Iterators are often used on arrays to process each element in the array and can returns a result once it has fully ran its course. Iterators often expect a function as its argument, for simplicity i will demonstrate with arrow functions.
It’s important to keep in mind that each Iteration has its own set of rules and regulations, and results may vary.
.find()
The find function will check each element in the given array with information that is given inside the brackets. The find function however is lazy and will stop when it finds the first element the meets the given condition.[element1, element2, element3].find()will return to you that element without mutating that original array.
let wizArray = ["Harry", "Ron", "Hermione"]wizArray.find( strongWizard => {
//conditional function to check against each element
// "Harry".length > 3?
// this is true 'I'm done!'return strongWizard.length > 3
//this is returning the element the meets the criteria notice if it finds one thats where it stops
} )// this will return: Harry console.log(wizArray)
// this will log: ["Harry", "Ron", "Hermione"]
.filter()
Don’t be fooled the filter function may look similar to the find function, yet it yields different results. .filter() will go the extra mile and continue to check every element in your array against your given condition. For every element that evaluates to true it will will return that element in a new array.
let wizArray = ["Harry", "Ron", "Hermione"]let newWizArray = wizArray.filter( strongWizard => {
//conditional function to check against each element// "Harry".length > 3?
// "Ron".length > 3?
// "Hermione".length > 3?return strongWizard.length > 3
// this is returning every element that meets the criteria })//this will return: ["Harry", "Hermione"]
console.log(wizArray)
// logs: ["Harry", "Ron", "Hermione"]console.log(newWizArray)
// logs: ["Harry", "Hermione"]
.map()
Now for my recent favorite, the map function. This little hero will grab each element in an array and process it by the callback function you give it. .map() will make a copy of the element, do the action described in your function and return to you a new array with the effected elements.
Want to read this story later? Save it in Journal.
let wizArray = ["Harry", "Ron", "Hermione"]wizArray.map( wizard => {
//(remember param here is wizard will reference the element in the array)
return wizard + " wand at the ready!"
})//returns: ["Harry wand at the ready!", "Ron wand at the ready!", "Hermione wand at the ready!"]console.log(wizArray) // logs: ["Harry", "Ron", "Hermione"]
but wait theres more…
let wizArray = ["Harry", "Ron", "Hermione"]wizArray.map( wizard => {
//(remember wizard is just the element in the array)
if(wizard.length === 3){
return wizard + " Weasley"
}
return wizard
})//returns: ["Harry", "Ron Weasley", "Hermione"]console.log(wizArray) // logs: ["Harry", "Ron", "Hermione"]
If you only want to change one element in your array but keep the rest, no problem. Set up a condition in your .map() for the element you want to alter change it and return it. In your else statement make sure to return the param. Essentially what you are telling the your map function to do is:
if the element meets the condition
this will allow .map() to continue to do it for the rest of the elements, if you don’t want it to change/update any of the other elements just return that element and BAM you have a new array with an updated element.
.sort()
The .sort() function acts on the original array, and will mutate your original array. The .sort() function acts on an array and accepts a callback function , other wise known as the comparator function, as an argument. Under the hood what sort() does is by comparing their UTF-16 character code. This code is essentially a value that is assigned to each symbol/letter. For example the letter b is assigned the value of 96, and the value of “P” is given 80, you can test this out using "yourstring".charCodeAt() . The CharCodes is what .sort() organizes by.
const letters = ["b","P","a"]letters[0].charCodeAt() // returns: 98
letters[1].charCodeAt() // returns: 80
letters[2].charCodeAt() // returns: 97
The comparator function also allows us to sort numbers, and even objects more effectively. The comparator function often accepts 2 arguments.
const comparatorFunction = (a,b) => {
// a represents the first element in your array, while be represents the next element//this will have the sort function sort by the size of the result
return a - b
}
// if the a - b returns to you a negative number, "b" is greater than "a". the result of the sort will place "a" first.
the comparison is then done to the rest of the elements
Lets see in an object.
let wizInfo = [
{ name:"Harry", age: 15},
{ name:"Ron", age:16},
{ name:"Hermione", age:14}
]//if you want to sort by the length of the namewizInfo.sort((a, b) => {
//length returns to you the length of the string
return a.name.length - b.name.length
})//returns: [
{ name:"Ron", age:16},
{ name:"Harry", age: 15},
{ name:"Hermione", age:14}
]
If you set up the comparator function to a — b then if it returns a negative number it will be returned first setting up the array to be in ascending order. Other wise if you have the comparator function to b-a it will set up the array in descending order.
More from Journal
There are many Black creators doing incredible work in Tech. This collection of resources shines a light on some of us:
