Learned About Array Methods from #JavaScript30…

During the summer, I was part of the Shenomads JavaScript Study group, where, I learned about vanilla JavaScript. This included reading Jon Duckett’s JavaScript and JQuery book, and taking Wes Bos’s JavaScript30 course.

Although we only covered 4 lessons which included Array Methods. I enjoyed those lessons, so much that I completed the entire 30 days of lessons. Below I wanted to share some of the methods that I learned in JavaScript30 course.

Array Methods

Filter

.filter() will return elements of an array that match a conditional. You have to return true inside of the conditional to get that array element to be part of the filtered array:

array.filter(function(x) {
  if(x something) {
    return true;
  });

Or in a more tangible example: things.filter(thing => thing.name.includes('Karuna')). Will return a list of things whose name includes 'Karuna'.

Map

.map() takes in each element of the array, does something to it, then returns an array with the same number of elements as the input array.

array.map(x => x*2);

By the way, this is an “implicit” return — we do not have a return statement, but simply return the only line in the function (this is ES6 notation).

Sort

.sort() can be called simply on a array of numbers to put them lowest to highest (and you could use .reverse() to get them in the reverse order). But you can also sort by whatever method you like on more complicated objects.

array.sort(function(x, y) {
  if(x < y) {
    return 1
  }
});

Where x is the first element we are looking at and y the next. Return 1 if you want to move the element “up” and -1 if you want to move it “down”.

Reduce

For whatever reason, .reduce() is the hardest to understand of this bunch but has the easiest implementation:

array.reduce(function(total, x) {
    return total + x
}, 0);

In the above function you are simply adding up all the numbers in an array (assumed to contain only numbers) and returning that sum. 0 is the starting value for the function.

Splice

splice(0, 1) will remove the first element in an array. splice(-1, 1) will remove the last. splice(0, 5) will remove the first five elements.

Some & Every

.some() will loop through until a condition is met, then return true or false. .every() works the same way, but only returns true if all elements in the array meet the condition.

Find & FindIndex

.find() returns the first item in the array that meets the condition.

.findIndex() returns the index of the item that meets the condition.

I created index cards of these methods as well, which helps me keep track of them and has improved my confidence as well when it comes to answering JavaScript questions in technical interviews.

I highly recommend checking out #JavaScript30. Feel free to check out my code and notes here. Happy Coding!