-
.filter() returns all the elements satisfying the condition, while .find() only returns the first element satisfying the condition.
-
.filter() returns a new array, .find() returns only the element itself & not an array
.filter() method usage
//let's suppose the following example
const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
// +++++++++ with .filter()
const deposits = movements.filter((element, index, array) => element > 0);
console.log(movements); // [200, 450, -400, 3000, -650, -130, 70, 1300]
console.log(deposits); // [200, 450, 3000, 70, 1300]
// +++++++ using the for...of loop for the same:
const depositsUsingForOfLoop = [];
for (const element of movements){
if (element > 0) depositsUsingForOfLoop.push(element)
};
console.log(depositsUsingForOfLoop); // [200, 450, 3000, 70, 1300]
// ====++++++==== doing the same but for withdrawals now (negative values)
// .filter method
const withdrawals = movements.filter(element => element < 0); // I could add `index` and `array` after the input `element` too but they're optional. They aren't needed for this one so I omitted them
console.log(withdrawals); // [-400, -650, -130]
// for... of loop method
const withdrawalUsingForOfLoop = [];
for (const element of withdrawals){
if (element < 0) withdrawalUsingForOfLoop.push(element);
}
console.log(withdrawalUsingForOfLoop); // [-400, -650, -130].find() method usage
// example used:
const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
const firstWithdrawal = movements.find(element => element < 0);
console.log(movements);
console.log(firstWithdrawal); // -400
const account = accounts.find(element => element.owner === 'Jessica Davis');
console.log(account); // {owner: 'Jessica Davis', movements: Array(8), interestRate: 1.5, pin: 2222}
// +++++++ doing the same with for...of loop?
for (const acc of accounts) {
if (acc.owner === 'Jessica Davis') console.log(acc);
}