Inside the Loop: Searching Arrays

Table of Contents

1. Challenge

   Step 1: Overview — Introduction to Array Searching

   Finding items in an array is one of the most common tasks in JavaScript, whether you're filtering a search results page, locating a user by ID, or picking the first item that fits a condition. In this lab, you'll build a search module for a product catalog, implementing five functions that cover the full range of array-searching techniques: manual iteration with for loops and JavaScript's built-in filter, find, and findIndex methods.

   The application directory already contains a data module with eight sample products and a demo script that exercises all five functions when they're complete. Your work across Steps 2, 3, and 4 adds functions to src/search.js. In Step 2, you'll write your first search function using a plain for loop.

   If you get stuck, you can refer to the provided solution code for each task, available in the solution folder.

   info> This lab experience was developed by the Pluralsight team using an internally developed AI tool. All sections were verified by human experts for accuracy prior to publications. However, content may still contain errors or inaccuracies, and we recommend independent verification. To report a problem or provide feedback, click here. Feedback may be used to improve accuracy in accordance with our Privacy Policy.

2. Challenge

   Step 2: Finding Products with Iteration

   You'll implement two search functions that use a for loop to iterate through the products array and return the first matching element. Writing the loop yourself gives you direct control over the comparison logic. By the end of this step, findProductById and findProductByName will return matching products from the catalog.

3. Challenge

   Step 3: Filtering with Array Methods

   With iteration-based searching working, you now have a clear mental model of how JavaScript traverses an array element by element. In this step, you'll express the same concept using JavaScript's built-in array methods. Array.filter and Array.find accept a callback function that runs once per element, letting you skip the loop scaffolding and focus on the condition that matters. By the end of this step, two more functions will be ready: one that returns every product in a given category, and one that finds the first product within a price limit.

4. Challenge

   Step 4: Seeing Your Search Functions in Action

   With four search functions returning the right results, you have most of the catalog search module in place. You'll add one more function using Array.findIndex, which returns the position of a matching element rather than the element itself. This is a key building block when you need to update or remove items by their position in an array. After implementing it, you'll run a demo script that calls all five functions together so you can see the results in the terminal.

5. Challenge

   Lab Complete

   You've built a working product catalog search module in JavaScript, implementing five functions that cover the full range of array-searching techniques. You practiced writing for loops that iterate and return elements, and you applied filter, find, and findIndex to express the same intent with built-in methods. Running the demo script showed each function returning real results from the catalog, connecting the code you wrote to visible behavior in the terminal.