<p>Unlock the power of Ubuntu within your Windows environment using Windows Subsystem for Linux 2 (WSL 2). This guide provides step-by-step instructions for installing Ubuntu on WSL 2 via two methods: the Command Line and the Microsoft Store.</p>
<h2><strong>Prerequisites</strong></h2>
<ul>
<li>
<p><strong>Operating System</strong>: Windows 10 (Version 1903, Build 18362 or later) or Windows 11.</p>
</li>
<li>
<p><strong>System Requirements</strong>:</p>
<ul>
<li>
<p>Ensure all the latest Windows updates are installed.</p>
</li>
<li>
<p>Verify that virtualization is enabled in your system's BIOS/UEFI settings.</p>
</li>
</ul>
</li>
<li>
<p><strong>Check Windows Version</strong>:</p>
<ul>
<li>
<p>Press <code>Win + R</code>, type <code>winver</code>, and press Enter.</p>
</li>
</ul>
</li>
</ul>
<h2><strong>Step 1: Enable WSL</strong></h2>
<h3><strong>Option A: Using PowerShell (Recommended for Windows 11 and newer Windows 10 versions)</strong></h3>
<ol>
<li>
<p>Open <strong>PowerShell as Administrator</strong>:</p>
<ul>
<li>
<p>Search for "PowerShell" in the Start Menu, right-click, and select <strong>Run as administrator</strong>.</p>
</li>
</ul>
</li>
<li>
<p>Execute the following command:</p>
<pre><code>wsl --install
</code></pre>
<p>This command enables the necessary WSL features and installs the default Ubuntu distribution.</p>
</li>
<li>
<p>Restart your computer when prompted to complete the installation.</p>
</li>
</ol>
<h3><strong>Option B: Manual Installation (For older Windows 10 versions)</strong></h3>
<ol>
<li>
<p>Open <strong>PowerShell as Administrator</strong>.</p>
</li>
<li>
<p>Enable the required features:</p>
<pre><code>dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
</code></pre>
</li>
<li>
<p>Set WSL 2 as the default version:</p>
<pre><code>wsl --set-default-version 2
</code></pre>
</li>
<li>
<p>Restart your computer to apply the changes.</p>
</li>
</ol>
<h2><strong>Step 2: Install Ubuntu on WSL</strong></h2>
<h3><strong>Method 1: Using the Command Line</strong></h3>
<ol>
<li>
<p>Open <strong>PowerShell as Administrator</strong>.</p>
</li>
<li>
<p>List available distributions:</p>
<pre><code>wsl --list --online
</code></pre>
<p>This command displays a list of available Linux distributions.</p>
<pre>The following is a list of valid distributions that can be installed.
The default distribution is denoted by '*'.
Install using 'wsl --install -d &lt;Distro&gt;'.

  NAME                                   FRIENDLY NAME
* Ubuntu                                 Ubuntu
  Debian                                 Debian GNU/Linux
  kali-linux                             Kali Linux Rolling
  Ubuntu-18.04                           Ubuntu 18.04 LTS
  Ubuntu-20.04                           Ubuntu 20.04 LTS
  Ubuntu-22.04                           Ubuntu 22.04 LTS
  Ubuntu-24.04                           Ubuntu 24.04 LTS
...</pre>
</li>
<li>
<p>Install your desired Ubuntu version (e.g., Ubuntu 24.04 LTS):</p>
<pre><code>wsl --install -d Ubuntu-24.04
</code></pre>
</li>
<li>You&rsquo;ll see an indicator of the installation progress in the terminal:<br>
<pre>Installing: Ubuntu 24.04 LTS
[==========================72,0%==========                 ]</pre>
</li>
<li>
<p>Use&nbsp;<code class="docutils literal notranslate"><span class="pre">wsl</span>&nbsp;<span class="pre">-l</span>&nbsp;<span class="pre">-v</span></code>&nbsp;to see all your currently installed distros and the version of WSL that they are using:</p>
<section id="install-ubuntu-wsl" class="">
<section id="method-2-wsl-commands-in-the-terminal" class="active">
<div class="no-copy highlight-text notranslate">
<div class="highlight">
<pre>NAME            STATE           VERSION
  Ubuntu-20.04    Stopped         2
* Ubuntu-24.04    Stopped         2
</pre>
</div>
</div>
</section>
</section>
<section id="note-on-installing-images-without-the-microsoft-store"></section>
</li>
<li>
<p>Upon completion, Ubuntu will launch, prompting you to create a UNIX username and password.</p>
</li>
</ol>
<h3><strong>Method 2: Using the Microsoft Store</strong></h3>
<ol>
<li>
<p>Open the <strong>Microsoft Store</strong> from the Start Menu.</p>
</li>
<li>
<p>Search for "Ubuntu" in the store's search bar.</p>
</li>
<li>
<p>Select your preferred Ubuntu version (e.g., Ubuntu 24.04 LTS) and click <strong>Get</strong> to begin the installation.<br><img src="../../../../uploads/1748078948455-choose-distribution.png" alt="" width="1512" height="850"></p>
</li>
<li>
<p>Once installed, click <strong>Launch</strong> or open Ubuntu from the Start Menu.<br><img src="../../../../uploads/1748078974369-search-ubuntu-windows.png" alt="" width="997" height="929"></p>
</li>
<li>
<p>On the first launch, you'll be prompted to create a UNIX username and password.</p>
</li>
</ol>
<h2><strong>Step 3: Verify WSL Installation</strong></h2>
<ol>
<li>
<p>Open <strong>PowerShell</strong>.</p>
</li>
<li>
<p>Check the installed distributions and their WSL versions:</p>
<pre><code>wsl --list --verbose
</code></pre>
<p>The output should resemble:</p>
<pre><code>NAME            STATE           VERSION
* Ubuntu-24.04  Running         2
</code></pre>
</li>
</ol>
<h2><strong>Optional: Set Ubuntu as the Default WSL Distribution</strong></h2>
<p>If you have multiple distributions installed and wish to set Ubuntu as the default:</p>
<pre><code>wsl --set-default Ubuntu-24.04
</code></pre>
<h2><strong>Optional: Install Ubuntu Without Microsoft Store Access</strong></h2>
<p>If you don't have access to the Microsoft Store or prefer manual installation:</p>
<ol>
<li>
<p>Download the Ubuntu <code>.appx</code> package from the <a href="https://ubuntu.com/download/wsl" target="_blank" rel="noopener">official Ubuntu releases</a>.</p>
</li>
<li>
<p>Convert the <code>.appx</code> file to a <code>.zip</code> file and extract its contents.</p>
</li>
<li>
<p>Run the installer to complete the installation process.</p>
</li>
</ol>
<h2><strong>Post-Installation: Update and Upgrade Ubuntu</strong></h2>
<p>After installation, it's advisable to update your Ubuntu packages:</p>
<pre>sudo apt update &amp;&amp; sudo apt upgrade -y</pre>
<p><strong>You're All Set!</strong><br><br>You now have Ubuntu running on WSL 2, providing a powerful and integrated Linux environment within Windows. Utilize it for development, scripting, and more, all without the need for a separate virtual machine.</p>
<p>For more detailed information and advanced configurations, refer to the official Ubuntu documentation: (<a href="https://documentation.ubuntu.com/wsl/en/stable/howto/install-ubuntu-wsl2/?utm_source=chatgpt.com" target="_blank" rel="noopener">Ubuntu Documentation</a>)</p>

Unlock the power of Ubuntu within your Windows environment using Windows Subsystem for Linux 2 (WSL 2). This guide provides step-by-step instructions for installing Ubuntu on WSL 2 via two methods: the Command Line and the Microsoft Store.

How to Install Ubuntu on WSL 2: A Comprehensive Guide

<p>An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. This article covers the basics of using the Shadow DOM.</p>



<blockquote class="wp-block-quote"><p><strong>Note</strong>: Shadow DOM is supported by default in Firefox (63 and onwards), Chrome, Opera, and Safari. The new Chromium-based Edge (79 and onwards) supports it too; the old Edge didn't.</p></blockquote>



<h2>High-level view</h2>



<p>This article assumes you are already familiar with the concept of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction" target="_blank" rel="noreferrer noopener nofollow">DOM (Document Object Model)</a> — a tree-like structure of connected nodes that represents the different elements and strings of text appearing in a markup document (usually an HTML document in the case of web documents). As an example, consider the following HTML fragment:</p>



<pre class="wp-block-code"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Simple DOM example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section&gt;
        &lt;img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."&gt;
        &lt;p&gt;Here we will add a link to the &lt;a href="https://www.mozilla.org/"&gt;Mozilla homepage&lt;/a&gt;&lt;/p&gt;
      &lt;/section&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>



<p>This fragment produces the following DOM structure:</p>



<figure class="wp-block-image size-full"><img src="https://tcmhack.in/wp-content/uploads/2021/09/dom-screenshot.png" alt="" class="wp-image-869"/></figure>



<p><em>Shadow DOM</em> allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM.</p>



<figure class="wp-block-image size-large"><img src="https://tcmhack.in/wp-content/uploads/2021/09/shadowdom-1-1024x471.png" alt="" class="wp-image-870"/></figure>



<p>There are some bits of shadow DOM terminology to be aware of:</p>



<ul><li><strong>Shadow host:</strong> The regular DOM node that the shadow DOM is attached to.</li><li><strong>Shadow tree:</strong> The DOM tree inside the shadow DOM.</li><li><strong>Shadow boundary:</strong> the place where the shadow DOM ends, and the regular DOM begins.</li><li><strong>Shadow root:</strong> The root node of the shadow tree.</li></ul>



<p>You can affect the nodes in the shadow DOM in exactly the same way as non-shadow nodes — for example appending children or setting attributes, styling individual nodes using element.style.foo, or adding style to the entire shadow DOM tree inside a<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style" target="_blank" rel="noreferrer noopener nofollow"> <code>&lt;style&gt;</code></a> element. The difference is that none of the code inside a shadow DOM can affect anything outside it, allowing for handy encapsulation.</p>



<p>Note that the shadow DOM is not a new thing by any means — browsers have used it for a long time to encapsulate the inner structure of an element. Think for example of a <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" target="_blank" rel="noreferrer noopener nofollow">&lt;video&gt;</a></code> element, with the default browser controls exposed. All you see in the DOM is the <code>&lt;video&gt;</code> element, but it contains a series of buttons and other controls inside its shadow DOM. The shadow DOM spec has made it so that you are allowed to actually manipulate the shadow DOM of your own custom elements.</p>



<h2>Basic usage</h2>



<p>You can attach a shadow root to any element using the&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow" target="_blank" rel="noreferrer noopener nofollow"><code>Element.attachShadow()</code></a>&nbsp;method. This takes as its parameter an options object that contains one option —&nbsp;<code>mode</code>&nbsp;— with a value of&nbsp;<code>open</code>&nbsp;or&nbsp;<code>closed</code>:</p>



<pre class="wp-block-code"><code>let shadow = elementRef.attachShadow({mode: 'open'});
let shadow = elementRef.attachShadow({mode: 'closed'});</code></pre>



<p><code>open</code>&nbsp;means that you can access the shadow DOM using JavaScript written in the main page context, for example using the&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot" target="_blank" rel="noreferrer noopener nofollow"><code>Element.shadowRoot</code></a>&nbsp;property:</p>



<pre class="wp-block-code"><code>let myShadowDom = myCustomElem.shadowRoot;</code></pre>



<p>If you attach a shadow root to a custom element with&nbsp;<code>mode: closed</code>&nbsp;set, you won't be able to access the shadow DOM from the outside —&nbsp;<code>myCustomElem.shadowRoot</code>&nbsp;returns&nbsp;<code>null</code>. This is the case with built in elements that contain shadow DOMs, such as&nbsp;<code>&lt;video&gt;</code>.</p>



<p><strong>Note</strong>: As&nbsp;<a href="https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af" target="_blank" rel="noreferrer noopener nofollow">this blog post shows</a>, it is actually fairly easy to work around closed shadow DOMs, and the hassle to completely hide them is often more than it's worth.</p>



<p>If you are attaching a shadow DOM to a custom element as part of its constructor (by far the most useful application of the shadow DOM), you would use something like this:</p>



<pre class="wp-block-code"><code>let shadow = this.attachShadow({mode: 'open'});</code></pre>



<p>When you've attached a shadow DOM to an element, manipulating it is a matter of just using the same DOM APIs as you use for the regular DOM manipulation:</p>



<pre class="wp-block-code"><code>let para = document.createElement('p');
shadow.appendChild(para);
// etc.</code></pre>



<h2 id="working_through_a_simple_example">Working through a simple example</h2>



<p>Now let's walk through a simple example to demonstrate the shadow DOM in action inside a custom element —&nbsp;<code><a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component" target="_blank" rel="noreferrer noopener nofollow">&lt;popup-info&gt;</a></code>&nbsp;(see a&nbsp;<a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/" target="_blank" rel="noreferrer noopener nofollow">live example</a>&nbsp;also). This takes an image icon and a text string, and embeds the icon into the page. When the icon is focused, it displays the text in a pop up information box to provide further in-context information. To begin with, in our JavaScript file we define a class called&nbsp;<code>PopUpInfo</code>, which extends&nbsp;<code>HTMLElement</code>:</p>



<pre class="wp-block-code"><code>class PopUpInfo extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();

    // write element functionality in here

    ...
  }
}</code></pre>



<p>Inside the class definition we define the element's constructor, which defines all the functionality the element will have when an instance of it is instantiated.</p>



<h3 id="creating_the_shadow_root">Creating the shadow root</h3>



<p>We first attach a shadow root to the custom element:</p>



<pre class="wp-block-code"><code>// Create a shadow root
let shadow = this.attachShadow({mode: 'open'});</code></pre>



<h3 id="creating_the_shadow_dom_structure">Creating the shadow DOM structure</h3>



<p>Next, we use some DOM manipulation to create the element's internal shadow DOM structure:</p>



<pre class="wp-block-code"><code>// Create spans
let wrapper = document.createElement('span');
wrapper.setAttribute('class', 'wrapper');
let icon = document.createElement('span');
icon.setAttribute('class', 'icon');
icon.setAttribute('tabindex', 0);
let info = document.createElement('span');
info.setAttribute('class', 'info');

// Take attribute content and put it inside the info span
let text = this.getAttribute('data-text');
info.textContent = text;

// Insert icon
let imgUrl;
if(this.hasAttribute('img')) {
  imgUrl = this.getAttribute('img');
} else {
  imgUrl = 'img/default.png';
}
let img = document.createElement('img');
img.src = imgUrl;
icon.appendChild(img);
</code></pre>



<h3 id="styling_the_shadow_dom">Styling the shadow DOM</h3>



<p>After that we create a&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style" target="_blank" rel="noreferrer noopener nofollow"><code>&lt;style&gt;</code></a>&nbsp;element and populate it with some CSS to style it:</p>



<pre class="wp-block-code"><code>// Create some CSS to apply to the shadow dom
let style = document.createElement('style');

style.textContent = `
.wrapper {
  position: relative;
}

.info {
  font-size: 0.8rem;
  width: 200px;
  display: inline-block;
  border: 1px solid black;
  padding: 10px;
  background: white;
  border-radius: 10px;
  opacity: 0;
  transition: 0.6s all;
  position: absolute;
  bottom: 20px;
  left: 10px;
  z-index: 3;
}

img {
  width: 1.2rem;
}

.icon:hover + .info, .icon:focus + .info {
  opacity: 1;
}`;</code></pre>



<h3 id="attaching_the_shadow_dom_to_the_shadow_root">Attaching the shadow DOM to the shadow root</h3>



<p>The final step is to attach all the created elements to the shadow root:</p>



<pre class="wp-block-code"><code>// attach the created elements to the shadow dom
shadow.appendChild(style);
shadow.appendChild(wrapper);
wrapper.appendChild(icon);
wrapper.appendChild(info);</code></pre>



<p>Feel free to ask a question in comments.</p>

An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from ot...

Shadow DOM in JavaScript - TCMHACK

Shadow DOM in JavaScript

<h1>Set</h1><p>The&nbsp;<code><strong>Set</strong></code>&nbsp;object lets you store unique values of any type, whether&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Glossary/Primitive" rel="noopener noreferrer" target="_blank">primitive values</a>&nbsp;or object references.</p><h2>Description</h2><p><code>Set</code>&nbsp;objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the&nbsp;<code>Set</code>&nbsp;<strong>may only occur once</strong>; it is unique in the&nbsp;<code>Set</code>'s collection.</p><h3>Value Equality</h3><p>Because each value in the&nbsp;<code>Set</code>&nbsp;has to be unique, the value equality will be checked. In an earlier version of ECMAScript specification, this was not based on the same algorithm as the one used in the&nbsp;<code>===</code>&nbsp;operator. Specifically, for&nbsp;<code>Set</code>s,&nbsp;<code>+0</code>&nbsp;(which is strictly equal to&nbsp;<code>-0</code>) and&nbsp;<code>-0</code>&nbsp;were different values. However, this was changed in the ECMAScript 2015 specification. See&nbsp;<em>"Key equality for -0 and 0"</em>&nbsp;in the&nbsp;browser compatibility&nbsp;table for details.</p><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" rel="noopener noreferrer" target="_blank">NaN</a></code>&nbsp;and&nbsp;<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" rel="noopener noreferrer" target="_blank">undefined</a></code>&nbsp;can also be stored in a Set. All&nbsp;<code>NaN</code>&nbsp;values are equated (i.e.&nbsp;<code>NaN</code>&nbsp;is considered the same as&nbsp;<code>NaN</code>, even though&nbsp;<code>NaN !== NaN</code>).</p><h2>Constructor</h2><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set" rel="noopener noreferrer" target="_blank">Set()</a></code> Creates a new&nbsp;<code>Set</code>&nbsp;object.</p><h2>Static properties</h2><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/@@species" rel="noopener noreferrer" target="_blank">get Set[@@species]</a></code> The constructor function that is used to create derived objects.</p><h2>Instance properties</h2><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/size" rel="noopener noreferrer" target="_blank">Set.prototype.size</a></code> Returns the number of values in the&nbsp;<code>Set</code>&nbsp;object.</p><h2>Instance methods</h2><ol><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/add" rel="noopener noreferrer" target="_blank">Set.prototype.add(value)</a></code> Appends&nbsp;<code>value</code>&nbsp;to the&nbsp;<code>Set</code>&nbsp;object. Returns the&nbsp;<code>Set</code>&nbsp;object with added value.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/clear" rel="noopener noreferrer" target="_blank">Set.prototype.clear()</a></code> Removes all elements from the&nbsp;<code>Set</code>&nbsp;object.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/delete" rel="noopener noreferrer" target="_blank">Set.prototype.delete(value)</a></code> Removes the element associated to the&nbsp;<code>value</code>&nbsp;and returns a boolean asserting whether an element was successfully removed or not.&nbsp;<code>Set.prototype.has(value)</code>&nbsp;will return&nbsp;<code>false</code>&nbsp;afterwards.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/has" rel="noopener noreferrer" target="_blank">Set.prototype.has(value)</a></code> Returns a boolean asserting whether an element is present with the given value in the&nbsp;<code>Set</code>&nbsp;object or not.</li></ol><h3>Iteration methods</h3><ol><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/@@iterator" rel="noopener noreferrer" target="_blank">Set.prototype[@@iterator]()</a></code> Returns a new iterator object that yields the&nbsp;<strong>values</strong>&nbsp;for each element in the&nbsp;<code>Set</code>&nbsp;object in insertion order.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/values" rel="noopener noreferrer" target="_blank">Set.prototype.keys()</a></code> Returns a new iterator object that yields the values for each element in the&nbsp;<code>Set</code>&nbsp;object in insertion order. (For Sets, this is the same as the&nbsp;<code><strong>values()</strong></code>&nbsp;method.)</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/values" rel="noopener noreferrer" target="_blank">Set.prototype.values()</a></code> Returns a new iterator object that yields the&nbsp;<strong>values</strong>&nbsp;for each element in the&nbsp;<code>Set</code>&nbsp;object in insertion order. (For Sets, this is the same as the&nbsp;<code><strong>keys()</strong></code>&nbsp;method.)</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/entries" rel="noopener noreferrer" target="_blank">Set.prototype.entries()</a></code> Returns a new iterator object that contains&nbsp;<strong>an array of&nbsp;</strong><code><strong>[value,&nbsp;value]</strong></code>&nbsp;for each element in the&nbsp;<code>Set</code>&nbsp;object, in insertion order. This is similar to the&nbsp;<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" rel="noopener noreferrer" target="_blank">Map</a></code>&nbsp;object, so that each entry's&nbsp;<em>key</em>&nbsp;is the same as its&nbsp;<em>value</em>&nbsp;for a&nbsp;<code>Set</code>.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/forEach" rel="noopener noreferrer" target="_blank">Set.prototype.forEach(callbackFn[,&nbsp;thisArg])</a></code> Calls&nbsp;<code>callbackFn</code>&nbsp;once for each value present in the&nbsp;<code>Set</code>&nbsp;object, in insertion order. If a&nbsp;<code>thisArg</code>&nbsp;parameter is provided, it will be used as the&nbsp;<code>this</code>&nbsp;value for each invocation of&nbsp;<code>callbackFn</code>.</li></ol><h2>Examples</h2><h3>Using the Set object</h3><pre class="ql-syntax" spellcheck="false">const mySet1 = new Set()

mySet1.add(1)           // Set [ 1 ]
mySet1.add(5)           // Set [ 1, 5 ]
mySet1.add(5)           // Set [ 1, 5 ]
mySet1.add('some text') // Set [ 1, 5, 'some text' ]
const o = {a: 1, b: 2}
mySet1.add(o)

mySet1.add({a: 1, b: 2})   // o is referencing a different object, so this is okay
mySet1.has(1)              // true
mySet1.has(3)              // false, since 3 has not been added to the set
mySet1.has(5)              // true
mySet1.has(Math.sqrt(25))  // true
mySet1.has('Some Text'.toLowerCase()) // true
mySet1.has(o)       // true

mySet1.size         // 5

mySet1.delete(5)    // removes 5 from the set
mySet1.has(5)       // false, 5 has been removed

mySet1.size         // 4, since we just removed one value

console.log(mySet1)
// logs Set(4) [ 1, "some text", {…}, {…} ] in Firefox
// logs Set(4) { 1, "some text", {…}, {…} } in Chrome
</pre><h3>Iterating Sets</h3><pre class="ql-syntax" spellcheck="false">// iterate over items in set
// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
for (let item of mySet1) console.log(item)

// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
for (let item of mySet1.keys()) console.log(item)

// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
for (let item of mySet1.values()) console.log(item)

// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
// (key and value are the same here)
for (let [key, value] of mySet1.entries()) console.log(key)

// convert Set object to an Array object, with Array.from
const myArr = Array.from(mySet1) // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}]

// the following will also work if run in an HTML document
mySet1.add(document.body)
mySet1.has(document.querySelector('body')) // true

// converting between Set and Array
const mySet2 = new Set([1, 2, 3, 4])
mySet2.size                    // 4
[...mySet2]                    // [1, 2, 3, 4]

// intersect can be simulated via
const intersection = new Set([...mySet1].filter(x =&gt; mySet2.has(x)))

// difference can be simulated via
const difference = new Set([...mySet1].filter(x =&gt; !mySet2.has(x)))

// Iterate set entries with forEach()
mySet1.forEach(function(value) {
  console.log(value)
})

// 1
// 2
// 3
// 4
</pre><h3>Implementing basic set operations</h3><pre class="ql-syntax" spellcheck="false">function isSuperset(set, subset) {
    for (let elem of subset) {
        if (!set.has(elem)) {
            return false
        }
    }
    return true
}

function union(setA, setB) {
    let _union = new Set(setA)
    for (let elem of setB) {
        _union.add(elem)
    }
    return _union
}

function intersection(setA, setB) {
    let _intersection = new Set()
    for (let elem of setB) {
        if (setA.has(elem)) {
            _intersection.add(elem)
        }
    }
    return _intersection
}

function symmetricDifference(setA, setB) {
    let _difference = new Set(setA)
    for (let elem of setB) {
        if (_difference.has(elem)) {
            _difference.delete(elem)
        } else {
            _difference.add(elem)
        }
    }
    return _difference
}

function difference(setA, setB) {
    let _difference = new Set(setA)
    for (let elem of setB) {
        _difference.delete(elem)
    }
    return _difference
}

// Examples
const setA = new Set([1, 2, 3, 4])
const setB = new Set([2, 3])
const setC = new Set([3, 4, 5, 6])

isSuperset(setA, setB)          // returns true
union(setA, setC)               // returns Set {1, 2, 3, 4, 5, 6}
intersection(setA, setC)        // returns Set {3, 4}
symmetricDifference(setA, setC) // returns Set {1, 2, 5, 6}
difference(setA, setC)          // returns Set {1, 2}

</pre><h3>Relation with Array objects</h3><pre class="ql-syntax" spellcheck="false">let myArray = ['value1', 'value2', 'value3']

// Use the regular Set constructor to transform an Array into a Set
let mySet = new Set(myArray)

mySet.has('value1')     // returns true

// Use the spread operator to transform a set into an Array.
console.log([...mySet]) // Will show you exactly the same Array as myArray
</pre><h3>Remove duplicate elements from the array</h3><pre class="ql-syntax" spellcheck="false">// Use to remove duplicate elements from the array

const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]

console.log([...new Set(numbers)])
// [2, 3, 4, 5, 6, 7, 32]
</pre><h3>Relation with Strings</h3><pre class="ql-syntax" spellcheck="false">let text = 'India'

const mySet = new Set(text)  // Set(5) {'I', 'n', 'd', 'i', 'a'}
mySet.size  // 5

//case sensitive &amp; duplicate ommision
new Set("Firefox")  // Set(7) { "F", "i", "r", "e", "f", "o", "x" }
new Set("firefox")  // Set(6) { "f", "i", "r", "e", "o", "x" }
</pre><h3>Use Set to ensure the uniqueness of a list of values</h3><pre class="ql-syntax" spellcheck="false">const array = Array.from(document.querySelectorAll('[id]')).map(e =&gt; e.id);
const set = new Set(array);
console.assert(set.size == array.length);
</pre><p>That's how Set works in JavaScript. Feel free to leave a comment below.</p>

The Set object lets you store unique values of any type, whether primitive values or object references. Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collectionThe Set object lets you store unique values of any type, whether primitive values or object references. Set objects are collections of values...

Explanation & Working of Set's in JavaScript - TCMHACK

Explanation & Working of Set's in JavaScript

Downloads medias from social networks like Facebook, Instagram, Twitter, Vimeo & many more in just one click.

<p>Social Video Downloader is easy and intuitive to use. Just open a video page on Facebook, Instagram, or Twitter, and you'll see the "Download" button on the top-right corner of the page.</p>
<p>The download button is now always visible and offers two options when clicked:</p>
<p>1. Fetch Video Info: Sends a request to our server to fetch the video information for the current page.<br>2. View Requests: Displays a list of all your past video requests.</p>
<p>Once you've selected a video, it will show the available formats. Just choose the desired format, and the download will begin.&nbsp;</p>
<p>Promoting Extensions: This extension fetches and displays a list of our other available extensions directly in its popup for your convenience.</p>
<p>Note: We do not support downloading videos from YouTube.</p>
<p>For more video downloading options, visit our website: "https://socialdownloader.in".</p>

Social Media Downloader

Calculate the number of letters, words, sentences, paragraphs, and spaces in a piece of text.

<p>The Word/Character Counter is a versatile Chrome extension designed to analyze textual content across any webpage. It provides instant insights into the structure of a selected string, evaluating:<br>1. Characters<br>2. Words<br>3. Sentences<br>4. Paragraphs<br>5. Whitespaces</p>
<p>🚀 New Feature: Context Menu Integration<br>Now, with the latest update, users can right-click any selected text on a webpage and choose the Word/Character Counter from the context menu. This enables real-time analysis&mdash;without navigating away&mdash;making the tool faster, smarter, and more accessible than ever.</p>
<p>Whether you're proofreading, analyzing content density, or optimizing copy, Word/Character Counter is your go-to productivity companion.</p>

Start your
next project with

TCMHACK

How Does TCMHACK
Help You?

Custom Software Development

Browser Extensions

Web & UI/UX Design

Most Loved Extensions

Social Media Downloader

Word/Character Counter

Our Latest Blog Posts

How to Install Ubuntu on WSL 2: A Comprehensive Guide

Shadow DOM in JavaScript

Explanation & Working of Set's in JavaScript

Social Media Downloader?

Start your next project with

TCMHACK

How Does TCMHACK Help You?

Custom Software Development

Browser Extensions

Web & UI/UX Design

Most Loved Extensions

Social Media Downloader

Word/Character Counter

Our Latest Blog Posts

How to Install Ubuntu on WSL 2: A Comprehensive Guide

Shadow DOM in JavaScript

Explanation & Working of Set's in JavaScript

Social Media Downloader?

Start your
next project with

How Does TCMHACK
Help You?