The .every() Array method in Javascript

This is an array method that checks whether the elements in the given array pass the test provided by the callback function. It then returns a boolean value - true if the elements pass the test and false otherwise.

More importantly, once the iteration finds an element that does not pass the test, it immediately returns false. In short, the .every() method only returns truth if ALL the elements pass the provided test.

What prompted me to take a closer look at this method was my attempt at the Tic-Tac-Toe game using vanilla Javascript. In my case, the test was to check whether any of the elements in the winning combination sub-arrays are all present in whatever dynamic combination the player array presents.

What I found confusing was which array to use the .every() method on. Was it the dynamic player array, or was it the possible winning combination? I thought to blog about this to solidify my understanding of the same once I got the hang of it. Here's an example of the code snippet.

let samplePlayerArr = [0, 4, 5, 6, 7, 2];
const possibleWinningCombi = [
    //rows
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    //cols
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    //diagonals
    [0, 4, 8],
    [2, 4, 6],
];

for (let i = 0; i < possibleWinningCombi.length; i++) {
    let singleWinningCombi = possibleWinningCombi[i];
    if (
        singleWinningCombi.every((winNumber) => samplePlayerArr.includes(winNumber))
    ) {
        console.log('win!');
    }
}

I will attempt to explain my code line by line, and I hope this is helpful for anyone who was confused like I was.

1. The first line declares an array that represents a sample of a player's positions and assigns it to a variable, samplePlayerArr.

2. The line declares a constant array that contains nested arrays representing all the possible winning combinations present in the 3X3 Tic-Tac-Toe game. This includes combinations in rows, columns and diagonals.

3. I use the for-loop to iterate through the list of possible winning combinations and then set the singleWinningCombi to represent the current winning combination.

4. In this step, I get to use the .every() method. Going by the definition of the .every() method on the MDN, the array I use the method on is established because what I need to do is to test whether every number in the winning iteration is present in whatever order in the player array. With this in mind, I am using .every() on the particular iteration of the winning combination arrays.

Additionally, the .every() method also has a callback function, whose arguments include:

- element. This is the current element in the iteration of the array

- index. this is the above element's index

It is interesting now that I blog about it, I find it ridiculous how I thought the element in the callback function was for the second array and not the one that we had called the .every() method on :-O

So, with this explanation, what's happening on the line below?

if (singleWinningCombi.every((winNumber) => samplePlayerArr.includes(winNumber)))

5. I am using the .every() method on each possible winning combination to check if the 3 numbers in that combination pass a 'test'. Remember that the element winNumber represents each value in the singleWinningCombi. At this point, I use the .includes() method. This is another array method that checks whether an array has a specific value, thus returning true if yes, and false if not.

Let's take the subarray in the first iteration of the possible winning combinations as an example.

//subarray in the first iteration of the possibleWinningcombo
[0, 1, 2]

When we call the .every() method on this array, we are essentially taking the element at index 0, in this case, 0 - remember this represents winNumber in my code above. We then test to see if the player array contains 0 using the .includes() method. If it does include 0, it will return true.

In the second iteration, winNumber would be 1. We then check if the player array contains 1, and if it does, it returns true.

In the third and the last iteration, winNumber would be 2, and if the player array contains 2 as well, it returns true.

In the example above, however, the first subarray returns a false. It will, however, log a 'win' to the console, and that's because we have a for-loop that checks all of the subarrays.

A closer look shows us that the player Array includes all of the elements in the last sub-array of the winning combinations array. So the iteration below will return true since all the elements are present, and that is what logs 'Win' to the console.

//8th iteration of the possibleWinningCombo
[2, 4, 6];

//playerArray
samplePlayerArr = [0, 4, 5, 6, 7, 2];

Fun Fact 1 : .every() works very similarly to the .some() array method. While the former only returns true if ALL the elements pass the test/ meet the conditions, .some() returns true if at least one element meets the required condition.

Fun Fact 2: Did you know that for an empty array, the .every() method returns true? The MDN documentation explains that ideally, this is because ALL the elements of an empty array pass just about any test/ satisfy any given condition. Of course, I tested it out. Let's assume that our winning combination array was empty, and we're testing it out in the same way against the player array, then logging to the console. See it returns true and logs 'win'.

let samplePlayerArr = [0, 4, 5, 6, 7, 2],
    blankArr = [];

if (blankArr.every((blank) => samplePlayerArr.includes(blank))) {
    console.log('win!');
}

if you made it this far, thank you for reading! I hope this post helps improve your understanding of the .every() method and its use case, as I did in my Vanilla JS version of the Tic-Tac-Toe game.

Happy Coding!