{"id":27487,"date":"2019-11-17T12:32:19","date_gmt":"2019-11-17T07:02:19","guid":{"rendered":"https:\/\/techmasala.addastudents.com\/dev\/?p=27487"},"modified":"2022-04-27T22:35:11","modified_gmt":"2022-04-27T17:05:11","slug":"useful-javascript-tips-and-tricks","status":"publish","type":"post","link":"https:\/\/techmasala.addastudents.com\/dev\/useful-javascript-tips-and-tricks\/","title":{"rendered":"Useful JavaScript Tips and Tricks"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/techmasala.addastudents.com\/dev\/wp-content\/uploads\/2019\/11\/Adobe_Post_20191106_0002240.7249639918453115-1024x576.png\" alt=\"\" class=\"wp-image-27489\" srcset=\"https:\/\/techmasala.addastudents.com\/dev\/wp-content\/uploads\/2019\/11\/Adobe_Post_20191106_0002240.7249639918453115-1024x576.png 1024w, https:\/\/techmasala.addastudents.com\/dev\/wp-content\/uploads\/2019\/11\/Adobe_Post_20191106_0002240.7249639918453115-300x169.png 300w, https:\/\/techmasala.addastudents.com\/dev\/wp-content\/uploads\/2019\/11\/Adobe_Post_20191106_0002240.7249639918453115-768x432.png 768w, https:\/\/techmasala.addastudents.com\/dev\/wp-content\/uploads\/2019\/11\/Adobe_Post_20191106_0002240.7249639918453115.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\n\nThis article aims to show some tips and tricks that can be used in your code to make it more effective and optimized.\n\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1.<strong>Difference b\/w === and ==<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The == (or !=) operator performs &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; an automatic type conversion if needed. The === (or !==) operator will not perform any conversion. It compares the value and the type, which could be considered faster than ==.<br> [10] === 10&nbsp; &nbsp; &nbsp; \/\/ is false <br> [10]&nbsp; == 10 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;\/\/ is true <br> &#8217;10&#8217; == 10&nbsp; &nbsp; &nbsp; &nbsp; \/\/ is true <br> &#8217;10&#8217; === 10&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;\/\/ is false <br>  [] &nbsp; == 0  &nbsp; &nbsp; &nbsp; &nbsp; \/\/ is true <br> &nbsp;&#8221; == false&nbsp; &nbsp; &nbsp; \/\/ is true &nbsp; but true == &#8220;a&#8221; \/\/ is false <br> &nbsp;&#8221; === &nbsp; false  \/\/ is false <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. <strong>Merge Objects<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The need to merge multiple objects in JavaScript has been around forever,&nbsp;&nbsp;<br>especially as we started creating classes and widgets with options: <br>const person = { name: &#8216;David Walsh&#8217;, gender: &#8216;Male&#8217; }; <br>const tools = { computer: &#8216;Mac&#8217;, editor: &#8216;Atom&#8217; };<br>const attributes = { handsomeness: &#8216;Extreme&#8217;, hair: &#8216;Brown&#8217;, eyes: &#8216;Blue&#8217; };<br>const summary = {&#8230;person, &#8230;tools, &#8230;attributes}; <\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- mobilehr -->\n<ins class=\"adsbygoogle\" style=\"display:inline-block;width:320px;height:50px\" data-ad-client=\"ca-pub-5374634985378775\" data-ad-slot=\"3358776185\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><br> \/* <br>Object { <br> &#8220;computer&#8221;: &#8220;Mac&#8221;, <br> &#8220;editor&#8221;: &#8220;Atom&#8221;,<br> &nbsp;&#8220;eyes&#8221;: &#8220;Blue&#8221;,  <br> &#8220;gender&#8221;: &#8220;Male&#8221;, <br> &#8220;hair&#8221;: &#8220;Brown&#8221;, <br> &#8220;handsomeness&#8221;: &#8220;Extreme&#8221;, <br> &#8220;name&#8221;: &#8220;David Walsh&#8221;, <br> } <br>*\/<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. <strong>Multiple conditions in an if statement<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you have to deal with checking a large number of conditions, you can use<\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- mobilehr -->\n<ins class=\"adsbygoogle\" style=\"display:inline-block;width:320px;height:50px\" data-ad-client=\"ca-pub-5374634985378775\" data-ad-slot=\"3358776185\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp; includes.if([&#8220;invoice&#8221;, &#8220;payment&#8221;, &#8220;pending&#8221;].includes(status)) { } <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. <strong>Check the code performance with&nbsp; &nbsp; performance.now()<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you have a portion of code that needs to run really fast, it can be&nbsp; &nbsp; inspected with performance.now() function. Unlike regular timestamps created with Date.now() the method performance.now() generates high resolution timestamp.<br> \/** <br> &nbsp;* Check the performance with * performance.now() <br> &nbsp;* *\/&nbsp; <br> var startedAt = performance.now(); <br> \/\/ Execute the code <br> &nbsp;for (let i = 0; i &lt; 10 &#8221; 4; i..){ <br> &nbsp;&nbsp;\/\/ do nothing<br> &nbsp;}&nbsp;  <br> \/\/ Get the final timestamp.&nbsp; <br> var endedAt = performance.now();&nbsp; <br> \/\/ Calculate the time taken&nbsp; <br> console.log( &#8220;Your code took &#8221; + (endedAt &#8211; startedAt) + &#8221; milliseconds to execute.&#8221;);  <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. <strong>Remove duplicates from an array<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s a<strong> <\/strong>very popular interview question about Javascript arrays, how to extract the unique values from Javascript array. Here is a quick and easy solution for this problem, you can use a new Set() for this purpose. And I would like to show you two possible ways to do it, one with .from() method and second with spread operator (\u2026).<br> var fruits = [\u201cbanana\u201d, \u201capple\u201d, \u201corange\u201d, \u201cwatermelon\u201d, \u201capple\u201d, \u201corange\u201d, \u201cgrape\u201d, \u201capple\u201d]; <\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- responsive -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-5374634985378775\" data-ad-slot=\"9690889164\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><br> \/\/ First method <br> var uniqueFruits = Array.from(new Set(fruits)); <br> console.log(uniqueFruits); \/\/ returns [\u201cbanana\u201d, \u201capple\u201d, \u201corange\u201d, \u201cwatermelon\u201d, \u201cgrape\u201d]  <br> <strong>\/<\/strong>\/ Second method <br> var uniqueFruits2 = [\u2026new Set(fruits)]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">console.log(uniqueFruits2); \/\/ returns [\u201cbanana\u201d, \u201capple\u201d, \u201corange\u201d, \u201cwatermelon\u201d, \u201cgrape\u201d] <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Delete elements from an array<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Don\u2019t use delete to remove an item from the array. Use splice instead of using delete to delete an item from an array.&nbsp;<br> Using delete replaces the item with undefined instead of removing it from the array. <br>Instead of\u2026 <br>var items = [12, 548 ,&#8217;a&#8217; , 2 , 5478 , &#8216;foo&#8217; , 8852, , &#8216;Doe&#8217; ,2154 , 119 ];&nbsp; <br> items.length; \/\/ return 11&nbsp; <br> delete items[3]; \/\/ return true<br> items.length; \/\/ return 11&nbsp; <br>&nbsp;  \/* items will be equal to [12, 548, &#8220;a&#8221;, undefined \u00d7 1, 5478, &#8220;foo&#8221;, 8852, undefined \u00d7 1, &#8220;Doe&#8221;, 2154, &nbsp; &nbsp; &nbsp; 119]   *\/ <\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- mobilehr -->\n<ins class=\"adsbygoogle\" style=\"display:inline-block;width:320px;height:50px\" data-ad-client=\"ca-pub-5374634985378775\" data-ad-slot=\"3358776185\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><br> Use\u2026 <br> var items = [12, 548 ,&#8217;a&#8217; , 2 , 5478 , &#8216;foo&#8217; , 8852, , &#8216;Doe&#8217; ,2154 , 119 ];\u00a0 <br> items.length; \/\/ return 11\u00a0 <br> items.splice(3,1) ;\u00a0 <br> items.length; \/\/ return 10\u00a0 <br> \/* items will be equal to [12, 548, &#8220;a&#8221;, 5478, &#8220;foo&#8221;, 8852, undefined \u00d7 1, &#8220;Doe&#8221;, 2154, \u00a0 \u00a0 \u00a0 119]   *\/ <br> The delete method should be used to delete an object property.<strong> <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/junilearning.com\/blog\/guide\/javascript-for-kids\/\" target=\"_blank\" rel=\"noreferrer noopener\">junilearning<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=GZexDk5q1QQ&#038;feature=youtu.be\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This article aims to show some tips and tricks that can be used in your code to make it more effective and optimized. 1.Difference b\/w === and == The == (or !=) operator performs &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; an automatic type conversion if needed. The === (or !==) operator will not perform any conversion. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":27489,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[68,47,45,67],"class_list":["post-27487","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn-javascript-online","tag-and-tricks","tag-javascript","tag-js","tag-useful-javascript-tips"],"_links":{"self":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts\/27487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/comments?post=27487"}],"version-history":[{"count":1,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts\/27487\/revisions"}],"predecessor-version":[{"id":36730,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts\/27487\/revisions\/36730"}],"wp:attachment":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/media?parent=27487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/categories?post=27487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/tags?post=27487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}