1. .filter() returns all the elements satisfying the condition, while .find() only returns the first element satisfying the condition.

  2. .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);
}
 

Programming README

Homepage