3.6 Array Helpers Part 3¶
find()¶
Task 1: Check if the following array contains any numbers greater than or equal to 50.
var arr = [10, 20, 80, 150, 30, 0, 120];
var anyValues = arr.some(value => value >= 50);
console.log(anyValues);
The result is: true
Task 2: Refer to task 1; Return the first element that is greater or equal to 50.
var arr = [10, 20, 80, 150, 30, 0, 120];
var firstElement = function(){
for(element of arr){
if (element >= 50){
return element;
}
}
}();
console.log(firstElement);
The result is: 80
Task 3: Check the following code, and compare it with the task 2 code.
var arr = [10, 20, 80, 150, 30, 0, 120];
var firstElement = arr.find(value => value >= 50);
console.log(firstElement);
The result is: 80
find()
Using array.find(), we can retrieve the first element in an array that satisfies a given condition.
array.find() takes a function as an input, and it returns the value of the first element that satisfies the condition.
This input function accepts up to three arguments:
currentValue: the current element being processed in the array. It is required.index: the index of the current element. It is optional.array: the array itself. It is optional.
Task 4: Return the first element in the following array that is greater than 5 and less than 10.
var arr = [5, 3, 0, 40, 110, 7, 9];
var firstElement = arr.find(function(value){
if(value > 5 && value < 10){
return value;
}
});
console.log(firstElement);
The result is: 7
Task 5: Return the first string in the array below that has a length less than 4.
var arr = ["Hello", "Lala", "Ali", "Ola", "Let's see"];
var firstElement = arr.find(function(value){
if(value.length < 4){
return value;
}
});
console.log(firstElement);
The result is: Ali
Task 6: Return the first element in the array below that its value is equal to its index.
var arr = [3, 8, 2, 9, 4];
var firstElement = arr.find(function(value, index){
return value == index;
});
console.log(firstElement);
The result is: 2
Task 7: Return the index of the first element in the array below that contains v.
var arr = ["We go there", "I mean to venus", "Life there is a bit complicated", "but it can open new doors", "to the new world"];
var firstElement = arr.find(function(value, index){
if(value.indexOf("v") !== -1){
return index;
}
});
console.log(firstElement);
The result is: I mean to venus
Task 8: Return the first element in the array below that is equal to 1.
var arr = [5, 6, 7, 79, 99, 789];
var firstElement = arr.find(value => value === 1);
console.log(firstElement);
The result is: undefined
Task 9: Return the first element in the array below that is not equal to null, undefined, "", 0, or false.
var arr = [null, undefined, 0, 0, false, null, "", undefined, null, 0];
var firstElement = arr.find(value => !!value);
console.log(firstElement);
The result is: undefined
Note
If no value in the array matches the find() condition, it returns undefined
Task 10: Remove all falsy values from the following array.
var arr = [null, undefined, 1, 0, 0, false, null, "", undefined, null, 0, 1, 5];
var filteredArr = arr.filter(value => !!value);
console.log(filteredArr);
The result is: (3) [1, 1, 5]
Task 11: Refer to task 10; multiply every array element by 10. Then, return the new array.
var arr = [null, undefined, 1, 0, 0, false, null, "", undefined, null, 0, 1, 5];
var filteredArr = arr.filter(value => !!value);
var newArr = filteredArr.map(value => value * 10);
console.log(newArr);
The result is: (3) [10, 10, 50]
Task 12: Refer to task 11; Return the index of the first element of newArr that is greater than 5.
var arr = [null, undefined, 1, 0, 0, false, null, "", undefined, null, 0, 1, 5];
var filteredArr = arr.filter(value => !!value);
var newArr = filteredArr.map(value => value * 10);
var firstElement = newArr.find(value => value >= 5);
console.log(firstElement);
The result is: 10
Task 13: Re-do task 12 using one variable declaration.
var arr = [null, undefined, 1, 0, 0, false, null, "", undefined, null, 0, 1, 5];
var firstElement = arr.filter(value => !!value)
.map(value => value * 10)
.find(value => value >= 5);
console.log(firstElement);
The result is: 10
reduce()¶
Task 14: Find the sum of elements in the array below.
var arr = [1, 5, 10, 0, -8, 50, 7];
var result = function(){
var sum = 0;
for(element of arr){
sum += element;
}
return sum;
}();
console.log(result);
The result is: 65
Task 15: Check the following code, and compare it with task 14 code.
var arr = [1, 5, 10, 0, -8, 50, 7];
var result = arr.reduce(function(sum, currentItem){
return sum + currentItem;
}, 0);
console.log(result);
The result is: 65
Task 16: Find the product of elements of the array below.
var arr = [1, 2, 5, 6];
var result = function(){
var prod = 1;
for(element of arr){
prod *= element;
}
return prod;
}();
console.log(result);
The result is: 60
Task 17: Check the following code, and compare it with task 16 code.
var arr = [1, 2, 5, 6];
var result = arr.reduce(function(prod, currentItem){
return prod * currentItem;
}, 1);
console.log(result);
The result is: 60
reduce()
Using array.reduce(), we can reduce the array to a single value.
array.reduce() takes a function and an initial value as input. It returns the value that the function returns.
This input function accepts up to four arguments:
previousValue: the previously returned value of the function. It is required.currentValue: the current element being processed in the array. It is required.index: the index of the current element. It is optional.array: the array itself. It is optional.
The syntax is: array.reduce(function(previousValue, currentValue, index, array){}, initialValue)
Task 18: Apply the following operations on the following array elements:
- SecondElement - firstElement.
- stepOneResult - thirdElement.
- stepTwoResult - fourthElement, and so on.
var arr = [5, 6, 9, 10 , 0, 79];
var result = arr.reduce((sub, val) => sub-val);
console.log(result);
The result is: -99
Task 19: Re-do task 18; set the initial value to 200.
var arr = [5, 6, 9, 10 , 0, 79];
var result = arr.reduce((sub, val) => sub-val, 200);
console.log(result);
The result is: 91
Task 20: Re-do task 15; set the initial value to 10.
var arr = [1, 5, 10, 0, -8, 50, 7];
var result = arr.reduce(function(sum, currentItem){
return sum + currentItem;
}, 10);
console.log(result);
The result is: 75
Task 21: Re-do task 16; set the initial value to -8.
var arr = [1, 2, 5, 6];
var result = arr.reduce(function(prod, currentItem){
return prod * currentItem;
}, -8);
console.log(result);
The result is: -480
Task 22: Divide every element of the array below by 10.
var arr = [20, 50, 70, 80, 100, 151, 789, 0, 60];
var newArr = arr.map(value => value /10);
console.log(newArr);
The result is: (9) [2, 5, 7, 8, 10, 15.1, 78.9, 0, 6]
Task 23: Refer to task 22; find the sum of elements in the resultant array.
var arr = [20, 50, 70, 80, 100, 151, 789, 0, 60];
var result = arr.map(value => value /10)
.reduce((sum, value) => sum + value, 0);
console.log(result);
The result is: 132
Task 24: Refer to task 23; find the average of the resultant array. Hint: average = sum / length.
var arr = [20, 50, 70, 80, 100, 151, 789, 0, 60];
var result = arr.map(value => value /10)
.reduce((sum, value) => sum + value, 0)
/ arr.length;
console.log(result);
The result is: 14.666666666666666
Task 25: Find the average of the student marks.
var marks = [100, 200, 800, 600, 700, 0, 400, 900];
var result = marks.reduce((sum, value)=> sum + value, 0) / marks.length;
console.log(result);
The result is: 462.5
Task 26: Find the sum of ones in the array below.
var arr = [1, null, 1, 0, undefined, 5, "Hello", false, 1, true, 2];
var result = arr.filter(value => value === 1).reduce(function(sum, currentItem){return sum + currentItem}, 0);
console.log(result);
The result is: 3
Task 27: Find the sum of the square element in the array below.
var arr = [5, 7, 8, 9];
var sum = arr.map(value => value * value).reduce((sum, value) => sum + value, 0);
console.log(sum);
The result is: 219