CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>🔥10 JavaScript Tips and Tricks That Will Be Useful - DEV Community</title> <meta name="last-updated" content="2024-12-01 22:06:08 UTC"> <meta name="user-signed-in" content="false"> <meta name="head-cached-at" content="1733090768"> <meta name="environment" content="production"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6206ee9219dabd8e1168cebeb1f34c12ab133f7723e45d4b24dd76b43fee1fbc.css" media="all" id="main-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-4dd5770daa5d9d443ed73a724fb1913af9b093295bf1a72307f0fb322e5df1d9.css" media="all" id="main-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-f94476cf86ce9153627fd53a77e651ec54b82b6be20ddb1bf93e3dd40b81aeab.css" media="all" id="main-crayons-stylesheet" /> <script src="https://assets.dev.to/assets/base-e0fa4f0ebd0f1ec157e6b07c08f9222f8c0cca3d10cfde4cd8c951b43985b10b.js" defer="defer"></script> <script src="https://assets.dev.to/assets/application-147cebefc5c4cddde055e8f5eb0055e811469b08405170e2411fbd7944b5ac04.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseInitializers-bc498cfd7bb7d2a2da59d68d0b2055cc2dd26fee3669ab88edbb396d37bc3369.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseTracking-b6bf73e5ee66633e151e7d5b7c6bbccedfa4c59e3615be97b98c4c0f543ddae7.js" defer="defer"></script> <meta name="search-script" content="https://assets.dev.to/assets/Search-cc5e8a352578866203771def747f37c3ec6a0869de0458328e0fcba3d5d2fceb.js"> <link rel="canonical" href="https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa" /> <meta name="description" content="Hello everyone! In this article I would like to describe 10 simple, but at the same time effective... Tagged with webdev, javascript, programming, opensource."> <meta name="keywords" content="webdev, javascript, programming, opensource, software, coding, development, engineering, inclusive, community"> <meta property="og:type" content="article" /> <meta property="og:url" content="https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa" /> <meta property="og:title" content="🔥10 JavaScript Tips and Tricks That Will Be Useful" /> <meta property="og:description" content="Hello everyone! In this article I would like to describe 10 simple, but at the same time effective..." /> <meta property="og:site_name" content="DEV Community" /> <meta name="twitter:site" content="@thepracticaldev"> <meta name="twitter:creator" content="@aanthonymax"> <meta name="twitter:title" content="🔥10 JavaScript Tips and Tricks That Will Be Useful"> <meta name="twitter:description" content="Hello everyone! In this article I would like to describe 10 simple, but at the same time effective..."> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:widgets:new-embed-design" content="on"> <meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1"> <meta property="og:image" content="https://media2.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7thfpkrfiaic3kbez2j0.png" /> <meta name="twitter:image:src" content="https://media2.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7thfpkrfiaic3kbez2j0.png"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <link rel="icon" type="image/x-icon" href="https://media2.dev.to/dynamic/image/width=32,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <link rel="apple-touch-icon" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://media2.dev.to/dynamic/image/width=152,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="167x167" href="https://media2.dev.to/dynamic/image/width=167,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link href="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="192x192" /> <link href="https://media2.dev.to/dynamic/image/width=128,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="128x128" /> <meta name="apple-mobile-web-app-title" content="dev.to"> <meta name="application-name" content="dev.to"> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)"> <link rel="search" href="https://dev.to/open-search.xml" type="application/opensearchdescription+xml" title="DEV Community" /> <meta property="forem:name" content="DEV Community" /> <meta property="forem:logo" content="https://media2.dev.to/dynamic/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <meta property="forem:domain" content="dev.to" /> </head> <body class="sans-serif-article-body default-header" data-user-status="logged-out" data-community-name="DEV Community" data-subscription-icon="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" data-locale="en" data-honeybadger-key="hbp_nqu4Y66HuEKlD6YRGssZuRQnPOjDm50J8Zkr" data-deployed-at="2024-11-28T14:26:33Z" data-latest-commit-id="4b49fb8266fd9b978bc78cbd8ffc1340c5bd5a1c" data-ga-tracking="UA-71991109-1" data-cookie-banner-user-context="logged_out_only" data-cookie-banner-platform-context="off" data-algolia-id="PRSOBFP46H" data-algolia-search-key="9aa7d31610cba78851c9b1f63776a9dd" data-algolia-display="true" data-ga4-tracking-id="G-TYEM8Y3JN3"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6206ee9219dabd8e1168cebeb1f34c12ab133f7723e45d4b24dd76b43fee1fbc.css" media="all" id="secondary-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-4dd5770daa5d9d443ed73a724fb1913af9b093295bf1a72307f0fb322e5df1d9.css" media="all" id="secondary-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-f94476cf86ce9153627fd53a77e651ec54b82b6be20ddb1bf93e3dd40b81aeab.css" media="all" id="secondary-crayons-stylesheet" /> <div id="body-styles"> <style> :root { --accent-brand-lighter-rgb: 80, 99, 301; --accent-brand-rgb: 59, 73, 223; --accent-brand-darker-rgb: 47, 58, 178; } </style> </div> <div id="audiocontent" data-podcast=""> </div> <div class="navigation-progress" id="navigation-progress"></div> <header id="topbar" class="crayons-header topbar print-hidden"> <span id="route-change-target" tabindex="-1"></span> <a href="#main-content" class="skip-content-link">Skip to content</a> <div class="crayons-header__container"> <span class="inline-block m:hidden "> <button class="c-btn c-btn--icon-alone js-hamburger-trigger mx-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="apy0a1a944x36tvp686xr8b9iag91y9j" class="crayons-icon"><title id="apy0a1a944x36tvp686xr8b9iag91y9j">Navigation menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </button> </span> <a href="/" class="site-logo" aria-label="DEV Community Home"> <img class="site-logo__img" src="https://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" style="aspect-ratio: 10 / 8" alt="DEV Community"> </a> <div class="crayons-header--search js-search-form" id="header-search"> <form accept-charset="UTF-8" method="get" action="/search" role="search"> <div class="crayons-fields crayons-fields--horizontal"> <div class="crayons-field flex-1 relative"> <input id="search-input" class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="Find related posts..." autocomplete="off" /> <button type="submit" aria-label="Search" class="c-btn c-btn--icon-alone absolute inset-px right-auto mt-0 py-0"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a7gmc0k9kcbn3eg38ioxasuqrmppej67" aria-hidden="true" class="crayons-icon"><title id="a7gmc0k9kcbn3eg38ioxasuqrmppej67">Search</title> <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path> </svg> </button> <a class="crayons-header--search-brand-indicator" href="https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral" target="_blank" rel="noopener noreferrer"> Powered by <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" width="24" height="24" viewBox="0 0 500 500.34" role="img" aria-labelledby="a8cy39v6gj54ko155zv3qwwj2ez3nngj" aria-hidden="true" class="crayons-icon"><title id="a8cy39v6gj54ko155zv3qwwj2ez3nngj">Search</title> <defs></defs><path class="cls-1" d="M250,0C113.38,0,2,110.16,.03,246.32c-2,138.29,110.19,252.87,248.49,253.67,42.71,.25,83.85-10.2,120.38-30.05,3.56-1.93,4.11-6.83,1.08-9.52l-23.39-20.74c-4.75-4.22-11.52-5.41-17.37-2.92-25.5,10.85-53.21,16.39-81.76,16.04-111.75-1.37-202.04-94.35-200.26-206.1,1.76-110.33,92.06-199.55,202.8-199.55h202.83V407.68l-115.08-102.25c-3.72-3.31-9.43-2.66-12.43,1.31-18.47,24.46-48.56,39.67-81.98,37.36-46.36-3.2-83.92-40.52-87.4-86.86-4.15-55.28,39.65-101.58,94.07-101.58,49.21,0,89.74,37.88,93.97,86.01,.38,4.28,2.31,8.28,5.53,11.13l29.97,26.57c3.4,3.01,8.8,1.17,9.63-3.3,2.16-11.55,2.92-23.6,2.07-35.95-4.83-70.39-61.84-127.01-132.26-131.35-80.73-4.98-148.23,58.18-150.37,137.35-2.09,77.15,61.12,143.66,138.28,145.36,32.21,.71,62.07-9.42,86.2-26.97l150.36,133.29c6.45,5.71,16.62,1.14,16.62-7.48V9.49C500,4.25,495.75,0,490.51,0H250Z"></path> </svg> Algolia </a> </div> </div> </form> </div> <div class="flex items-center h-100 ml-auto"> <a class="c-link c-link--icon-alone c-link--block m:hidden mx-1" id="search-link" aria-label="Search" href="/search"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a95bww2eg95qbljix3b7qbw4nvbx8mqn" class="crayons-icon"><title id="a95bww2eg95qbljix3b7qbw4nvbx8mqn">Search</title> <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path> </svg> </a> <div class="flex" id="authentication-top-nav-actions"> <span class="hidden m:block"> <a href="/enter" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant> Log in </a> </span> <a href="/enter?state=new-user" data-tracking-id="ca_top_nav" data-tracking-source="top_navbar" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant> Create account </a> </div> </div> </div> </header> <div class="hamburger"> <div class="hamburger__content"> <header class="hamburger__content__header"> <h2 class="fs-l fw-bold flex-1 break-word lh-tight">DEV Community</h2> <button class="c-btn c-btn--icon-alone js-hamburger-trigger shrink-0" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aenab3lj424dor7psisgmbg7ipgaxbbr" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="aenab3lj424dor7psisgmbg7ipgaxbbr">Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </button> </header> <div class="p-2 js-navigation-links-container" id="authentication-hamburger-actions"> </div> </div> <div class="hamburger__overlay js-hamburger-trigger"></div> </div> <div id="active-broadcast" class="broadcast-wrapper"></div> <div id="page-content" class="wrapper stories stories-show articletag-webdev articletag-javascript articletag-programming articletag-opensource articleuser-2103048 articleorg-9852" data-current-page="stories-show"> <div id="page-content-inner" data-internal-nav="false"> <div id="page-route-change" class="screen-reader-only" aria-live="polite" aria-atomic="true"></div> <style> .html-variant-wrapper { display: none} </style> <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.10/webcomponents-loader.js" integrity="sha384-3HK5hxQbkFqOIxMbpROlRmRtYl2LBZ52t+tqcjzsmr9NJuOWQxl8RgQSyFvq2lhy" crossorigin="anonymous" defer></script> <script src="https://assets.dev.to/assets/webShare-0686f0b9ac40589694ef6ae6a6202c44119bc781c254f6cf6d52d8a008461156.js" defer="defer"></script> <script src="https://assets.dev.to/assets/articlePage-e91bed0487621b06608474cfabffa186165e1f43f05b24581203ccc21e7aa45d.js" defer="defer"></script> <script src="https://assets.dev.to/assets/commentDropdowns-7a28d130e5b78d38b30a9495a964003a66bd64fa455fc70b766d69cf06b9ba24.js" defer="defer"></script> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa"},"url":"https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa","image":["https://media2.dev.to/dynamic/image/width=1080,height=1080,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7thfpkrfiaic3kbez2j0.png","https://media2.dev.to/dynamic/image/width=1280,height=720,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7thfpkrfiaic3kbez2j0.png","https://media2.dev.to/dynamic/image/width=1600,height=900,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7thfpkrfiaic3kbez2j0.png"],"publisher":{"@context":"http://schema.org","@type":"Organization","name":"DEV Community","logo":{"@context":"http://schema.org","@type":"ImageObject","url":"https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png","width":"192","height":"192"}},"headline":"🔥10 JavaScript Tips and Tricks That Will Be Useful","author":{"@context":"http://schema.org","@type":"Person","url":"https://dev.to/anthonymax","name":"Anthony Max"},"datePublished":"2024-11-25T16:27:08Z","dateModified":"2024-11-25T16:29:54Z"} </script> <div class="crayons-layout crayons-layout--3-cols crayons-layout--article"> <aside class="crayons-layout__sidebar-left" aria-label="Article actions"> <div class="crayons-article-actions print-hidden"> <div class="crayons-article-actions__inner"> <div class="reaction-drawer__outer hoverdown" style=""> <button id="reaction-drawer-trigger" aria-label="reaction-drawer-trigger" aria-pressed="false" class="hoverdown-trigger crayons-reaction pseudo-reaction crayons-tooltip__activator relative"> <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction--like crayons-reaction__icon--inactive" style="width: 40px; height: 40px"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" aria-hidden="true" class="crayons-icon"> <g clip-path="url(#clip0_988_3276)"> <path d="M19 14V17H22V19H18.999L19 22H17L16.999 19H14V17H17V14H19ZM20.243 4.75698C22.505 7.02498 22.583 10.637 20.479 12.992L19.059 11.574C20.39 10.05 20.32 7.65998 18.827 6.16998C17.324 4.67098 14.907 4.60698 13.337 6.01698L12.002 7.21498L10.666 6.01798C9.09103 4.60598 6.67503 4.66798 5.17203 6.17198C3.68203 7.66198 3.60703 10.047 4.98003 11.623L13.412 20.069L12 21.485L3.52003 12.993C1.41603 10.637 1.49503 7.01898 3.75603 4.75698C6.02103 2.49298 9.64403 2.41698 12 4.52898C14.349 2.41998 17.979 2.48998 20.242 4.75698H20.243Z" fill="#525252"></path> </g> <defs> <clipPath id="clip0_988_3276"> <rect width="24" height="24" fill="white"></rect> </clipPath> </defs> </svg> </span> <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--active" style="width: 40px; height: 40px"> <img aria_hidden="true" height="24" width="24" src="https://assets.dev.to/assets/heart-plus-active-9ea3b22f2bc311281db911d416166c5f430636e76b15cd5df6b3b841d830eefa.svg" /> </span> <span class="crayons-reaction__count" id="reaction_total_count"> <span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span> </span> <span class="crayons-tooltip__content"> Add reaction </span> </button> <div class="reaction-drawer" aria-expanded="false"> <div class="reaction-drawer__container"> <button id="reaction-butt-like" name="Like" aria-label="Like" aria-pressed="false" class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2" data-category="like"> <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0"> <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" /> </span> <span class="crayons-reaction__count" id="reaction-number-like"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <button id="reaction-butt-unicorn" name="Unicorn" aria-label="Unicorn" aria-pressed="false" class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2" data-category="unicorn"> <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0"> <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" /> </span> <span class="crayons-reaction__count" id="reaction-number-unicorn"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Unicorn </span> </button> <button id="reaction-butt-exploding_head" name="Exploding Head" aria-label="Exploding Head" aria-pressed="false" class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2" data-category="exploding_head"> <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0"> <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" /> </span> <span class="crayons-reaction__count" id="reaction-number-exploding_head"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Exploding Head </span> </button> <button id="reaction-butt-raised_hands" name="Raised Hands" aria-label="Raised Hands" aria-pressed="false" class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2" data-category="raised_hands"> <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0"> <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" /> </span> <span class="crayons-reaction__count" id="reaction-number-raised_hands"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Raised Hands </span> </button> <button id="reaction-butt-fire" name="Fire" aria-label="Fire" aria-pressed="false" class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2" data-category="fire"> <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0"> <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" /> </span> <span class="crayons-reaction__count" id="reaction-number-fire"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Fire </span> </button> </div> </div> </div> <button id="reaction-butt-comment" aria-label="Jump to Comments" aria-pressed="false" class="crayons-reaction crayons-reaction--comment crayons-tooltip__activator relative" data-category="comment"> <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--inactive"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" class="crayons-icon"> <path d="M10 3h4a8 8 0 010 16v3.5c-5-2-12-5-12-11.5a8 8 0 018-8zm2 14h2a6 6 0 000-12h-4a6 6 0 00-6 6c0 3.61 2.462 5.966 8 8.48V17z"></path> </svg> </span> <span class="crayons-reaction__count" id="reaction-number-comment" data-count="2"> <span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span> </span> <span data-testid="tooltip" class="crayons-tooltip__content"> Jump to Comments </span> </button> <button id="reaction-butt-readinglist" aria-label="Add to reading list" aria-pressed="false" class="crayons-reaction crayons-reaction--readinglist crayons-tooltip__activator relative" data-category="readinglist"> <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--inactive"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" class="crayons-icon"> <path d="M5 2h14a1 1 0 011 1v19.143a.5.5 0 01-.766.424L12 18.03l-7.234 4.536A.5.5 0 014 22.143V3a1 1 0 011-1zm13 2H6v15.432l6-3.761 6 3.761V4z"></path> </svg> </span> <span class="crayons-reaction__count" id="reaction-number-readinglist"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Save </span> </button> <button id="reaction-butt-boost" aria-label="Boost" aria-pressed="false" class="crayons-reaction crayons-reaction--boost crayons-tooltip__activator relative"> <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--inactive"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" role="img" aria-hidden="true" class="crayons-icon" width="24" height="24"> <path transform="translate(24,0) scale(-1,1)" d="M6 4H21C21.5523 4 22 4.44772 22 5V12H20V6H6V9L1 5L6 1V4ZM18 20H3C2.44772 20 2 19.5523 2 19V12H4V18H18V15L23 19L18 23V20Z"></path> </svg> </span> <span data-testid="tooltip" class="crayons-tooltip__content"> Boost </span> </button> <div id="mod-actions-menu-btn-area" class="print-hidden trusted-visible-block align-center"> </div> <div class="align-center m:relative"> <button id="article-show-more-button" aria-controls="article-show-more-dropdown" aria-expanded="false" aria-haspopup="true" class="dropbtn crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded" aria-label="Share post options"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="arz55vzphu7htf3lvdvextl7155ccgk0" aria-hidden="true" class="crayons-icon dropdown-icon"><title id="arz55vzphu7htf3lvdvextl7155ccgk0">More...</title><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12a2 2 0 11-4 0 2 2 0 014 0zm7 0a2 2 0 11-4 0 2 2 0 014 0zm5 2a2 2 0 100-4 2 2 0 000 4z"></path></svg> </button> <div id="article-show-more-dropdown" class="crayons-dropdown side-bar left-2 right-2 m:right-auto m:left-100 s:left-auto mb-1 m:mb-0 top-unset bottom-100 m:top-0 m:bottom-unset"> <div> <button id="copy-post-url-button" class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0" data-postUrl="https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa"> <span class="fw-bold">Copy link</span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="article-copy-icon" role="img" aria-labelledby="a7sals3e0k9ltovmqwjw1zhj6tmpzf2f" aria-hidden="true" class="crayons-icon mx-2 shrink-0"><title id="a7sals3e0k9ltovmqwjw1zhj6tmpzf2f">Copy link</title> <path d="M7 6V3a1 1 0 011-1h12a1 1 0 011 1v14a1 1 0 01-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 013 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z"></path> </svg> </button> <div id="article-copy-link-announcer" aria-live="polite" class="crayons-notice crayons-notice--success my-2 p-1" aria-live="polite" hidden>Copied to Clipboard</div> </div> <div class="Desktop-only"> <a target="_blank" class="crayons-link crayons-link--block" rel="noopener" href='https://twitter.com/intent/tweet?text=%22%F0%9F%94%A510%20JavaScript%20Tips%20and%20Tricks%20That%20Will%20Be%20Useful%22%20by%20%40aanthonymax%20%23DEVCommunity%20https%3A%2F%2Fdev.to%2Fhmpljs%2F10-javascript-tips-and-tricks-that-will-be-useful-47fa'> Share to X </a> <a target="_blank" class="crayons-link crayons-link--block" rel="noopener" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fdev.to%2Fhmpljs%2F10-javascript-tips-and-tricks-that-will-be-useful-47fa&title=%F0%9F%94%A510%20JavaScript%20Tips%20and%20Tricks%20That%20Will%20Be%20Useful&summary=Hello%20everyone%21%20In%20this%20article%20I%20would%20like%20to%20describe%2010%20simple%2C%20but%20at%20the%20same%20time%20effective...&source=DEV%20Community"> Share to LinkedIn </a> <a target="_blank" class="crayons-link crayons-link--block" rel="noopener" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdev.to%2Fhmpljs%2F10-javascript-tips-and-tricks-that-will-be-useful-47fa"> Share to Facebook </a> <a target="_blank" class="crayons-link crayons-link--block" rel="noopener" href="https://toot.kytta.dev/?text=https%3A%2F%2Fdev.to%2Fhmpljs%2F10-javascript-tips-and-tricks-that-will-be-useful-47fa"> Share to Mastodon </a> </div> <web-share-wrapper shareurl="https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa" sharetitle="🔥10 JavaScript Tips and Tricks That Will Be Useful" sharetext="Hello everyone! In this article I would like to describe 10 simple, but at the same time effective..." template="web-share-button"> </web-share-wrapper> <template id="web-share-button"> <a href="#" class="dropdown-link-row crayons-link crayons-link--block">Share Post via...</a> </template> <a href="/report-abuse" class="crayons-link crayons-link--block">Report Abuse</a> </div> </div> </div> </div> </aside> <main id="main-content" class="crayons-layout__content grid gap-4"> <div class="article-wrapper"> <article class="crayons-card crayons-article mb-4" id="article-show-container" data-article-id="2120477" data-article-slug="10-javascript-tips-and-tricks-that-will-be-useful-47fa" data-author-id="2103048" data-author-name="Anthony Max" data-author-username="hmpljs" data-co-author-ids="" data-path="/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa" data-pin-path="/stories/feed/pinned_article" data-pinned-article-id="" data-published="true" data-scheduled="false" lang=en > <header class="crayons-article__header" id="main-title"> <a class="crayons-article__cover" href="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7thfpkrfiaic3kbez2j0.png"> <img src="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7thfpkrfiaic3kbez2j0.png" style="aspect-ratio: auto 1000 / 420;" width="1000" height="420" class="crayons-article__cover__image" alt="Cover image for 🔥10 JavaScript Tips and Tricks That Will Be Useful"> </a> <div class="crayons-article__header__meta"> <div class="flex s:items-start flex-col s:flex-row"> <div id="action-space" class="crayons-article__actions mb-4 s:mb-0 s:order-last"></div> <div class="flex flex-1 mb-5 items-start"> <div class="relative"> <a href="/hmpljs"><img src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F9852%2Fc11ce6b7-4a78-483f-a93d-95f7684c4924.png" class="radius-default align-middle" width="40" height="40" alt="HMPL.js profile image"></a> <a href="/anthonymax" class="absolute -right-2 -bottom-2 radius-full border border-solid border-2 border-base-inverted inline-flex"> <img class="radius-full align-middle" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2103048%2Fce133397-96b5-4c53-9831-eadabf494660.png" width="24" height="24" alt="Anthony Max" /> </a> </div> <div class="pl-3 flex-1"> <a href="/anthonymax" class="crayons-link fw-bold">Anthony Max</a> <a style="display: inline;" href="/++"><img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /></a> <span class="color-base-60"> for </span><a href="/hmpljs" class="crayons-link">HMPL.js</a> <p class="fs-xs color-base-60"> Posted on <time datetime="2024-11-25T16:27:08Z" class="date-no-year">Nov 25</time> </p> </div> </div> </div> <div class="multiple_reactions_engagement"> <span class="reaction_engagement_like hidden"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24" /> <span id="reaction_engagement_like_count"> </span> </span> <span class="reaction_engagement_unicorn hidden"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24" /> <span id="reaction_engagement_unicorn_count"> </span> </span> <span class="reaction_engagement_exploding_head hidden"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24" /> <span id="reaction_engagement_exploding_head_count"> </span> </span> <span class="reaction_engagement_raised_hands hidden"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="24" height="24" /> <span id="reaction_engagement_raised_hands_count"> </span> </span> <span class="reaction_engagement_fire hidden"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="24" height="24" /> <span id="reaction_engagement_fire_count"> </span> </span> </div> <h1 class=" fs-3xl m:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-2 medium"> 🔥10 JavaScript Tips and Tricks That Will Be Useful </h1> <div class="spec__tags flex flex-wrap"> <a class="crayons-tag " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag " style=" --tag-bg: rgba(38, 190, 0, 0.10); --tag-prefix: #26BE00; --tag-bg-hover: rgba(38, 190, 0, 0.10); --tag-prefix-hover: #26BE00; " href="/t/opensource"><span class="crayons-tag__prefix">#</span>opensource</a> </div> </div> </header> <div class="crayons-article__main "> <div class="crayons-article__body text-styles spec__body" data-article-id="2120477" id="article-body"> <p>Hello everyone! In this article I would like to describe 10 simple, but at the same time effective tips and tricks that will help you achieve more understandable and effective JavaScript code. Perhaps you know some of them, and perhaps you know all of them. It would be great if you write more about any of them in the comments.</p> <h2> <a name="1-destructuring-for-cleaner-code" href="#1-destructuring-for-cleaner-code"> </a> 1. Destructuring for Cleaner Code </h2> <p>Destructuring is a syntax that allows you to unpack values from arrays or properties from objects into variables. This reduces repetitive code and improves readability.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Before destructuring</span> <span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Alice</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">25</span> <span class="p">};</span> <span class="kd">const</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">age</span> <span class="o">=</span> <span class="nx">user</span><span class="p">.</span><span class="nx">age</span><span class="p">;</span> <span class="c1">// Using destructuring</span> <span class="kd">const</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">age</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">user</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="p">);</span> <span class="c1">// Output: Alice 25</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Without destructuring, you must explicitly reference each property, leading to verbose and repetitive code. With destructuring, you extract <code>name</code> and <code>age</code> directly from the <code>user</code> object in a single statement. This is especially useful when dealing with large objects or arrays, as it simplifies the assignment process.</p> <h2> <a name="2-optional-chaining-for-safer-access" href="#2-optional-chaining-for-safer-access"> </a> 2. Optional Chaining for Safer Access </h2> <p>Optional chaining <code>?.</code> allows you to access deeply nested properties without worrying about errors if a property doesn’t exist. Instead of throwing an error, it returns <code>undefined</code>.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="na">profile</span><span class="p">:</span> <span class="p">{</span> <span class="na">email</span><span class="p">:</span> <span class="dl">"</span><span class="s2">user@example.com</span><span class="dl">"</span> <span class="p">}</span> <span class="p">};</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">user</span><span class="p">?.</span><span class="nx">profile</span><span class="p">?.</span><span class="nx">email</span><span class="p">);</span> <span class="c1">// Output: user@example.com</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">user</span><span class="p">?.</span><span class="nx">settings</span><span class="p">?.</span><span class="nx">theme</span><span class="p">);</span> <span class="c1">// Output: undefined (no error)</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Traditional property access would require checks like <code>if (user && user.profile)</code>. Optional chaining removes this hassle, ensuring your code doesn’t break if an intermediate property (<code>settings</code> in this case) is <code>undefined</code> or <code>null</code>. This makes it easier to work with unpredictable or incomplete data, especially from APIs.</p> <h2> <a name="3-default-parameters" href="#3-default-parameters"> </a> 3. Default Parameters </h2> <p>Default parameters allow you to set default values for function arguments. This ensures that your function behaves predictably when called without certain parameters.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">function</span> <span class="nf">greet</span><span class="p">(</span><span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Guest</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="s2">`Hello, </span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">!`</span><span class="p">;</span> <span class="p">}</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nf">greet</span><span class="p">());</span> <span class="c1">// Output: Hello, Guest!</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nf">greet</span><span class="p">(</span><span class="dl">"</span><span class="s2">Alice</span><span class="dl">"</span><span class="p">));</span> <span class="c1">// Output: Hello, Alice!</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>In this example, the <code>greet</code> function uses a default value of <code>"Guest"</code> for the <code>name</code> parameter. If no argument is passed, it falls back to the default. This is particularly useful for handling optional inputs, reducing the need for manual checks or fallback logic inside the function.</p> <h2> <a name="4-array-methods-map-filter-and-reduce" href="#4-array-methods-map-filter-and-reduce"> </a> 4. Array Methods: Map, Filter, and Reduce </h2> <p>These methods provide powerful, declarative ways to manipulate arrays without needing traditional loops.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">numbers</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="mi">4</span><span class="p">];</span> <span class="c1">// Transform each element with map</span> <span class="kd">const</span> <span class="nx">doubled</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nf">map</span><span class="p">(</span><span class="nx">num</span> <span class="o">=></span> <span class="nx">num</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// [2, 4, 6, 8]</span> <span class="c1">// Filter elements based on a condition</span> <span class="kd">const</span> <span class="nx">evens</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nf">filter</span><span class="p">(</span><span class="nx">num</span> <span class="o">=></span> <span class="nx">num</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// [2, 4]</span> <span class="c1">// Aggregate values with reduce</span> <span class="kd">const</span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nf">reduce</span><span class="p">((</span><span class="nx">acc</span><span class="p">,</span> <span class="nx">num</span><span class="p">)</span> <span class="o">=></span> <span class="nx">acc</span> <span class="o">+</span> <span class="nx">num</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// 10</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <ol> <li> <code>map()</code> processes each element and returns a new array, great for transformations. </li> <li> <code>filter()</code> creates a subset of the array based on a condition, useful for eliminating unwanted elements. </li> <li> <code>reduce()</code> combines all elements into a single value, making it ideal for tasks like summation or building objects.</li> </ol> <p>These methods allow for cleaner, more expressive code compared to manually iterating over arrays.</p> <h2> <a name="5-template-literals" href="#5-template-literals"> </a> 5. Template Literals </h2> <p>Template literals use backticks and enable multi-line strings and inline variable interpolation, making string manipulation more convenient.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Alice</span><span class="dl">"</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">greeting</span> <span class="o">=</span> <span class="s2">`Hello, </span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">! Welcome to JavaScript tips!`</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">greeting</span><span class="p">);</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Traditional string concatenation <code>"Hello, " + name + "!</code> is cumbersome and error-prone. Template literals make it easier to embed variables (<br> <code>${name}</code> directly into strings and format multi-line text without escape characters <code>\n</code>. This improves readability, especially for dynamic or complex strings.</p> <h2> <a name="6-the-spread-operator" href="#6-the-spread-operator"> </a> 6. The Spread Operator </h2> <p>The spread operator <code>...</code> is a versatile tool to copy, combine, or expand arrays and objects.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">arr1</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="kd">const</span> <span class="nx">arr2</span> <span class="o">=</span> <span class="p">[</span><span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">];</span> <span class="kd">const</span> <span class="nx">combined</span> <span class="o">=</span> <span class="p">[...</span><span class="nx">arr1</span><span class="p">,</span> <span class="p">...</span><span class="nx">arr2</span><span class="p">];</span> <span class="c1">// [1, 2, 3, 4]</span> <span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Alice</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">25</span> <span class="p">};</span> <span class="kd">const</span> <span class="nx">updatedUser</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span><span class="nx">user</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">26</span> <span class="p">};</span> <span class="c1">// { name: "Alice", age: 26 }</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <ol> <li>For arrays, the spread operator merges <code>arr1</code> and <code>arr2</code> into a new array. </li> <li>For objects, it creates a shallow copy of <code>user</code> while overriding the <code>age</code> property. </li> </ol> <p>This avoids mutation (direct modification) of original data structures, which is a best practice for maintaining clean, predictable code.</p> <h2> <a name="7-shortcircuit-evaluation" href="#7-shortcircuit-evaluation"> </a> 7. Short-Circuit Evaluation </h2> <p>Logical operators <code>&&</code> and <code>||</code> can simplify conditional expressions by leveraging their short-circuit behavior.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">isLoggedIn</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">welcomeMessage</span> <span class="o">=</span> <span class="nx">isLoggedIn</span> <span class="o">&&</span> <span class="dl">"</span><span class="s2">Welcome back!</span><span class="dl">"</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">welcomeMessage</span><span class="p">);</span> <span class="c1">// Output: Welcome back!</span> <span class="kd">const</span> <span class="nx">username</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">displayName</span> <span class="o">=</span> <span class="nx">username</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">Guest</span><span class="dl">"</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">displayName</span><span class="p">);</span> <span class="c1">// Output: Guest</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <ul> <li> <code>&&</code> returns the second value if the first is <code>true</code>. If <code>isLoggedIn</code> is <code>true</code>, it evaluates and returns <code>"Welcome back!"</code>. </li> <li> <code>||</code> returns the first truthy value. If <code>username</code> is <code>null</code>, it falls back to <code>"Guest"</code>. </li> </ul> <p>These shortcuts eliminate the need for <code>if</code> statements in simple conditional assignments.</p> <h2> <a name="8-debounce-and-throttle" href="#8-debounce-and-throttle"> </a> 8. Debounce and Throttle </h2> <p>Debounce and throttle control how often a function executes during rapid events like typing or scrolling.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">function</span> <span class="nf">debounce</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">delay</span><span class="p">)</span> <span class="p">{</span> <span class="kd">let</span> <span class="nx">timer</span><span class="p">;</span> <span class="k">return</span> <span class="nf">function </span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span> <span class="nf">clearTimeout</span><span class="p">(</span><span class="nx">timer</span><span class="p">);</span> <span class="nx">timer</span> <span class="o">=</span> <span class="nf">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="nf">func</span><span class="p">(...</span><span class="nx">args</span><span class="p">),</span> <span class="nx">delay</span><span class="p">);</span> <span class="p">};</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">throttle</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">interval</span><span class="p">)</span> <span class="p">{</span> <span class="kd">let</span> <span class="nx">lastTime</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="k">return</span> <span class="nf">function </span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">now</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nf">now</span><span class="p">();</span> <span class="k">if </span><span class="p">(</span><span class="nx">now</span> <span class="o">-</span> <span class="nx">lastTime</span> <span class="o">>=</span> <span class="nx">interval</span><span class="p">)</span> <span class="p">{</span> <span class="nx">lastTime</span> <span class="o">=</span> <span class="nx">now</span><span class="p">;</span> <span class="nf">func</span><span class="p">(...</span><span class="nx">args</span><span class="p">);</span> <span class="p">}</span> <span class="p">};</span> <span class="p">}</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <ul> <li> <strong>Debounce</strong> ensures the function runs only after the user stops triggering it for a specific delay. Useful for search inputs. </li> <li> <strong>Throttle</strong> limits execution to once per interval, regardless of how many times the event is fired. Ideal for scroll listeners.</li> </ul> <p>These techniques optimize performance and prevent excessive function calls. </p> <p>Let's say <strong>debounce</strong> is well suited for those cases when working with <code>input</code>, because each time a character is entered, a request will be sent to the server, while <strong>throttle</strong> is suitable for working with scrolling, or with moving the cursor across the screen.</p> <h2> <a name="9-promiseall-for-concurrent-operations" href="#9-promiseall-for-concurrent-operations"> </a> 9. Promise.all for Concurrent Operations </h2> <p><code>Promise.all</code> allows you to run multiple promises concurrently and wait for all of them to resolve.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">fetchData1</span> <span class="o">=</span> <span class="nf">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">/api/data1</span><span class="dl">"</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">fetchData2</span> <span class="o">=</span> <span class="nf">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">/api/data2</span><span class="dl">"</span><span class="p">);</span> <span class="nb">Promise</span><span class="p">.</span><span class="nf">all</span><span class="p">([</span><span class="nx">fetchData1</span><span class="p">,</span> <span class="nx">fetchData2</span><span class="p">])</span> <span class="p">.</span><span class="nf">then</span><span class="p">(</span><span class="nx">responses</span> <span class="o">=></span> <span class="nb">Promise</span><span class="p">.</span><span class="nf">all</span><span class="p">(</span><span class="nx">responses</span><span class="p">.</span><span class="nf">map</span><span class="p">(</span><span class="nx">res</span> <span class="o">=></span> <span class="nx">res</span><span class="p">.</span><span class="nf">json</span><span class="p">())))</span> <span class="p">.</span><span class="nf">then</span><span class="p">(</span><span class="nx">data</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">data</span><span class="p">))</span> <span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="nx">console</span><span class="p">.</span><span class="nf">error</span><span class="p">(</span><span class="nx">error</span><span class="p">));</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>By combining promises, <code>Promise.all</code> ensures that all asynchronous tasks complete before proceeding. In this example, both API calls run in parallel, and the results are processed together, saving time compared to sequential requests.</p> <h2> <a name="10-arrow-functions-and-lexical-raw-this-endraw-" href="#10-arrow-functions-and-lexical-raw-this-endraw-"> </a> 10. Arrow Functions and Lexical <code>this</code> </h2> <p>Arrow functions do not bind their own <code>this</code>; they inherit it from the surrounding scope.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">function</span> <span class="nf">Timer</span><span class="p">()</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">seconds</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nf">setInterval</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">seconds</span><span class="o">++</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">seconds</span><span class="p">);</span> <span class="p">},</span> <span class="mi">1000</span><span class="p">);</span> <span class="p">}</span> <span class="kd">const</span> <span class="nx">timer</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Timer</span><span class="p">();</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>In the <code>Timer</code> example, using an arrow function inside <code>setInterval</code> ensures that <code>this</code> refers to the <code>Timer</code> instance. Regular functions would bind <code>this</code> dynamically to the global scope or the calling context, leading to errors. Arrow functions simplify handling of <code>this</code>, making them ideal for callbacks.</p> </div> <div class="js-billboard-container body-billboard-container" data-async-url="/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa/billboards/post_body_bottom"></div> </div> <section id="comments" data-follow-button-container="true" data-updated-at="2024-12-01 21:12:33 UTC" class="text-padding mb-4 border-t-1 border-0 border-solid border-base-10"> <header class="relative flex justify-between items-center mb-6"> <div class="flex items-center"> <h2 class="crayons-subtitle-1"> Top comments <span class="js-comments-count" data-comments-count="2">(2)</span> </h2> </div> <div id="comment-subscription" class="print-hidden"> <div class="crayons-btn-group"> <span class="crayons-btn crayons-btn--outlined">Subscribe</span> </div> </div> </header> <div id="billboard_delay_trigger"></div> <div id="comments-container" data-testid="comments-container" data-commentable-id="2120477" data-commentable-type="Article" data-has-recent-comment-activity="true"> <div id="response-templates-data" class="hidden"></div> <form class="comment-form print-hidden" id="new_comment" action="/comments" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off" /> <input type="hidden" name="authenticity_token" value="NOTHING" id="new_comment_authenticity_token"> <input value="2120477" autocomplete="off" type="hidden" name="comment[commentable_id]" id="comment_commentable_id" /> <input value="Article" autocomplete="off" type="hidden" name="comment[commentable_type]" id="comment_commentable_type" /> <span class="crayons-avatar m:crayons-avatar--l mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=256,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" width="32" height="32" alt="pic" class="crayons-avatar__image overflow-hidden" id="comment-primary-user-profile--avatar" loading="lazy" /> </span> <div class="comment-form__inner"> <div class="comment-form__field" data-tracking-name="comment_form_textfield"> <textarea placeholder="Add to the discussion" onfocus="handleFocus(event)" onkeyup="handleKeyUp(event)" onkeydown="handleKeyDown(event)" oninput="handleChange(event)" id="text-area" required="required" class="crayons-textfield comment-textarea crayons-textfield--ghost" aria-label="Add a comment to the discussion" name="comment[body_markdown]"> </textarea> </div> <div class="response-templates-container crayons-card crayons-card--secondary p-4 mb-4 comment-form__templates fs-base hidden"> <header class="mb-3"> <button type="button" class="crayons-btn personal-template-button active" data-target-type="personal" data-form-id="new_comment">Personal</button> <button type="button" class="crayons-btn moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment">Trusted User</button> </header> <div class="personal-responses-container"> </div> <div class="moderator-responses-container hidden"> </div> <a target="_blank" rel="noopener nofollow" href="/settings/response-templates"> Create template </a> <p>Templates let you quickly answer FAQs or store snippets for re-use.</p> </div> <div class="comment-form__preview text-styles text-styles--secondary" id="preview-div"></div> <div class="comment-form__buttons mb-4"> <button type="submit" class="crayons-btn mr-2 js-btn-enable" onclick="validateField(event)" data-tracking-name="comment_submit_button" disabled>Submit</button> <button type="button" class="preview-toggle crayons-btn crayons-btn--secondary comment-action-preview js-btn-enable mr-2" data-tracking-name="comment_preview_button" disabled>Preview</button> <a href="/404.html" class="dismiss-edit-comment crayons-btn crayons-btn--ghost js-btn-dismiss hidden">Dismiss</a> </div> </div> <div class="code-of-conduct" id="toggle-code-of-conduct-checkbox"></div> </form> <div class="comments" id="comment-trees-container"> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0 root " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="m:mx-1 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="amiv1o98tg45p42kd7hc2vd5bu0edkna" class="crayons-icon expanded"><title id="amiv1o98tg45p42kd7hc2vd5bu0edkna">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a3jzhglpo6sjlzxx8sut3mzag2m62fpi" class="crayons-icon collapsed"><title id="a3jzhglpo6sjlzxx8sut3mzag2m62fpi">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-1264442" class=" comment single-comment-node root comment--deep-0 " data-comment-id="1264442" data-path="/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa/comments/2joca" data-comment-author-id="2103048" data-content-user-id="2103048"> <a name="comment-2joca" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/anthonymax" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2103048%2Fce133397-96b5-4c53-9831-eadabf494660.png" alt="anthonymax profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/anthonymax" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Anthony Max</span> <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-1264442" aria-controls="comment-profile-preview-content-1264442" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Anthony Max profile details"> Anthony Max <a style="display: inline;" href="/++"><img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /></a> </button> <div id="comment-profile-preview-content-1264442" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #e0e0e0; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/anthonymax" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2103048%2Fce133397-96b5-4c53-9831-eadabf494660.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Anthony Max <img class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /> </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":2103048,"name":"Anthony Max"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Anthony Max" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> 🐜 Fetch API enjoyer. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Education </div> <div class="value"> Unfinished bachelor's degree </div> </li> <li> <div class="key"> Pronouns </div> <div class="value"> Anthony or Tony </div> </li> <li> <div class="key"> Work </div> <div class="value"> HMPL.js </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2024-09-20T16:16:23Z" class="date">Sep 20, 2024</time> </div> </li> </ul> </div> </div> </div> <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa#comment-2joca" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2024-11-25T16:28:55Z" class=date-no-year> Nov 25 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-1264442" aria-controls="comment-dropdown-1264442" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ap8xt30zyogl4l7ke7ev6ylpc5bzc50o" class="crayons-icon pointer-events-none"><title id="ap8xt30zyogl4l7ke7ev6ylpc5bzc50o">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-1264442" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa#comment-2joca" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Anthony Max's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="2103048" data-action="settings-button" data-path="https://dev.to/anthonymax/comment/2joca/settings" aria-label="Go to Anthony Max's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="2103048" data-user-id="2103048"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="1264442" data-comment-url="https://dev.to/anthonymax/comment/2joca" aria-label="Hide Anthony Max's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/anthonymax/comment/2joca/mod" aria-label="Moderate Anthony Max's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/anthonymax/comment/2joca" aria-label="Report Anthony Max's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <p>You can add more and more complex ones, but I think that these are some of the main ones.</p> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-1264442" data-comment-id="1264442" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a97odtmkv0092tgzeccm7kdo7obci7i2" class="crayons-icon reaction-icon not-reacted"><title id="a97odtmkv0092tgzeccm7kdo7obci7i2">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="am4l2jcsqa7j5vniqckdl54pr82yghx1" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="am4l2jcsqa7j5vniqckdl54pr82yghx1">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block"> like</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa/comments/new/2joca" data-comment-id="1264442" data-path="/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa/comments/2joca" data-tracking-name="comment_reply_button" data-testid="reply-button-1264442" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a5cp0fhhmyjyybzwefd9jcey5qfopblf" class="crayons-icon reaction-icon not-reacted"><title id="a5cp0fhhmyjyybzwefd9jcey5qfopblf">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden m:inline-block">Reply</span> </a> </footer> </div> </div> </div> </details> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0 root " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="m:mx-1 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a74e4kvcl2lnd3mlev4sfdo1c7xaonxz" class="crayons-icon expanded"><title id="a74e4kvcl2lnd3mlev4sfdo1c7xaonxz">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a7m62j5xoidweioi75ztqzmrlkasxgw0" class="crayons-icon collapsed"><title id="a7m62j5xoidweioi75ztqzmrlkasxgw0">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-1264957" class=" comment single-comment-node root comment--deep-0 " data-comment-id="1264957" data-path="/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa/comments/2jp65" data-comment-author-id="1205271" data-content-user-id="1205271"> <a name="comment-2jp65" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/tomasdevs" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1205271%2F1128ffb4-9a98-4942-98da-e0e64fee0b97.png" alt="tomasdevs profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/tomasdevs" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Tomas Stveracek</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-1264957" aria-controls="comment-profile-preview-content-1264957" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Tomas Stveracek profile details"> Tomas Stveracek </button> <div id="comment-profile-preview-content-1264957" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #000000; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/tomasdevs" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1205271%2F1128ffb4-9a98-4942-98da-e0e64fee0b97.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Tomas Stveracek </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":1205271,"name":"Tomas Stveracek"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Tomas Stveracek" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> Frontend developer </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2023-11-08T17:32:39Z" class="date">Nov 8, 2023</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa#comment-2jp65" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2024-11-26T20:57:47Z" class=date-no-year> Nov 26 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-1264957" aria-controls="comment-dropdown-1264957" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a6nwx4l2nfls8r063az7x4dc5gqw0dtx" class="crayons-icon pointer-events-none"><title id="a6nwx4l2nfls8r063az7x4dc5gqw0dtx">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-1264957" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa#comment-2jp65" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Tomas Stveracek's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="1205271" data-action="settings-button" data-path="https://dev.to/tomasdevs/comment/2jp65/settings" aria-label="Go to Tomas Stveracek's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="2103048" data-user-id="1205271"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="1264957" data-comment-url="https://dev.to/tomasdevs/comment/2jp65" aria-label="Hide Tomas Stveracek's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/tomasdevs/comment/2jp65/mod" aria-label="Moderate Tomas Stveracek's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/tomasdevs/comment/2jp65" aria-label="Report Tomas Stveracek's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <p>Cool article! 🙌 JavaScript is powerful, but sometimes it can be weird. For those interested, I wrote an article about the weirdness of Javascript. <a href="https://dev.to/tomasdevs/javascript-quirks-what-you-need-to-know-363f" rel="nofollow">Link here</a> </p> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-1264957" data-comment-id="1264957" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="actnpizk9dt2el49wjfx6kd406jat8q3" class="crayons-icon reaction-icon not-reacted"><title id="actnpizk9dt2el49wjfx6kd406jat8q3">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ac5e4vsoy30bpxnhs2mkafu8w3cea8vb" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ac5e4vsoy30bpxnhs2mkafu8w3cea8vb">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block"> like</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa/comments/new/2jp65" data-comment-id="1264957" data-path="/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa/comments/2jp65" data-tracking-name="comment_reply_button" data-testid="reply-button-1264957" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a6iurvyjcfqxujmkyqcjdu3ls75lzqbs" class="crayons-icon reaction-icon not-reacted"><title id="a6iurvyjcfqxujmkyqcjdu3ls75lzqbs">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden m:inline-block">Reply</span> </a> </footer> </div> </div> </div> </details> </div> </div> <div class="align-center"> <nav class="fs-s align-center block" aria-label="Conduct controls"> <a href="/code-of-conduct" class="crayons-link crayons-link--secondary">Code of Conduct</a> <span class="opacity-25 px-2" role="presentation">•</span> <a href="/report-abuse" class="crayons-link crayons-link--secondary">Report abuse</a> </nav> </div> </section> <div id="hide-comments-modal" class="hidden"> <form id="hide-comments-modal__form" class="hide-comments-modal__form" data-type="json" action="/comments/hide" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off" /><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="0eHwZFBAQ8H4ymyKahfE9lONxClLN_Lt29ftdjzMB5_OtEo1Vbgljr8TBekXtmkSGQhfgZu1u_q42ay0xFySew" autocomplete="off" /> <div class="hide-comments-modal__content"> <p class="pb-2"> Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's <a id="hide-comments-modal__comment-permalink" href="#">permalink</a>. </p> <label class="crayons-field crayons-field--checkbox my-2"> <input name="hide_children" type="hidden" value="0" autocomplete="off" /><input class="hide_children crayons-checkbox" type="checkbox" value="1" name="hide_children" id="hide_children" /> <p class="crayons-field__label">Hide child comments as well</p> </label> <p class="pb-4 pt-2"> <button type="submit" class="crayons-btn"> Confirm </button> </p> </div> </form> <p class="fs-s color-base-60">For further actions, you may consider blocking this person and/or <a id="hide-comments-modal__report-link" href="/report-abuse">reporting abuse</a></p> </div> </article> <div class="pb-4 crayons-layout__comments-billboard"> <div class="js-billboard-container pb-4 crayons-layout__comments-billboard" data-async-url="/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa/billboards/post_comments"></div> </div> <section class="crayons-card crayons-card--secondary text-padding mb-4 print-hidden" id="bottom-content-read-next"> <h2 class="crayons-subtitle-1">Read next</h2> <a href="/okoye_ndidiamaka_5e3b7d30/progressive-web-apps-pwas-transforming-websites-into-app-like-experiences-2g31" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqpq54g5hxu4fs53p1x9r.jpg" class="crayons-link mt-6 block"> <div class="flex items-center"> <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"> <img loading="lazy" alt="okoye_ndidiamaka_5e3b7d30 profile image" class="crayons-avatar__image" width="100" height="100" src="https://media2.dev.to/dynamic/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1949739%2F826d2db7-ad63-4ac3-b08e-4328ad67af3c.jpg" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">Progressive Web Apps (PWAs): Transforming Websites into App-Like Experiences</h3> <p class="opacity-75 pt-1"> Okoye Ndidiamaka - <time datetime="2024-11-27T11:10:42Z">Nov 27</time> </p> </div> </div> </a> <a href="/medcl/introducing-coco-ai-in-two-minutes-2ejp" data-preload-image="" class="crayons-link mt-6 block"> <div class="flex items-center"> <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"> <img loading="lazy" alt="medcl profile image" class="crayons-avatar__image" width="100" height="100" src="https://media2.dev.to/dynamic/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1130420%2F28ac58f8-801c-4fa5-adfc-4b057c9b399a.jpeg" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">Introducing Coco AI in two minutes - an open-source alternative to Glean</h3> <p class="opacity-75 pt-1"> Medcl - <time datetime="2024-11-26T16:21:21Z">Nov 26</time> </p> </div> </div> </a> <a href="/birdmorning/the-mobile-app-development-process-how-to-create-successful-applications-in-2024-49ka" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiolfwvzcs05h2ppg6ayz.jpg" class="crayons-link mt-6 block"> <div class="flex items-center"> <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"> <img loading="lazy" alt="birdmorning profile image" class="crayons-avatar__image" width="100" height="100" src="https://media2.dev.to/dynamic/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1182930%2Fb9380cde-5232-43e9-ae23-ef9c6f5ccd46.png" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">The Mobile App Development Process: How to Create Successful Applications in 2024</h3> <p class="opacity-75 pt-1"> Birdmorning Solutions Pvt. Ltd - <time datetime="2024-11-21T07:00:17Z">Nov 21</time> </p> </div> </div> </a> <a href="/birdmorning/android-apps-vs-ios-apps-which-are-better-5d35" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fevuazo5fpwaf8twzcemf.jpg" class="crayons-link mt-6 block"> <div class="flex items-center"> <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"> <img loading="lazy" alt="birdmorning profile image" class="crayons-avatar__image" width="100" height="100" src="https://media2.dev.to/dynamic/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1182930%2Fb9380cde-5232-43e9-ae23-ef9c6f5ccd46.png" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">Android Apps vs. iOS Apps: Which Are Better?</h3> <p class="opacity-75 pt-1"> Birdmorning Solutions Pvt. Ltd - <time datetime="2024-11-21T07:49:04Z">Nov 21</time> </p> </div> </div> </a> </section> </div> </main> <aside class="crayons-layout__sidebar-right" aria-label="Author details"> <div class="crayons-article-sticky grid gap-4 pb-4 break-word" id="article-show-primary-sticky-nav"> <div class="crayons-card crayons-card--secondary branded-7 p-4 pt-0 gap-4 grid" style="border-top-color: #0173e0;"> <div class="-mt-4"> <a href="/hmpljs" class="flex"> <span class="crayons-logo crayons-logo--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F9852%2Fc11ce6b7-4a78-483f-a93d-95f7684c4924.png" class="crayons-logo__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> HMPL.js </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"Organization","style":"","id":9852,"name":"HMPL.js"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 " aria-label="Follow organization: HMPL.js" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> 🐜 Server-oriented customizable templating for JavaScript </div> <div> <p>View HMPL on GitHub</p> </div> <div> <a href="https://hmpl-lang.dev" class="crayons-btn crayons-btn--outlined w-100"> GitHub repo </a> </div> </div> <div class="crayons-card crayons-card--secondary"> <header class="crayons-card__header"> <h3 class="crayons-subtitle-2"> More from <a href="/hmpljs">HMPL.js</a> </h3> </header> <div> <a class="crayons-link crayons-link--contentful" href="/hmpljs/i-changed-the-logo-for-the-js-project-what-do-you-think-79e"> HMPL has a new logo. What do you think? <div class="crayons-link__secondary -ml-1"> <span class="mr-1"><span class="opacity-50">#</span>webdev</span> <span class="mr-1"><span class="opacity-50">#</span>javascript</span> <span class="mr-1"><span class="opacity-50">#</span>programming</span> <span class="mr-1"><span class="opacity-50">#</span>opensource</span> </div> </a> <a class="crayons-link crayons-link--contentful" href="/hmpljs/ant-as-a-standard-153m"> Ant as a standard 🐜 <div class="crayons-link__secondary -ml-1"> <span class="mr-1"><span class="opacity-50">#</span>webdev</span> <span class="mr-1"><span class="opacity-50">#</span>javascript</span> <span class="mr-1"><span class="opacity-50">#</span>programming</span> <span class="mr-1"><span class="opacity-50">#</span>opensource</span> </div> </a> <a class="crayons-link crayons-link--contentful" href="/hmpljs/memoization-in-javascript-optimizing-computations-and-improving-performance-5129"> 🗄️Memoization in JavaScript: Optimizing Computations and Improving Performance <div class="crayons-link__secondary -ml-1"> <span class="mr-1"><span class="opacity-50">#</span>webdev</span> <span class="mr-1"><span class="opacity-50">#</span>javascript</span> <span class="mr-1"><span class="opacity-50">#</span>programming</span> <span class="mr-1"><span class="opacity-50">#</span>opensource</span> </div> </a> </div> </div> </div> <div class="crayons-article-sticky grid gap-4 break-word js-billboard-container" data-async-url="/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa/billboards/post_sidebar"></div> </aside> </div> <div class="mod-actions-menu print-hidden"></div> <div data-testid="unpublish-post-modal-container" class="unpublish-post-modal-container hidden"></div> <div class="fullscreen-code js-fullscreen-code"></div> <script src="https://assets.dev.to/assets/followButtons-f2455d1f50a862b83fa006b1953e3a1644598781243cae25d3e75b13c04184fd.js" defer="defer"></script> <script src="https://assets.dev.to/assets/billboard-a7ffd2b38d410444a4ef2d42c6ce905699d84b1520aed314b817a767ddc3b362.js" defer="defer"></script> <script src="https://assets.dev.to/assets/localizeArticleDates-70147c5c6bfe350b42e020ebb2a3dd37419d83978982b5a67b6389119bf162ac.js" defer="defer"></script> <script src="https://assets.dev.to/assets/articleReactions-79a44d82fb34a91c3987c24cfd3bcf2b0d38a02730b69ae6da297387d185f015.js" defer="defer"></script> <script> function activateRunkitTags() { if (!areAnyRunkitTagsPresent()) return var checkRunkit = setInterval(function() { try { dynamicallyLoadRunkitLibrary() if (typeof(RunKit) === 'undefined') { return } replaceTagContentsWithRunkitWidget() clearInterval(checkRunkit); } catch(e) { console.error(e); clearInterval(checkRunkit); } }, 200); } function isRunkitTagAlreadyActive(runkitTag) { return runkitTag.querySelector("iframe") !== null; }; function areAnyRunkitTagsPresent() { var presentRunkitTags = document.getElementsByClassName("runkit-element"); return presentRunkitTags.length > 0 } function replaceTagContentsWithRunkitWidget() { var targets = document.getElementsByClassName("runkit-element"); for (var i = 0; i < targets.length; i++) { if (isRunkitTagAlreadyActive(targets[i])) { continue; } var wrapperContent = targets[i].textContent; if (/^(<iframe src)/.test(wrapperContent) === false) { if (targets[i].children.length > 0) { var preamble = targets[i].children[0].textContent; var content = targets[i].children[1].textContent; targets[i].innerHTML = ""; var notebook = RunKit.createNotebook({ element: targets[i], source: content, preamble: preamble }); } } } }; function dynamicallyLoadRunkitLibrary() { if (typeof(dynamicallyLoadScript) === "undefined") return dynamicallyLoadScript("//embed.runkit.com") } activateRunkitTags(); </script> <div class="js-billboard-container pb-4 crayons-layout__comments-billboard" data-async-url="/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa/billboards/post_fixed_bottom"></div> <div id="runtime-banner-container"></div> </div> </div> <footer id="footer" class="crayons-footer print-hidden"> <div id="footer-container" class="crayons-footer__container"> <div style="" data-display-unit data-id="146443" data-category-click="click" data-category-impression="impression" data-context-type="home" data-special="nothing" data-article-id="" data-type-of="in_house"> <p style="font-weight: bold;margin-bottom: 10px"> Thank you to our Diamond Sponsor <a href="https://neon.tech/">Neon</a> for supporting our community. </p> </div> <p class="fs-s crayons-footer__description"> <a class="c-link c-link--branded fw-medium" aria-label="DEV Community Home" href="/">DEV Community</a> — A constructive and inclusive social network for software developers. With you every step of your journey. </p> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/"> Home </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/++"> DEV++ </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/pod"> Podcasts </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/videos"> Videos </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/tags"> Tags </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/help"> DEV Help </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="https://shop.forem.com/"> Forem Shop </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/advertise"> Advertise on DEV </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/challenges"> DEV Challenges </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/showcase"> DEV Showcase </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/about"> About </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/contact"> Contact </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/free-postgres-database-tier"> Free Postgres Database </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/guides"> Guides </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/software-comparisons"> Software comparisons </a> <span class="dot ml-2"></span> </li> </ul> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/code-of-conduct"> Code of Conduct </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/privacy"> Privacy Policy </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/terms"> Terms of use </a> <span class="dot ml-2"></span> </li> </ul> <div class="fs-s"> <p>Built on <a class="c-link c-link--branded" target="_blank" rel="noopener" href="https://www.forem.com">Forem</a> — the <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/opensource">open source</a> software that powers <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to">DEV</a> and other inclusive communities.</p> <p>Made with love and <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/rails">Ruby on Rails</a>. DEV Community <span title="copyright">©</span> 2016 - 2024.</p> </div> </div> </footer> <div id="snack-zone"></div> <div id="global-signup-modal" class="authentication-modal hidden"> <div class="authentication-modal__container"> <figure class="authentication-modal__image-container"> <img class="authentication-modal__image" src="https://media2.dev.to/dynamic/image/width=190,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" alt="DEV Community" loading="lazy" /> </figure> <div class="authentication-modal__content"> <p class="authentication-modal__description"> We're a place where coders share, stay up-to-date and grow their careers. </p> </div> <div class="authentication-modal__actions"> <a href="/enter" class="crayons-btn" aria-label="Log in" data-no-instant> Log in </a> <a href="/enter?state=new-user" class="crayons-btn crayons-btn--ghost-brand js-global-signup-modal__create-account" aria-label="Create new account" data-no-instant> Create account </a> </div> </div> </div> <script src="https://assets.dev.to/assets/signupModalShortcuts-0b25469b985100a01e94cbd7fccaf7f0a4d776e129aac65c766aa32cb28ab29a.js" defer="defer"></script> <div id="cookie-consent"></div> <div id="i18n-translations" data-translations="{"en":{"core":{"add_comment":"Add comment","beta":"beta","comment":"Comment","copy_link":"Copy link","edit_profile":"Edit profile","follow":"Follow","follow_back":"Follow back","following":"Following","like":"Like","loading":"loading...","reaction":"Reaction","report_abuse":"Report abuse","search":"Search","success_settings":"Successfully updated settings.","counted_organization":{"one":"%{count} organization","other":"%{count} organizations"},"counted_user":{"one":"%{count} person","other":"%{count} people"},"not_following":"You're not following anyone","following_everyone":"You're following %{details} (everyone)","you_are_following":"You're following","and":"and"}}}"></div> <div id="reaction-category-resources" class="hidden" aria-hidden="true"> <img data-name="Like" data-slug="like" data-position="1" src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> <img data-name="Unicorn" data-slug="unicorn" data-position="2" src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> <img data-name="Exploding Head" data-slug="exploding_head" data-position="3" src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> <img data-name="Raised Hands" data-slug="raised_hands" data-position="4" src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> <img data-name="Fire" data-slug="fire" data-position="5" src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </div> </body> </html>