Iterating over arrays & console.logging every step of the way

I’ve worked on a few projects since I first started learning to code, and there’s still a lot I need experience with, particularly working with arrays. My current project has a search bar on every page, so I knew I had to make sure that what was typed into the search bar would go through the array on my database and find any objects that matched.

I learned that the best route to take here would be to create an empty local array, get the entire database collection and replace the empty array with it. Then I could filter through the objects so I would be left only with the ones that included the search term in the search bar. With this particular database, I didn’t have the option to use query parameters to do this for me.

const searchButton = $('#searchbutton')
const searchBar = $('#search')
searchButton.click(function (event) {
// Do not allow search on search button click if the search bar is empty.
if (searchBar.value === "") {
   return;
}
let searchTerm = searchBar.val()
let searchResults = placesArray.filter(function (name) {
   return name.includes(searchTerm);
})

Here’s what I started with and with my limited array method experience, it took me a minute to get the array.filter to a place where I thought it might do what I wanted. But there was a problem with this. The argument I chose for the callback function represented a piece of information that was one level deeper than the actual location of the argument in a callback function like this.

The array looks something like this. I was trying to access the name within the object (Hotdog hut) without even knowing how the argument would understand to access it.

let placesArray = [
 {
    name: Hotdog hut, 
    phone number: 1234567890,
    address: 000 Hotdog way, Hotdog HD, 12345
 }
]

For some reason, arguments have been this weird part of JavaScript for me that just hasn’t fully clicked. I don’t know why I freeze up any time I have to define one, but with some help I learned that the first argument in the callback function of an iteration method represents the individual item in the array. And I’ve learned that I need to utilize console.log even more in my practice, because had I used console.log on the argument, I’d have known that I was working with the object. This one piece of information made the fix I needed to make much more clear.

So I gave the argument a more appropriate name (place) and then used it to access the name property within.

Before:

let searchResults = placesArray.filter(function (name) {
   return name.includes(searchTerm);
})

After:

let searchResults = placesArray.filter(function (place, index) {
   return place.name.includes(searchTerm);
})

Adding the second argument (index) would help in my next step.

Testing

To test to see if everything worked, I learned a great way to use console.log when iterating over an array.

console.log(`For iteration ${index}, does ${place.name} include ${searchTerm}. The answer is ${place.name.includes(searchTerm)}`);

Which in my case logged:
For iteration 0, does Hotdog hut include hotdog. The answer is false

Why was it false? Because I typed hotdog instead of Hotdog. Case sensitivity. So in order to not make my search a pain to use, I learned a common fix: using the .toLowerCase method.

let searchResults = placesArray.filter(function (place, index) {
   const lowerName = place.name.toLowerCase();
   const lowerSearch = searchTerm.toLowerCase();
   console.log(`For iteration ${index}, does ${lowerName} include ${lowerSearch}. The answer is ${lowerName.includes(lowerSearch)}`);
   return lowerName.includes(lowerSearch);
})

This way, both the name properties (from the array) and the value in the search bar would be transformed to lowercase versions of themselves, and that means no more worrying about case sensitivity. :) And when I checked to see if everything was working here’s what I got:

For iteration 0, does hotdog hut include hotdog. The answer is true

So satisfying.