The methods find() and findIndex() offer solutions for searching arrays in JavaScript based on specific criteria. Choosing the right approach depends on your desired outcome. They are part of the functional programming paradigm in JavaScript and make code more readable and maintainable.
Using find() method:
- The find() method iterates through each element of the array.
- For each element, the callback function is called, which checks if the current element satisfies the specified condition.
- If a match is found, the find() method returns the element; otherwise, it returns undefined.
Using findIndex() method:
- The findIndex() method works similarly to find(), but instead of returning the element, it returns the index of the first element that satisfies the condition.
- If no match is found, it returns -1.
NOTE: To find all items in an array that meet a condition and create a new array containing them, use the filter() method in JavaScript. Here is the tutorial : Array Filter Method
Example 1:
// An array of company objects const companies = [ {name: "Microsoft", founded: 1975, industry: "Technology"}, {name: "Apple", founded: 1976, industry: "Technology"}, {name: "Amazon", founded: 1994, industry: "E-commerce"}, {name: "Tesla", founded: 2003, industry: "Automotive"}, {name: "Netflix", founded: 1997, industry: "Entertainment"} ]; // A function that checks if a company was founded before 1980 function foundedBefore1980(company) { return company.founded < 1980; } // Using find() to get the first company that was founded before 1980 let oldCompany = companies.find(foundedBefore1980); console.log(oldCompany); // {name: "Microsoft", founded: 1975, industry: "Technology"} // Using findIndex() to get the index of the first company that was founded before 1980 let oldCompanyIndex = companies.findIndex(foundedBefore1980); console.log(oldCompanyIndex); // 0
Example 2:
// An array of teacher objects const teachers = [ {name: "Alice", subject: "Math", experience: 5}, {name: "Bob", subject: "English", experience: 3}, {name: "Charlie", subject: "Science", experience: 7}, {name: "David", subject: "History", experience: 4}, {name: "Eve", subject: "Art", experience: 6} ]; // A function that checks if a teacher teaches Science function teachesScience(teacher) { return teacher.subject === "Science"; } // Using find() to get the first teacher who teaches Science let scienceTeacher = teachers.find(teachesScience); console.log(scienceTeacher); // {name: "Charlie", subject: "Science", experience: 7} // Using findIndex() to get the index of the first teacher who teaches Science let scienceTeacherIndex = teachers.findIndex(teachesScience); console.log(scienceTeacherIndex); // 2
Example 3:
const students = [ { name: "Alice", age: 25, city: "New York" }, { name: "Bob", age: 30, city: "London" }, { name: "Charlie", age: 28, city: "Paris" } ]; // Find the first student whose age is 30: const studentFromLondon = students.find(student => student.age === 30); console.log(studentFromLondon); // Output: { name: "Bob", age: 30, city: "London" }
Example 4:
const shoppingMalls = [ { name: "Westfield", address: "123 Main St" }, { name: "Pavilion", address: "456 Elm St" }, { name: "Galleria", address: "789 Oak St" } ]; // Find the first mall with "Pavilion" in its name: const pavilionMall = shoppingMalls.find(mall => mall.name.includes("Pavilion")); console.log(pavilionMall); // Output: { name: "Pavilion", address: "456 Elm St" }
Example 5:
// Sample array of ship objects const ships = [ { name: 'Titanic', type: 'Passenger', yearBuilt: 1912 }, { name: 'Mayflower', type: 'Cargo', yearBuilt: 1620 }, { name: 'Santa Maria', type: 'Exploration', yearBuilt: 1492 }, { name: 'Queen Mary 2', type: 'Passenger', yearBuilt: 2003 } ]; // Example using find() to search for a ship with a specific name const targetShipByName = 'Mayflower'; const foundShipByName = ships.find(ship => ship.name === targetShipByName); console.log(foundShipByName); // Output: { name: 'Mayflower', type: 'Cargo', yearBuilt: 1620 } // Example using findIndex() to search for a ship built in a specific year const targetYearBuilt = 1492; const indexFoundShipByYear = ships.findIndex(ship => ship.yearBuilt === targetYearBuilt); console.log(indexFoundShipByYear); // Output: 2 (index of the ship with yearBuilt 1492) // Accessing the ship using the index found by findIndex() const foundShipByYear = ships[indexFoundShipByYear]; console.log(foundShipByYear); // Output: { name: 'Santa Maria', type: 'Exploration', yearBuilt: 1492 }