Some Interesting JavaScript Tricks You Can Try Today
Tags: javascript, programming
Published: 2020-06-05 10:46:14

<p>Just like every other programming language, JavaScript has dozens of tricks to accomplish - both easy and difficult tasks. Some tricks are widely known while others are enough to blow your mind.</p>
<p>Let&#39;s have a look at seven little JavaScript tricks you can start using today!</p>
<figure>
<img alt="Some Interesting JavaScript Tricks You Can Try Today" src="https://imagehost.imageupload.net/2020/06/05/1591353076931.jpg" width="300" height="200">
<figcaption>Some Interesting JavaScript Tricks You Can Try Today</figcaption>
</figure>
<h2>1. Get Unique Values of an Array</h2>

<p>Getting an array of unique values is probably easier than you think:</p>

<div style="background-color: rgb(245, 245, 245); padding-left:7px; padding-top:5px; padding-bottom:10px; border:1px solid;border-color:rgb(204,204,204); ">
<pre prism="1">
var j = [...new Set([1, 2, 3, 3])]
>> [1, 2, 3]</pre>
</div>

<p>I love the mixture of rest expression and <code>Set</code>!</p>

<h2>2. Array and Boolean</h2>

<p>Ever need to filter falsy values (<code>0</code>, <code>undefined</code>, <code>null</code>, <code>false</code>, etc.) out of an array? You may not have known this trick:</p>

<div style="background-color: rgb(245, 245, 245); padding-left:7px; padding-top:5px; padding-bottom:10px; border:1px solid;border-color:rgb(204,204,204); ">
<pre prism="1">
myArray
    .map(item => {
        // ...
    })
    // Get rid of bad values
    .filter(Boolean);</pre>
</div>

<p>Just pass <code>Boolean</code> and all those falsy values go away!</p>

<h2>3. Create Empty Objects</h2>

<p>Sure you can create an object that seems empty with <code>{}</code>, but that object still has a <code>__proto__</code> and the usual <code>hasOwnProperty</code> and other object methods. There is a way, however, to create a pure "dictionary" object:</p>

<div style="background-color: rgb(245, 245, 245); padding-left:7px; padding-top:5px; padding-bottom:10px; border:1px solid;border-color:rgb(204,204,204); ">
<pre prism="1">
let dict = Object.create(null);

// dict.__proto__ === "undefined"
// No object properties exist until you add them</pre>
</div>

<p>There are absolutely no keys or methods on that object that you don&#39;t put there!</p>

<h2>4. Merge Objects</h2>

<p>The need to merge multiple objects in JavaScript has been around forever, especially as we started creating classes and widgets with options:</p>

<div style="background-color: rgb(245, 245, 245); padding-left:7px; padding-top:5px; padding-bottom:10px; border:1px solid;border-color:rgb(204,204,204); ">
<pre prism="1">
const person = { name: &#39;Kefas Kingsley&#39;, gender: &#39;Male&#39; };
const tools = { computer: &#39;Windows&#39;, editor: &#39;Sublime Text&#39; };
const attributes = { handsomeness: &#39;Average&#39;, hair: &#39;Black&#39;, eyes: &#39;Black&#39; };

const summary = {...person, ...tools, ...attributes};
/*
Object {
  "computer": "Windows",
  "editor": "Sublime Text",
  "eyes": "Black",
  "gender": "Male",
  "hair": "Black",
  "handsomeness": "Average",
  "name": "Kefas Kingsley",
}
*/</pre>
</div>

<p>Those three dots made the task so much easier!</p>

<h2>5. Require Function Parameters</h2>

<p>Being able to set default values for function arguments was an awesome addition to [removed]</p>

<div style="background-color: rgb(245, 245, 245); padding-left:7px; padding-top:5px; padding-bottom:10px; border:1px solid;border-color:rgb(204,204,204); ">
<pre prism="1">
const isRequired = () => { throw new Error(&#39;param is required&#39;); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// This will throw an error because no name is provided
hello();

// This will also throw an error
hello(undefined);

// These are good!
hello(null);
hello(&#39;Kingsley&#39;);</pre>
</div>

<p>That&#39;s some next level validation and JavaScript usage!</p>

<h2>6. Destructuring Aliases</h2>

<p>Destructuring is a very welcomed addition to JavaScript but sometimes we&#39;d prefer to refer to those properties by another name, so we can take advantage of aliases:</p>

<div style="background-color: rgb(245, 245, 245); padding-left:7px; padding-top:5px; padding-bottom:10px; border:1px solid;border-color:rgb(204,204,204); ">
<pre prism="1">
const obj = { x: 1 };

// Grabs obj.x as { x }
const { x } = obj;

// Grabs obj.x as { otherName }
const { x: otherName } = obj;</pre>
</div>

<p>Useful for avoiding naming conflicts with existing variables!</p>

<h2>7. Get Query String Parameters</h2>

<p>For years we wrote gross regular expressions to get query string values but those days are gone -- enter the amazing <code>URLSearchParams</code> API:</p>

<div style="background-color: rgb(245, 245, 245); padding-left:7px; padding-top:5px; padding-bottom:10px; border:1px solid;border-color:rgb(204,204,204); ">
<pre prism="1">
// Assuming "?post=1234&action=edit"

var urlParams = new URLSearchParams[removed].search);

console.log(urlParams.has(&#39;post&#39;)); // true
console.log(urlParams.get(&#39;action&#39;)); // "edit"
console.log(urlParams.getAll(&#39;action&#39;)); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append(&#39;active&#39;, &#39;1&#39;)); // "?post=1234&action=edit&active=1"</pre>
</div>

<p>Much easier than we used to fight with!</p>

<p>JavaScript has changed so much over the years but my favorite part of JavaScript these days is the velocity in language improvements we&#39;re seeing. Despite the changing dynamic of JavaScript, we still need to employ a few decent tricks; keep these tricks in your toolbox for when you need them!</p>
<p>Now, let me hear from you.<br>What is/are your favorite JavaScript trick(s)?</p>