Start learning free

LESSON 112 OF 671 · ARRAYS I

Checking an Array for a Value in JavaScript

Lesson Read the full explanation

TL ; DR:

arr.includes(x) is true when the array holds x, and false when it doesn't. Use it as the condition of an if.


let colors = ["red", "green", "blue"];

console.log(colors.includes("red"));    // true

console.log(colors.includes("pink"));   // false

if (!colors.includes("pink")) {
    console.log("No pink yet");
}

Full lesson:

Often you need to know if an array holds some value. Is this name on the guest list? Is this item in the cart?

includes(x) answers that. It compares each item with x, from the first one on. It returns true as soon as one matches, or false if none does.

Put ! in front for the opposite. So !colors.includes(x) is true when x is missing.

The answer is a boolean, so it fits right into an if:

let cart = ["milk", "bread"];

if (cart.includes("milk")) {
    console.log("Milk is in the cart");
}

The name is includes, not contains. Arrays have no contains method.

Text must match exactly. So colors.includes("Red") is false, because the array has "red".

Your task

bag holds what is packed for a hike.

If "water" is in bag, print Water is packed. If "tent" is not in bag, print Pack a tent.

Expected output:

Water is packed
Pack a tent
STEP 1 OF 2
    Ctrl + Enter to check

    JAVASCRIPT · ARRAYS I

    Array Membership in JavaScript, explained

    The question includes answers

    Often you need to know whether an array holds some value: is this name on the guest list, is this item in the cart? The includes method answers that. It compares each item with the value you give it, from the first one on. It returns true as soon as one matches, and false if none does.

    let colors = ["red", "green", "blue"];

console.log(colors.includes("red"));
console.log(colors.includes("pink"));

    true
false

    Using it in an if

    The answer is a boolean, so it fits straight into an if. Put ! in front for the opposite: !colors.includes("pink") is true when "pink" is missing.

    let cart = ["milk", "bread"];

if (cart.includes("milk")) {
    console.log("Milk is in the cart");
}
if (!cart.includes("eggs")) {
    console.log("No eggs yet");
}

    Milk is in the cart
No eggs yet

    What includes does for you

    You could write the same check yourself with a loop: go through the items, compare each one, and stop at the first match. That is what includes does for you, in one readable word. Because it reads like the question you are asking, an if built on it is easy to follow, even months later.

    It looks at the items, never at the positions. If you also need to know where the match is, a different method is the right tool, but for a plain yes or no question, includes is the one to use. A missing value is not an error: the answer is just false, and the program carries on.

    The check also works on an empty array. Asking [].includes("x") gives false, since there is nothing to match, so you do not need a special case for a list that has not been filled yet.

    Traps

    • The name. It is includes, not contains. Calling bag.contains("map") fails with bag.contains is not a function.
    • Exact match. Text must match letter for letter. With bag = ["map", "water", "snacks"], bag.includes("Water") is false and bag.includes("water") is true.
    • Type matters. includes compares like ===, so the string "2" does not match the number 2: [1, 2, 3].includes("2") is false.
    • Objects match by identity. [[1]].includes([1]) is false, because the two inner arrays are different objects. For strings and numbers this does not come up.

    Writing the condition cleanly

    The result of includes is already true or false, so there is no need to compare it with anything. Write if (bag.includes("water")) and not a longer comparison against true. For the opposite, put the ! in front of the whole call, as in if (!bag.includes("tent")). Read it aloud as "if the bag does not include a tent" and it matches the task word for word.

    One more detail for later: includes can find the special value NaN in an array, while the older indexOf method cannot. For [NaN], includes(NaN) is true and indexOf(NaN) is -1. For everyday words and numbers, you will not notice a difference.

    The lesson's task

    The array bag holds ["map", "water", "snacks"]. If "water" is in it, print Water is packed. If "tent" is not in it, print Pack a tent.

    1. The first if calls includes with "water". The bag has water, so the condition is true and the print runs.
    2. The second if puts ! before bag.includes("tent"). The bag has no tent, so includes gives false, ! turns it into true, and the print runs.
    let bag = ["map", "water", "snacks"];
if (bag.includes("water")) {
    console.log("Water is packed");
}
if (!bag.includes("tent")) {
    console.log("Pack a tent");
}

    Water is packed
Pack a tent

    Key takeaways

    • arr.includes(x) is true when the array holds x, otherwise false.
    • !arr.includes(x) is true when x is missing.
    • Matching is exact, in case and in type.
    Keep going with JavaScript500+ step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free