Do you really know JavaScript includes method?
JavaScript 0 CommentsJavaScript 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
sourcevalueToFind
; the first character to be searched is found atfromIndex
for positive values offromIndex
, or atarray.length + fromIndex
for negative values offromIndex
(using the absolute value offromIndex
as the number of characters from the end of the array at which to start the search). Defaults to 0.
#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
Method | |||||
---|---|---|---|---|---|
includes() | 47 | 14.0 | 43 | 9 | 34 |
Strings
Method | |||||
---|---|---|---|---|---|
includes() | 41 | 12.0 | 40 | 9 | 28 |
That’s all folks, thanks for reading, here is a meme for you.
