<p>In the early days of the internet, the information on the web consisted of just static pages. When it became interactive people started generating web pages on the server, making them more dynamic in nature.&nbsp;</p>
<p>With the advent of new technologies and site generators, a new philosophy of serving web pages is making us think about static pages again.&nbsp;</p>
<p>This new philosophy or architecture is called JAMstack which stands for JavaScript, APIs and Markdown stack.</p>
<p>The whole idea of JAMstack is to serve websites as static pages, giving dynamic nature using JavaScript, and exchange data through APIs.&nbsp;</p>
<p>As a result, it makes the developer experience simpler, improves performance with greater scalability, and reduces the cost of maintenance.&nbsp;</p>
<p>There are many static site generators available these days viz., NextJS, Hugo, Gatsby, etc.&nbsp;</p>
<p>With the help of third-party tools or services, these static sites can be made more dynamic.&nbsp;</p>
<p>Creating and maintaining static sites is inexpensive but adding dynamic features is where one has to spend on third-party tools.</p>
<p>One essential service which almost every website needs is a contact form and handling contact forms on static sites can be done through third-party services as we don't maintain a full-fledged server to handle forms on static sites.</p>
<p>Some of the static site form handling services are FormSpree, FormKeep, GetForm etc. These third-party services come at a price and free tier services have limitations in data and the number of submissions.&nbsp;</p>
<p>But here is a solution that helps you to handle forms on static sites without the need for these third-party tools.&nbsp;</p>
<p>It is called <strong>FormEasy</strong> which is a FREE and open-source apps script library that helps you to receive forms on static sites with full control of your data.</p>
<p>Form spree is a quite popular service for handling forms on static websites and <a href="https://devapt.com/formeasy" target="_blank" rel="noopener">FormEasy</a> can be the best formspree alternative with all customizations you want.</p>
<p>Let's see how to set up this FormEasy apps script library to handle static site forms.</p>
<h2 style="text-align: center;">FormEasy setup</h2>
<p>In a few simple steps, forms on static sites can be handled using FormEasy library.&nbsp;</p>
<ol>
<li>Create an empty Google sheets file</li>
<li>Open the Apps Script file connected to it</li>
<li>Add the FormEasy library using ScriptID</li>
<li>Add <code>doPost</code> apps script function</li>
<li>Deploy the apps script code and get the Web app URL to make POST requests</li>
</ol>
<h3 id="create_empty_google_sheet">1. Create an empty Google sheets file</h3>
<p>Visit this <a href="https://docs.google.com/spreadsheets/u/0/" target="_blank" rel="noopener">link</a> to create a new blank Google sheets file.</p>
<p><img src="../images/formeasy/create-empty-google-sheet.png" alt="Create-empty-Google-sheets-file-formeasy" /></p>
<h3 id="open_apps_script_file">2. Open the Apps Script file</h3>
<p>After creating an empty Google sheet file(you can rename the file if you want to), go to <strong><em>Extensions</em></strong> in the menu bar and click <em><strong>Apps Script</strong>.</em></p>
<p>It opens up an apps script file connected with the Google sheet.&nbsp;</p>
<p><img src="../images/formeasy/open-apps-script.png" alt="Open-apps-script-in-google-sheets" /></p>
<h3 id="add_formeasy_library">3. Add the FormEasy library</h3>
<p>In the left bar of apps script file click <code>+</code> button beside Libraries and add the below Script ID and click <strong><em>Look up</em></strong> button.</p>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 97.9764%;">
<blockquote>ScriptID: 1CAyzGbXdwMlko81SbJAjRp7ewxhyGKhDipDK4v8ZvlpYqrMAAzbFNccL</blockquote>
</td>
</tr>
</tbody>
</table>
<p><img src="../images/formeasy/add-formeasy-library.png" alt="Add-FormEasy-library-to-apps-script" /></p>
<p>You will see two options <em>Version </em>and <em>Identifier</em>.&nbsp;</p>
<p>Select the latest version to reflect the latest changes made to the library if any or you can select the specific version as per the features you want.</p>
<p>For the identifier, the default name is <em>FormEasy</em> it is the name of the object used to call methods in the library. You can change it if you want but keeping it as it is can help you use the ready code snippets related to FormEasy.</p>
<h3 id="add_dopost_function">4. Add doPost function</h3>
<p>Clear the default functions if any in the default apps script file <em>Code.gs.</em></p>
<p>Create a function named <code>doPost</code>.&nbsp;</p>
<p><code>doPost</code> function name is the default name of the function that runs whenever a POST request is made to the script.</p>
<p>Next set the email if you want to get notified whenever any form gets submitted using <code>setEmail</code> method on FormEasy object. (FormEasy is the default identifier if you do not make any changes to the identifier while adding the FormEasy library)</p>
<p>Setting email is optional, the data gets logged in the Google sheet and you will not be notified through email if you do not set the email.</p>
<p>You need to return <code>action</code> method on FormEasy object with the <code>req</code> argument from the <strong><em>doPost</em></strong> function and this is the only mandatory method to use and all other methods on FormEasy are optional.&nbsp;</p>
<p><img src="../images/formeasy/add-formeasy-code.png" alt="Add-FormEasy-code" /></p>
<p>All the available methods on FormEasy library are:</p>
<div>
<ul>
<li><strong>setSheet</strong> - To select the specific sheet for saving the data(Default is active sheet)</li>
<li><strong>setEmail</strong> - To set the email for receiving notification</li>
<li><strong>setSubject </strong>- To set the subject of the email</li>
<li><strong>setFormHeading</strong> - To set the heading(inside email)</li>
<li><strong>setFields</strong> - To set the fields of the form(Lower case letters, also the keys of the JSON object)</li>
<li><strong>action</strong> - To return the response after submitting the form(Mandatory to return)</li>
</ul>
<p>The above all are optional methods except the <code>action</code>.</p>
<p>The simplest case looks like below:</p>
<pre class="language-javascript"><code>function doPost(req) {
  FormEasy.setEmail('youremail@domain.com'); // To receive email notification(optional)
  return FormEasy.action(req); // Mandatory to return action method
}</code></pre>
</div>
<h3 id="deploy_apps_script">5. Deploy the apps script code</h3>
<p>After saving all the changes to the code, it has to be deployed to use it.&nbsp;</p>
<p>To deploy, click the <strong>Deploy</strong> button at the top right corner and select&nbsp;<strong>New deployment</strong>&nbsp;and select type to&nbsp;<strong>Web app</strong>&nbsp;from the gear icon.</p>
<p dir="auto">Select/fill the below options</p>
<ul dir="auto">
<li>Description(optional),</li>
<li>Execute as&nbsp;<strong>Me(you email)</strong></li>
<li>Who has access&nbsp;<strong>Anyone</strong></li>
</ul>
<p>Click the <em>Deploy</em>&nbsp;button(authorize the script if you haven't done it before) and you will get a URL under&nbsp;<strong>Web app</strong>, copy that and it is going to be the endpoint for submitting the POST requests.&nbsp;</p>
<p>That's it. Now you can submit forms on this endpoint and they get logged in the Google sheet you selected. If you had set email then you will be notified through email whenever any form submission happens.</p>
<p><img src="../images/formeasy/deploy-apps-script.png" alt="Deploy-apps-script-code" /></p>
<p>If you want to make any changes to the script, like changing the subject text, email etc, you can do so and save the script. And while redeploying it instead of selecting <em>New deployment</em>, this time you have to select <strong>Manage deployments</strong> and click the pencil icon, select the <strong>New version,</strong> and click the deploy button.&nbsp;</p>
<p>The changes will be get reflected when you make the POST requests after that.&nbsp;</p>
<p><strong>Note:</strong> Whenever you make a new deployment, the web app URL changes. But when you redeploy using <strong><em>Manage deployments</em>&nbsp;</strong>option the URL remains the same.</p>
<p>Here is how a sample POST request using JavaScript <code>fetch</code> looks like.</p>
<pre class="language-javascript"><code>const data = {
  name: 'John',
  email: 'john@domain.com',
  message: 'Receiving forms is easy and simple now!',
};

const url = 'https://script.google.com/macros/s/&lt;Deployment ID&gt;/exec';

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain;charset=utf-8',
  },
  body: JSON.stringify(data),
})
  .then((res) =&gt; res.json())
  .then((data) =&gt; console.log('data', data))
  .catch((err) =&gt; console.log('err', err));</code></pre>
<p>If you want to follow all the above instructions in the form of a video you can check this demo video.</p>
<div class="flex justify-center"><iframe class=" rounded-xl overflow-hidden" title="Text to image chrome extension intro" src="https://www.youtube-nocookie.com/embed/0u75mtnhifM?rel=0" width="680" height="350" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<p>As said already FormEasy is an open-source FormSpree alternative. You can check the source code of this library, fork it, make changes, use it yourself or you can contribute your code to the <a href="https://github.com/Basharath/FormEasy" target="_blank" rel="noopener">FormEasy Github repo</a>.</p>
<p>Hope this is a good solution to handle contact forms on static websites for FREE. If you have or found any such useful solution for static sites then do share it with us.</p>

Here is the free and open source formspree alternative to handle contact forms on static websites.
You can have full control of your data. 

Free FormSpree alternative to handle forms on static sites

<p>JavaScript has become the most popular language in the last few years. It is also the language that powers the web along with HTML and CSS.&nbsp;</p>
<p>JavaScript has evolved in such a manner that almost any kind of application for any platform can be created using it through its huge collection of libraries and frameworks available as open source.&nbsp;</p>
<blockquote>
<p style="text-align: right;"><em>Any application that can be written in JavaScript, will eventually be written in JavaScript.</em></p>
<p style="text-align: right;">- Jeff Atwood</p>
</blockquote>
<p>JavaScript has its pros and cons along with its quirks. Most people are using it for the pros it offers in solving problems or creating applications.</p>
<p>A problem can be solved in different ways using JavaScript. In this article, we are going to look at some of the best JavaScript tips to write simple and efficient JS code.&nbsp;</p>
<h2 style="text-align: center;">10 JavaScript tips and tricks</h2>
<h3>1. Sorting in javascript</h3>
<p>The <code>sorting()</code> array method in JS is a mutating method which means it modifies the order of the elements of the original array.</p>
<p>A better approach is to duplicate the array and sort it.</p>
<p>Sorting in JavaScript is by default lexicographic, so for sorting numbers, it's always essential to sort by a callback function.&nbsp;</p>
<pre class="language-javascript"><code>// Sorting directly
const arr = [4, 20, 10, 1, 3, 5];
arr.sort(); // arr: [1, 10, 20, 3, 4, 5]</code></pre>
<pre class="language-javascript"><code>// Sorting by duplicating the array
const arr = [4, 20, 10, 1, 3, 5];
const sortedArr = arr.slice().sort((a, b) =&gt; a - b);

// arr: [4, 20, 10, 1, 3, 5]
// sortedArr: [1, 3, 4, 5, 10, 20]</code></pre>
<h3>2. Flattening array in JavaScript</h3>
<p>Flattening an array means putting all the elements of nested arrays into the main array.&nbsp;</p>
<p>There are quite <a href="https://devapt.com/javascript-flatten-array" target="_blank" rel="noopener">different ways to flatten arrays in JavaScript</a>. There's a <code>flat()</code> method added in ES10 or Ecmascript version 2019 to flatten the array directly.&nbsp;</p>
<p><code>flat()</code> method takes an argument as the max. depth that has to be flattened to. The default depth is 1.&nbsp;</p>
<p>To flatten the array of any depth use <code>Infinity</code> as the argument.</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd', ['e', 'f']]];
const flatArray = letters.flat(2); // Flatten until depth 2

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
<h3>3. Shuffle array in JavaScript</h3>
<p>To shuffle an array we can use <code>sort()</code> method by returning a random positive or negative number in the callback.</p>
<p>We can generate random positive or negative number using</p>
<pre class="language-javascript"><code>// Random positive and negative number
Math.random() - 0.5</code></pre>
<pre class="language-javascript"><code>const letters = ['a', 'b', 'c', 'd', 'e', 'f'];
const shuffledArray = [...letters].sort(() =&gt; Math.random() - 0.5);

// shuffledArray: ["e", "d", "b", "a", "f", "c"]
// shuffledArray: ["b", "d", "f", "a", "c", "e"]</code></pre>
<h3>4. Filter falsy values</h3>
<p>There are six falsy values in JavaScript. They are 0, <code>''</code>, null, undefined, false, NaN.</p>
<p>We can easily filter out those values using the <code>Boolean</code> global function.</p>
<pre class="language-javascript"><code>const arr = [1, 0, 2, '', 3, null, 4];
const filtered = arr.filter(Boolean); 

// filtered: [1, 2, 3, 4]</code></pre>
<h3>5. Object destructuring</h3>
<p>Object destructuring is a very useful technic to extract values from an object in the desired variables.&nbsp;</p>
<p>We can rename the keys using <code>:</code>(colon) and also assign default values using <code>=</code> if a certain destructured variable doesn't exist in the object.</p>
<p>We can also assign the object values to an already declared variable by wrapping the destructured code in parenthesis.</p>
<pre class="language-javascript"><code>const person = {
  name: 'John',
  years: 25,
  occupation: 'developer',
};

let occupation;

const { name, years: age, place = 'remote' } = person;
({ occupation } = person);

// name: John
// age: 25
// place: remote
// occupation: developer</code></pre>
<h3>6. Sleep or delay in JavaScript</h3>
<p>JavaScript executes code synchronously. There's no built-in function in JS to sleep or delay synchronous code.&nbsp;</p>
<p>We can create a sleep function with the help of a promise.</p>
<pre class="language-javascript"><code>// Sleep function using promise
const sleep = (ms) =&gt; new Promise((resolve) =&gt; setTimeout(resolve, ms));</code></pre>
<pre class="language-javascript"><code>const sleep = (ms) =&gt; new Promise((resolve) =&gt; setTimeout(resolve, ms));

async function print() {
  console.log('First line ');
  await sleep(2000); // sleeps for 2 seconds
  console.log('Second line');
}

print();
// First line
// ...after 2 seconds
// Second line</code></pre>
<h3>7. Typecast strings to numbers</h3>
<p>When you have an array of string numbers and type casting those to numbers can be done easily using the global <code>Number</code> function.</p>
<pre class="language-javascript"><code>const strings = ['1', '2', '3', '4' , '5'];
const numbers = strings.map(Number);

// strings: ['1', '2', '3', '4' , '5']
// numbers: [1, 2, 3, 4, 5]</code></pre>
<h3>8. !!, ~~, + operators</h3>
<h4>Convert any value to boolean using !!</h4>
<p><code>!</code> is a bitwise not operator. Using <code>!!</code> we can quickly convert any value to a boolean.</p>
<pre class="language-javascript"><code>const isPresent = 'yes';

!!isPresent; // true</code></pre>
<h4>Trim the decimal part using ~~</h4>
<p>We can use <code>~~</code> to quickly trim the decimal part of a number. This can be used as an alternative to <code>Math.floor()</code>.</p>
<p>In JavaScript <code>~number = -(number + 1)</code></p>
<pre class="language-javascript"><code>const price = 25.4;
~~price; // 25</code></pre>
<h4>Typecast string to a number using +</h4>
<p>We can prefix <code>+</code> to string numbers to quickly convert them to number type.</p>
<pre class="language-javascript"><code>const rate = '15';
const amount = +rate;

// rate: '15'
// amount: 15</code></pre>
<h3>9. Nullish coalescing (??) and optional chaining (?.)</h3>
<p><code>??</code> nullish coalescing operator is used to handle <code>null</code> or <code>undefined</code> values.&nbsp;</p>
<p>Whenever <code>null</code> or <code>undefined</code> value is encountered we can return a default value.</p>
<p>This doesn't work for other boolean values like 0, NaN, <code>''</code>, false. To handle all boolean values we can use <code>||</code> logical OR.</p>
<pre class="language-javascript"><code>let visitor;
let person;

visitor = 'Doe';
person =  visitor ?? 'staff';
// person: Doe

visitor = null;
person =  visitor ?? 'staff';
// person: staff</code></pre>
<p>Optional chaining is used to avoid throwing of error whenever there's a missing key in an object.</p>
<pre class="language-javascript"><code>const person = {
  name: 'John',
  books: null
}
person.books.name // throws error

person.books?.name // returns undefined</code></pre>
<h3>10. Remove the duplicates in an array</h3>
<p>Removing duplicates could be cumbersome sometimes. But using the <code>Set()</code> this can be achieved in simple steps.</p>
<p>A Set is a collection of unique data types in Javascript. Learn about <a href="https://devapt.com/javascript-set-weakset" target="_blank" rel="noopener">Javascript set</a> here.</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', 'c', 'b', 'a', 'd']; // duplicates
const uniqueLetters = [...new Set(letters)]; 

// uniqueLetters: ['a', 'b', 'c', 'd']</code></pre>
<p>That's all in this article. These are some of the interesting JavaScript tips to know about. We'll see more tips in the upcoming articles.&nbsp;</p>

Here are some of the best JavaScript tips and tricks that you should know. These tips can help you to develop Javascript applications with ease.

JavaScript tips and tricks 

10 JavaScript tips and tricks that makes you a better dev

<p>In JavaScript, an array is a collection of ordered elements and there's no restriction for the type of elements.&nbsp;</p>
<blockquote>
<p>An array is said to be flat or flattened if there are no nested arrays inside the array.&nbsp;</p>
</blockquote>
<p>Let's see what an array and a flattened array look like with an example.</p>
<pre class="language-javascript"><code>// An array with nested arrays
const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

// Flattened array
["a", "b", "c", "d", "e", "f"]
</code></pre>
<p>In this article, we are going to see different ways to flatten arrays in JavaScript.&nbsp;</p>
<h2 style="text-align: center;">Flatten arrays in JS</h2>
<p>We'll see different ways to flatten this <code>letters</code> array in JS.&nbsp;</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];</code></pre>
<h3>1. Using concat() array method</h3>
<p><code>concat()</code> array method is used to merge two or more arrays. It takes a value or an array as an argument and concatenates it to the original array and returns the result as a new array without mutating the original one.</p>
<p>We'll use an empty array and concatenate the <code>letters</code> array elements with the help of a spread operator to spread the nested array elements.&nbsp;</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

const flatArray = [].concat(...letters);

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
<h3>2. Using concat() array method with apply()</h3>
<p>We can use <code>apply()</code> method on <code>concat</code> function as apply method helps to pass arguments in the form of an array which we have already seen in <a href="https://devapt.com/call-apply-bind-javascript" target="_blank" rel="noopener">call, apply, bind Javascript</a> article.</p>
<p>So the idea is to pass every individual element of the array to the <code>concate</code> method instead of the whole array.</p>
<p>In the previous method, we have used the <code>...</code> spread operator for the same reason.&nbsp;</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

const flatArray = [].concat.apply([], letters);

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
<p>The first array need not be empty and could be anything in <code>[].concat</code> because the array that we pass as the first argument to <code>apply()</code> will be considered for creating the new array.</p>
<h3>3. Using reduce() array method</h3>
<p>We can use <code>reduce()</code> method to flatten an array as flattening is a way of reducing the original array to a different form.</p>
<p>The idea is to spread every element and nested element in a new array and return the result, and the result is nothing but the flattened array.</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

const flatArray = letters.reduce((acc, curr) =&gt; [...acc, ...curr], []);

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
<p>We can omit the array given as a second argument to the <code>reduce</code> method, it is just to initialize the accumulator with an empty array.</p>
<h3>4. Using the flat() array method</h3>
<p>There's a new array method called <code>flat()</code> added in the <a href="https://262.ecma-international.org/10.0/" target="_blank" rel="noopener">ECMAScript version 2019</a> or ES10. What it does is simply flattens the array when it is called.</p>
<p>Using <code>flat()</code> method we can flatten arrays of any depth by passing the max. depth to be flattened to as an argument to the flat method. The default depth is 1.</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

const flatArray = letters.flat(); // default depth 1

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
<p>To flatten an array of depth greater than 1.</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd', ['e', 'f']]];

const flatArray = letters.flat(2); // Flatten until depth 2

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
<p>To flatten any amount of depth, we can pass <code>Infinity</code> as the argument to the <code>flat()</code> method.</p>
<h3>5. By converting to string and splitting</h3>
<p>Arrays of any depth when converted to a string gets flattened and will be joined by <code>,</code>(comma).</p>
<p>So using this technique after converting an array to a string and then splitting it by <code>,</code> we can flatten the array.</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

const flatArray = letters.toString().split(',');

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
<p>The main problem with this method is that it works well when all the elements in the array are strings or of any one specific type, say numbers. Because after generating the array we can convert it to a specific type.&nbsp;</p>
<p>But when the array consists of multiple type elements then it gets difficult to use this method.&nbsp;</p>
<p>Let's see how an array of numbers can be flattened using this technique.</p>
<pre class="language-javascript"><code>const numbers = [1, 2, [3, 4], [5, 6]];

const flatArray = numbers.toString().split(',').map(Number);
// or const flatArray = numbers.join().split(',').map(Number);
// or const flatArray = `${numbers}`.split(',').map(Number);

// flatArray: [1, 2, 3, 4, 5, 6]</code></pre>
<p>And that is all about different ways to flatten Javascript arrays. Most of the browsers have support for <code>flat()</code> method so it would be handy to use this method in most of the scenarios.</p>
<p>If you have any other way to flatten the arrays in a better manner then do share it with us and we'll be happy to update this article with that.&nbsp;</p>

There are different ways to flatten arrays in JavaScript. Here are the 5 different ways to obtain flat arrays using one liners in JS.

Sample excerpt

Learn to flatten array in JavaScript with one liners

<p>The interactivity on webpages in the browser happens with the help of JavaScript. Javascript calls every action that happens on the webpage as an event. There's a way how events get propagated in different directions in the DOM(Document Object Model) tree.</p>
<blockquote>
<p>Event bubbling in Javascript refers to the way how events get propagated from the innermost element to the outermost element of the DOM often the <code>document</code>.</p>
</blockquote>
<h2 style="text-align: center;">Event bubbling in JavaScript</h2>
<p>When an event happens on an element, the event handler attached to that element runs first, then parent's handler and followed by all other ancestors' handlers. This is what bubbling in JavaScript is.</p>
<p>Let's understand it better with the help of a simple example.</p>
<pre class="language-javascript"><code>&lt;article onclick="alert('article')"&gt;
  &lt;section onclick="alert('section')"&gt;
    &lt;div onclick="alert('div')"&gt;Text to click&lt;/div&gt;
  &lt;/section&gt;
&lt;/article&gt;
</code></pre>
<p>When you run the above code snippet in the browser and click on the text, you can see an <a href="https://devapt.com/javascript-popup-boxes" target="_blank" rel="noopener">alert box</a> with <code>div</code> message, followed by another alert with <code>section</code> message and it is followed by another alert with <code>article</code> message.&nbsp;</p>
<p>And that shows clearly that our event of clicking is propagating up and triggering other event handlers on the parent and ancestor elements of <code>div</code>. And this even propagation won't stop until the <code>article</code> element, it keeps going and going until it reaches <code>html</code> element and then to the <code>document</code> object.</p>
<p>Event bubbling is the default behaviour in JavaScript and it has various use cases, like sometimes analytic tools want to capture user moments, clicks etc and all such things happen because of event bubbling.&nbsp;</p>
<p>Similar to bubbling there's another concept called event capturing and this works opposite to bubbling.</p>
<p><em>In <strong>bubbling</strong> events propagate from the innermost element to the outermost parent and in <strong>capturing</strong> events propagate from the outermost parent to the innermost element.</em></p>
<h2 style="text-align: center;">Stop event bubbling in Javascript</h2>
<p>It's very simple to stop event bubbling on an element that is to stop triggering the handlers of its parent and ancestor elements.</p>
<p>Let's see the same example to stop this bubbling.</p>
<pre class="language-javascript"><code>&lt;article onclick="alert('article')"&gt;
  &lt;section onclick="alert('section')"&gt;
    &lt;div onclick="event.stopPropagation()"&gt;Text to click&lt;/div&gt;
    &lt;p&gt;Paragraph text&lt;/p&gt;
  &lt;/section&gt;
&lt;/article&gt;</code></pre>
<p>In the above code snippet we have added <code>event.stopPropagation()</code> on the div handler and a new paragraph of text.&nbsp;</p>
<p>When you click on the div text, nothing happens because we are preventing the event from bubbling, but when you click the paragraph text it bubbles up and triggers the <code>section</code> and <code>article</code> elements' handlers.&nbsp;</p>
<p>And that's so simple to prevent even bubbling. But in most cases, you don't need to prevent this bubbling of events, and only under specific scenarios you need this <code>stopPropagation</code> method for stopping the bubbling.</p>
<pre class="language-javascript"><code>&lt;div onclick="event.stopPropagation()"&gt;Text to click&lt;/div&gt;</code></pre>
<p>The way we have handled the event on <code>div</code> element is the old style of running event handlers and it's not an effective way to handle events like this.&nbsp;</p>
<h2 style="text-align: center;">Preferred way to handle events</h2>
<p>The preferred way to handle events on any elements is by using <code>addEventListener</code> method on it.</p>
<pre class="language-javascript"><code>document.addEventListener(event, function, useCapture);</code></pre>
<ul>
<li><strong>event</strong> - type of the event to listen e.g., click, mouseover etc</li>
<li><strong>function</strong> - function to run after the event occurs</li>
<li><strong>useCapture</strong> - boolen(default false), if true event propagation happens from parent to the innert most element(child)</li>
</ul>
<p>So let's see this by considering an example</p>
<h3>Event bubbling and capturing with addEventListener</h3>
<pre class="language-javascript"><code>// Event bubbling
&lt;section&gt;
  &lt;div&gt;Text to click&lt;/div&gt;
&lt;/section&gt;

&lt;script&gt;
const section = document.querySelector('section');
const div = document.querySelector('div');

div.addEventListener('click', (e) =&gt; alert('From div'));
section.addEventListener('click', (e) =&gt; alert('From section'));
&lt;/script&gt;</code></pre>
<p>In this event bubbling happens when you click the div text, the event gets propagated to the <code>section</code> handlers and triggers it.</p>
<p>To reverse the event bubbling to go from parent to child, you can just enable the useCapture flag on the parent element.</p>
<pre class="language-javascript"><code>// Passing third argument with true, 
// enables the section handler to trigger first before div
section.addEventListener('click', () =&gt; alert('From section'), true);</code></pre>
<h3>Stop event propagation with addEventListener</h3>
<p>To stop the event propagation just call the <code>stopPropagation</code> method on the event object of the element you want.</p>
<pre class="language-javascript"><code>const section = document.querySelector('section');
const div = document.querySelector('div');

div.addEventListener('click', (e) =&gt; {
  e.stopPropagation(); // stops propagation to its parent element
  alert('From div');
});

section.addEventListener('click', () =&gt; alert('From section'));</code></pre>
<p>This time when you click the div text, only the div handler runs and there won't be any alert message from <code>section</code> handler.</p>
<p>There's one more method for stopping the propagation of events, it is called <code>stopImmediatePropagation</code> method. This prevents running other handlers when there are multiple event handlers on the same element.&nbsp;</p>
<p>And this is all about event bubbling in Javascript. Event listeners and event handlers are a very broad topic in Javascript and there are so many things that can be discussed related to the events in JS.</p>

Event bubbling in JavaScript is the default behavior of how events propagate from the innermost element to the outermost parent. Here are all the details.

Event bubbling in JavaScript all you need to know about

<p>Javascript has so many global methods and properties that can be accessed in any part of the JS code. <code>setTimeout</code> and <code>setInterval</code> are two of the most essential JS methods.</p>
<p><code>setTimeout</code> and <code>setInterval</code> are attached to the <code>window</code> object, they can be accessed prefixing with <code>window</code> object like <code>window.setTimeout()</code> and <code>window.setInterval()</code> or more often without the prefix.</p>
<blockquote>
<p>Global methods and properties need not be prefixed with window object and only if in cases you want to make sure that you are in browser environment and want to access global method or property, then prefix with <code>window</code> object.</p>
</blockquote>
<p>The way Javascript setTimeout and setInterval work are very similar. These are used to work with the timing or scheduling of functions.&nbsp;</p>
<h2 style="text-align: center;">Javascript setTimeout</h2>
<p>The setTimeout Javascript method sets a timer and executes a function passed to it once the timer expires.</p>
<p>Basically, the <code>setTimeout</code> method takes a function or the function reference as the first argument, followed by the optional arguments, delay, and the arguments to the function. Whenever the delay gets expired, the function gets executed or called.</p>
<pre class="language-javascript"><code>setTimeout(function() {}, delay, arg1, arg2, ...);</code></pre>
<p>Let's see it by a simple example.</p>
<pre class="language-javascript"><code>setTimeout(() =&gt; {
  console.log('Hi');
}, 2000); 
// After 2 seconds logs:
// Hi</code></pre>
<p>In the above example, after 2 seconds text gets logged in the console. The delay argument in the setTimeout method should be in milliseconds. If there's no delay given, <strong>0ms</strong> will be the default delay.</p>
<pre class="language-javascript"><code>const getData = (type = 'json') =&gt; {
  console.log('Getting data of type ' + type);
}
setTimeout(getData, 5000, 'markdown');
// After 5 seconds logs:
// Getting data of type markdown
----
setTimeout(getData);
// Logs immediately:
// Getting data of type json</code></pre>
<p>In the above code snippet, we can see that the third argument in the setTimeout is passed to the <code>getData</code> function. All arguments other than the first two gets passed to the function, in this case, it is <code>getData</code>.&nbsp;</p>
<p>If in case if we want to stop the function from being executed before the timer expires, we can do that by using the <code>clearTimeout</code> global method of Javascript.</p>
<p>Every setTimeout method returns a unique timer ID using which we can clear that scheduled timer.</p>
<pre class="language-javascript"><code>const logger = () =&gt; {
  console.log('Logging details');
}
const timerId = setTimeout(logger, 5000);

// If called before the timer expires, logger function won't be executed
clearTimeout(timerId);</code></pre>
<p>In the above code snippet, we can see the <code>clearTimeout</code> being called before the timer expires as a result setTimeout won't execute the <code>logger</code> function.&nbsp;</p>
<p><code>clearTimeout</code> can be called with the timer ID, inside any function based on different conditions to stop <code>setTimeout</code> executing the function.&nbsp;</p>
<h3>Points to note for setTimeout:</h3>
<ol>
<li><code>setTimeout</code> is an asynchronous function which means the code that comes after it won't wait for it to complete.</li>
<li>The first argument of <code>setTimeout</code> takes a function reference which it calls once the timer expires, but often people call the function instead of passing the reference, as a result, whatever is returned from the function is executed by the <code>setTimeout</code>
<pre class="language-javascript"><code>const greet = function() { console.log('Hi')};

setTimeout(greet(), 5000); // greet gets executed without delay, it returns undefined as first argument to setTimeout
setTimeout(greet, 5000);  // greet gets executed after 5 seconds
</code></pre>
</li>
<li>The <code>this</code> keyword will not behave as expected inside <code>setTimeout</code>. In such situations, you can use arrow functions as they bind <code>this</code> to the function scope, they are created in.
<pre class="language-javascript"><code>const person = {
  name: 'John',
  greetFunc: function () {
    setTimeout(function () {
      console.log(`Hi, ${this.name}`);
    }, 2000);
  },
  greetArrow: function () {
    setTimeout(() =&gt; console.log(`Hi, ${this.name}`), 2000);
  },
};

person.greetFunc(); // Hi, undefined
person.greetArrow(); // Hi, John</code></pre>
</li>
<li><code>setTimeout</code> with <strong>0ms</strong> will not be executed immediately as it looks. It is executed after all the script is run, because it's an asynchronous function that is sent to the event loop before getting to the call stack.
<pre class="language-javascript"><code>console.log('First statement');
setTimeout(() =&gt; console.log('Second statement'), 0); // delay can be omitted it's the default value
console.log('Third statement');

// Log result(observe the order):
// First statement
// Third statement
// Second statement</code></pre>
</li>
</ol>
<p>Now let's get into the setInterval of Javascript.</p>
<h2 style="text-align: center;">Javascript setInterval</h2>
<p>The setInterval Javascript method calls a function passed to it at every interval of time until unless it is stopped.</p>
<p>So it is similar to the <code>setTimeout</code>, but instead of calling the function once it keeps calling it at regular intervals until it gets stopped.</p>
<p>The <code>seteInterval</code> method takes a function or a function reference as the first argument, followed by the optional arguments, delay(time interval), and the arguments to the function. The function gets executed or called, with a fixed time delay between each call.</p>
<pre class="language-javascript"><code>setInterval(function() {}, delay, arg1, arg2, ...);</code></pre>
<p>Let's see it with a simple example</p>
<pre class="language-javascript"><code>setInterval(() =&gt; {
  console.log('Hi');
}, 2000); 
// After every 2 seconds it logs:
// Hi
// Hi
// ....</code></pre>
<p>In most situations, it is important to stop calling the functions passed to the setInterval.</p>
<p>Similar to the <code>setTimeout</code>, <code>setInterval</code> returns an interval ID that uniquely identifies the interval(nothing but the <code>setInterval</code> instance).</p>
<p>Similar to <code>clearTimeout</code>, setInterval has <code>clearInterval</code>, calling it with the interval ID will clear or stop the setInterval instance from further calling the passed function.</p>
<pre class="language-javascript"><code>const intervalId = setInterval(() =&gt; {
  console.log('Hi');
}, 2000);

setTimeout(() =&gt; clearInterval(intervalId), 5000);
// Hi
// Hi
// By 5th second clearInterval stops the setInterval instance</code></pre>
<p>Just like in <code>setTimeout</code> we can pass the arguments to the function we want to call in setInterval after the delay argument.</p>
<pre class="language-javascript"><code>const greet = (name) =&gt; {
  console.log(`Hi, ${name}`);
}
const intervalId = setInterval(greet, 2000, 'John');
setTimeout(() =&gt; clearInterval(intervalId), 5000);
// Hi, John
// Hi, John</code></pre>
<p>So all the points that we discussed in the <code>setTimeout</code> section will hold true for the <code>setInterval</code>.&nbsp;</p>
<p><code>setTimeout</code> is also asynchronous, function reference has to be passed as the first argument instead of calling it and <code>this</code> keyword will not behave as expected similar to the <code>setTimeout</code>, so prefer using arrow functions.&nbsp;</p>
<p>So that's all you need to know about <code>setInterval</code> method in Javascript.</p>
<p>Let's see how we can create setInterval using setTimeout.</p>
<h2 style="text-align: center;">Nested setTimeout</h2>
<p>We can use <code>setTimeout</code> to create a <code>setInterval</code> like method with variable delays. Nested &nbsp;<code>setTimeout</code> in fact helps to set precise delays between function executions than <code>setInterval</code>.&nbsp;</p>
<p>Let's see an example to create a <code>setInterval</code> like method using nested setTimeouts.</p>
<pre class="language-javascript"><code>// const timer = setInterval(() =&gt; console.log('Hi'), 100); // Hi, Hi,...

//setInterval equivalent using nested setTimeout

let delay = 100;
let timerId = setTimeout(function greet() {
  console.log('Hi');
  // delay can be varied as per our requirements
  // if(condition) delay = ...;
  timerId = setTimeout(greet, delay);
}, delay);

// Logs after every 100 milliseconds
// Hi
// Hi
// ...</code></pre>
<p>If you try to experiment using setInterval and nested setTimeout, setInterval delays are not precise because it consumes some of the interval time in function execution and if the function execution takes more time than the delay, then you won't even see time delays between each function execution.</p>
<p>So for precise intervals between each function call, you should prefer using nested <code>setTimeout</code> over <code>setInterval</code>.</p>
<p>You should also keep in mind that, <code>setTimeout</code> and <code>setTimeout</code> do not guarantee exact time delays. The delays depend on CPU overload, background running processes in the browser window, etc.&nbsp;</p>
<p>And that is all about Javascript setTimeout and setInterval.&nbsp;</p>

Javascript setTimeout and setInterval are the two global methods for timing or scheduling function calls. Here is all you need to know about these methods.

Javascript setTimeout and setInterval all you need to know

<p>A Javascript map object is a collection of key-value pairs where <strong>keys and objects can be of any data type </strong>including objects, functions, &amp; primitive types, unlike the objects, created using <code>{}</code> should have only a string or a symbol as a key. The map data type was added in the EcmaScript version 6(ES6).&nbsp;</p>
<p>To create a JS map, <code>Map</code> constructor is used. We can optionally pass an array of iterable objects to the <code>Map</code> to add the key-value pairs of that iterable object to the map.</p>
<pre class="language-javascript"><code>const items = new Map([iterable]);</code></pre>
<p>We can add key-value pairs to the map with the help of <code>set</code> method.</p>
<pre class="language-javascript"><code>const person = new Map();
person.set('name', 'John');
person.set('age', 25);

console.log(person.size); // 2</code></pre>
<p>A <code>Map</code> instance has got various methods for reading and manipulating the elements(key-value pairs) in it. It's an iterable and so by using iterative methods or loops we can read the data.&nbsp;</p>
<p>The various methods that we can use on maps are:</p>
<ul>
<li><code>set()</code> - to add key-value pairs to the map</li>
<li><code>get()</code> - to get the value of the key if it exists</li>
<li><code>has()</code> - to check if the key exists in the map, returns a boolean</li>
<li><code>delete()</code> - to delete the map element specified by the key</li>
<li><code>clear()</code> - to clear/delete all the elements of the map</li>
<li><code>keys()</code> - to get the iterator object of all keys in the map</li>
<li><code>values()</code> - to get the iterator object of all values in the map</li>
<li><code>entries()</code> - to get an iterator object with [key, value] elements&nbsp;</li>
<li><code>forEach()</code> - to call/invoke a callback function on every element in a map</li>
<li><code>size</code> - to get the total number of elements in a map</li>
</ul>
<p>Let's understand each method with examples</p>
<h2 style="text-align: center;">Javascript map methods</h2>
<h3>set() method</h3>
<pre class="language-javascript"><code>const items = new Map(); // Initializing empty map
const john = { name: 'John', age: 25};
items.set(john, 'person'); // object as a key
items.set(1, 'number'); // number as a key
items.set(true, 'boolean'); // boolean as a key
items.set('color', 'red');

console.log(items.size); // 4</code></pre>
<p>We can see from the above that having any type of data type as the key is the specialty of javascript map objects. If it's a normal object then the keys get converted to strings or object strings.</p>
<p>As we know that the instance of <code>Map</code> returns an iterable, so we can use <a href="https://devapt.com/for-loops-javascript" target="_blank" rel="noopener">for-of loop</a> to read the values of an iterable just like in <a href="https://devapt.com/javascript-set-weakset" target="_blank" rel="noopener">JS sets</a>.&nbsp;</p>
<pre class="language-javascript"><code>// Iterating from the previous map object
for(const item of items) {
  console.log(item);
}
// Logs:
// [{name: "John"}, "person"]
// [1, "number"]
// [true, "boolean"]
// ["color", "red"]</code></pre>
<h3>get() method</h3>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);
letters.get('a'); // 1
letters.get(4); // d</code></pre>
<h3>has() method</h3>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

// Checks if the key exists in the map element and returns a boolean
letters.has(5); // false
letters.has(4); // true</code></pre>
<h3>delete() method</h3>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

// Deletes the map element if the given key exists
letters.delete('b');
console.log(letters.size); // 3
</code></pre>
<h3>clear() method</h3>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

// Clears or deletes all the elements in the map
letters.clear();
console.log(letters.size); // 0</code></pre>
<h3>keys() method</h3>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

// map.key() method returns key of every map element
for(const key of letters.keys()) {
  console.log(key);
}
// Logs: a, b, 3, 4</code></pre>
<h3>values() method</h3>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

// map.values() returns the value of each map element
for(const value of letters.values()) {
  console.log(value);
}
// Logs: 1, 2, c, d</code></pre>
<h3>entries() method</h3>
<p>The&nbsp; <code>entries()</code> method is similar to the <code>Object.entries()</code>, where it returns keys and values of an object as an array of <code>[key, value]</code> arrays. Similarly in the case of map <code>entries()</code> method, an iterator with <code>[key, value]</code> arrays is returned for every element in the map, instead of an array.</p>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

for(const letter of letters.entries()) {
  console.log(letter);
}

// Logs: ["a", 1], ["b", 2], [3, "c"], [4, "d"]</code></pre>
<h3>forEach() method</h3>
<p>The map <code>forEach</code> method works the same as the <code>forEach</code> method on arrays. It allows running a callback function on every element of the map. The first two arguments of the callback function gives value and key of the current element.&nbsp; &nbsp;</p>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

letters.forEach((value, key) =&gt; console.log(key, value));
// Logs: a 1, b 2, 3 c, 4 d</code></pre>
<h3>size property</h3>
<p>The size property of a <code>Map</code> instance returns the total number of elements(key-value pairs) present in the map, nothing but the length of the map. This property is not available on a normal object created using <code>{}</code>.</p>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

console.log(letters.size); // 4</code></pre>
<p>So far we've seen different ways to iterate the map object. Let's see all together once.</p>
<h2 style="text-align: center;">Different ways to iterate maps</h2>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

for(const [key, value] of letters) console.log(key, value); 
for(const [key, value] of letters.entries()) console.log(key, value);
letters.forEach((value, key) =&gt; console.log(key, value)); 
// Above three iterations log the same result

for(const key of letters.keys()) console.log(key); // Logs: keys 
for(const value of letters.values()) console.log(value); // Logs: values</code></pre>
<h2 style="text-align: center;">JS maps from JS objects</h2>
<p>A JS map can be created from JS objects by converting them to arrays and vice versa.</p>
<pre class="language-javascript"><code>// From object to map
const obj = {
  a: 1, 
  b: 2, 
  c: 3, 
  d: 4
}
const mapObj = new Map(Object.entries(obj));
for(const element of mapObj) console.log(element); 
// Logs: ["a", 1], ["b", 2], ["c", 3], ["d", 4]

// From map to object
const objFromMap = Object.fromEntries(mapObj);
console.log(objFromMap); 
// Logs: {a: 1, b: 2, c: 3, d: 4}</code></pre>
<h2 style="text-align: center;">When and where to use JS map object?</h2>
<p>A map is a collection of elements(key-value pairs) and the elements can be iterated in the order of their insertion.</p>
<h3>A map can be used</h3>
<h4>1. To preserve the order of the key-value pairs</h4>
<p>The order of the key-value pairs is not guaranteed in the object created using <code>{}</code> but javscript map object has definite order of the insertion of elements.&nbsp;</p>
<h4>2. To get good performance in frequent addition and removal of key-value pairs</h4>
<p>Objects created using <code>{}</code> or <code>Object</code> are not optimized for frequent addition and deletion of key-value pairs. So in such cases using JS maps can give good performance.</p>
<p>There's a special case of JS maps called WeakMap, let's have a glimpse at it.</p>
<h2 style="text-align: center;">What is a weak map in Javascript?</h2>
<p>A weakmap is similar to the map in Javascript but with limitations on the key data types and the methods, it can have.</p>
<p>Unlike map, weakmap can contain only the objects as keys and values can be of any data type. And only <code>set()</code>, <code>get()</code>, <code>has()</code>, <code>delete()</code> methods are available on a <code>WeakMap</code> instance. No iterative methods can be applied on weak maps, including, <code>forEach</code> etc.</p>
<pre class="language-javascript"><code>const colors = new WeakMap();
const green = { name: 'green'};
const greenHex = { hex: '#00FF00'}
const red = { name: 'red'};
colors.set(green, greenHex);
colors.set(red, '#FF0000');
console.log(colors.has(red)); // true
colors.delete(red);
console.log(colors.has(red)); // false

// Try adding a string key or any other data type except object to the weakmap
colors.set('blue', '#0000FF'); // Throws an error
</code></pre>
<blockquote>
<p>A weakmap is called so because of the weak references to the data(objects) it contains. When the reference to the objects is lost, they get garbage collected.</p>
</blockquote>
<pre class="language-javascript"><code>let a = { index: 1 };
let b = { index: 2 };

const wMap = new WeakMap();

wMap.set(a, 'one');
wMap.set(b, 'two');
console.log(wMap.has(a)); // true
console.log(wMap.has(b)); // true
a = null; // removing the reference for { index: 1 } 
console.log(wMap.has(a)); // false</code></pre>
<p>WeakMap, similar to WeakSet is mainly used as additional storage of data for objects that are stored or managed from another location.&nbsp;</p>
<p>That was a quick look at weak maps and overall the maps in Javascript.</p>

Javascript map is a collection of key-value pairs of any data type. Learn more about JS maps, their methods and differences between maps and weakmaps.

What is a JavaScript map? Difference b/w JS map & weakmap

<p>A set in JavaScript is a collection of unique values of any data type. The set data type was added in the EcmaScript version 6(ES6).&nbsp;</p>
<p>To create a JS set, <code>Set</code> constructor is used. We can optionally pass an iterable object to the <code>Set</code> to add the elements of that iterable(often an array) object to the set.</p>
<pre class="language-javascript"><code>const names = new Set(['John', 'Doe', 'Mary', 'Alice']);
console.log(names.size); // 4</code></pre>
<p>We can add elements to the set with the help of <code>add</code> method.</p>
<pre class="language-javascript"><code>const cities = new Set();
cities.add('Rome');
cities.add('Tokyo');
console.log(cities.size); // 2</code></pre>
<p>The reason why we're just logging or printing the size of the sets is that we may not see the elements of the set just by logging directly. When we try to log it on the console, we could just see something like <code>Set {}</code> or <code>[object Set] { ... }</code> etc based on the environment.</p>
<p>A <code>Set</code> instance has got various methods for reading and manipulating the data inside it. It's an iterable and so by using iterative methods or loops we can read the data.&nbsp;</p>
<p>The various methods that we can use on sets are:</p>
<ul>
<li><code>add()</code> - to add elements to the set</li>
<li><code>has()</code> - to check if the set has a particular element</li>
<li><code>delete()</code> - to delete the element if it exists</li>
<li><code>clear()</code> - to clear/delete all the elements of the set</li>
<li><code>values()</code> - to get the iterator of values inside the set</li>
<li><code>keys()</code> - same as values(). It is there just to match the methods with the map data type</li>
<li><code>entries()</code> - to get an iterator with [key, value] elements and in a set keys and values are the same. It also exists to match with the methods of the map data type</li>
<li><code>forEach()</code> - to call/invoke a callback function on every element in a set</li>
<li><code>size</code> - to get the total number of elements in a set</li>
</ul>
<p>Let's understand each method with examples</p>
<h2 style="text-align: center;">Javascript set methods</h2>
<h3>add() method</h3>
<pre class="language-javascript"><code>const colors = new Set(); // Initializing an empty set
colors.add('green');
colors.add('blue');
colors.add('red');
console.log(colors.size); // 3</code></pre>
<p>As we know that instance of <code>Set</code> returns an iterable, so we can use <a href="https://devapt.com/for-loops-javascript" target="_blank" rel="noopener">for-of loop</a> as discussed in the previous article to read the values of an iterable.&nbsp;</p>
<pre class="language-javascript"><code>for(const color of colors) {
  console.log(color)
}
// Logs: green, blue, red</code></pre>
<h3>has() method</h3>
<pre class="language-javascript"><code>const colors = new Set('green', 'blue', 'red');

// Checks if the elements exists in the set and returns a boolean
colors.has('red'); // true
colors.has('violet'); // false</code></pre>
<h3>delete() method</h3>
<pre class="language-javascript"><code>const colors = new Set(['green', 'blue', 'red']);

// Deletes the exact given element if it exists
colors.delete('red');
console.log(colors.size); // 2</code></pre>
<h3>clear() method</h3>
<pre class="language-javascript"><code>const colors = new Set(['green', 'blue', 'red']);

// Clears or deletes all the elements in a set
colors.clear();
console.log(colors.size); // 0</code></pre>
<h3>values() and keys()</h3>
<p>In the case of a JS set, <code>keys()</code> and <code>values()</code> methods return the same kind of iterator for iterating the values in a set. The main reason for having <code>keys()</code> method is to have similar methods as that of a <code>Map</code> data type in Javascript.</p>
<pre class="language-javascript"><code>const colors = new Set(['green', 'blue', 'red']);

// values() and keys() return the same
for(const color of colors.values()) {
  console.log(color)
}
// Logs: green, blue, red

for(const color of colors.keys()) {
  console.log(color)
}
// Logs: green, blue, red</code></pre>
<h3>entries() method</h3>
<p>The set <code>entries()</code> method is similar to the <code>Object.entries()</code>, where it returns keys and values of an object as an array of arrays. In the case of set <code>entries()</code> method, an iterator with <code>[key, value]</code> arrays is returned where keys and values are the same.&nbsp;</p>
<blockquote>
<p><code>Object.entries(object)</code> returns an actual array of arrays but <code>set.entries()</code> returns an iterator with [key, value] arrays.</p>
</blockquote>
<pre class="language-javascript"><code>const colors = new Set(['green', 'blue', 'red']);

for(const color of colors.entries()) {
  console.log(color)
}
// Logs: ["green", "green"], ["blue", "blue"], ["red", "red"]
</code></pre>
<h3>forEach() method</h3>
<p>The set <code>forEach</code> method works the same as the <code>forEach</code> method on arrays. It allows running a callback function on every element of the set.</p>
<pre class="language-javascript"><code>const colors = new Set(['green', 'blue', 'red']);

colors.forEach(c =&gt; console.log(c));
// Logs: green, blue, red</code></pre>
<h3>size property</h3>
<p>The size property of a <code>Set</code> instance returns the total number of elements present inside the set, nothing but the length of the set.&nbsp;</p>
<pre class="language-javascript"><code>const colors = new Set(['green', 'blue', 'red']);
console.log(colors.size); // 3</code></pre>
<p>So far we've seen different ways to iterate the sets. Let's see all together once.</p>
<h2 style="text-align: center;">Different ways to iterate sets</h2>
<pre class="language-javascript"><code>// All these iterations return the same result
const cities = new Set(['Tokyo', 'Seoul', 'Rio', 'Delhi']);

for (const city of cities) console.log(city);
for (const city of cities.keys()) console.log(city);
for (const city of cities.values()) console.log(city);
for (const [key, value] of cities.entries()) console.log(key);
cities.forEach((c) =&gt; console.log(c));

// Converting javascript set to array 
Array.from(cities).forEach((c) =&gt; console.log(c);

// Each iteration logs: Tokyo, Seoul, Rio, Delhi

</code></pre>
<h2 style="text-align: center;">When and where to use JS set?</h2>
<p>A set is a collection of unique unordered elements and the elements can be iterated in the order of their insertion.</p>
<h3>A set can be used</h3>
<h4>1. To remove the duplicates in an array</h4>
<pre class="language-javascript"><code>const letters = ['a', 'b', 'c', 'b', 'a', 'd']; // An array with duplicate letters
const uniqueLetters = [...new Set(letters)]; // Spreading the set created from the letters array
console.log(uniqueLetters); 
// Logs: ["a", "b", "c", "d"]</code></pre>
<h4>2. To find if an element exists in an array effectively</h4>
<p>Finding the existence of an element in an array of very large size may have performance problems. In such a case, <code>set.has()</code> method could be handy. <code>set.has()</code> has a time complexity of O(1) but it seems to be not guaranteed in all the situations. Learn more about it <a href="https://stackoverflow.com/questions/31091772/javascript-es6-computational-time-complexity-of-collections" target="_blank" rel="noopener">here</a>.</p>
<p><code>set.has()</code> method works very effectively compared to array methods for checking the existence of an element in a large array.</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', 'c', ..., 'z']; // say a very large array 

// indexOf() and findIndex() may have performance issues
letters.indexOf('z'); // letters.length - 1
letters.findIndex(l =&gt; l === 'z'); // letters.length - 1

// Converting to a set and finding the existence 
const letterSet = new Set(letters);
console.log(letterSet.has('z')); // true</code></pre>
<p>There's a special case of JS sets called WeakSet, let's have a glimpse at it.</p>
<h2 style="text-align: center;">What is a weak set in Javascript?</h2>
<p>A weakset is similar to a set in Javascript but with limitations on the data types it can store and the methods it can have.</p>
<p>Unlike set, weakset can contain only the objects. And only <code>add()</code>, <code>has()</code>, <code>delete()</code> methods are available on a <code>WeakSet</code> instance. No iterative methods can be applied on weak sets, can't even check the size of a weakset.</p>
<pre class="language-javascript"><code>const colors = new WeakSet();
const green = { name: 'green' };
const red = { name: 'red' };
colors.add(green);
colors.add(red);
colors.has(green); // true
colors.delete(red);
colors.has('red'); // false

// Try adding a string or any other data type except object to the weakset
colors.add('violet'); // Throws an error</code></pre>
<blockquote>
<p>A weakset is called so because of the weak references to the data(objects) it contains. When the reference to the objects is lost, they get garbage collected.</p>
</blockquote>
<pre class="language-javascript"><code>let a = { index: 1 };
let b = { index: 2 };

const wSet = new WeakSet();

wSet.add(a);
wSet.add(b);
console.log(wSet.has(a)); // true
console.log(wSet.has(b)); // true
a = null; // removing the reference for { index: 1 } 
console.log(wSet.has(a)); // false</code></pre>
<p>WeakSet is mainly used as additional storage of data for objects that are stored or managed from another location.&nbsp;</p>
<p>That was a quick look at weaksets and overall the sets in Javascript.</p>

A Javascript set is a collection of unique unordered elements of any data type. Here are all the methods and uses of sets in Javascript.

What is a JavaScript Set? When and where to use JS sets?

<p>In programming, the concept of looping is seen to repeat a block of code without actually writing it multiple times and to make it look compact and readable. The concept of implementing a loop remains similar in most programming languages.&nbsp;</p>
<p>In Javascript, we have quite different ways to implement loops. In this article, we are going to look at the three kinds of Javascript for loops viz., <code>for</code>, <code>for in</code> and <code>for of</code>. Besides <code>for</code> loops there are <code>while</code>, <code>do while</code> and different iterative methods that can be called on arrays to perform looping actions.</p>
<h2 style="text-align: center;">For loops in Javascript</h2>
<h3>JS for loop</h3>
<p>The for loop in JS is similar to the C language for loop, it takes three statements, first is initialization, second is condition and third is the update.&nbsp;</p>
<pre class="language-javascript"><code>for (Statement 1; Statement 2; Statement 3) {
  // code block
}</code></pre>
<ul>
<li>Statement 1: Initialization of the variable is done using <code>let</code> or <code>var</code> keywords. <code>const</code> cannot be used because variables declared with <code>const</code> cannot be reassigned.&nbsp;</li>
<li>Statement 2: Condition for ending the loop</li>
<li>Statement 3: For updating the value of the variable</li>
</ul>
<pre class="language-javascript"><code>// A simple for loop to log numbers from 0 to 9
for( let i = 0; i &lt; 10; i++) {
  console.log(i);
}</code></pre>
<p>The first and the third statements can be omitted if those are defined in other parts of the code, but the second statement is important for ending the loop. If the second statement returns true then the loop keeps running if it's false, it stops. When the second statement is also omitted, care has to be taken to break the loop from inside.&nbsp;</p>
<pre class="language-javascript"><code>// First and third statements are omitted but are inferred one from outside and the other inside the loop
let i = 0;
for (; i &lt; 5; ) {
  console.log(`Logging ${i}`);
  i++;
}
</code></pre>
<p>Using <code>let</code> keyword for <code>for loop</code> doesn't affect the variables declared outside the loop because of the block scope but if <code>var</code>&nbsp;keyword is used for <code>for loop</code> then it may overwrite the values outside the scope.</p>
<pre class="language-javascript"><code>let i = 5;
for (let i = 0; i &lt; 10; i++) {
  // some code block
}
console.log(i); // The value of i is 5</code></pre>
<pre class="language-javascript"><code>var i = 5;
for (var i = 0; i &lt; 10; i++) {
  // some code block
}
console.log(i); // 10
// It is 10 because the value of i when loop ends is 10 
// and it is declared with var, so the value persists outside the block</code></pre>
<p>Next, let's see the for-in loop.</p>
<h3>JS for-in loop</h3>
<p>The Javascript for-in loop is used to iterate over the properties of an object especially the enumerable properties of the object.&nbsp;</p>
<blockquote>
<p>Enumerable properties are those that have enumerable flag set to true when defining the property. By default objects created using <code>{}</code> are enumerable. Find more about it on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties" target="_blank" rel="noopener">mozilla</a>.</p>
</blockquote>
<pre class="language-javascript"><code>// for-in loop
for( let key in object) {
  // key gives each key in the object for every iteration
  // code block
}</code></pre>
<pre class="language-javascript"><code>const countries = {
  norway: 'oslo',
  japan: 'tokyo',
  finland: 'helsinki'
}

// const can be used because it's not being reassigned
for(const country in countries) {
  console.log(countries[country]);
}

// Logs all the values assigned to each country</code></pre>
<p>The for-in loop can also be used for arrays and strings just like objects because the keys for arrays or strings will simply be their indexes. The caveat for using for-in for arrays is that the order of indexes may not be right all the time because those will be treated like the keys in an object and so in the object, the order of the keys is not guaranteed.</p>
<pre class="language-javascript"><code>const numbers = [10, 9, 8, 7, 6];

for(const index in numbers) {
  console.log(numbers[index])
}

// Index order may not be right all the time
// To understand this, conceive it like an object, 
// where the order of props is not guaranteed
// {
//   '0': 10,
//   '1': 9,
//   '2': 8,
//   '3': 7,
//   '4': 6,
// }</code></pre>
<h3>JS for-of loop</h3>
<p>The Javascript <code>for-of loop</code> loops over the values of the iterable object. The iterable here cannot be a direct object with key-value pairs because we can't access values directly without their keys. So the iterable in <code>for-of</code> loop refers to an array-like object or a string.</p>
<pre class="language-javascript"><code>// for-of loop
for( let value of iterable) {
  // value gives each value in the iterable
  // code block
}</code></pre>
<pre class="language-javascript"><code>const colors  = ['red', 'green', 'pink', 'yellow'];

for(const color of colors) {
  console.log(color); 
}
// All the values from the colors array get logged
</code></pre>
<p>Using for-of we can iterate over the letters of a string easily.</p>
<pre class="language-javascript"><code>const name = 'John';
for(const letter of name) {
  console.log(letter);
}
// Each letter of the string name gets logged</code></pre>
<p>To access the key-value pairs of an object using <code>for-of</code> loop we can use <code>Object.entries</code> method.</p>
<pre class="language-javascript"><code>const countries = {
  norway: 'oslo',
  japan: 'tokyo',
  finland: 'helsinki',
};

for (const [country, capital] of Object.entries(countries)) {
  console.log(country + ' - ' + capital);
}
// norway - oslo
// japan - tokyo
// finland - helsinki</code></pre>
<p>So that is about for-of loop.</p>
<p>People often get confused in remembering the Javascript for-in and for-of loops.</p>
<p>A simple trick is whenever you see <code>for-in</code> loop think of the second word <code>in</code> as an index which means it can iterate over indexes of an array and the equivalent part in objects is keys.&nbsp;</p>
<p>In the case of <code>for-of</code> loop, think of <code>of</code> as value belonging to something, in objects values belong to keys, and in arrays just the values directly.</p>
<p>There's one more in Javascript for loops that starts with for, but it is a method that can be called on arrays. Let's have a glimpse at that.</p>
<h3>JS forEach for arrays</h3>
<p><code>forEach</code> is a method that can be run on arrays to iterate the values and indexes in their original order. This is the most often used method for looping arrays.&nbsp;</p>
<p><code>forEach</code> takes a callback function with three arguments(the last two are optional), that runs on every element of the array.</p>
<pre class="language-javascript"><code>array.forEach((value, index, array) =&gt; {
  // code block
})</code></pre>
<p><strong>Note: </strong><code>forEach</code> doesn't have support for async, await, the results could be not as expected when you await the results inside forEach method. Use <code>for</code>, <code>for-of</code> or <code>for-in</code> loops for asynchronous operations.</p>
<p>That's all about Javascript for-loops. Hope this gave a quick understanding of the differences between each.&nbsp;</p>

Here are all the details you need to know about JavaScript for loops and their differences. How forEach is different compared to other for-loops?

JavaScript for loops, their uses & trick to remember each

<p><code>npm</code> is a package manager for Javascript and the Javascript runtime(Node). Often npm is considered as an acronym for Node Package Manager but in reality, it is not. <code>pm</code> in <code>npm</code> stands for <strong>pkgmakeinst</strong> as per the <a href="https://github.com/npm/cli#is-npm-an-acronym-for-node-package-manager" target="_blank" rel="noopener">npm docs</a>.</p>
<p>npm has a command-line client which is called npm CLI or just <code>npm</code>. npm comes installed with the Node. npmjs is the site where npm packages can be browsed and searched.&nbsp;</p>
<p>Here we are going to see the npm commands in CLI to install, update and manage various packages from the npm registry.</p>
<p>There are a lot of npm commands for dealing with npm packages but our main focus will be on the commands related to consuming the packages not creating or publishing those.</p>
<h2 style="text-align: center;">Essential npm commands</h2>
<h3>To check the npm version</h3>
<pre class="language-javascript"><code>npm --version(or -v) // To see your npm version</code></pre>
<h3>To initialize</h3>
<pre class="language-javascript"><code>npm init
or 
npm init -y // To autocomplete the details</code></pre>
<h3>For installing packages</h3>
<pre class="language-javascript"><code>npm i --save(or -S) &lt;package&gt; // To save in dependencies list
npm i --save-dev(or -D) &lt;package&gt; // To save in dev dependencies list

// Shorthand commands for the above
npm i &lt;package&gt; // By default packages get added to dependencies
npm i -D &lt;package&gt; // To add to dev dependencies

// To install a particular version of the package
npm i &lt;package&gt;@5.1.1 // version as per the need, 5.1.1 is a sample version

// To install all the packages from package.json
npm install 
or
npm i

// To install global package accessible to all the projects
npm install -g &lt;package&gt;
or 
npm i -g &lt;package&gt;</code></pre>
<h3>For listing or checking packages</h3>
<pre class="language-javascript"><code>// From npm v7.x, list command by default lists only the installed package names, not their dependencies
npm list(or ls or la or ll) // Lists all the packages installed in the current project
npm list --all // Lists all the packages with dependencies in a tree structure

// To list global packages just use -g flag
npm list -g // Lists all globally installed packages
npm list -g --all // Lista all global packages with dependencies

// Shorthand for --all is -a
// ls, la, ll are all aliases for list, any of those shorthands can be used</code></pre>
<h3>For updating packages</h3>
<pre class="language-javascript"><code>// For updating a single package(semver contraints will be respected)
npm update &lt;package&gt; // Updates package to the latest version in the current project
npm update -g &lt;package&gt; // Updates global project to the latest version

// For updating all packages
npm update  // Updates all packages to their latest versions respecting their semver contraints
npm update -g // Updates all global packages to their latest versions respecting semver contraints

// Shorthand commands for the above
npm up &lt;package&gt;
npm up -g &lt;package&gt;
npm up
npm up -g

// To check the outdated packages instead of directly updating
npm outdated // Lists the outdated packages in the current project directory
npm -g outdated // Lists the outdated global packages

// To manually update any package to any version
npm i &lt;package&gt;@version
npm i -g &lt;package&gt;@version</code></pre>
<p>Semver means semantic versioning. For the dependencies in the package.json, besides version number, a small hat(^) or tilde(~) is prefixed for some dependencies. It means those dependencies can be updated to the latest minor version when it is prefixed with (^) and to the latest patch version when it is prefixed with (~).&nbsp;</p>
<p>So <code>npm up</code> command when updating such dependencies considers semver prefixes without breaking the project or that dependency.&nbsp;</p>
<p>There's a whole site dedicated for <a href="https://semver.org/" target="_blank" rel="noopener">semver</a> to learn more about it.</p>
<h3>For uninstalling packages</h3>
<pre class="language-javascript"><code>npm uninstall &lt;package&gt; // To uninstall the current project package
npm uninstall -g &lt;package&gt; // To uninstall the globally installed package

// Shorthand commands for the above
npm un &lt;package&gt;
npm un -g &lt;package&gt;</code></pre>
<h3>For viewing package details</h3>
<pre class="language-javascript"><code>npm view &lt;package&gt; // Shows details about that particular package 
npm view -g &lt;package&gt; // To see details for the globally installed package

// info, show, v are the aliases for view
// To see particular version details use @version</code></pre>
<h3>For searching packages&nbsp;</h3>
<pre class="language-javascript"><code>npm search &lt;keyword(s)&gt; // List all the packages matching the keyword

// s, se, find are the aliases for search</code></pre>
<h3>For auditing packages</h3>
<pre class="language-javascript"><code>npm audit // To scan project and list all the vulnerabilities without fixing anything
npm audit --json // To audit and list the details in a JSON format
npm audit fix // To scan the project for vulnerabilities and automatically install compatible updates to vulnerable dependencies
npm audit --dry-run --json // To get an idea of what audit fix will do, and output the information in JSON format</code></pre>
<h3>Miscellaneous commands</h3>
<pre class="language-javascript"><code>npm ci // To do a clean install by removing the existing node_modules
npm prune // To remove extraneous packages not listed on the parent package's dependencies list
npm start // To run the scripts mentioned with start key in the package.json scripts
npm run &lt;command&gt; // Any script/command listed in the scripts other than start
npm test // To run the test script if there's any
npx &lt;command&gt; // Used to run any command from npm package (from locally installed or remotely fetched)</code></pre>
<p>Note that npm version 7.x is considered when listing all the above commands. Certain commands may differ with lower or higher major versions.&nbsp;</p>
<p>So those are all the most essential npm commands every Javascript developer should know. A nice dedicated cheatsheet for the above commands will be released soon.</p>

Here are all the essential npm commands you need to know to use the npm CLI effectively. You can search, update, view any package right from your CLI.

Essential npm commands every JS developer should know

<p>Javascript has got three different inbuilt popup boxes to notify, confirm and take user input data. These popup boxes are very handy for prototyping, teaching, and accepting or printing out the data instantly without the need to create popups from scratch.&nbsp;</p>
<h2 style="text-align: center;">JavaScript popup message boxes</h2>
<h4>The different Javascript popup boxes or methods are:</h4>
<ol>
<li>Alert</li>
<li>Confirm</li>
<li>Prompt</li>
</ol>
<h3 style="text-align: center;">How to use the alert box in JS?</h3>
<p><code>alert</code> is a global method in Javascript which means we can use it in any part of our code. Often it is used with the window object <code>window.alert</code> but calling <code>alert</code> method directly without prefixing <code>window</code> means the same, as every window property and method can be accessed directly without the prefix.</p>
<pre class="language-javascript"><code>alert('Welcome to the DevApt');</code></pre>
<p>The <code>alert</code> method:</p>
<ul style="list-style-type: square;">
<li>takes an optional input as a message to display to the user.&nbsp;</li>
<li>prevents users from accessing other parts of the browser window until the alert box is closed</li>
<li>can run any valid Javascript code passed as an argument, which means you should never pass user entered data directly</li>
<li><strong>returns nothing or <code>undefined</code></strong></li>
</ul>
<p>Few examples of <code>alert</code> popup:</p>
<pre class="language-javascript"><code>alert(); // Shows empty dialog box
alert("Hi,\nYou clicked I'm feeling lucky button"); // Show the message in two lines
alert(2+2); // Calculates and shows 4
alert(localStorage.getItem('token')); // Show the value of 'token' if stored in local storage else null

const result = alert('Your form submitted');
console.log(result); // undefined</code></pre>
<h3 style="text-align: center;">How to use the confirm box in Javascript?</h3>
<p>Just like <code>alert</code>, <code>confirm</code> is also a global method that can be accessed in any part of the Javascript code. The main difference is that on popping out the alert it returns a boolean value, eithor true or false based on the user action.&nbsp;</p>
<pre class="language-javascript"><code>confirm('Do you want to leave the page without saving?');</code></pre>
<p>The <code>confirm</code> method:</p>
<ul style="list-style-type: square;">
<li>takes an optional input as a message to display it to the user for the confirmation</li>
<li>prevents users from accessing other parts of the browser window until the confirm box is closed</li>
<li>can run any valid Javascript code passed as an argument, which means you should never pass user entered data directly</li>
<li><strong>returns <code>true</code> when user clicks <code>OK</code> and <code>false</code> when user clicks <code>Cancel</code> button on the confirm box</strong></li>
</ul>
<p>Few examples of <code>confirm</code> popup:</p>
<pre class="language-javascript"><code>const result = confirm('Do you like to cancel the request?');
if(result) console.log('You request is cancelled');
else console.log('Your request is processing'); 

if(confirm("Is 2 + 2 = 4")) location.href = '/dashboard'; // If confirmed redirected to the /dashboard page</code></pre>
<h3 style="text-align: center;">How to use the prompt box in JS?</h3>
<p><code>prompt</code> is a global method similar to the <code>alert </code>and <code>confirm</code> popup methods. By using <code>alert</code> and <code>confirm</code> popup methods we cannot let the user enter/send the data, and to fulfil that case we have this <code>prompt</code> method. Whenever user enters any data in the popup box, the same gets returned on clicking the <code>OK</code> button else <code>null</code>.</p>
<pre class="language-javascript"><code>prompt('Enter your name');</code></pre>
<p>The <code>prompt</code> method:</p>
<ul style="list-style-type: square;">
<li>takes an optional input as a message to display the same to the user</li>
<li>prevents users from accessing other parts of the browser window until the prompt box is closed</li>
<li>can run any valid Javascript code passed as an argument, which means you should never pass user entered data directly</li>
<li><strong>returns user entered data as a string when user clicks <code>OK</code> and <code>null</code> when user clicks <code>Cancel</code> button on the prompt box</strong></li>
</ul>
<p>Few examples of <code>prompt</code> popup:</p>
<pre class="language-javascript"><code>const result = prompt("Enter something");
if(Boolean(result)) console.log(`You entered ${result}`); // Logs the input if user enters any data

const result = prompt('What is 2 + 2?');
if(Number(result) === 4) alert("You are right!");  // Shows an alert if it's 4
else alert('You are wrong!');  // Shows an alert for input or action other than 4</code></pre>
<p>There are few points to note before you use these popup methods in your code. These methods <em>should not be</em> used when you want to have a very good user experience.</p>
<p>The <code>alert</code> method has a history of being used in XSS(Cross Site Scripting) attacks, so you should never use <code>alert</code> method with user entered data directly.&nbsp;</p>
<p>The most general use of <code>alert</code> and <code>confirm</code> boxes is, when users are about to leave your site or when something is not saved or incomplete, showing these popups feels normal. Sites like Facebook uses this type of popup alert when you try to go back or leave the site in between uploading or publishing the post.</p>

Here are the different JavaScript popup methods you should know and their use cases. Alert, Confirm, and Prompt can be used instantly to show messages.

Native JavaScript popup boxes all you need to know

<p>Reading and manipulating URLs or query strings is involved in various applications for obtaining data from requests and routing users or requests. Different languages have different ways to deal with query parameters or routing at the backend.&nbsp;</p>
<p>In this article, we're going to look at the ways to read and manipulate query strings and URLs using <code>URL</code> and <code>URLSearchParams</code> APIs of Javascript at the client or more specifically in the browser.</p>
<p>In the browser, there's a global variable called <code>location</code> or <code>window.location</code> using which we can get various details about the URL of your active browser tab. Using location property we can get details like full URL, protocol, host, hostname, port, pathname, search params as a string, etc</p>
<p>But to parse and read any URL other than our active tab address, we have <code>URL</code> and <code>URLSearchParams</code> APIs at our disposal in JavaScript.&nbsp;</p>
<p>Let's get into more details of these JavaScript APIs.</p>
<h2 style="text-align: center;">How to use URL API in JS?</h2>
<p>A <code>URL</code> constructor is used to construct, normalize, parse and encode URLs. It provides various properties to read and manipulate the components of a URL.</p>
<p><code>URL</code> takes an absolute URL string as an argument and returns an object with various properties to read and manipulate the passed URL.&nbsp;</p>
<p>Let's understand this <code>URL</code> by using a sample URL with query params.</p>
<pre class="language-javascript"><code>const parsedUrl = new URL('https://example.com/?name=John Smith&amp;age=25&amp;id=101');
console.log(parsedUrl); // https://example.com/?name=John%20Smith&amp;age=25&amp;id=101</code></pre>
<p>In the above code, we can see that <code>URL</code> could parse the supplied URL string correctly. The <code>parsedUrl</code>&nbsp;can be used as a string directly anywhere we want or we can use the various properties and methods attached to it by the <code>URL</code> class.</p>
<p><code>URL</code> has got most of the properties similar to the <code>window.location</code> object which includes <code>host</code>, <code>hostname</code>, <code>href</code>, <code>origin</code>, <code>port</code>, <code>protocol</code>, <code>search</code>, <code>searchParams</code>, <code>username</code>, <code>password</code> etc.&nbsp;</p>
<pre class="language-javascript"><code>const url = new URL('https://example.com:8080/blog/?name=John Smith&amp;age=25&amp;id=101#heading');

url.host // example.com:8080
url.hostname // example.com
url.href // https://example.com:8080/blog/?name=John%20Smith&amp;age=25&amp;id=101#heading
url.origin // https://example.com:8080
url.pathname // /blog/
url.port // 8080
url.protocol // https:
url.hash // #heading
url.search // ?name=John%20Smith&amp;age=25&amp;id=101
url.searchParams // URLSearchParams {}</code></pre>
<p>So by using <code>URL</code> API we can get various types of info about the URL link that we pass.</p>
<p>If you observe the prop <code>url.searchparams</code> is actually returning the <code>URLSearchParams</code> which we are going to see in the next section.</p>
<p>In certain URLs, we have username and password in the URL itself, and such URLs can be parsed easily to get username and password details using this <code>URL</code> API.</p>
<pre class="language-javascript"><code>const newUrl = new URL('https://john:somePass@dev.example.com/api/test');
console.log(newUrl.username); // john
console.log(newUrl.password); // somePass</code></pre>
<p>To modify any of the props we can just simply assign any valid value to it.&nbsp;</p>
<pre class="language-javascript"><code>const url = new URL('https://example.com:8080/blog/?name=John Smith&amp;age=25&amp;id=101#heading');

url.href = 'https://abc.com';
url.pathname = 'about';
url.hash = '#important';
url.search = '?name=Bond&amp;age=20';
console.log(url); // https://abc.com/about?name=Bond&amp;age=20#important

url.origin = 'https://aaa.com:7777';  // Error: Cannot set property origin</code></pre>
<p>You can set or modify any of the properties of <code>url</code> except <code>origin</code> and <code>searchParams</code> if you try, an error will be thrown.&nbsp;</p>
<h2 style="text-align: center;">How to use URLSearchParams in JS?</h2>
<p>In the last section we have seen the ways to read and modify URLs but reading and setting individual URL query strings can be done easily using the <code>URLSearchParams</code> constructor.&nbsp;</p>
<p><code>URLSearchParams</code> takes the query string of a URL as argument and returns an iterable object with various methods to read and manipulate the query parameters. If you pass a full URL to the <code>URLSearchParams</code> it will clip off the inital param after <code>?</code>. So it's always good to pass only the query string part of the URL or just pass query string as an object with key value pairs.</p>
<pre class="language-javascript"><code>const link = 'https://example.com/blog?name=john&amp;age=25&amp;id=101&amp;name=smith';
const url = new URL(link);
const searchParams = new URLSearchParams(url.search); // For active browser link, use location.search

searchParams.get('name'); // john
searchParams.getAll('name'); // ["john", "smith"]
searchParams.has('age'); // true
searchParams.toString(); // name=john&amp;age=25&amp;id=101&amp;name=smith
searchParams.append('place', 'Munich'); // Adding a new query param
searchParams.set('id', '222'); // Updating the id to 222
searchParams.toString(); // name=john&amp;age=25&amp;id=222&amp;name=smith&amp;place=Munich
searchParams.delete('place'); 
searchParams.toString(); // name=john&amp;age=25&amp;id=222&amp;name=smith</code></pre>
<p>There are other methods like <code>keys</code>, <code>values</code>, <code>entries</code> and <code>forEach</code>(iterates over the values) to iterate the search params.&nbsp;</p>
<p>Other than <code>forEach</code> method all return iterables so array methods like forEach can't be run on those. We need to convert them to an array and use methods like forEach, map etc.&nbsp;</p>
<pre class="language-javascript"><code>const searchParams = new URLSearchParams('name=john&amp;age=25&amp;id=101');

searchParams.forEach(v =&gt; console.log(v)); // john 25 101
Array.from(searchParams.keys()).forEach(k =&gt; console.log(k)); // name age id
Array.from(searchParams.values()).forEach(v =&gt; console.log(v)); // john 25 101
Object.fromEntries(searchParams.entries()); // {name: "john", age: "25", id: "101"}</code></pre>
<p>In the above code snippet for the methods <code>keys</code>, <code>values</code> and <code>entries</code> we converted them to arrays and object to see the results.</p>
<p>Now if we go back to the <code>URL</code> API methods, we have <code>searchParams</code> method there, using that we can get all the details that we could get using <code>URLSearchParams</code> except that we cannot set any query parameters from there.&nbsp;</p>
<pre class="language-javascript"><code>const url = new URL('https://example.com/?name=John Smith&amp;age=25&amp;id=101');
url.searchParams.get('name') // John Smith
url.searchParams.has('age') // true
url.searchParams.toString() //name=John+Smith&amp;age=25&amp;id=101
url.searchParams.forEach(i=&gt; console.log(i)) //John Smith 25 101
Object.fromEntries(url.searchParams.entries()) // {name: "John Smith", age: "25", id: "101"}</code></pre>
<blockquote>
<p>Using <code>URL</code> we can pass full URL address and can still read the correct query params unlike <code>URLSearchParams</code> where we need to pass only the query string to read the correct query parameters data.</p>
</blockquote>
<p>So that's all about <code>URL</code> and <code>URLSearchParams</code> in Javascript. In conclusion what we can infer is in most of the cases to read the query strings we you just need to use <code>URL</code> API.</p>

Learn to use URL and URLSearchParams in Javascript and understand the difference between these two APIs. URLSearchParams is a special case of URL API.

How to use URL & URLSearchParams in JS to read and manipulate URLs

<p>The keyword <code>this</code> in JavaScript is one of the most muddling concepts because its value depends on where it is used. Often it tricks developers and sometimes it's the culprit behind surreal results.</p>
<p>Let's discuss this <code>this</code> keyword with simple and easy to understand examples before actually delving into the <code>call</code>, <code>apply</code>, and <code>bind</code> methods as <code>this</code> keyword is the main reason for having those methods.</p>
<h2>What is <code>this</code> in JavaScript?</h2>
<p>The <code>this</code> keyword in JavaScript refers to the object that the function is a property of and <code>this</code> will depend on the object that is invoking the function.&nbsp;</p>
<p>To get a quick idea of <code>this</code> have a look at the code snippet below.</p>
<pre class="language-javascript"><code>const myObj = {
  name: 'John',
  age: 25,
  place: 'London',
  myFunction: function() {
    return this;
  }
};

myObj.myFunction(); 
// {name: "John", age: 25, place: "London", myFunction: &fnof;()}</code></pre>
<p>In the above code snippet, you can see that when <code>myFunction</code> method is called it returns the value of <code>this</code>, which is nothing but the <code>myObj</code> itself. If you recollect the definition for <code>this</code> in the previous paragraph, it says <code>this</code> refers to the object that the function is a property of, so here <code>myFunction</code> is a property of <code>myObj</code>, which means <code>this</code> is referring to that <code>myObj</code> object.&nbsp;</p>
<p>A <em>simple trick</em> is <span style="background-color: #fbeeb8;">whatever precedes before .(dot) is the object referenced by the <code>this</code></span> keyword. So before .(dot) in <code>myObj.myFunction()</code> is <code>myObj</code>, which is the value of <code>this</code>.</p>
<p>Let's take another example to understand this.</p>
<pre class="language-javascript"><code>function myFunction() {
  return this;
}

myFunction(); // window or undefined(in case of 'strict mode')</code></pre>
<p>In the above code we are returning <code>this</code> from the <code>myFunction</code>, so when <code>myFunction</code> is called what we see or get is the value of <code>this</code>.</p>
<p>Again if we recollect our definition of <code>this</code>, it refers to the object which the function is a property of. Here our function <code>myFunction</code> is a property of global object nothing but the <code>window</code> object in the browser, so which means when we call <code>myFunction</code> the value of <code>this</code> is going to be the <code>window</code> object.&nbsp;</p>
<p>If we go by our trick of .(dot) preceding the function, here there's no dot but every function is a method in the <code>window</code> object, so it translates to <code>window.myFunction()</code> so here, the <code>this</code> keyword refers to the <code>window</code> object.&nbsp;</p>
<p>In order to avoid functions getting attached to the window object, we <code>use strict</code> mode so as a result window will be <code>undefined</code> in such cases.&nbsp;</p>
<p>So keep in mind our definition as we're going to use that for understanding <code>call</code>, <code>apply</code> and <code>bind</code> methods.&nbsp;</p>
<blockquote>
<p>The <strong>this keyword</strong> in JavaScript <strong>refers to the object that the function is a property of</strong> and this will depend on the object that is invoking the function.&nbsp;</p>
</blockquote>
<h2>Understanding call, apply, bind in JavaScript</h2>
<p>Let's consider an object <code>person</code> with a property <code>name</code> and a method <code>details</code>.</p>
<pre class="language-javascript"><code>const person = {
  name: 'John',
  details: function(age, place) {
    return `${this.name} ${age} years old, lives in ${place}`
  }
}

person.details(25, 'London'); //John 25 years old, lives in London</code></pre>
<p>When we call the method <code>details</code> on <code>person</code> object with the arguments, we knew that <code>this</code> refers to the <code>person</code> object because <code>details</code> is a property of the <code>person</code> object and so <code>this.name</code> would be <em>John</em> and so the result that gets returned will be as shown in the comments.</p>
<p>This part is going to be clear as we knew what <code>this</code> means in the <code>person</code> object.</p>
<p>Let's consider a scenario where we wanted to use the <code>details</code> method but with different arguments.</p>
<p>As per the <code>details</code> method we can pass in different age and place values but how about the name, as it is connected with the <code>this</code> keyword? This is where we are going to use those special methods <code>call</code>, <code>apply</code> and <code>bind</code>. Let's dive into those.</p>
<h3>Using <code>call</code> method</h3>
<p>Now we want to associate a different object other than <code>person</code> to <code>this</code> keyword of <code>details</code> method. So to do that we're going to use the <code>call</code> method as shown below in the code snippet.</p>
<pre class="language-javascript"><code>person.details.call({ name: 'James'}, 30, 'Tokyo'); 
// James 30 years old, lives in Tokyo</code></pre>
<p>A <code>call</code> method takes a new object that we want this to refer to followed by the arguments to the function(nothing but the <code>details</code> method) and it gets called referencing <code>this</code> to the new object passed as the first argument. Voila! That's what a call method is.&nbsp;</p>
<h3>Using <code>apply</code> method</h3>
<p>Guess what, <code>apply</code> method is just the same as the <code>call</code> method, that is, it takes a new object as the first argument to reference the <code>this</code> keyword and is followed by an array of arguments. So it means you can simply pass the arguments to the <code>details</code> function in the form of an array instead of passing individually. Have a look at the code below so it becomes clear for you.</p>
<pre class="language-javascript"><code>person.details.apply({ name: 'James'}, [30, 'Tokyo']); 
// James 30 years old, lives in Tokyo</code></pre>
<p>So <code>call</code> and <code>apply</code> methods are used to reference a new object to <code>this</code> keyword on methods.</p>
<p>And then what <code>bind</code> is for? Guess!</p>
<h3>Using <code>bind</code> method</h3>
<p>When <code>call</code> and <code>apply</code> methods are applied they are called(invoked) directly referencing the new object passed but in order to get a new function reference that can be used to call at later times, the <code>bind</code> method is used. Have a look at the code snippet below to get more clarity.</p>
<pre class="language-javascript"><code>const personDetails = person.details.bind({name: 'William'}, 40, 'Rome');

personDetails(); 
// William 40 years old, lives in Rome</code></pre>
<p>So using the <code>bind</code> method returns a new function reference which can be called at a later time and that is all about the bind method.</p>
<p>So putting all the three methods together.</p>
<pre class="language-javascript"><code>const person = {
  name: 'John',
  details: function(age, place) {
    return `${this.name} ${age} years old, lives in ${place}`
  }
}

person.details(25, 'London');  //John 25 years old, lives in London

// Using call
person.details.call({ name: 'James'}, 30, 'Tokyo'); // James 30 years old, lives in Tokyo

// Using apply
person.details.apply({ name: 'James'}, [30, 'Tokyo']); // James 30 years old, lives in Tokyo

// Using bind
const personDetails = person.details.bind({name: 'William'}, 40, 'Rome');
personDetails();  // William 40 years old, lives in Rome</code></pre>
<p>So in short CAB(call, apply, bind in JavaScript) are used to reference a new owner object to the <code>this</code> keyword. Hope this article has demystified the call, apply and bind methods in JS.</p>
<p>Did we miss anything here? Yes, the <code>this</code> value will be different when we use an arrow function. See you in the next article.</p>

Call, apply, bind in JavaScript are some of the most often confusing methods. Let's demystify these with simple examples.

JavaScript Articles