Tech Speak: Array Method - .includes

When starting to learn JavaScript we learn that getting information out of an array is done using a for loop. We also learned that there is a lot of code involved in writing a for loop. Because there is a lot of code involved in for loops, array methods were created.

Array Methods not only cut down on the amount of code one has to write, it also improves the readability and cleanliness of one's code. There is a whole list of Array Methods, .concat, .filter, .find, .indexOf, .map, and many more. You can find the full list of built in methods by CLICKING HERE. Today we are going to look at the inner workings of .includes.

We have an array of all the plants in our house...

const plants = [
        "cactus", 
        "fern",
        "bonsai",
        "aloe",
        "lily",
        "orchid",
        "fiddle-leaf"
]

We have created an app that our friends can use to see what plants we currently have in our house. To do this we have the below code...

const inHouse = function() {
        htmlStr = '';
        userInput = $(`#input`).val().tolowercase();
        weHave = plants.includes(userInput);
        if (weHave === true) {
            htmlStr += `We have a ${userInput} in our house.`;
        } else {
            htmlStr += `We do not have a ${userInput} in our house.`;
            }
        };

When a friend wants to know if we have a certain plant they go to our app and they type in a plant. Then it tells them whether we have that plant in our home right now or not.

Now lets look at what the code would look like if we did not use .includes but instead used a for loop...

const inHouse = function() {
        htmlStr = '';
        weHave = false
        userInput = $(`#input`).val().tolowercase();
        for (let i = 0; i < plants.length; i++) {
            if (plants[i] === userInput) {
                weHave = true
            };
        if (weHave === true) {
            htmlStr += `We have a ${userInput} in our house.`;
        } else {
            htmlStr += `We do not have a ${userInput} in our house.`;
            }
        };

You can see from comparing the 2 blocks of code that we had to add 4 lines of code to figure out if the user's input is included in our array. We added a for loop and inside of the for loop we also added an if statement. While this code is not that difficult to read it does look a lot messier and is hard to follow at first. But the major point here is what is happening inside of .includes.

To achieve .includes:

• we first have to add that weHave is false
• use a for loop
• the for loop is set-up to start at 0 (the index of the first item in the array), iterate through the array for as many times as the array is long (arr.length) and then finally increment i so that we can pull the item for that index off the array
• as we iterate through the array we are comparing the userInput against each item in the array
• if the first index matches the userInput it will store true in the variable weHave, if the first index does not match userInput it will move to the next index and compare it. It will iterate through the array until it finds a match or the for loop terminates. If it does not find a match and the for loop terminates, weHave remains stored as false.

And that is how .includes works!

Until next time :)