Understanding array methods better in JS
As I first began gaining experience with JavaScript, I was fascinated with being able to manipulate data. Starting with one set, applying a method or function, and then ending up with whatever set of desired data sounded almost too good to be true. However, once I started trying to apply some of these methods in my own code, I started to realize the TYPE of data I was trying to manipulate played a large role in the type of method used.
If the data was an ARRAY which is data surrounded by brackets[], methods like map(), filter(), sort(), forEach(), etc.. work.
Map() was especially confusing to me, and took longer than the other methods to grasp. Map() is a method that creates a brand new array with the results of calling a provided function on every element in the array.
An example of map being used:
const arr = [1, 2, 3, 4];
const mapped = arr.map(element => element *2);
console.log(mapped); // [2, 4, 6, 8]
Another good example I found on W3’s school website (https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_map) that really helped me was:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get the square root of each element in the array.</p>
<button onclick=”myFunction()”>Try it</button>
<p id=”demo”></p>
<script>
var numbers = [4, 9, 16, 25];
function myFunction() {
x = document.getElementById(“demo”)
x.innerHTML = numbers.map(Math.sqrt);
}
</script>
</body>
</html>
//2, 3, 4, 5
Not only did this example show me how to correctly utilize the .map() method, but it also gave me a quick review how to create a button in HTML and add the event listener “onclick” to initialize the .map() method.
Despite .map being the first method I noticed that gave me trouble, by researching ‘array methods’ on W3’s school website, I was able to expose and try to familiarize myself with other methods that are available to use.
Another example of an array method that is useful in certain situations is the forEach() method. Similar to map(), in that forEach()is a function that is iterating over an existing array, changing the values. The difference between the two, which is important to note, is that .map() creates a new array. This is useful when trying to manipulate a new array, and wanting to keep the initial array the same.
The .filter() method is also an interesting method to take note of, as it creates a new array with array elements that pass a test. Similar to the .map() method, I did some extra research on .filter() and found some great code on W3’s school website.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get every element in the array that has a value of 18 or more.</p>
<button onclick=”myFunction()”>Try it</button>
<p id=”demo”></p>
<script>
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById(“demo”).innerHTML = ages.filter(checkAdult);
}
</script>
</body>
</html>
//32, 33, 40
Once again, not only is this a good review in HTML, but also showing how to return only certain ages from the ages array(in this case over or equal to 18) and place them in a new array.
Finally, the array method splice() is also extremely useful when trying to add or remove elements from an array. An example of using the splice() method to add elements is:
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.splice(2, 2, “Lemon”, “Kiwi”);
/// New Array:
Banana,Orange,Lemon,Kiwi.
The method splice() is non-destructive, as it creates a new array rather than affecting the original.
If someone wanted a destructive array method, they would be looking for the slice() method, as it, rather than creating a new array like splice(), affects the original array. An example of the slice() method is:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>slice()</h2>
<p>This example slices out a part of an array starting from array element 1 (“Orange”):</p>
<p id=”demo”></p>
<script>
var fruits = [“Banana”, “Orange”, “Lemon”, “Apple”, “Mango”];
var citrus = fruits.slice(1);
document.getElementById(“demo”).innerHTML = fruits + “<br><br>” + citrus;
</script>
</body>
</html>
/// Orange,Lemon,Apple,Mango
After doing enough poking around on the W3 website on array methods, I was able to get the necessary review needed to touch up. The examples with arrays like map(), filter(), sort(), forEach(), slice, and splice() were able to not only reiterate the basics of the methods, but also touch up on slight HTML and event listeners. Putting all the elements together so I could really see them all at work was extremely helpful. If any other students are having trouble with array or string methods, I would highly recommend the W3 school website or Mozilla.