Awesome JavaScript hacks
Read Time:1 Minute, 28 Second
In this post I will share useful hacks for JavaScript. These hacks reduce the code and will help you to run optimized code. So let’s start hacking!!!
Javascript allows you to use certain shortcuts to make your code easier on the eyes. In some simple cases, you can use logical operators && an || instead of if and else.
&& Operator Example:
|
1 2 3 4 5 |
<span class="c1">//instead of</span> <span class="k">if</span><span class="p">(</span><span class="nx">loggedIn</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Successfully logged in</span><span class="dl">"</span><span class="p">)</span> <span class="p">}</span> <span class="c1">//use</span> <span class="nx">loggedIn</span> <span class="o">&&</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Successfully logged in</span><span class="dl">"</span><span class="p">)</span> |
The || functions as an “or” clause. Now, using this operator is a bit trickier since it can prevent the application from executing. However, we can a condition to get around it.
|| Operator Example:
|
1 2 3 4 5 |
<span class="c1">//instead of </span> <span class="k">if</span><span class="p">(</span><span class="nx">users</span><span class="p">.</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">users</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="k">return</span> <span class="dl">"</span><span class="s2">Getting the users</span><span class="dl">"</span><span class="p">;</span> <span class="p">}</span> <span class="c1">// use</span> <span class="k">return</span> <span class="p">(</span><span class="nx">users</span><span class="p">.</span><span class="nx">name</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">Getting the users</span><span class="dl">"</span><span class="p">);</span> |
When you are working with multiple objects it gets difficult to keep track of which ones contain actual values and which you can delete.
Here is a quick hack on how to check if an object is empty or has value with Object.keys() function.
|
1 2 3 |
<span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">objectName</span><span class="p">).</span><span class="nx">length</span> <span class="c1">// if it returns 0 it means the object is empty, otherwise it</span> <span class="c1">// displays the number of values.</span> |
This awesome hack will help you to convert your CSV format or dictionary format data into tabular form using the console.table() method.
|
1 2 3 4 |
<span class="c1">//console.table</span> <span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">[</span> <span class="p">{</span><span class="dl">"</span><span class="s2">city</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">New York</span><span class="dl">"</span><span class="p">},</span> <span class="p">{</span><span class="dl">"</span><span class="s2">city</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Chicago</span><span class="dl">"</span><span class="p">},</span> <span class="p">{</span><span class="dl">"</span><span class="s2">city</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Los Angeles</span><span class="dl">"</span><span class="p">},</span> <span class="p">]</span> <span class="nx">console</span><span class="p">.</span><span class="nx">table</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span> <span class="c1">// the result is a table below</span> |
This simple hack will show you how you can use typeof() operator to check the type of any data in JS. You just need to pass the data or the variable as an argument of typeof().
|
1 2 3 4 5 6 7 8 |
<span class="kd">let</span> <span class="nx">v1</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">JavaScript</span><span class="dl">"</span><span class="p">;</span> <span class="kd">let</span> <span class="nx">v2</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="kd">let</span> <span class="nx">v3</span> <span class="o">=</span> <span class="mi">123</span><span class="p">;</span> <span class="kd">let</span> <span class="nx">v4</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">v1</span><span class="p">))</span> <span class="c1">//---> string</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">v2</span><span class="p">))</span> <span class="c1">//---> boolean</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">v3</span><span class="p">))</span> <span class="c1">//---> number</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">v4</span><span class="p">))</span> <span class="c1">//---> object</span> |
To shuffle the array’s elements without using any external libraries like Lodash, just run this magic trick:
|
1 2 3 4 |
<span class="kd">const</span> <span class="nx">list</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">list</span><span class="p">.</span><span class="nx">sort</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">-</span><span class="mf">0.5</span><span class="p">;</span> <span class="p">}));</span> <span class="c1">//---> [2, 1, 3]</span> |
That’s it!!! #HappyCoding
Let me know in the comments section any other awesome JS hacks to add to the list 🙂
Source: https://dev.to/mitchiemt11/awesome-javascript-hacks-35e3
Tag Cloud
Java Java Logical Programs OTP Generation in Java python Recursion youtube video ASCII Upper and Lower Case blockchain javascript graph learn to code software development Successful Software Engineers breadth first search Java Array Programs Java Programs Uncategorized android ios programming kotlin web-development django data sql cybersecurity database swiftui serverless aws swift rust react background-position gradients loader mask grid nth-child pseudo elements indieweb WordPress Print Array without brackets C++ factorial Java String Programs Final Keyword Static Variable Axie Infinity Cryptokitties NFT games tool inserting MISC Tips Codes python code python projects python3 system info python project Bigginers How to Do Integrations Payment Gateways PHP checkout page in php Implement stripe payment gateway in Step by step in PHP integrate stripe gatway in php mysql payment gateway integration in php step by step payment gateway integration in php step by step with source code payment gateway integration in website PHP Integrate Stripe Payment Gateway Tutorial PHP shopping cart checkout code shopping cart in php stripe php checkout PHP/MySQL/JSON best international payment gateway does google pay accept international payments how to accept international payments in india paytm payment gateway razorpay codeigniter github razorpay custom checkout github razorpay get payment details razorpay integration in codeigniter github razorpay international payments Razorpay payment gateway integration in CodeIgniter razorpay payment gateway integration in php code Razorpay payment gateway integration with PHP and CodeIgniter Razorpay payment gateway setup in CodeIgniter Library & Frameworks Tips & Tricks UI/UX & Front-end coding birds online html code for google sign in login with google account in PHP login with google account using javascript login with google account using javascript codeigniter login with google account using php login with google account using php source code
