<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>twelve</title>
        <link>https://paragraph.com/@hdnet</link>
        <description>undefined</description>
        <lastBuildDate>Fri, 19 Jun 2026 15:46:56 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>en</language>
        <image>
            <title>twelve</title>
            <url>https://storage.googleapis.com/papyrus_images/c940672ba194c732a1779ff641a3a4bcaace86733bb377ac41e38b4922b2226b.png</url>
            <link>https://paragraph.com/@hdnet</link>
        </image>
        <copyright>All rights reserved</copyright>
        <item>
            <title><![CDATA[JavaScript shorthand tips and tricks]]></title>
            <link>https://paragraph.com/@hdnet/javascript-shorthand-tips-and-tricks</link>
            <guid>QKA7XXZaTvoZle2q8Hiu</guid>
            <pubDate>Sat, 09 Jul 2022 11:32:52 GMT</pubDate>
            <description><![CDATA[Let&apos;s checkout some shorthand tips and other tricks.Remember, some of these are not readable and might not seems relevant to use in a project, but my intensions here is to make you aware that these tricks exist.Assigning values to multiple variablesWe can assign values to multiple variables in one line with array destructuring.//Longhand let a, b, c; a = 5; b = 8; c = 12; //Shorthand let [a, b, c] = [5, 8, 12]; Assigning a default valueWe can use OR(||) short circuit evaluation or nullis...]]></description>
            <content:encoded><![CDATA[<p>Let&apos;s checkout some shorthand tips and other tricks.</p><blockquote><p>Remember, some of these are not readable and might not seems relevant to use in a project, but my intensions here is to make you aware that these tricks exist.</p></blockquote><h2 id="h-assigning-values-to-multiple-variables" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">Assigning values to multiple variables</h2><p>We can assign values to multiple variables in one line with array destructuring.</p><pre data-type="codeBlock" text="//Longhand
let a, b, c;

a = 5;
b = 8;
c = 12;

//Shorthand
let [a, b, c] = [5, 8, 12];
"><code>//Longhand
let a, b, c<span class="hljs-comment">;</span>

<span class="hljs-attr">a</span> = <span class="hljs-number">5</span><span class="hljs-comment">;</span>
<span class="hljs-attr">b</span> = <span class="hljs-number">8</span><span class="hljs-comment">;</span>
<span class="hljs-attr">c</span> = <span class="hljs-number">12</span><span class="hljs-comment">;</span>

//Shorthand
let <span class="hljs-section">[a, b, c]</span> = <span class="hljs-section">[5, 8, 12]</span><span class="hljs-comment">;</span>
</code></pre><h2 id="h-assigning-a-default-value" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">Assigning a default value</h2><p>We can use <code>OR(||)</code> short circuit evaluation or nullish coalescing operator <code>(??)</code> to assign a default value to a variable in case the expected value is found falsy.</p><pre data-type="codeBlock" text="//Longhand
let imagePath;

let path = getImagePath();

if (path !== null &amp;&amp; path !== undefined &amp;&amp; path !== &apos;&apos;) {
    imagePath = path;
} else {
    imagePath = &apos;default.jpg&apos;;
}

//Shorthand
let imagePath = getImagePath() || &apos;default.jpg&apos;;
// OR
let imagePath = getImagePath() ?? &apos;default.jpg&apos;;
"><code><span class="hljs-comment">//Longhand</span>
let imagePath;

let path <span class="hljs-operator">=</span> getImagePath();

<span class="hljs-keyword">if</span> (path <span class="hljs-operator">!</span><span class="hljs-operator">=</span><span class="hljs-operator">=</span> null <span class="hljs-operator">&#x26;</span><span class="hljs-operator">&#x26;</span> path <span class="hljs-operator">!</span><span class="hljs-operator">=</span><span class="hljs-operator">=</span> undefined <span class="hljs-operator">&#x26;</span><span class="hljs-operator">&#x26;</span> path <span class="hljs-operator">!</span><span class="hljs-operator">=</span><span class="hljs-operator">=</span> <span class="hljs-string">''</span>) {
    imagePath <span class="hljs-operator">=</span> path;
} <span class="hljs-keyword">else</span> {
    imagePath <span class="hljs-operator">=</span> <span class="hljs-string">'default.jpg'</span>;
}

<span class="hljs-comment">//Shorthand</span>
let imagePath <span class="hljs-operator">=</span> getImagePath() <span class="hljs-operator">|</span><span class="hljs-operator">|</span> <span class="hljs-string">'default.jpg'</span>;
<span class="hljs-comment">// OR</span>
let imagePath <span class="hljs-operator">=</span> getImagePath() ?? <span class="hljs-string">'default.jpg'</span>;
</code></pre><h2 id="h-andandand-short-circuit-evaluation" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">AND(&amp;&amp;) Short circuit evaluation</h2><p>If you are calling a function only if a variable is <code>true</code>, then you can use the <code>AND(&amp;&amp;)</code> short circuit as an alternative for this.</p><pre data-type="codeBlock" text="//Longhand
if (isLoggedin) {
    goToHomepage();
 }

//Shorthand
isLoggedin &amp;&amp; goToHomepage();
"><code><span class="hljs-comment">//Longhand</span>
if (isLoggedin) {
    <span class="hljs-built_in">goToHomepage</span>();
 }

<span class="hljs-comment">//Shorthand</span>
isLoggedin &#x26;&#x26; <span class="hljs-built_in">goToHomepage</span>();
</code></pre><h2 id="h-swap-two-variables" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">Swap two variables</h2><p>To swap two variables, we often use a third variable. We can swap two variables easily with array destructuring assignment.</p><pre data-type="codeBlock" text="let x = &apos;Hello&apos;, y = 55;

//Longhand
const temp = x;
x = y;
y = temp;

//Shorthand
[x, y] = [y, x];
"><code>let <span class="hljs-attr">x</span> = <span class="hljs-string">'Hello'</span>, y = <span class="hljs-number">55</span><span class="hljs-comment">;</span>

//Longhand
const <span class="hljs-attr">temp</span> = x<span class="hljs-comment">;</span>
<span class="hljs-attr">x</span> = y<span class="hljs-comment">;</span>
<span class="hljs-attr">y</span> = temp<span class="hljs-comment">;</span>

//Shorthand
<span class="hljs-section">[x, y]</span> = <span class="hljs-section">[y, x]</span><span class="hljs-comment">;</span>
</code></pre><h2 id="h-template-literals" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">Template Literals</h2><p>We normally use the <code>+</code> operator to concatenate string values with variables. With ES6 template literals, we can do it in a more simple way.</p><pre data-type="codeBlock" text="//Longhand
console.log(&apos;You got a missed call from &apos; + number + &apos; at &apos; + time);

//Shorthand
console.log(`You got a missed call from ${number} at ${time}`);
"><code><span class="hljs-comment">//Longhand</span>
console.log(<span class="hljs-string">'You got a missed call from '</span> <span class="hljs-operator">+</span> number <span class="hljs-operator">+</span> <span class="hljs-string">' at '</span> <span class="hljs-operator">+</span> time);

<span class="hljs-comment">//Shorthand</span>
console.log(`You got a missed call <span class="hljs-keyword">from</span> ${number} at ${time}`);
</code></pre><h2 id="h-multiple-condition-checking" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">Multiple condition checking</h2><p>For multiple value matching, we can put all values in one array and use <code>indexOf()</code> or <code>includes()</code> method.</p><pre data-type="codeBlock" text="//Longhand
if (value === 1 || value === &apos;one&apos; || value === 2 || value === &apos;two&apos;) {
  // Execute some code
}

// Shorthand
if ([1, &apos;one&apos;, 2, &apos;two&apos;].indexOf(value) &gt;= 0) {
   // Execute some code
}

// OR
if ([1, &apos;one&apos;, 2, &apos;two&apos;].includes(value)) { 
    // Execute some code 
}
"><code><span class="hljs-comment">//Longhand</span>
<span class="hljs-keyword">if</span> (value <span class="hljs-operator">=</span><span class="hljs-operator">=</span><span class="hljs-operator">=</span> <span class="hljs-number">1</span> <span class="hljs-operator">|</span><span class="hljs-operator">|</span> value <span class="hljs-operator">=</span><span class="hljs-operator">=</span><span class="hljs-operator">=</span> <span class="hljs-string">'one'</span> <span class="hljs-operator">|</span><span class="hljs-operator">|</span> value <span class="hljs-operator">=</span><span class="hljs-operator">=</span><span class="hljs-operator">=</span> <span class="hljs-number">2</span> <span class="hljs-operator">|</span><span class="hljs-operator">|</span> value <span class="hljs-operator">=</span><span class="hljs-operator">=</span><span class="hljs-operator">=</span> <span class="hljs-string">'two'</span>) {
  <span class="hljs-comment">// Execute some code</span>
}

<span class="hljs-comment">// Shorthand</span>
<span class="hljs-keyword">if</span> ([<span class="hljs-number">1</span>, <span class="hljs-string">'one'</span>, <span class="hljs-number">2</span>, <span class="hljs-string">'two'</span>].indexOf(value) <span class="hljs-operator">></span><span class="hljs-operator">=</span> <span class="hljs-number">0</span>) {
   <span class="hljs-comment">// Execute some code</span>
}

<span class="hljs-comment">// OR</span>
<span class="hljs-keyword">if</span> ([<span class="hljs-number">1</span>, <span class="hljs-string">'one'</span>, <span class="hljs-number">2</span>, <span class="hljs-string">'two'</span>].includes(value)) { 
    <span class="hljs-comment">// Execute some code </span>
}
</code></pre><h2 id="h-object-property-assignment" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">Object Property Assignment</h2><p>If the variable name and object key name are the same then we can just mention the variable name in object literals instead of both key and value. JavaScript will automatically set the key same as the variable name and assign the value as the variable value.</p><pre data-type="codeBlock" text="let firstname = &apos;Amitav&apos;;
let lastname = &apos;Mishra&apos;;

//Longhand
let obj = {firstname: firstname, lastname: lastname};

//Shorthand
let obj = {firstname, lastname};
"><code>let <span class="hljs-attr">firstname</span> = <span class="hljs-string">'Amitav'</span><span class="hljs-comment">;</span>
let <span class="hljs-attr">lastname</span> = <span class="hljs-string">'Mishra'</span><span class="hljs-comment">;</span>

//Longhand
let <span class="hljs-attr">obj</span> = {firstname: firstname, lastname: lastname}<span class="hljs-comment">;</span>

//Shorthand
let <span class="hljs-attr">obj</span> = {firstname, lastname}<span class="hljs-comment">;</span>
</code></pre><h2 id="h-string-into-a-number" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">String into a Number</h2><p>We can convert string to number by simply providing an unary operator <code>(+)</code> in front of the string value.</p><pre data-type="codeBlock" text="//Longhand
let total = parseInt(&apos;453&apos;, 10);
let average = parseFloat(&apos;42.6&apos;, 10);

//Shorthand
let total = +&apos;453&apos;;
let average = +&apos;42.6&apos;;
"><code>//Longhand
let <span class="hljs-attr">total</span> = parseInt(<span class="hljs-string">'453'</span>, <span class="hljs-number">10</span>)<span class="hljs-comment">;</span>
let <span class="hljs-attr">average</span> = parseFloat(<span class="hljs-string">'42.6'</span>, <span class="hljs-number">10</span>)<span class="hljs-comment">;</span>

//Shorthand
let <span class="hljs-attr">total</span> = +<span class="hljs-string">'453'</span><span class="hljs-comment">;</span>
let <span class="hljs-attr">average</span> = +<span class="hljs-string">'42.6'</span><span class="hljs-comment">;</span>
</code></pre><h2 id="h-exponent-power" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">Exponent Power</h2><p>We can use <code>Math.pow()</code> method to find the power of a number. There is a shorter syntax to do it with a double asterisk <code>(**)</code>.</p><pre data-type="codeBlock" text="//Longhand
const power = Math.pow(4, 3); // 64

// Shorthand
const power = 4**3; // 64
"><code><span class="hljs-comment">//Longhand</span>
const power <span class="hljs-operator">=</span> Math.pow(<span class="hljs-number">4</span>, <span class="hljs-number">3</span>); <span class="hljs-comment">// 64</span>

<span class="hljs-comment">// Shorthand</span>
const power <span class="hljs-operator">=</span> <span class="hljs-number">4</span><span class="hljs-operator">*</span><span class="hljs-operator">*</span><span class="hljs-number">3</span>; <span class="hljs-comment">// 64</span>
</code></pre><h2 id="h-double-not-bitwise-operator" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">Double NOT bitwise operator (~~)</h2><p>The double NOT bitwise operator is a substitute for <code>Math.floor()</code> method.</p><pre data-type="codeBlock" text="//Longhand
const floor = Math.floor(6.8); // 6

// Shorthand
const floor = ~~6.8; // 6
"><code><span class="hljs-comment">//Longhand</span>
const floor <span class="hljs-operator">=</span> Math.floor(<span class="hljs-number">6.8</span>); <span class="hljs-comment">// 6</span>

<span class="hljs-comment">// Shorthand</span>
const floor <span class="hljs-operator">=</span> <span class="hljs-operator">~</span><span class="hljs-operator">~</span><span class="hljs-number">6.8</span>; <span class="hljs-comment">// 6</span>
</code></pre><blockquote><p>The double NOT bitwise operator approach only works for 32 bit integers i.e (2**31)-1 = 2147483647. So for any number higher than 2147483647 and less than 0, bitwise operator <code>(~~)</code> will give wrong results, so recommended to use <code>Math.floor()</code> in such case.</p></blockquote><h2 id="h-find-max-and-min-number-in-an-array" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">Find max and min number in an array</h2><pre data-type="codeBlock" text="const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2
"><code>const arr <span class="hljs-operator">=</span> [<span class="hljs-number">2</span>, <span class="hljs-number">8</span>, <span class="hljs-number">15</span>, <span class="hljs-number">4</span>];
Math.<span class="hljs-built_in">max</span>(...arr); <span class="hljs-comment">// 15</span>
Math.<span class="hljs-built_in">min</span>(...arr); <span class="hljs-comment">// 2</span>
</code></pre><h2 id="h-merging-of-arrays" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">Merging of arrays</h2><pre data-type="codeBlock" text="let arr1 = [20, 30];

//Longhand
let arr2 = arr1.concat([60, 80]); // [20, 30, 60, 80]

//Shorthand
let arr2 = [...arr1, 60, 80]; // [20, 30, 60, 80]
"><code>let arr1 <span class="hljs-operator">=</span> [<span class="hljs-number">20</span>, <span class="hljs-number">30</span>];

<span class="hljs-comment">//Longhand</span>
let arr2 <span class="hljs-operator">=</span> arr1.concat([<span class="hljs-number">60</span>, <span class="hljs-number">80</span>]); <span class="hljs-comment">// [20, 30, 60, 80]</span>

<span class="hljs-comment">//Shorthand</span>
let arr2 <span class="hljs-operator">=</span> [...arr1, <span class="hljs-number">60</span>, <span class="hljs-number">80</span>]; <span class="hljs-comment">// [20, 30, 60, 80]</span>
</code></pre><h2 id="h-remove-falsey-values-from-array" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">Remove falsey values from Array</h2><pre data-type="codeBlock" text="let arr = [12, null, 0, &apos;xyz&apos;, null, -25, NaN, &apos;&apos;, undefined, 0.5, false];

let filterArray = arr.filter(Boolean);
// filterArray = [12, &quot;xyz&quot;, -25, 0.5]
"><code>let <span class="hljs-attr">arr</span> = [<span class="hljs-number">12</span>, null, <span class="hljs-number">0</span>, <span class="hljs-string">'xyz'</span>, null, -<span class="hljs-number">25</span>, NaN, <span class="hljs-string">''</span>, undefined, <span class="hljs-number">0.5</span>, <span class="hljs-literal">false</span>]<span class="hljs-comment">;</span>

let <span class="hljs-attr">filterArray</span> = arr.filter(Boolean)<span class="hljs-comment">;</span>
// <span class="hljs-attr">filterArray</span> = [<span class="hljs-number">12</span>, <span class="hljs-string">"xyz"</span>, -<span class="hljs-number">25</span>, <span class="hljs-number">0.5</span>]
</code></pre><blockquote><p>Note: Zero (0) is considered to be a falsey value so it will be removed in both the cases. You can add an extra check for zero to keep it.</p></blockquote><h2 id="h-remove-duplicates-from-array" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">Remove duplicates from Array</h2><pre data-type="codeBlock" text="const arr = [10, 5, 20, 10, 6, 5, 8, 5, 20];
const unique = [...new Set(arr)];
console.log(unique); // [10, 5, 20, 6, 8]
"><code>const <span class="hljs-attr">arr</span> = [<span class="hljs-number">10</span>, <span class="hljs-number">5</span>, <span class="hljs-number">20</span>, <span class="hljs-number">10</span>, <span class="hljs-number">6</span>, <span class="hljs-number">5</span>, <span class="hljs-number">8</span>, <span class="hljs-number">5</span>, <span class="hljs-number">20</span>]<span class="hljs-comment">;</span>
const <span class="hljs-attr">unique</span> = [...new Set(arr)]<span class="hljs-comment">;</span>
console.log(unique)<span class="hljs-comment">; // [10, 5, 20, 6, 8]</span>
</code></pre><h2 id="h-create-random-string-token" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">Create random string token</h2><pre data-type="codeBlock" text="const token = Math.random().toString(36).slice(2);
// it will create a 11 character string. Ex: &apos;3efstaz9g8a&apos;
"><code>const token <span class="hljs-operator">=</span> Math.random().toString(<span class="hljs-number">36</span>).slice(<span class="hljs-number">2</span>);
<span class="hljs-comment">// it will create a 11 character string. Ex: '3efstaz9g8a'</span>
</code></pre><h2 id="h-find-number-of-arguments-expected-by-a-function" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">Find number of arguments expected by a function</h2><pre data-type="codeBlock" text="function func(a, b, c) {
  // code
}

console.log(func.length); // 3
// function with Rest parameter
function func(a, b, ...c) {
  // code
}
console.log(func.length); // 2
"><code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func</span>(<span class="hljs-params">a, b, c</span>) </span>{
  <span class="hljs-comment">// code</span>
}

console.log(func.<span class="hljs-built_in">length</span>); <span class="hljs-comment">// 3</span>
<span class="hljs-comment">// function with Rest parameter</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func</span>(<span class="hljs-params">a, b, ...c</span>) </span>{
  <span class="hljs-comment">// code</span>
}
console.log(func.<span class="hljs-built_in">length</span>); <span class="hljs-comment">// 2</span>
</code></pre><h2 id="h-check-if-a-key-exists-in-an-object" class="text-3xl font-header !mt-8 !mb-4 first:!mt-0 first:!mb-0">Check if a key exists in an object</h2><pre data-type="codeBlock" text="const ob = {x: 5, y: 10};
// using &quot;in&quot; operator
console.log(&apos;x&apos; in ob); // true
console.log(&apos;abc&apos; in ob); // false
// using Reflect object
console.log(Reflect.has(ob, &apos;x&apos;)); // true
console.log(Reflect.has(ob, &apos;abc&apos;)); // false
"><code>const ob <span class="hljs-operator">=</span> {x: <span class="hljs-number">5</span>, y: <span class="hljs-number">10</span>};
<span class="hljs-comment">// using "in" operator</span>
console.log(<span class="hljs-string">'x'</span> in ob); <span class="hljs-comment">// true</span>
console.log(<span class="hljs-string">'abc'</span> in ob); <span class="hljs-comment">// false</span>
<span class="hljs-comment">// using Reflect object</span>
console.log(Reflect.has(ob, <span class="hljs-string">'x'</span>)); <span class="hljs-comment">// true</span>
console.log(Reflect.has(ob, <span class="hljs-string">'abc'</span>)); <span class="hljs-comment">// false</span>
</code></pre><p><a target="_blank" rel="noopener noreferrer nofollow ugc" class="dont-break-out" href="https://dev.to/amitavmishra99/javascript-shorthand-tips-and-tricks-4i7h">https://dev.to/amitavmishra99/javascript-shorthand-tips-and-tricks-4i7h</a></p>]]></content:encoded>
            <author>hdnet@newsletter.paragraph.com (twelve)</author>
        </item>
    </channel>
</rss>