Do you really know JavaScript includes method?

JavaScript includes method is very handy when you need to search or find something in the array or string, yes it works on both. It returns the Boolean value true if the array contains the value and false if not, and the same applied to the strings.

Note: When comparing strings and characters JavaScript includes method is case-sensitive.

#1 Array Example

var array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

var pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

#1.1 Find by Specific Index

In JavaScript include method, you can also find values from specific indexes, as second parameter it receives fromIndex for example:

var array1 = [1, 2, 3];

console.log(array1.includes(2, 1));
// expected output: true

var array1 = [1, 2, 3];

console.log(array1.includes(2, 2));
// expected output: false

In the above example, we are passing fromIndex in the second parameter to tell the include() method that if the value exists from that specific index.

fromIndex Definition according to MDN.

The position in this array at which to begin searching for valueToFind; the first character to be searched is found at fromIndex for positive values of fromIndex, or at array.length + fromIndex for negative values of fromIndex (using the absolute value of fromIndex as the number of characters from the end of the array at which to start the search). Defaults to 0.

source

#1.2 Some Quick Examples

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

#1.3 What if fromIndex is greater than array length?

If fromIndex is greater than or equal to the length of the array, it returns false. For example:

var arr = ['a', 'b', 'c'];

arr.includes('c', 3);   // false
arr.includes('c', 100); // false

Note: Technically speaking, includes() uses the sameValueZero algorithm to determine whether the given element is found.

#1.4 What if fromIndex is less than 0?

If fromIndex is less than 0 (negative value) then it is going to compute the index, the computed index is calculated to be used as a position in the array at which to begin searching for valueToFind. If the computed index is less or equal than -1 * array.length, it will search the whole array.

For example: If array length is 3 and fromIndex is -100 hence, the computed index is 3 + (-100) = -97

#1.5 Computed Index Examples

// array length is 3
// fromIndex is -100
// computed index is 3 + (-100) = -97

var arr = ['a', 'b', 'c'];

arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true
arr.includes('a', -2); // false

#2 String Include

JavaScript includes also works the same as arrays, It also recieves two parameters

First searchString: A string to be searched for within this string.

Second position (Optional): The position within the string at which to begin searching for searchString. (defaults to 0).

Here is the example below:-

var str = "Hello world, welcome to the buginit.com";
console.log(str.includes("buginit.com")); // true 
console.log(str.includes("buginit com")); // false 

#2.1 Some more quick examples

const str = 'To be, or not to be, that is the question.';

console.log(str.includes('To be'));       // true
console.log(str.includes('question'));    // true
console.log(str.includes('nonexistent')); // false
console.log(str.includes('To be', 1));    // false
console.log(str.includes('TO BE'));       // false
console.log(str.includes(''))             // true

#2.2 Case-sensitivity Example

'Buginit dot com'.includes('buginit'); // returns false

#2.3 Polyfill

This method has been added to the ECMAScript 2015 specification and may not be available in all JavaScript implementations yet. However, you can easily polyfill this method for String:

if (!String.prototype.includes) {
  String.prototype.includes = function(search, start) {
    'use strict';
    if (typeof start !== 'number') {
      start = 0;
    }

    if (start + search.length > this.length) {
      return false;
    } else {
      return this.indexOf(search, start) !== -1;
    }
  };
}

Browser Support

Arrays

Strings

That’s all folks, thanks for reading, here is a meme for you.