Array include JavaScript

The JavaScript array includes() method checks whether the given array contains the specified element. It returns true if an array contains the element, otherwise false.

Syntax

The includes() method is represented by the following syntax:

Parameter

element - The value to be searched.

start - It is optional. It represents the index from where the method starts search.

Return

A Boolean value.

JavaScript Array includes() method example

Here, we will understand includes() method through various examples.

Example 1

Let's see a simple example to determine whether the given array contains the specified element.

Output:

Example 2

In this example, we will provide the index from where the search starts.

Output:

Example 3

Let's see one more example to determine whether the includes() method is case-sensitive.

Output:

JavaScript offers a bunch of useful array methods to check whether an array contains a particular value.

While searching for primitive value like number or string is relatively easy, searching for objects is slightly more complicated.

In this post, you will read about how to determine if an array contains a particular value, being a primitive or object.

1. Array contains a primitive value

A primitive value in JavaScript is a string, number, boolean, symbol, and special value undefined.

The easiest way to determine if an array contains a primitive value is to use

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript
const hasValue = array.includes(value[, fromIndex]);

The first argument

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

For example, let's determine whether an array of greeting words contains the values

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

But

javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false

javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript



const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false

1.1 Searching from an index

javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false

For example, let's start searching from the second item (index

javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false

javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false

javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false

javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false

javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false

However,

javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false

javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false

javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true

2. Array contains an object

Checking if an array contains an object is slightly more complex than searching for primitive values.

Determining if an array contains a reference to an object is easy — just use the

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true

But more often, instead of searching by reference, you'd like to search for objects by their content. In such a case

javascript
const greetings = ['hi', 'hello'];



greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true

javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true

Ok, so how do you determine if the array contains an object by content, rather than reference? Using

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false

During shallow equality check of objects the list of properties of both objects is checked for equality.

Here's a possible implementation of shallow equality check:

javascript
function shallowEqual(object1, object2) {
  const keys1 = Object.keys(object1);
  const keys2 = Object.keys(object2);
  if (keys1.length !== keys2.length) {
    return false;
  }
  for (let key of keys1) {
    if (object1[key] !== object2[key]) {
      return false;
    }
  }
  return true;
}

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false

In the following code snippet

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false

javascript
function shallowEqual(object1, object2) {
  const keys1 = Object.keys(object1);
  const keys2 = Object.keys(object2);
  if (keys1.length !== keys2.length) {
    return false;
  }
  for (let key of keys1) {
    if (object1[key] !== object2[key]) {
      return false;



    }
  }
  return true;
}

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false

javascript
function shallowEqual(object1, object2) {
  const keys1 = Object.keys(object1);
  const keys2 = Object.keys(object2);
  if (keys1.length !== keys2.length) {
    return false;
  }
  for (let key of keys1) {
    if (object1[key] !== object2[key]) {
      return false;
    }
  }
  return true;
}

javascript
const hi     = { message: 'hi' };
const hiCopy = { message: 'hi' };
const hello  = { message: 'hello' };
shallowEqual(hi, hiCopy); // => true
shallowEqual(hi, hello);  // => false

As a reminder, the array method

javascript
function shallowEqual(object1, object2) {
  const keys1 = Object.keys(object1);
  const keys2 = Object.keys(object2);
  if (keys1.length !== keys2.length) {
    return false;
  }
  for (let key of keys1) {
    if (object1[key] !== object2[key]) {
      return false;
    }
  }
  return true;
}

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript
function shallowEqual(object1, object2) {
  const keys1 = Object.keys(object1);
  const keys2 = Object.keys(object2);
  if (keys1.length !== keys2.length) {
    return false;
  }
  for (let key of keys1) {
    if (object1[key] !== object2[key]) {
      return false;
    }
  }
  return true;
}

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

Now, let's use the shallow equality function in combination with

javascript
function shallowEqual(object1, object2) {
  const keys1 = Object.keys(object1);
  const keys2 = Object.keys(object2);
  if (keys1.length !== keys2.length) {
    return false;
  }
  for (let key of keys1) {
    if (object1[key] !== object2[key]) {
      return false;
    }
  }
  return true;
}

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.some(item => shallowEqual(item, toSearch)); // => true

javascript
function shallowEqual(object1, object2) {
  const keys1 = Object.keys(object1);
  const keys2 = Object.keys(object2);
  if (keys1.length !== keys2.length) {
    return false;
  }
  for (let key of keys1) {
    if (object1[key] !== object2[key]) {
      return false;
    }
  }
  return true;
}

javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true

If the searched object contains also nested objects, then instead of

javascript
const hi     = { message: 'hi' };
const hiCopy = { message: 'hi' };
const hello  = { message: 'hello' };
shallowEqual(hi, hiCopy); // => true
shallowEqual(hi, hello);  // => false

3. Summary

Searching for a primitive value like string or number inside of an array is simple: just use

javascript
const hi     = { message: 'hi' };
const hiCopy = { message: 'hi' };
const hello  = { message: 'hello' };
shallowEqual(hi, hiCopy); // => true
shallowEqual(hi, hello);  // => false

Determining if an array contains an object by content needs more moving parts. You have to use

javascript
function shallowEqual(object1, object2) {
  const keys1 = Object.keys(object1);
  const keys2 = Object.keys(object2);
  if (keys1.length !== keys2.length) {
    return false;
  }
  for (let key of keys1) {
    if (object1[key] !== object2[key]) {
      return false;
    }
  }
  return true;
}

javascript
array.some(item => shallowEqual(item, value));

Note that the presented approaches are not the only ones. E.g. for a long time

javascript
const hi     = { message: 'hi' };
const hiCopy = { message: 'hi' };
const hello  = { message: 'hello' };
shallowEqual(hi, hiCopy); // => true
shallowEqual(hi, hello);  // => false

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi');  // => true
greetings.includes('hey'); // => false

What other ways to detect if an array contains a value do you know?

Like the post? Please share!

Suggest Improvement

Quality posts into your inbox

I regularly publish posts containing:

• Important JavaScript concepts explained in simple words
• Overview of new JavaScript features
• How to use TypeScript and typing
• Software design and good coding practices

Subscribe to my newsletter to get them right into your inbox.

Join 6946 other subscribers.

About Dmitri Pavlutin

Tech writer and coach. My daily routine consists of (but not limited to) drinking coffee, coding, writing, coaching, overcoming boredom 😉.