{"id":123179,"date":"2021-11-21T17:01:21","date_gmt":"2021-11-21T17:01:21","guid":{"rendered":"https:\/\/phppot.com\/?p=15644"},"modified":"2021-11-21T17:01:21","modified_gmt":"2021-11-21T17:01:21","slug":"how-to-use-includes-in-javascript-array-string","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2021\/11\/21\/how-to-use-includes-in-javascript-array-string\/","title":{"rendered":"How to use includes in JavaScript Array, String"},"content":{"rendered":"<div class=\"modified-on\" readability=\"7.1489361702128\"> by <a href=\"https:\/\/phppot.com\/about\/\">Vincy<\/a>. Last modified on November 21st, 2021.<\/div>\n<p>Coding in JavaScript is one of the critical skills required in building websites. Though mastering JavaScript is a journey to the center of the earth, continuous learning will help you make it.<\/p>\n<p>We have seen some of the JavaScript functions like find(), <a href=\"https:\/\/phppot.com\/javascript\/for-each-javascript\/\">forEach()<\/a> earlier. Now, let\u2019s learn about the function includes() in JavaScript.<\/p>\n<div class=\"post-section-highlight\" readability=\"42\">\n<h2>Quick example<\/h2>\n<pre class=\"prettyprint\"><code class=\"language-javascript\">\n&lt;script&gt;\ninputArray = ['Create', 'Read', 'Update', 'Delete', 'Filter'];\ninputArray.includes('Read'); \/\/returns true\ninputArray.includes('Read','3'); \/\/returns false\ninputArray.includes('Error'); \/\/returns false\ninputArray.includes('Delete','-1'); \/\/returns false inputString = 'How to learn JavaScript?';\ninputString.includes('learn'); \/\/returns true\ninputString.includes('learn','8'); \/\/returns false\n&lt;\/script&gt; <\/code><\/pre>\n<\/div>\n<h2>About JavaScript includes<\/h2>\n<p>It checks if an array or string includes a given value.<\/p>\n<p>In an array context, it checks the given value is one among the array elements. In the string prototype, the includes() in JavaScript checks if the given value is the substring.<\/p>\n<p><strong>Syntax, parameters and return value<\/strong><\/p>\n<pre class=\"prettyprint\"><code class=\"language-javascript\">\nincludes(searchElement, [fromIndex]); <\/code><\/pre>\n<p>It has two parameters, searchElement and fromIndex. The fromIndex is optional and its default value is 0 to start with.<\/p>\n<p>The fromIndex accepts signed numbers. With a negative value, it applies this formula to compute the position to start.<\/p>\n<p><code> fromIndex = arrayLength + signedFromIndex<br \/><\/code><\/p>\n<p>It returns boolean true if any match is found or false otherwise.<\/p>\n<p><strong>Note:<\/strong><\/p>\n<ul>\n<li>JavaScript includes() searches array or string with case sensitivity.<\/li>\n<li>It can also be called as a generic method.<\/li>\n<li>It works in most modern browsers.<\/li>\n<li>The negative value is not applicable for the includes() in the String prototype.<\/li>\n<li>The Array.prototype.includes() will not search for a sub-array.<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-15765 size-large\" src=\"https:\/\/phppot.com\/wp-content\/uploads\/2021\/10\/include-in-javascript-550x198.jpg\" alt=\"include in javascript\" width=\"550\" height=\"198\" srcset=\"https:\/\/phppot.com\/wp-content\/uploads\/2021\/10\/include-in-javascript-550x198.jpg 550w, https:\/\/phppot.com\/wp-content\/uploads\/2021\/10\/include-in-javascript-300x108.jpg 300w, https:\/\/phppot.com\/wp-content\/uploads\/2021\/10\/include-in-javascript-768x277.jpg 768w, https:\/\/phppot.com\/wp-content\/uploads\/2021\/10\/include-in-javascript.jpg 965w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\"><\/p>\n<h2>Where to use JavaScript includes<\/h2>\n<p>The includes in JavaScript can be used for many scenarios. Some of them are listed below.<\/p>\n<ol>\n<li>To form a <a href=\"https:\/\/phppot.com\/php\/php-if-else-statement\/\">conditional code block<\/a> based on the presence of the search element in an array or string.<\/li>\n<li>To <a href=\"https:\/\/phppot.com\/php\/highlighting-keywords-in-search-results-with-php\/\">highlight the keyword<\/a> in the search result, if the includes in JavaScript returns true.<\/li>\n<li>To make the select, checkbox, radio options selected if the options found in the haystack.<\/li>\n<\/ol>\n<p>Visit the linked article to know the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\">other array prototype methods in JavaScript<\/a>.<\/p>\n<h2>Examples for using includes in JavaScript<\/h2>\n<p>This article includes 4 examples to see how to use JavaScript includes(). Those are,<\/p>\n<ol>\n<li>To search array if a specified element exists or not.<\/li>\n<li>To use includes with a positive or negative fromIndex parameter.<\/li>\n<li>To use String.prototype.includes.<\/li>\n<li>To invoke includes() as a generic method.<\/li>\n<\/ol>\n<h3>Search array element using Includes in JavaScript<\/h3>\n<p>This example contains an array of 4 strings. It <a href=\"https:\/\/phppot.com\/php\/functions-in-php\/\">defines a custom function<\/a>&nbsp;<em>checkOption()<\/em> to form a condition using includes().<\/p>\n<p>This function receives a string and applies array.includes() on it. It returns Boolean true if the passed element is found on the array.<\/p>\n<p>It prepares the output string based on the boolean value returned. It writes the log on the console to see the result of the program.<\/p>\n<p class=\"code-heading\">how-to-use-includes-in-javascript-array.php<\/p>\n<pre class=\"prettyprint\"><code class=\"language-javascript\">\n&lt;script&gt; var optionArray = [ 'Create', 'Read', 'Update', 'Delete' ]; checkOption('Read'); checkOption('Filter'); function checkOption(keyword) { var isIncludes = optionArray.includes(keyword); if(!isIncludes) { console.log(keyword + \": not exists\"); } else { console.log(keyword + \": exists\"); } }\n&lt;\/script&gt; <\/code><\/pre>\n<h3>Includes function with optional from-index parameter<\/h3>\n<p>It uses the optional fromIndex parameter while calling the&nbsp;<em>includes()<\/em> in JavaScript.<\/p>\n<p>It supplies either positive or negative values in the second parameter. On getting a negative index, it computes the position from where it should start the search.<\/p>\n<p>As passed -1 the computed position is 5, since arrayLength+negativeIndex = <em>6+(-1) = 5.<\/em><\/p>\n<p>From the 5th position, it searches for \u2018<em>Pagination\u2019<\/em> and returns true. When it searches for&nbsp;<em>\u2018Filter\u2019<\/em> then it will return false.<\/p>\n<p class=\"code-heading\">javascript-includes-with-from-index.php<\/p>\n<pre class=\"prettyprint\"><code class=\"language-javascript\">\n&lt;script&gt;\nvar optionArray = [ 'Create', 'Read', 'Update', 'Delete', 'Filter', 'Pagination' ]; console.log(optionArray.includes('Update', 2));\nconsole.log(optionArray.includes('Update', 3));\nconsole.log(optionArray.includes('Pagination', -1));\nconsole.log(optionArray.includes('Filter',-1));\n&lt;\/script&gt; <\/code><\/pre>\n<h3>JavaScript string includes<\/h3>\n<p>It\u2019s for using String.prototype.includes() in Javascript. It assigns a long string to a variable and <a href=\"https:\/\/phppot.com\/php\/live-search-in-php-and-mysql-with-ajax\/\">searches the passed keyword<\/a> on it.<\/p>\n<p>It also receives fromIndex position. A negative index will create no change. This program uses the fromIndex default value 0 and searches the string end to end.<\/p>\n<p class=\"code-heading\">check-string-includes-substring.php<\/p>\n<pre class=\"prettyprint\"><code class=\"language-javascript\">\n&lt;script&gt;\nvar inputString = \"How much wood would a woodchuck chuck if a woodchuck could chuck wood?\";\nvar result = inputString.includes(\"woodchuck\");\nconsole.log(result);\n&lt;\/script&gt; <\/code><\/pre>\n<h3>Invoke includes in JavaScript on array-like objects<\/h3>\n<p>JavaScript allows calling the includes() function as a generic method. In the above examples, the includes() is called with respect to <a href=\"https:\/\/phppot.com\/php\/php-self-vs-this\/\"><em>this<\/em> value<\/a> representing an array or string context.<\/p>\n<p>This example calls the includes in JavaScript on a functions\u2019 argument list instead of an array.<\/p>\n<p class=\"code-heading\">how-to-call-includes-as-generic.php<\/p>\n<pre class=\"prettyprint\"><code class=\"language-javascript\">\n&lt;script&gt;\n(function() { console.log(Array.prototype.includes.call(arguments, 'Read', 1)); console.log(Array.prototype.includes.call(arguments, 'Read', -1));\n})('Create', 'Read', 'Update', 'Delete') &lt;\/script&gt; <\/code><\/pre>\n<h2>Similar JavaScript methods like includes<\/h2>\n<p>There are more functions in JavaScript as like as the includes(). The below list shows some of those functions.<\/p>\n<ul>\n<li><a href=\"https:\/\/phppot.com\/javascript\/javascript-find\/\">find()<\/a> \u2013 applies condition on an array and returns the first element satisfying the condition.<\/li>\n<li>findIndex() \u2013 as like as find() but returns index instead of the value.<\/li>\n<li>indexOf() \u2013 returns index by element value.<\/li>\n<li>lastIndexOf() \u2013 returns last index of an input element. It makes difference if the there are multiple occurances of the passed element.<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>We have seen about the includes in JavaScript end to end. The above article contains the basic idea about this function. It covers a beginner\u2019s level introductory section and the usage mechanisms.<\/p>\n<p>The examples will make it clear how to use includes in JavaScript. I hope the scenarios to use and the list of related functions gives relevancy to get the idea.<\/p>\n<p><a class=\"download\" href=\"https:\/\/phppot.com\/downloads\/includes-in-javascript\">Download<\/a><\/p>\n<p> <!-- #comments --> <\/p>\n<div class=\"related-articles\">\n<h2>Popular Articles<\/h2>\n<\/p><\/div>\n<p> <a href=\"https:\/\/phppot.com\/javascript\/javascript-includes\/#top\" class=\"top\">\u2191 Back to Top<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>by Vincy. Last modified on November 21st, 2021. Coding in JavaScript is one of the critical skills required in building websites. Though mastering JavaScript is a journey to the center of the earth, continuous learning will help you make it. We have seen some of the JavaScript functions like find(), forEach() earlier. Now, let\u2019s learn [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":123180,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-123179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/123179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=123179"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/123179\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/123180"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=123179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=123179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=123179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}