03-29-2022, 11:37 AM
How to use includes in JavaScript Array, String
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/03/how-to-use-includes-in-javascript-array-string.jpg" width="550" height="198" title="" alt="" /></div><div><div class="modified-on" readability="7.1489361702128"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on November 21st, 2021.</div>
<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>
<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’s learn about the function includes() in JavaScript.</p>
<div class="post-section-highlight" readability="42">
<h2>Quick example</h2>
<pre class="prettyprint"><code class="language-javascript">
<script>
inputArray = ['Create', 'Read', 'Update', 'Delete', 'Filter'];
inputArray.includes('Read'); //returns true
inputArray.includes('Read','3'); //returns false
inputArray.includes('Error'); //returns false
inputArray.includes('Delete','-1'); //returns false inputString = 'How to learn JavaScript?';
inputString.includes('learn'); //returns true
inputString.includes('learn','8'); //returns false
</script> </code></pre>
</div>
<h2>About JavaScript includes</h2>
<p>It checks if an array or string includes a given value.</p>
<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>
<p><strong>Syntax, parameters and return value</strong></p>
<pre class="prettyprint"><code class="language-javascript">
includes(searchElement, [fromIndex]); </code></pre>
<p>It has two parameters, searchElement and fromIndex. The fromIndex is optional and its default value is 0 to start with.</p>
<p>The fromIndex accepts signed numbers. With a negative value, it applies this formula to compute the position to start.</p>
<p><code> fromIndex = arrayLength + signedFromIndex<br /></code></p>
<p>It returns boolean true if any match is found or false otherwise.</p>
<p><strong>Note:</strong></p>
<ul>
<li>JavaScript includes() searches array or string with case sensitivity.</li>
<li>It can also be called as a generic method.</li>
<li>It works in most modern browsers.</li>
<li>The negative value is not applicable for the includes() in the String prototype.</li>
<li>The Array.prototype.includes() will not search for a sub-array.</li>
</ul>
<p><img 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/20...00x108.jpg 300w, https://phppot.com/wp-content/uploads/20...68x277.jpg 768w, https://phppot.com/wp-content/uploads/20...script.jpg 965w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>Where to use JavaScript includes</h2>
<p>The includes in JavaScript can be used for many scenarios. Some of them are listed below.</p>
<ol>
<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>
<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>
<li>To make the select, checkbox, radio options selected if the options found in the haystack.</li>
</ol>
<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>
<h2>Examples for using includes in JavaScript</h2>
<p>This article includes 4 examples to see how to use JavaScript includes(). Those are,</p>
<ol>
<li>To search array if a specified element exists or not.</li>
<li>To use includes with a positive or negative fromIndex parameter.</li>
<li>To use String.prototype.includes.</li>
<li>To invoke includes() as a generic method.</li>
</ol>
<h3>Search array element using Includes in JavaScript</h3>
<p>This example contains an array of 4 strings. It <a href="https://phppot.com/php/functions-in-php/">defines a custom function</a> <em>checkOption()</em> to form a condition using includes().</p>
<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>
<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>
<p class="code-heading">how-to-use-includes-in-javascript-array.php</p>
<pre class="prettyprint"><code class="language-javascript">
<script> 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"); } }
</script> </code></pre>
<h3>Includes function with optional from-index parameter</h3>
<p>It uses the optional fromIndex parameter while calling the <em>includes()</em> in JavaScript.</p>
<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>
<p>As passed -1 the computed position is 5, since arrayLength+negativeIndex = <em>6+(-1) = 5.</em></p>
<p>From the 5th position, it searches for ‘<em>Pagination’</em> and returns true. When it searches for <em>‘Filter’</em> then it will return false.</p>
<p class="code-heading">javascript-includes-with-from-index.php</p>
<pre class="prettyprint"><code class="language-javascript">
<script>
var optionArray = [ 'Create', 'Read', 'Update', 'Delete', 'Filter', 'Pagination' ]; console.log(optionArray.includes('Update', 2));
console.log(optionArray.includes('Update', 3));
console.log(optionArray.includes('Pagination', -1));
console.log(optionArray.includes('Filter',-1));
</script> </code></pre>
<h3>JavaScript string includes</h3>
<p>It’s 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>
<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>
<p class="code-heading">check-string-includes-substring.php</p>
<pre class="prettyprint"><code class="language-javascript">
<script>
var inputString = "How much wood would a woodchuck chuck if a woodchuck could chuck wood?";
var result = inputString.includes("woodchuck");
console.log(result);
</script> </code></pre>
<h3>Invoke includes in JavaScript on array-like objects</h3>
<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>
<p>This example calls the includes in JavaScript on a functions’ argument list instead of an array.</p>
<p class="code-heading">how-to-call-includes-as-generic.php</p>
<pre class="prettyprint"><code class="language-javascript">
<script>
(function() { console.log(Array.prototype.includes.call(arguments, 'Read', 1)); console.log(Array.prototype.includes.call(arguments, 'Read', -1));
})('Create', 'Read', 'Update', 'Delete') </script> </code></pre>
<h2>Similar JavaScript methods like includes</h2>
<p>There are more functions in JavaScript as like as the includes(). The below list shows some of those functions.</p>
<ul>
<li><a href="https://phppot.com/javascript/javascript-find/">find()</a> – applies condition on an array and returns the first element satisfying the condition.</li>
<li>findIndex() – as like as find() but returns index instead of the value.</li>
<li>indexOf() – returns index by element value.</li>
<li>lastIndexOf() – returns last index of an input element. It makes difference if the there are multiple occurances of the passed element.</li>
</ul>
<h2>Conclusion</h2>
<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’s level introductory section and the usage mechanisms.</p>
<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>
<p><a class="download" href="https://phppot.com/downloads/includes-in-javascript">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/javascript-includes/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2021/11/...ay-string/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/03/how-to-use-includes-in-javascript-array-string.jpg" width="550" height="198" title="" alt="" /></div><div><div class="modified-on" readability="7.1489361702128"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on November 21st, 2021.</div>
<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>
<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’s learn about the function includes() in JavaScript.</p>
<div class="post-section-highlight" readability="42">
<h2>Quick example</h2>
<pre class="prettyprint"><code class="language-javascript">
<script>
inputArray = ['Create', 'Read', 'Update', 'Delete', 'Filter'];
inputArray.includes('Read'); //returns true
inputArray.includes('Read','3'); //returns false
inputArray.includes('Error'); //returns false
inputArray.includes('Delete','-1'); //returns false inputString = 'How to learn JavaScript?';
inputString.includes('learn'); //returns true
inputString.includes('learn','8'); //returns false
</script> </code></pre>
</div>
<h2>About JavaScript includes</h2>
<p>It checks if an array or string includes a given value.</p>
<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>
<p><strong>Syntax, parameters and return value</strong></p>
<pre class="prettyprint"><code class="language-javascript">
includes(searchElement, [fromIndex]); </code></pre>
<p>It has two parameters, searchElement and fromIndex. The fromIndex is optional and its default value is 0 to start with.</p>
<p>The fromIndex accepts signed numbers. With a negative value, it applies this formula to compute the position to start.</p>
<p><code> fromIndex = arrayLength + signedFromIndex<br /></code></p>
<p>It returns boolean true if any match is found or false otherwise.</p>
<p><strong>Note:</strong></p>
<ul>
<li>JavaScript includes() searches array or string with case sensitivity.</li>
<li>It can also be called as a generic method.</li>
<li>It works in most modern browsers.</li>
<li>The negative value is not applicable for the includes() in the String prototype.</li>
<li>The Array.prototype.includes() will not search for a sub-array.</li>
</ul>
<p><img 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/20...00x108.jpg 300w, https://phppot.com/wp-content/uploads/20...68x277.jpg 768w, https://phppot.com/wp-content/uploads/20...script.jpg 965w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>Where to use JavaScript includes</h2>
<p>The includes in JavaScript can be used for many scenarios. Some of them are listed below.</p>
<ol>
<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>
<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>
<li>To make the select, checkbox, radio options selected if the options found in the haystack.</li>
</ol>
<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>
<h2>Examples for using includes in JavaScript</h2>
<p>This article includes 4 examples to see how to use JavaScript includes(). Those are,</p>
<ol>
<li>To search array if a specified element exists or not.</li>
<li>To use includes with a positive or negative fromIndex parameter.</li>
<li>To use String.prototype.includes.</li>
<li>To invoke includes() as a generic method.</li>
</ol>
<h3>Search array element using Includes in JavaScript</h3>
<p>This example contains an array of 4 strings. It <a href="https://phppot.com/php/functions-in-php/">defines a custom function</a> <em>checkOption()</em> to form a condition using includes().</p>
<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>
<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>
<p class="code-heading">how-to-use-includes-in-javascript-array.php</p>
<pre class="prettyprint"><code class="language-javascript">
<script> 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"); } }
</script> </code></pre>
<h3>Includes function with optional from-index parameter</h3>
<p>It uses the optional fromIndex parameter while calling the <em>includes()</em> in JavaScript.</p>
<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>
<p>As passed -1 the computed position is 5, since arrayLength+negativeIndex = <em>6+(-1) = 5.</em></p>
<p>From the 5th position, it searches for ‘<em>Pagination’</em> and returns true. When it searches for <em>‘Filter’</em> then it will return false.</p>
<p class="code-heading">javascript-includes-with-from-index.php</p>
<pre class="prettyprint"><code class="language-javascript">
<script>
var optionArray = [ 'Create', 'Read', 'Update', 'Delete', 'Filter', 'Pagination' ]; console.log(optionArray.includes('Update', 2));
console.log(optionArray.includes('Update', 3));
console.log(optionArray.includes('Pagination', -1));
console.log(optionArray.includes('Filter',-1));
</script> </code></pre>
<h3>JavaScript string includes</h3>
<p>It’s 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>
<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>
<p class="code-heading">check-string-includes-substring.php</p>
<pre class="prettyprint"><code class="language-javascript">
<script>
var inputString = "How much wood would a woodchuck chuck if a woodchuck could chuck wood?";
var result = inputString.includes("woodchuck");
console.log(result);
</script> </code></pre>
<h3>Invoke includes in JavaScript on array-like objects</h3>
<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>
<p>This example calls the includes in JavaScript on a functions’ argument list instead of an array.</p>
<p class="code-heading">how-to-call-includes-as-generic.php</p>
<pre class="prettyprint"><code class="language-javascript">
<script>
(function() { console.log(Array.prototype.includes.call(arguments, 'Read', 1)); console.log(Array.prototype.includes.call(arguments, 'Read', -1));
})('Create', 'Read', 'Update', 'Delete') </script> </code></pre>
<h2>Similar JavaScript methods like includes</h2>
<p>There are more functions in JavaScript as like as the includes(). The below list shows some of those functions.</p>
<ul>
<li><a href="https://phppot.com/javascript/javascript-find/">find()</a> – applies condition on an array and returns the first element satisfying the condition.</li>
<li>findIndex() – as like as find() but returns index instead of the value.</li>
<li>indexOf() – returns index by element value.</li>
<li>lastIndexOf() – returns last index of an input element. It makes difference if the there are multiple occurances of the passed element.</li>
</ul>
<h2>Conclusion</h2>
<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’s level introductory section and the usage mechanisms.</p>
<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>
<p><a class="download" href="https://phppot.com/downloads/includes-in-javascript">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/javascript-includes/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2021/11/...ay-string/