[Tut] How to use includes in JavaScript Array, String - Printable Version +- Sick Gaming (https://www.sickgaming.net) +-- Forum: Programming (https://www.sickgaming.net/forum-76.html) +--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html) +--- Thread: [Tut] How to use includes in JavaScript Array, String (/thread-99089.html) |
[Tut] How to use includes in JavaScript Array, String - xSicKxBot - 03-29-2022 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/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="(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/21/how-to-use-includes-in-javascript-array-string/ |