revision:
The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.
The every() method executes a function for each array element. It returns true if the function returns true for all elements. It returns false if the function returns false for one element. It does not execute the function for empty elements and does not change the original array
every(callbackFn)
every(callbackFn, thisArg)
array.every(function(currentValue, index, arr), thisValue)
Parameters:
callbackFn, function : required. A function to execute for each element in the array. It should return a truthy value to indicate the element passes the test, and a falsy value otherwise. The function is called with the following arguments:
element, currentValue : required. The (value of) current element being processed in the array.
index : optional. The index of the current element being processed in the array.
array, arr : optional. The array every() was called upon.
thisArg, thisValue : optional. A value to use as "this" when executing callbackFn. Default "undefined"
const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// Expected output: true
<div>
<p id="every-1"></p>
<p id="every-2"></p>
<p id="every-3"></p>
<p id="every-4"></p>
</div>
<script>
const arr1 = [12, 5, 8, 130, 44];
const arr2 = [12, 54, 18, 130, 44];
document.getElementById('every-1').innerHTML = "array1 :" + arr1 + " ;<br> " + "array2: " + arr2;
function isBigEnough(element, index, array) {
return element >= 10;
}
console.log([12, 5, 8, 130, 44].every(isBigEnough)); // false
console.log([12, 54, 18, 130, 44].every(isBigEnough)); // true
document.getElementById("every-2").innerHTML = "arr1: every element >= 10: " + arr1.every(isBigEnough);
document.getElementById("every-3").innerHTML = "arr2: every element >= 10: " + arr2.every(isBigEnough);
</script>
<div>
<p id="every-5"></p>
<p id="every-6"></p>
<p id="every-7"></p>
<p id="every-8"></p>
</div>
<script>
// --------------- Modifying items ---------------
let arr = [1, 2, 3, 4];
arr.every((elem, index, arr) => {
arr[index + 1]--;
console.log(`[${arr}][${index}] -> ${elem}`);
document.getElementById("every-5").innerHTML += (`[${arr}][${index}] -> ${elem}`) + "<br>";
return elem < 2;
});
// Loop runs for 3 iterations, but would have run 2 iterations without any modification
// 1st iteration: [1,1,3,4][0] -> 1
// 2nd iteration: [1,1,2,4][1] -> 1
// 3rd iteration: [1,1,2,3][2] -> 2
// --------------- Appending items ---------------
arr3 = [1, 2, 3];
arr3.every((elem, index, arr) => {
arr3.push("new");
console.log(`[${arr3}][${index}] -> ${elem}`);
document.getElementById("every-6").innerHTML += (`[${arr3}][${index}] -> ${elem}`) + "<br>";
return elem < 4;
});
// Loop runs for 3 iterations, even after appending new items
// 1st iteration: [1, 2, 3, new][0] -> 1
// 2nd iteration: [1, 2, 3, new, new][1] -> 2
// 3rd iteration: [1, 2, 3, new, new, new][2] -> 3
// --------------- Deleting items ---------------
arr4 = [1, 2, 3, 4];
arr4.every((elem, index, arr) => {
arr4.pop();
console.log(`[${arr4}][${index}] -> ${elem}`);
document.getElementById("every-7").innerHTML += (`[${arr4}][${index}] -> ${elem}`) + "<br>";
return elem < 4;
});
// Loop runs for 2 iterations only, as the remaining items are `pop()`ed off
// 1st iteration: [1,2,3][0] -> 1
// 2nd iteration: [1,2][1] -> 2
</script>
<div>
<p><input type="number" id="ageToCheck" value="18"></p>
<button onclick="checkFunction()">Try it</button>
<p id="every-9"></p>
</div>
<script>
const ages = [32, 33, 12, 40];
function checkAge(age) {
return age > document.getElementById("ageToCheck").value;
}
function checkFunction() {
document.getElementById("every-9").innerHTML = ages.every(checkAge);
}
</script>