Complete disarray
Tags: Front End Development, Array Methods, Web Development, JavaScript, Arrays

Trying to understand JavaScript array methods

Photo by Melanie Pongratz on Unsplash

An array is a data structure which can store multiple variables. Let’s just say it works like a file drawer. There is an amplitude of array methods, of which I will cover seven.

As a heads up, none of the methods covered in this article modify the original array.

The following array will be used for all examples:

const theArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Original array

You can access values in the array by using indices. Indices start from 0, so theArray[0] == 1.

map() returns a new array

map() returns a new array created from the results returned from the provided function.

Let’s create a function that multiplies the provided value by 5.

const multiply = val => val * 5; // OR const multiply = function(val) {

return val * 5;

}

And now we invoke map() on our array.

theArray.map(multiply);

This is what happens (sort of).

function(theArray) {



let newArray = Array(10); // new array with the same size



newArray[0] = theArray[0].multiply();

newArray[1] = theArray[1].multiply();

newArray[2] = theArray[2].multiply();

newArray[3] = theArray[3].multiply();

newArray[4] = theArray[4].multiply();

newArray[5] = theArray[5].multiply();

newArray[6] = theArray[6].multiply();

newArray[7] = theArray[7].multiply();

newArray[8] = theArray[8].multiply();

newArray[9] = theArray[9].multiply();



return newArray;

}

Let’s store the returned array in a new object.

const mappedArray = theArray.map(multiply); mappedArray; // (10) [ 5, 10, 15, 20, 25, 30, 35, 40, 45, 50 ]

// the first number (10) indicates the size of the

// array

filter() returns a new array

filter() returns a new array consisting of all values that return true from the invoked function.

Let’s create a test.

const isBiggerThan5 = val => val > 5; // Returns true if bigger than

// 5.

And then we create a new array.

const filteredArray = theArray.filter(isBiggerThan5); filteredArray; // (5) [ 6, 7, 8, 9, 10 ]

some() and every() return a boolean

some() returns true if at least one value returns true from the invoked function, and every() only returns true if all values return true from the invoked function.

Let’s create the functions.

const someTest = val => val > 5; // Same as isBiggerThan5()

const everyTest = val => val > 5; // Also the same.

Without further ado, let’s invoke the functions.

theArray.some(someTest); // true, some values are bigger than 5. theArray.every(everyTest); // false, not all values are > 5.

reduce() returns a value

reduce() returns the total produced by the invoked function. For every time the function is invoked, the return value is added to the total.

Here is our reducer.

const reduceTest = (total, val) => val + total;

And here we go.

theArray.reduce(reduceTest); // 55 (1+2+3+4+5+6+7+8+9+10)

These are all the function invocations.

reduceTest(0, 1); // Starting total is 0, returns 1

reduceTest(1, 2); // Returns 3

reduceTest(3, 3); // Returns 6

reduceTest(6, 4); // Returns 10

reduceTest(10, 5); // Returns 15

reduceTest(15, 6); // Returns 21

reduceTest(21, 7); // Returns 28

reduceTest(28, 8); // Returns 36

reduceTest(36, 9); // Returns 45

reduceTest(45, 20); // Returns 55

It is also possible to set the initial total value.

theArray.reduce(reduceTest, 50); // 105 (50+1+2+3+4+5+6+7+8+9+10)

toString() and join()

These methods return a string made from the array. toString() returns a comma separated string whereas join() let’s you choose the separator.

theArray.toString(); // 1,2,3,4,5,6,7,8,9,10

theArray.join(" < "); // 1 < 2 < 3 < 4 < 5 < 6 < 7 < 8 < 9 < 10

The end

You made it all the way through! Great job! I hope you enjoyed it, and that you’ve got a better understanding of these seven array methods.

As a final word, I’d like to mention that all these methods can be chained together (not all at once…):