In this article, we’ll have a look at quite a few JavaScript quirks.

Image by CodingExercises

## Using the `delete` method on an array member

If you use the `delete` method on an array member, this doesn’t erase the value, it just replaces it with `undefined`:

``````var arr = ['one','two','three','four'];
delete arr[0];
console.log(arr); // returns: [undefined, 'two', 'three', 'four']
``````

## Does a value exist in an array?

We check using the `indexOf` method:

``````var arr = ['one','two','three','four'];
arr.indexOf('five'); // returns: -1
arr.indexOf('four'); // returns: 3
``````

When it returns `-1`, it means it can’t find the specified member in the array.

Alternatively, the `includes` method returns `true` if a matching member is found, and `false` otherwise:

``````['one','two','three','four'].includes('one'); // returns: true
['one','two','three','four'].includes('five'); // returns: false
``````

You can pass another argument to `includes` to specify which member of array to start to search from:

``````['one','two','three','four'].includes('two', 1); // returns: true
['one','two','three','four'].includes('two', 2); // returns: false
``````

## Use Array.length to find the last member of array

Since Array.length counts an array from 1, and arrays are zero-indexed, it’s easy to get the last member of an array:

``````arr[arr.length - 1]; // returns: "four"
``````

## Use Array.length to quickly trim an array

You can change the length of an array on the fly, using Array.length property, like this:

``````arr.length = 2;
console.log(arr); // returns: [undefined, "two"];
``````

## Manipulating arrays with pop

The `pop()` method is used to remove an item from an array. For example, on Google search results, we can get the all the h3 search results’ headings into an array like this:

``````var arr = [...document.getElementsByTagName('h3')];
arr.length;
arr.pop();
``````

On the second row in the above code, we check the length of the array.

On the third row, we removed a member that was placed in the last position of `arr` array.

On the fourth row in the above code, we check the length of the array again - now its’ length is smaller by one.

## Manipulating arrays with push

The `push` method is the opposite of `pop`:

``````var arr = [];
arr.push('one');
arr.pop;
``````

## Manipulating arrays with shift

The `shift` method is like `pop`, only it removes items from the start, not the end:

``````var arr = ['one','two','three','four'];
arr.shift();
arr; // returns: ['two','three','four']
``````

## Manipulating arrays with unshift

The `unshift` method is like `push`, only it adds items from the start, not the end:

``````var arr = ['one','two','three','four'];
arr.shift();
arr.unshift('one');
arr; // returns: ['one','two','three','four']
``````

## Manipulating arrays with Array.slice and Array.splice

The `slice` method returns a specified slice of the source array.

For example, we want to extract only the last two items from the below array:

``````var arr = ['one','two','three','four'];
arr.slice(2,3); // returns: ['three']
arr.slice(2); // returns: ['tree','four']
arr.slice(2,4); // returns: ['tree','four']
``````

The Array.slice method is non-destructive.

The `splice` method does two things:

1. It removes specified items from an array
2. It optionally puts new items in the removed slots

An example of removing the first entry in an array:

``````var arr = ['one', 'two', 'three', 'four'];
arr.splice(0,1); // returns: ['one']
arr; // returns: ['two','three','four']
``````

The first argument to the `splice` method specifies where to start splicing. The second argument specifies how many items to splice. The remaining arguments represent the optionaly new items to add in the place of removed slots.

Note that `slice` is non-destructive, and `splice` is destructive.

## Destructuring Arrays

We can group multiple values in an array.

``````var one = 'one';
var two = 'two';
var three = 'three';
var four = 'four';
``````

…we can write:

``````var arr = ['one','two','three','four'];
``````

But what if we want to go the other way round? To take members of array and make each of them individual variables?

That’s where array destructuring comes in:

``````var [one,two,three,four] = arr;
``````

Now the variables are available individually:

``````console.log(one); // returns: "one"
``````

You can also skip values, like this:

``````var [_1, , ,_4] = arr;
_1; // returns: "one"
_2; // returns: Uncaught ReferenceError: _2 is not defined at <anonymous>:1:1
_4; // returns: "four"
``````

You can use the rest operator, `...`, to get back a sub-array:

``````var [_one, ...others] = arr;
console.log(_one); // returns: "one"
console.log(others); // returns: ['two','three','four']
``````

## Concat two arrays together

Let’s say we’ve got these two arrays:

``````var arr1 = ['one'];
var arr2 = ['two'];
``````

We can combine them like this:

``````arr1.concat(arr2); // returns: ['one','two']
``````

…but if we do this:

``````arr1; // returns: ['one']
``````

Obviously, the `concat` method doesn’t update `arr1`. It’s an easy enough fix though:

``````arr1 = arr1.concat(arr2);
``````

We can also concat two arrays using the spread operator `...`, like this:

``````var _arr1 = ['one','two'];
var _arr2 = ['three','four'];
var _arr1 = [ ..._arr1, ..._arr2 ];
_arr1; // returns: ['one','two','three','four']
``````

## Convert an array to a string

We can do this with the help of the `join` method.

``````var arr = ['one','two','three','four'];
arr.join(); // returns: "one,two,three,four"
``````

If you’re a musician, you might wanna return this:

``````arr.join(' and '); // returns: "one and two and three and four"
``````

## Flipping the order of items in an array

The destructive `reverse` method makes this possible:

``````var arr = ['one','two','three','four'];
arr.reverse(); // returns: ['four','three','two','one']
``````

## Sorting arrays with Array.sort

It’s simple:

``````var arr = ['one','two','three','four'];
arr.sort(); // returns: ['four','one','three','two']
``````

It’s also a destructive method.

There can be some unexpected behavior: capital letters are sorted before small letters:

``````var arr = ['one','One','two','Two'];
arr.sort(); // returns: ['One','Two','one','two']
``````

Additionally, numbers are sorted based on the first digit in each item:

``````[300,20,1].sort(); // returns: [1,20,300]
[100,20,3].sort(); // returns: [100,20,3]
``````

Thus, the `sort` method, out of the box, is probably not the best tool to use.

However, it can still be used in certain situations, as long as we’re aware of its limitations. Sometimes, that simply means that we need to overcome the limitations of the sort function, by passing it a callback function to deal with the fact that it doesn’t sort numbers the way we’d expect.

How do we “fix” the sort function? We’ll start off with defining a new function declaration that we’ll call `compareNums`:

``````function compareNums(nextNum, prevNum) {
return nextNum - prevNum;
}
``````

The `compareNums` method compares two numbers:

• if the `nextNum` number is larger than the `prevNum`, it returns a positive value
• if the `nextNum` number is the same as the `prevNum`, it returns a `0`
• if the `nextNum` number is smaller than the `prevNum`, it returns a negative value

Next, we’ll pass the `compareNums` function as a callback to the `sort` function, like this:

``````[100,20,3].sort(compareNums); // returns: [3,20,100]
``````

To see the inner workings of our little sorting program, we can re-write it like this:

``````debugger;
function compareNums(next, previous) {
console.log(`\${next} - \${previous}`);
return next - previous
}
[100,20,3].sort(compareNums);
``````

Running the above code will return the same result as the previous one, except this time we’ll also see some output in the console:

``````20 - 100
3 - 20
``````

Now we can think things through a bit better. The `sort` method runs the `compareNums` function. The first time it’s run, it looks like this:

``````compareNums(20, 100) {
console.log(20 - 100);
return 20 - 100
}
``````

So, it returns `-80`. The next time it’s run, it looks like this:

``````compareNums(3, 20) {
console.log(3 - 20);
return 3 - 20
}
``````

So, it returns `-17`.

The final output that’s returned from running all of the above code is:

``````[3,20,100]
``````

It’s important to note that both times the `compareNums` was ran, we got back negative numbers: the first time around, it was `-80`, the next time around, it was `-17`. The point is, both times it was ran, the returned result was a negative number.

Why does this work?

If we look at the definition of the sort function, we’ll find that it reads like this:

``````arr.sort([compareFunction])
``````

The compare function is entirely optional. If we don’t provide it to the sort function, each member of the array will be coerced to string, then sorted. However, if we do provide the callback function, we need to give our callback function two params (in our example, the `nextNum` and the `prevNum`).

The way that the numbers are compared, works like this:

1. If `nextNum` minus `previousNum` returns less than zero, the `nextNum` comes first
2. If the result returned is zero, both numbers are not moved in respect to one another, but they are moved in relation to all other elements.
3. If `nextNum` minus `previousNum` returns more than zero, the `nextNum` comes second

Now we can improve our `compareNums` function, like this:

``````function compareNums(next, previous) {
if (next < previous) {
console.log(`\${next} is less than \${previous}, so \${next} comes first`);
return -1
}
if (next > previous) {
console.log(`\${next} is greater than \${previous}, so \${next} comes second`);
return 1
}
console.log(`\${next} is equal to \${previous} so we are not moving them`);
return 0;
}
[100,20,3].sort(compareNums);
``````

One additional thing to note: The array is sorted in place - meaning, it uses no auxiliary data structure. Also, the `sort` method doesn’t make a copy of the array it’s working on.

Next, we’ll see an example of solving a simple problem with arrays and some array methods, including `sort`.

## Exercise: Sort a todo list

Let’s say you have the following text in a txt file:

``````1. take out trash
3. learn js
2. go shopping
5. have some rest
4. watch a movie
``````

How do you organize the above text using JavaScript, so that it’s ordered by numbers?

Here’s the solution.

``````var todos = `1. take out trash
3. learn js
2. go shopping
5. have some rest
4. watch a movie`;
``````

Next, we replace the newline characters with a character that doesn’t exist in the string, then we split the string using the “weird” character.

``````todos = todos.replace( /\n/g, "|" ).split( "|" )
``````

Next, we’ll use sort:

``````todos = todos.sort();
``````

That’s it, we get the result we wanted:

``````["1. take out trash", "2. go shopping", "3. learn js", "4. watch a movie", "5. have some rest"]
``````

## Additional Exercise: Reverse the order of array

To make the order of todos descend rather than ascend, we can use the `reverse` method:

``````todos = todos.reverse()
// returns: (5) ["5. have some rest", "4. watch a movie", "3. learn js", "2. go shopping", "1. take out trash"]
``````

We can revert the array back to string:

``````todos = todos.join(",")
// "4. watch a movie,5. have some rest,2. go shopping,3. learn js,1. take out trash"
``````

And now we can add a space after the `,` character:

``````todos.replace(",", ", ")
// returns: "5. have some rest, 4. watch a movie,3. learn js,2. go shopping,1. take out trash"
``````

## Looping over arrays

We can loop over arrays in a various number of ways.

I’ve collected 15 ways to do it, divided into two categories:

1. “Traditional” methods of looping over arrays in JS
2. Functional methods of looping over arrays in JS

Here’s the list of traditional methods we can use to iterate over arrays in JS:

1. `for` loop
2. optimized `for` loop
3. `for-of` loop
4. `for-in` loop - possible, but undesireable, because of quirks - basically, the issue is that prototype member variables are iterated over in the `for in` loop along with our array members
5. `while` loop
6. `do while` loop

Of these 6 looping methods above, the ones that are most commonly used are probably `for` and `for-of`.

There are also a number of functional methods for looping over arrays in JS. These methods exist on the `Array.prototype`, and include:

1. `Array.prototype.forEach`
2. `Array.prototype.filter`
3. `Array.prototype.filter` followed by `Array.prototype.each` so as to avoid the problem of not being able to `break` or `continue`
4. `Array.prototype.map`
5. `Array.prototype.reduce`
6. `Array.prototype.some`
7. `Array.prototype.every`
8. `Array.prototype.includes`
9. `Array.prototype.find`
10. `Array.prototype.sort`

Now that we have a list of all the different ways of looping over arrays, let’s see an example in which we’ll loop over the exact same array, using all of these methods.

The array we’ll be looping over loops like this:

``````let people = [
{ name: "John", age: 30, heightCm: 190, kilos: 110, salary: 5000, gender: "male" },
{ name: "Jane", age: 20, heightCm: 170, kilos: 65, salary: 8000, gender: "female" },
{ name: "Jack", age: 55, heightCm: 180, kilos: 75, salary: 4000, gender: "male" },
{ name: "Jill", age: 80, heightCm: 160, kilos: 50, salary: "", gender: "female" },
{ name: "James", age: 15, heightCm: 189, kilos: 77, salary: "", gender: "male" },
{ name: "Joanna", age: 15, heightCm: 168, kilos: 58, salary: "", gender: "female" },
{ name: "Bob", age: 50, heightCm: 170, kilos: 60, salary: 5000, gender: "male" },
]
``````

Now that we have the array, let’s loop over it.

### 1. Using the `for` loop

``````for(let i = 0; i < people.length; i++) {
console.log(`\${people[i].name} is \${people[i].age} and weighs \${people[i].kilos} kilograms.`)
}
``````

The `for` loop is pretty straightforward, we loop over each member of the array and print out a message to the console based on the current “row” of data.

But, what about ordering our characters by age, for example? Here it is:

``````for(let i = 0; i < arr.length; i++) {
// ??? what to put here ???
}
``````

It seems kind of difficult to wrap our heads around how to go on about this if we haven’t seen it done before. The trick is in using a nested for loop.

``````for(let i = 0; i < people.length; i++) {
for(let j = 0; j < people.length; j++) {
if(people[i].age > people[j].age) {
let originalValue = people[i]; // store the original position in array so we can swap it
people[i] = people[j]; // move up the original position in array
people[j] = originalValue; // set to original Value (complete the swap)
}
}
}
``````

It would be interesting to also turn on the debugger so as to inspect what happens in the inner `for` loop on each iteration:

``````for(let i = 0; i < people.length; i++) {
for(let j = 0; j < people.length; j++) {
if(people[i].age > people[j].age) {
let originalValue = people[i]; // store the original position in array so we can swap it
people[i] = people[j]; // move up the original position in array
people[j] = originalValue; // set to original Value (complete the swap)
}
}
}
``````

Another quick tip: our loop is now ordering the array from oldest to youngest. If we wanted to order it from youngest to oldest, we’d change just one line:

``````if(people[i].age < people[j].age) {
``````

We’ve simply changed the original greater than operator (i.e `>`), to the less than operator (i.e `<`).

### 2. Using the “optimized” `for` loop

The trick with the “optimized” for loop is simply the fact that we’re “caching” the array length, thus making the execution of the `for` loop a bit faster:

``````for(let i = 0, arrLength = people.length; i < arrLength; i++){
// etc.
}
``````

Everything else is the same as in the original `for` loop example.

### 3. Looping over a JS array with `for-of`

ES6 introduced iterables to the JavaScript language. Along came a new flavor of the `for` loop, the `for-of`.

Any iterable object and any generator can be looped over using `for-of` as follows:

``````for (const person of people) {
console.log(`\${person.name} is \${person.age} and weighs \${person.kilos} kilograms.`)
}
``````

### 4. Don’t loop over a JS array with `for-in`

It is possible to loop over a JS array with `for-in`. However, this should never be done.

There are two problems with looping over a JS array with `for-in`:

1. It enumerates through all the properties; including those associated to the Object (even properties added onto the Object by the user)
2. The order of elements is not neccessarily followed

While the second problem is not a major turn-off, the first problem is really a deal-breaker. Here’s why:

``````Object.prototype.myAddition = "whatever";

for (const person in people) {
console.log( people[person] )
}
``````

The output? It included “whatever”:

``````{ name: "John", age: 30 ...}
{ name: "Jane", age: 20 ...}
{ name: "Jack", age: 55 ...}
{ name: "Jill", age: 80 ...}
{ name: "James", age: 15 ...}
{ name: "Joanna", age: 15 ...}
{ name: "Bob", age: 50 ...}
whatever
``````

The `people` temporary variable of our `for-in` loop is actually same as the usual `i` “iterator variable” in a regular `for` loop. Here’s the proof:

``````Object.prototype.myAddition = "whatever";

for (const person in people) {
console.log( person )
}
``````

What do you think the above code will output? It will actually output numbers from 0 to 6, for all the members of the `people` array. Additionally, it will also print out `myAddition`, the name of the property we added to `Object.prototype`.

### 5. Looping over a JS array with the `while` loop

The `while` loop is very similar to a `for` loop. Here’s how it works with our example.

``````let count = 0;
while(person = people[count++]) {
console.log(`\${person.name} is \${person.age} and weighs \${person.kilos} kilograms.`)
}

// alternative approach:
let count = 0;
while (people.length > count) {
console.log(`\${people[count].name} is \${people[count].age} and weighs \${people[count].kilos} kilograms.`);
count++;
}
``````

### 6. Looping over a JS array with the `do while` loop

The `do while` loop is almost identical to the while loop. The difference here is that it will always run at least once, contrary to the `while` loop for which it is possible not to be run at all under some conditions.

``````let count = 0;
do {
console.log(`\${person.name} is \${person.age} and weighs \${person.kilos} kilograms.`);
count++;
}
while(person = people[count++]);

// alternative approach
let count = 0;
do {
console.log(`\${people[count].name} is \${people[count].age} and weighs \${people[count].kilos} kilograms.`);
count++;
}
while(people.length > count);
``````

It’s common to use `i` or `key` instead of `count`. Whatever works for you, that’s what you should use.

## Functional approach to looping over arrays in JS

The functional approach to looping over arrays in JS involves different methods on the `Array.prototype`: `forEach`, `each`, `filter`, `map`, `reduce`, `some`, `sort`, and `find`. We’ll discuss examples of each one of them in use, next.

### 7. Looping over arrays in JS with `forEach`

The `forEach` method runs over each member of the array and runs a function we pass as an argument of the `forEach`.

Simple example:

``````['one', 'two', 'three'].forEach( function(memberInArray) {
console.log(memberInArray);
});
``````

The above code outputs:

``````one
two
three
``````

Very often, the `forEach` method’s argument is passed in as an ES6 function. Here’s the above example again, only this time with the arrow function instead of an ES5 function above:

``````['one', 'two', 'three'].forEach( memberInArray => console.log(memberInArray) );
``````

The resulting output is the same.

Now we can try the `forEach` on our `people` array:

``````people.forEach( person => {
console.log(`\${person.name} is \${person.age} and weighs \${person.kilos} kilograms.`)
})
``````

The `forEach` actually takes more than just one argument in the callback function (i.e the anonymous function that’s passed to it as an argument). Here’s the list of arguments that the `forEach` callback can accept:

1. current member of array that’s being iterated over ( `person` in the above example )
2. the index of the currently looped over member of array (usually an `i` or an `index`)
3. the array itself - i.e. the array that the `forEach` is used on ( `people` in the above example )
4. the `thisArg` - the value of `this` when executing the callback ( we’re not gonna discuss it here )

Ok, so out of the 4 possible arguments passed to the `forEach` callback function, we’re going to discuss how to use 3.

So why would we need an index (the second variable)? Here’s one possible reason:

``````people.forEach( (person, index) => {
console.log(`\${index}. \${person.name} is \${person.age} and weighs \${person.kilos} kilograms.`);
})
``````

Doing this would log out the following in the console:

``````0. John is 30 and weighs 110 kilograms
1. Jane is 20 and weighs 65 kilograms.
2. Jack is 55 and weighs 75 kilograms.
3. Jill is 80 and weighs 50 kilograms.
4. James is 15 and weighs 77 kilograms.
5. Joanna is 15 and weighs 58 kilograms.
6. Bob is 50 and weighs 60 kilograms.
``````

So this is an easy way to add a count on the output.

But why in the world would we need to give to the array that we’re looping over with forEach, the array itself?

Initially, it might seem strange, but actually there are completely valid scenarios for this. For example, if we use a named function as the callback of our `forEach`:

``````let namedFn = function(item, index, arr) {
console.log(`\${index}. \${item.name} is \${item.age} and weighs \${item.kilos} kilograms.`);
}
``````

Now we can pass the named function as a callback to our `forEach`:

``````people.forEach( namedFn );
``````

A nice thing about this approach is that you can now use this `namedFn` as the callback on any array. For example:

``````let people2 = [
{ name: "Michael Jordan", age: 55, kilos: 90  },
{ name: "Luka Doncic", age: 20, kilos: 85 }
]

people2.forEach( namedFn );
``````

Now we’d get back:

``````0. Michael Jordan is 55 and weighs 90 kilograms.
1. Luka Doncic is 20 and weighs 85 kilograms.
``````

And if we ran it on our initial `people` array, we’d get back the output for the different array, using almost the same syntax.

### 8. Looping over arrays in JS with `Array.prototype.filter`

The `filter` runs a test on a given array:

``````people.filter( eachPerson => eachPerson.age > 50 );
``````

In the above example, we’re running the `filter` method on `eachPerson` in the `people` array. The test we’re running on `eachPerson` is whether their `age` is over `50`.

This is the result running the filter on our `people` array:

``````{name: "Jack", age: 55, heightCm: 180 ...}
{name: "Jill", age: 80, heightCm: 160 ...}
``````

Now comes the fun part, combining the `filter` and `forEach` method to get the same result as using `break` to stop iterating over the regular `for` loop.

## 9. Using `Array.prototype.filter` followed by `Array.prototype.forEach`

To understand this approach, we first need to look at when and how we need to use `break` in a plain `for` loop in JavaScript.

``````(function myFunction() {
var text = ""
var i;
for (i = Math.floor(Math.random() *100); i < 100; i++) {
if (i < 75) {
break;
}
text += "The number is " + i + "<br>";
}
document.body.innerHTML = "";
document.body.innerHTML = text;
})()
``````

The above function is just a simple IIFE (immediately-invoked function expression) - a function that gets defined and called in one fell swoop.

The function sets the value of the `i` variable in the for loop to a random integer, whose value is any number between 0 and 100.

The if condition checks if the random value of `i` is less then 75, and if it is, we simply break out of the loop. This means that the line following the if statement will only be run if the random value of `i` is set to any number between 75 and 100.

This simple example shows when we’d use `break`. There’s another keyword: `continue`. The `continue` keyword can be thought of as a “soft break”. It doesn’t actually break out of the loop, but rather skips the current iteration of the loop and moves on to the next one:

``````(function myFunction() {
var text = ""
var i;
for (i = Math.floor(Math.random() *100); i < 100; i++) {
if (i < 75) {
continue;
}
text += "The number is " + i + "<br>";
}
document.body.innerHTML = "";
document.body.innerHTML = text;
})()
``````

What the above code does is: for any number under 75, the current iteration will be skipped; in other words, if the random value of `i` is any number under 75, all the numbers between 75 and 100 will always be printed. This is in contrast to the `break` keyword, which would completely stop the for loop, i.e break out of it entirely.

Now that we understand the dynamics of `break` and `continue`, let’s run a regular, iterative `for` loop on our `people` array:

``````console.log("Here's the list of skinny people:")
for(let i = 0; i < people.length; i++) {
if ( people[i].kilos > 70 ) {
continue;
}
console.log(`
\${people[i].name} is \${people[i].age} and weighs \${people[i].kilos} kgs.
`)
}
``````

The output is as follows:

``````Jane is 20 and weighs 65 kilograms.
Jill is 80 and weighs 50 kilograms.
Joanna is 15 and weighs 58 kilograms.
Bob is 50 and weighs 60 kilograms.
``````

If we used the `break` keyword on the exact same code above, we’d get no results back. Why? Because we’d break out of the `for` loop entirely, as soon as we’d run the `if` statement on the first person, `John`. Since we’re running `break` for any person that’s over 70 kilos of weight, as soon as we hit that condition, we break out of the loop.

This leads us to the conclusion that in cases when we have an array like our `people` array, it makes more sense to use the `continue` keyword in an `if` statement inside a `for` loop.

Now that we’ve understood just what the `break` and `continue` keywords do in `for` loops, we need to be able to know how to get the same results using the functional approach. It’s a two step process.

First, we `filter` the array. This serves the same purpose that the `continue` keyword does, skipping over array members that meet certain criteria.

Next, we run the “functional for loop” - the `forEach`, on remaining array members, i.e on array members that pass the filter.

With `filter`, we produce a whole new array, leaving the original array intact.

So:

``````people.filter(person => person.age > 50)
.forEach(person => `\${person.name} is over 50 years of age.` )
``````

Of course, we also need to bind a variable name to the new array this produces:

``````let over50 = people.filter(person => person.age > 50)
.forEach(person => console.log(`
\${person.name} is over 50 years of age.
`)
)
``````

### 10. Using `Array.prototype.map`

Similar to `filter`, the `map` method produces a new array from the existing array.

A trivial example of the `map` would be running some kind of mathematical operation on an array of numbers. For our example, let’s say that we need to format all the objects in the `people` array a bit differently. Would we ever need to do that in practice? Of course! Maybe we get back some weird JSON data from an API, and we need to arrange the objects so it can be consumed in our frontend.

Here’s how we could reformat array objects using the `map` method:

``````let reformattedPeople = people.map(obj => {
let returnedObj = {};
returnedObj[obj.name] = obj.age;
return returnedObj;
})
``````

The above code will use the existing 7 objects in the `people` array, to produce the following 7 objects in the `reformattedPeople` array:

``````[
{John: 30},
{Jane: 20},
{Jack: 55},
{Jill: 80},
{James: 15},
{Joanna: 15},
{Bob: 50}
]
``````

### 11. Using `Array.prototype.reduce`

The `reduce` method is one of those that needs to be practiced a few times before we really understand it. Once we do, however, it opens up lots of possibilities.

The first thing to know about `reduce` is that it’s just another iterator method. An iterator is any array method that runs a used-provided function on each array member.

One way to explain `reduce` is to compare it with `map`.

Consider running the `map` array iterator method on this array:

``````[1,2,3,4,5].map( item => item*2 );
``````

The above code will return:

``````[2,4,6,8,10]
``````

While the `map` iterator returns an array, the `reduce` iterator returns an accumulator.

Here’s another way of looking at `reduce`: It’s just an iterator method which takes an operator and puts the operator between each member of the array. For example, running `reduce` on [1,2,3]:

``````[1,2,3].reduce ( (accumulator, currentValue) => accumulator + currentValue );
// returns: 6
``````

We can look at it like this too:

1. We have an array of three numbers. Initially, the accumulator’s value is 0, because we haven’t given it an initial value (which is possible, and completely legitimate, as we’ll see later). Thus, on the first iteration, this is what the callback function’s values will be: `( 0, 1) => 0 + 1`.
2. On the second iteration, the value will be the total amount of the previous iterations, as the value of the `accumulator`, and the `currentValue` will be `2`, so: `( 1, 2 ) => 1 + 2`.
3. On the third iteration, the value will be the total amount of all the previous iterations for the `accumulator`, plus the `currentValue` for this iteration: `( 3, 3 ) => 3 + 3`.

This ends all the iterations, and the return value is obviously `6`.

The `reduce` iterator, of course, takes more than 2 arguments in the callback function. The additional arguments that it takes are the current iteration’s index in the array and the array itself.

Here’s the full “definition” for the `reduce` iterator method:

``````Array.prototype.reduce(
(accumulator, currentValue, currentIndex, arrayItself ) => {
// whatever calculation you want to perfom on the array
}
)
``````

There’s only one thing missing from the code above, and that’s the `reduce` method’s callback function accumulator’s initial value. Here’s the `reduce` method’s “signature” with accumulator’s initial value specified:

``````Array.prototype.reduce( callbackFn, initialAccValue);
``````

Obviously, in the code above, the `callbackFn` is actually this piece of code:

``````(accumulator, currentValue, currentIndex, arrayItself) => {
// whatever calc...
}
``````

When we put all of this together, our `reduce` iterator’s definition might also look like this:

``````Array.prototype.reduce(
(accumulator, currentValue, currentIndex, arrayItself ) => {
// whatever calculation you want to perfom on the array
}, initialAccValue);
)
``````

Here are some use cases for the `reduce` array iterator method:

1. To sum up an array of amounts
2. To sum up values from specific object keys in an array of objects
3. To sum up values from an array of objects, excluding certain keys based on some criteria
4. To find an average value of an array
5. To count the number of times an item repeats in an array
6. To flatten an array of arrays
7. To build a pipeline of functions to execute (getting a really functional vibe here)
8. To rearrange an array of objects into a different array of objects so that they are grouped by a specific property
9. To extract and combine all the values from array values stores as keys in an array of objects
10. To remove duplicate items in an array (an alternative approach to doing this using the Set data structure)
11. To run promises in a sequence
12. To re-write an implementation of the `map` array iterator method

As we can see, the `reduce` method is very flexible and it is worth the investement of time to learn how to use it.

Without going into more complex scenarios listed above, let’s instead see a simple example of summing up an array of amounts.

Let’s say we want to calculate a shopping cart for drinks bought at a concert:

``````[ 9.99, 10.99, 11.99, 12.99 ].reduce( (acc, currentValue) => acc + currentValue)`
``````

This example returns `45.96`. We can even use the accumulator’s initial value to count in, for example, the fixed price of a ticket. Let’s say the ticket’s price was `50`. Thus:

``````[ 9.99, 10.99, 11.99, 12.99 ].reduce( (acc, currentValue) => { return acc + currentValue }, 50)`
``````

Easy stuff! Obviously, the returned value we’d receive from this operation would be `95.96` - the total cost of the concert ticket and drinks bought.

### 12. Using `Array.prototype.some`

The `some` iterator method checks for at least one array element that passes a test, returning a Boolean `true` or `false`.

In other words, the `some` method labels the following statement either `true` or `false`: There is at least one member of the array that passes the test.

For example:

``````// testing if value is greater than 100
let peopleTest = function(person, index, array) {
return person.kilos > 100
}

people.some( peopleTest )
``````

The above code, when run, will return `true`, because `John` has `110` kilos of weight.

### 13. `Array.prototype.every`

While the `some` method checks for presence of at least one array item that passes the test, the `every` method checks if all items pass the test.

For example:

``````// testing if value is greater than 10
let peopleTest = function(person, index, array) {
return person.kilos > 10
}

people.every( peopleTest )
``````

We’re checking if all the people weigh over `10` kilograms. Since the values in the `people` array are realistic, the answer we get is obviously `true`.

Let’s test another one:

``````// testing if value is less than 109
let peopleTest = function(person, index, array) {
return person.kilos < 110
}

people.every( peopleTest )
``````

This time, we get back false, because `John` in our `people` array weighs exactly `110` kilograms.

### 14. Using `Array.prototype.find`

The `find` method is a weird iterator. It will iterate all the members in the entire array, only if they all don’t pass the test.

You can imagine a valuable is gone missing and we’re trying to find the thief. The first person that has the valuable in their pocket is the thief, so there’s no point in iterating further.

Here’s an example:

``````// testing if value is less than 109
let peopleTest = function(person, index, array) {
return person.kilos < 110
}

people.find( peopleTest )
``````

The returned value is:

``````{name: "Jane", age: 20, heightCm: 170, kilos: 65, salary: 8000, …}
``````

Since `John` weighs `110` kilograms, the `find` method returned the very first person after him as the match, because she weighs only 65 kilograms, which is well under the 110 kilograms which was the passing test condition.

### 15. Using `Array.prototype.sort`

While the `sort` method is also an array iterator, we’ve already covered it earlier in this article, under the title “Sorting arrays with Array.sort”.

### Looping over arrays: Conclusion

With so many options described above, one of the things to look at before you loop over an array is: why are you looping?

Once you have an idea of what exactly it is that you’re trying to achieve, you can use one of many built-in array methods or looping constructs to do the task at hand.