Unveiling the Power of Design Patterns in JavaScript

<!DOCTYPE html>    <html lang="en-US" itemscope itemtype="http://schema.org/Blog" prefix="og: http://ogp.me/ns#">  <head>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-N939BGV');</script>  <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11" />  <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/style.css"> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/stylesheet.css"> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/ie.css"> <link rel="stylesheet" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/jquery.mCustomScrollbar.css"> <link href="https://www.tothenew.com/blog/wp-content/themes/ttn/images/favicon.ico" rel="icon" type="image/x-icon"/> <script src="https://assets.adobedtm.com/02384cfb0f99/28701c80a9a8/launch-353f9f5a1184-development.min.js" async></script> <script> jQuery( document ).ready(function() { dataLayer.push({ 'event': 'categoryView', 'category': 'Front End Development', 'blogTitle': 'Unveiling the Power of Design Patterns in JavaScript', 'author': 'Himanshi Gera' }); }); </script>  <title>Unveiling the Power of Design Patterns in JavaScript | TO THE NEW Blog</title> <meta name="description" content="As JavaScript developers, we're constantly faced with the challenge of writing code that is not only functional but also maintainable and scalable. Design patterns offer us proven solutions to common problems encountered in software development. The design patterns are backed by a strong community of developers which makes them safe to use. Many developers face" /> <meta name="robots" content="max-image-preview:large" /> <link rel="canonical" href="https://www.tothenew.com/blog/unveiling-the-power-of-design-patterns-in-javascript/" /> <meta name="generator" content="All in One SEO (AIOSEO) 4.3.7" /> <meta property="og:locale" content="en_US" /> <meta property="og:site_name" content="TO THE NEW BLOG" /> <meta property="og:type" content="blog" /> <meta property="og:title" content="Unveiling the Power of Design Patterns in JavaScript | TO THE NEW Blog" /> <meta property="og:description" content="As JavaScript developers, we're constantly faced with the challenge of writing code that is not only functional but also maintainable and scalable. Design patterns offer us proven solutions to common problems encountered in software development. The design patterns are backed by a strong community of developers which makes them safe to use. Many developers face" /> <meta property="og:url" content="https://www.tothenew.com/blog/unveiling-the-power-of-design-patterns-in-javascript/" /> <meta property="og:image" content="https://www.tothenew.com/blog/wp-content/themes/ttn/images/social-logo.png" /> <meta property="og:image:secure_url" content="https://www.tothenew.com/blog/wp-content/themes/ttn/images/social-logo.png" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@tothenew" /> <meta name="twitter:title" content="Unveiling the Power of Design Patterns in JavaScript | TO THE NEW Blog" /> <meta name="twitter:description" content="As JavaScript developers, we're constantly faced with the challenge of writing code that is not only functional but also maintainable and scalable. Design patterns offer us proven solutions to common problems encountered in software development. The design patterns are backed by a strong community of developers which makes them safe to use. Many developers face" /> <meta name="twitter:image" content="https://www.tothenew.com/blog/wp-content/themes/ttn/images/social-logo.png" /> <script type="application/ld+json" class="aioseo-schema"> {"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tothenew.com\/blog\/unveiling-the-power-of-design-patterns-in-javascript\/#article","name":"Unveiling the Power of Design Patterns in JavaScript | TO THE NEW Blog","headline":"Unveiling the Power of Design Patterns in JavaScript","author":{"@id":"https:\/\/www.tothenew.com\/blog\/author\/himanshi\/#author"},"publisher":{"@id":"https:\/\/www.tothenew.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/04\/Screenshot-2024-04-04-at-4.14.34-PM.png","@id":"https:\/\/www.tothenew.com\/blog\/#articleImage"},"datePublished":"2024-04-11T08:27:56+05:30","dateModified":"2024-04-15T08:57:17+05:30","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.tothenew.com\/blog\/unveiling-the-power-of-design-patterns-in-javascript\/#webpage"},"isPartOf":{"@id":"https:\/\/www.tothenew.com\/blog\/unveiling-the-power-of-design-patterns-in-javascript\/#webpage"},"articleSection":"Front End Development, Technology, javascript, JavaScript Design Patterns, js, Web Development"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tothenew.com\/blog\/unveiling-the-power-of-design-patterns-in-javascript\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/#listItem","position":1,"item":{"@type":"WebPage","@id":"https:\/\/www.tothenew.com\/blog\/","name":"Home","description":"Dive into TO THE NEW's blogs for insights on digital tech services, product engineering, Cloud solutions, and more. Our articles cover trending tech topics from design to development to MarTech.","url":"https:\/\/www.tothenew.com\/blog\/"},"nextItem":"https:\/\/www.tothenew.com\/blog\/unveiling-the-power-of-design-patterns-in-javascript\/#listItem"},{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/unveiling-the-power-of-design-patterns-in-javascript\/#listItem","position":2,"item":{"@type":"WebPage","@id":"https:\/\/www.tothenew.com\/blog\/unveiling-the-power-of-design-patterns-in-javascript\/","name":"Unveiling the Power of Design Patterns in JavaScript","description":"As JavaScript developers, we're constantly faced with the challenge of writing code that is not only functional but also maintainable and scalable. Design patterns offer us proven solutions to common problems encountered in software development. The design patterns are backed by a strong community of developers which makes them safe to use. Many developers face","url":"https:\/\/www.tothenew.com\/blog\/unveiling-the-power-of-design-patterns-in-javascript\/"},"previousItem":"https:\/\/www.tothenew.com\/blog\/#listItem"}]},{"@type":"Organization","@id":"https:\/\/www.tothenew.com\/blog\/#organization","name":"TO THE NEW Blog","url":"https:\/\/www.tothenew.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.tothenew.com\/blog\/author\/himanshi\/#author","url":"https:\/\/www.tothenew.com\/blog\/author\/himanshi\/","name":"Himanshi Gera","image":{"@type":"ImageObject","@id":"https:\/\/www.tothenew.com\/blog\/unveiling-the-power-of-design-patterns-in-javascript\/#authorImage","url":"https:\/\/newersworld-sf-static.tothenew.net\/prod\/profilePicFolder\/82c30ae5-e8e8-4e24-bdcd-4a9c0617e81d_932-Himanshi-.-PROFILEPICTURE.jpeg","width":96,"height":96,"caption":"Himanshi Gera"}},{"@type":"WebPage","@id":"https:\/\/www.tothenew.com\/blog\/unveiling-the-power-of-design-patterns-in-javascript\/#webpage","url":"https:\/\/www.tothenew.com\/blog\/unveiling-the-power-of-design-patterns-in-javascript\/","name":"Unveiling the Power of Design Patterns in JavaScript | TO THE NEW Blog","description":"As JavaScript developers, we're constantly faced with the challenge of writing code that is not only functional but also maintainable and scalable. Design patterns offer us proven solutions to common problems encountered in software development. The design patterns are backed by a strong community of developers which makes them safe to use. Many developers face","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.tothenew.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.tothenew.com\/blog\/unveiling-the-power-of-design-patterns-in-javascript\/#breadcrumblist"},"author":{"@id":"https:\/\/www.tothenew.com\/blog\/author\/himanshi\/#author"},"creator":{"@id":"https:\/\/www.tothenew.com\/blog\/author\/himanshi\/#author"},"datePublished":"2024-04-11T08:27:56+05:30","dateModified":"2024-04-15T08:57:17+05:30"},{"@type":"WebSite","@id":"https:\/\/www.tothenew.com\/blog\/#website","url":"https:\/\/www.tothenew.com\/blog\/","name":"TO THE NEW Blog","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.tothenew.com\/blog\/#organization"}}]} </script>  <link rel='dns-prefetch' href='//www.tothenew.com' /> <link rel='dns-prefetch' href='//ajax.googleapis.com' /> <link rel='dns-prefetch' href='//static.addtoany.com' /> <link rel='dns-prefetch' href='//tps.tothenew.com' /> <link rel="alternate" type="application/rss+xml" title="TO THE NEW Blog » Feed" href="https://www.tothenew.com/blog/feed/" /> <link rel="alternate" type="application/rss+xml" title="TO THE NEW Blog » Comments Feed" href="https://www.tothenew.com/blog/comments/feed/" /> <link rel="alternate" type="application/rss+xml" title="TO THE NEW Blog » Unveiling the Power of Design Patterns in JavaScript Comments Feed" href="https://www.tothenew.com/blog/unveiling-the-power-of-design-patterns-in-javascript/feed/" /> <link rel='stylesheet' id='sweetalert2-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/sweetalert2/sweetalert2.min.css?ver=10.16.7' type='text/css' media='all' /> <link rel='stylesheet' id='user-registration-general-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/user-registration.css?ver=2.3.5' type='text/css' media='all' /> <link rel='stylesheet' id='user-registration-smallscreen-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/user-registration-smallscreen.css?ver=2.3.5' type='text/css' media='only screen and (max-width: 768px)' /> <link rel='stylesheet' id='user-registration-my-account-layout-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/my-account-layout.css?ver=2.3.5' type='text/css' media='all' /> <link rel='stylesheet' id='dashicons-css' href='https://www.tothenew.com/blog/wp-includes/css/dashicons.min.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='wp-block-library-css' href='https://www.tothenew.com/blog/wp-includes/css/dist/block-library/style.min.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='mpp_gutenberg-css' href='https://www.tothenew.com/blog/wp-content/plugins/metronet-profile-picture/dist/blocks.style.build.css?ver=2.6.0' type='text/css' media='all' /> <link rel='stylesheet' id='classic-theme-styles-css' href='https://www.tothenew.com/blog/wp-includes/css/classic-themes.min.css?ver=6.2.2' type='text/css' media='all' /> <style id='global-styles-inline-css' type='text/css'> body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');--wp--preset--duotone--midnight: url('#wp-duotone-midnight');--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} .wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;} :where(.wp-block-columns.is-layout-flex){gap: 2em;} .wp-block-pullquote{font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='ap-fileuploader-animation-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/loading-animation.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-fileuploader-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/fileuploader.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-jquery-ui-style-css' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-tagit-styles-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/jquery.tagit.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-tagit-ui-styles-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/tagit.ui-zendesk.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='fontawesome-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/fontawesome/css/all.css?ver=5.15.1' type='text/css' media='all' /> <link rel='stylesheet' id='ap-front-styles-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/frontend-style.css?ver=4.0.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-lightbox-css-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/lightbox/css/lightbox.css?ver=4.0.2' type='text/css' media='all' /> <link rel='stylesheet' id='login-with-google-css' href='https://www.tothenew.com/blog/wp-content/plugins/login-with-google/assets/build/css/login.css?ver=1732271165' type='text/css' media='all' /> <link rel='stylesheet' id='ttn_new-fonts-css' href='https://tps.tothenew.com/css?family=Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext' type='text/css' media='all' /> <link rel='stylesheet' id='ttn_new-style-css' href='https://www.tothenew.com/blog/wp-content/themes/ttn/style.css?ver=6.2.2' type='text/css' media='all' />  <link rel='stylesheet' id='addtoany-css' href='https://www.tothenew.com/blog/wp-content/plugins/add-to-any/addtoany.min.css?ver=1.16' type='text/css' media='all' /> <link rel='stylesheet' id='wppb_stylesheet-css' href='https://www.tothenew.com/blog/wp-content/plugins/profile-builder/assets/css/style-front-end.css?ver=3.12.4' type='text/css' media='all' /> <script type='text/javascript' defer src='//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js?ver=6.2.2' id='ap-jquery-ui-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/tag-it.js?ver=4.0.2' id='ap-tagit-js-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/tag-it-custom.js?ver=4.0.2' id='ap-tagit-custom-js-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/fileuploader.js?ver=6.2.2' id='ap-fileuploader-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/lightbox/js/lightbox.js?ver=4.0.2' id='ap-lightbox-js-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-includes/js/jquery/ui/core.min.js?ver=1.13.2' id='jquery-ui-core-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-includes/js/jquery/ui/datepicker.min.js?ver=1.13.2' id='jquery-ui-datepicker-js'></script> <script type='text/javascript' id='jquery-ui-datepicker-js-after'> jQuery(function(jQuery){jQuery.datepicker.setDefaults({"closeText":"Close","currentText":"Today","monthNames":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthNamesShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"nextText":"Next","prevText":"Previous","dayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"dayNamesShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"dayNamesMin":["S","M","T","W","T","F","S"],"dateFormat":"MM d, yy","firstDay":1,"isRTL":false});}); </script> <script type='text/javascript' id='ap-frontend-js-js-extra'> /* <![CDATA[ */ var ap_fileuploader = {"upload_url":"https:\/\/www.tothenew.com\/blog\/wp-admin\/admin-ajax.php","nonce":"ec7e17051e"}; var ap_form_required_message = ["This field is required","anonymous-post-pro"]; var ap_captcha_error_message = ["Sum is not correct.","anonymous-post-pro"]; /* ]]> */ </script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/frontend.js?ver=4.0.2' id='ap-frontend-js-js'></script> <script type='text/javascript' id='addtoany-core-js-before'> window.a2a_config=window.a2a_config||{};a2a_config.callbacks=[];a2a_config.overlays=[];a2a_config.templates={}; </script> <script type='text/javascript' defer async src='https://static.addtoany.com/menu/page.js' id='addtoany-core-js'></script> <script type='text/javascript' defer async src='https://www.tothenew.com/blog/wp-content/plugins/add-to-any/addtoany.min.js?ver=1.1' id='addtoany-jquery-js'></script> <script type='text/javascript' id='loadmore_script-js-extra'> /* <![CDATA[ */ var loadmore_params = {"ajaxurl":"https:\/\/www.tothenew.com\/blog\/wp-admin\/admin-ajax.php"}; /* ]]> */ </script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/themes/ttn/js/ajax.js?ver=6.2.2' id='loadmore_script-js'></script> <link rel="https://api.w.org/" href="https://www.tothenew.com/blog/wp-json/" /><link rel="alternate" type="application/json" href="https://www.tothenew.com/blog/wp-json/wp/v2/posts/61199" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.tothenew.com/blog/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.2.2" /> <link rel='shortlink' href='https://www.tothenew.com/blog/?p=61199' /> <link rel="alternate" type="application/json+oembed" href="https://www.tothenew.com/blog/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.tothenew.com%2Fblog%2Funveiling-the-power-of-design-patterns-in-javascript%2F" /> <link rel="alternate" type="text/xml+oembed" href="https://www.tothenew.com/blog/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.tothenew.com%2Fblog%2Funveiling-the-power-of-design-patterns-in-javascript%2F&format=xml" /> <style type="text/css" id="wp-custom-css"> .blogs h2 b, .blogs h3 b, .blogs h4, .blogs h5 b, .blogs h2 strong, .blogs h3 strong, .blogs h4 strong, .blogs h5 strong, body h2, body h3, body h4, body h5{ font-weight: 500 !important; } .blog-dashboard td, .blog-dashboard th{padding: 10px 0px;} body b, body strong{ font-weight: 600 !important; } /* css for tick mark list */ #blog-section{ border-bottom: 1px solid #e5e2e2; } .page-header.acs_search_header{ max-width: 1210px; margin: 0 auto; padding: 15px; width: 100%; } .acs_twenty{ background: #f6f4f4; } .search-no-results .acs_search_results_container { min-height: inherit; } .search-no-results .acs_search_header { text-align: center; padding-top: 60px; } #header .search-icon:after, #header .search-icon:before{ top: 26px; transition: inherit; } #header.clone .search-icon::before, #header.clone .search-icon::after { top: 10px; } .search .page-header { border: 0; padding: 0px 0px 30px 0px !important; } .search .entry-header h1 { font-size: 18px !important; margin: 0px 0px 20px 0px; line-height: 27px; } .search h2.entry-title { font-size: 16px !important; } .acs_search_results_items{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 0.5rem; grid-auto-rows: 1fr; max-width: 1210px; margin: 0 auto; width: 100%; } .acs_search_results_items .border{ padding-top: 25px; width:auto; } .acs_search_results_items .border .blue-box{ height:100%; } .acs_search_results_container .acs_search_results_status{ background: #f6f4f4; margin: 0; border-bottom: 1px solid #e5e2e2; padding: 20px 0px; } li.checksome:before { content: '✓'; font-size: 17px; font-weight: 700; } p.mandatory { color: red !important; text-align: right; } .ap-pro-front-form #mceu_28-body { white-space: break-spaces; } .hs_error_rollup>ul.no-list.hs-error-msgs.inputs-list { display: none !important; } .wp-admin .js .tmce-active .wp-editor-area { color: #333; } .btn-load-more { padding: 10px 40px; background: none; border-color: #d9177f; color: #d9177f; border-radius: unset; } .load_more.text-center { margin-bottom: 48px; } .btn-load-more:hover { background: #d9177f; color: #fff; } .addtoany_share_save_container.addtoany_content.addtoany_content_bottom { text-align: center; } .site-logo { background: url(/themes/custom/ttnd/images/TTN-logo.svg) no-repeat; } .social li a { background: url(/themes/custom/ttnd/images/social_icons.svg) no-repeat; } #new_post_form #mceu_28-body { white-space: break-spaces; } .ap-pro-front-form #mceu_11 { display: none; } form#loginform input#wp-submit:hover { background: #b40a65; } #header.clone #menu li.topmyaccount:last-child a:hover{ background: transparent; color: #d9167e !important; } #header.clone #menu > ul .menu-expanded.topmyaccount ul{ border-top: 0px; border-radius: 0px; } #header.clone #menu li.topmyaccount:last-child ul li:last-child { border-top: 1px solid #ccc; } #header.clone #menu li.topmyaccount:last-child ul li a:hover { border: 0px; } li.user-registration-MyAccount-navigation-link.user-registration-MyAccount-navigation-link--edit-password { display: none !important; } /* writing css for admin login*/ .ttn-login-tutorial { margin: 42px 0 30px; box-sizing: border-box; padding: 0px 30px; background-color: #fff; } #header.clone #menu li:last-child a{ border: inherit; padding-left: inherit; padding-right: inherit; color: inherit; padding: 10px 15px !important; } form#loginform { padding: 15px; border: 1px solid #dee0e9; box-shadow: none; background: 0 0; } form#loginform p{ margin:10px 0px; font-size:14px; color:#000; } form#loginform input#user_login,input#user_pass { border: 1px solid #ccc; outline: none !important; margin: 10px 0px; } form#loginform p.login-submit { text-align: center; } form#loginform input#wp-submit { width: 200px; background: #d9167e; color: #fff; font-size: 18px; margin: 5px 0px; height: 46px; line-height: 20px; } form#loginform p.login-remember label{ display: inline-block; padding-right: 10px; white-space: nowrap; } form#loginform input[type="checkbox"]{ border: 1px solid #ccc; outline: none !important; vertical-align: middle; width: 20%; margin-right: 7%; font-size: 14px; } /*css for admin login ends here*/ /*css for details update page starts here*/ #user-registration.horizontal{ border:1px solid #dee0e9; box-shadow:none; } #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a { border-bottom:10px solid #d9167e !important; } .user-registration-MyAccount-content label { text-align: left; letter-spacing: 0px; color: #000000; margin: 14px 0px; } .select2-container .select2-selection--single { height:41px !important } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #000; line-height: 36px !important; font-size: 16px !important; font-weight:500 !important } #user-registration input { border: 1px solid #ccc; outline: none !important; padding: 0px 10px; font-size: 16px; font-weight: 500; } input#edit_profile { width: 33%; color: #fff; font-size: 16px; background: #d9167e; border: 0px; } input#edit_profile:hover{ background: #b40a65; border-color: #b40a65; } span.select2.select2-container.select2-container--default { width: auto !important; } @media screen and (max-width:991px){ .tag-cloud {height: auto;} #header.search-open .search-icon{ top: -12px; } } @media screen and (max-width:480px){ input#edit_profile{ width:50%; } } /*css for details upate page ends here*/ nav.user-registration-MyAccount-navigation { background: #000; } .logged-in .forlogout, .wp_google_login__divider{ display:none;} .forlogin { display:none;} .logged-in .forlogin { display:block;} #wppb-edit-user #description { height: 100px; } .wppb-form-field.wppb-default-password { display: none; } .topmyaccount ul { width: 123px !important; margin-top: -6px; } .search-results .breadcrumbs li:last-child { display: none; } .user-registration-register.register a { display: none; } .forlogout {text-align: center; margin: 20px;} .forlogout a{ width: 200px; background: #d9167e; color: #fff; font-size: 18px; height: 46px; padding: 8px 8px; display: inline-block;} .reject-notify { text-align: right; margin-right: 11px; margin-bottom: 10px; } .rejection-form-item textarea { width: 100%; min-height: 190px; } .userblog h2.entry-title a, .userblog h2.entry-title { color: #000; text-align:left; } .updated-user-blog { display: flex; } .userblog .updated-user-blog .button{ background: url(/blog/wp-ttn-blog/uploads/2021/05/edit.png); background-repeat: no-repeat; background-size: 18px; width: 72px; font-size: 16px; background-position: right 2px; height: 20px; box-shadow: none; } .userblog .entry-content { text-align: left; } .publishedblog .status-publish:hover, .unpublishedblog .status-publish, .userblog .status-draft:hover { transform: scale(1.04); transition: ease-in-out; transition-duration: .4s; } .publishedblog .status-publish:hover h2.entry-title a, .unpublishedblog .status-publish, .userblog .status-draft:hover h2.entry-title a{ color:#d9167e; } li.user-registration-MyAccount-navigation-link.user-registration-MyAccount-navigation-link--edit-blog { display: none !important; } #new_post_form .label-wrap { text-align: left; } .publishedblog .entry-content p { text-align: left; } #new_post_form input[type="checkbox"] { height: 16px; width: 16px; } .blog-cont-box { top: -32px !important; } #new_post_form input[type="submit"] { max-width: 200px; background: #d9167e; border: 0px !important; box-shadow: inherit !important; font-size: 16px; height: 46px; line-height: 46px; color: #fff; margin-bottom: 36px; } #new_post_form .ap-checkbox-wrap label.ap-checkbox-label { text-align: left; } .comment-form-cookies-consent label { margin-left: 28px; font-size: 13px; margin-top: -11px; } .comment-form-cookies-consent input { width: 20px; height: 20px; } .ap-checkbox-wrap label.ap-checkbox-label { font-size: 14px; font-weight: normal; width: 30%; display: inline-block; margin: 0; } #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a { background-color: transparent !important; border-bottom: 3px solid #d9177f; font-size: 15px; } h2.ap-pro-front-form-title { text-align: center; margin-bottom: 12px !important; } .thankyounav { display:none;} .logged-in .thankyounav { display:block;} .ur-frontend-form label.user-registration-error { padding: 0px; font-weight: 400; margin-top: -9px !important; } .prftxt>i { display: none; } .ur-frontend-form #ur-submit-message-node { margin: -32px 0 0; font-size: 16px; } .user-registration-MyAccount-content fieldset { border:none; padding: 0;} .cntlinehght { line-height: 28px; font-size: 20px; } .user-registration-error::before { content: none; } .ur-frontend-form input { border: 1px solid #ccc; } .user-registration-error { border-top-color: #fff; background: no-repeat; color: #f4000a; } .ur-field-item.field-description { width: 97% !important; } .ur-frontend-form .ur-form-row .ur-form-grid textarea { border: 1px solid #a2a7ae; } .user-registration-account .user-registration-profile-fields .form-row { display: block !important; } .user-registration-profile-fields p { display: flex; justify-content: center; margin-top: 10px; } .user-registration-profile-fields label { text-align: left; } .user-registration-page #secondary { display: none; } .thank_login { padding: 10px 40px; background: #d9177f; color: #fff !important; border-color: #d9177f; text-decoration: none !important; } .user-registration-submit-Button {background: #d9177f; color: #fff !important; border-color: #d9177f;} .user-registration-Button { background: none repeat scroll 0 0 #d9177f; border: medium none; color: #fff; cursor: pointer; font-weight: 600; padding: 10px 0 6px; text-transform: uppercase; width: 100%;} #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a { color: #fff; } #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a { background-color: #d9177f; } #user-registration p.blogtext { margin: 23px 0px 0px; letter-spacing: 0px; color: #000000; text-align: center; font-size: 16px; } .user-registration-account .status-publish, .userblog .status-draft{ width: 74%; margin: 0 auto; -webkit-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); -moz-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); margin-top: 40px; padding: 28px; margin-bottom: 40px; } .ap-pro-front-form .ap-form-error { margin-top: 4px; } .ap-pro-front-form .author-name .ap-pro-textfield { cursor: not-allowed; } .page-template-default .status-publish{ width: 74%; margin: 0 auto; -webkit-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); -moz-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); margin-top: 40px; padding: 28px; margin-bottom: 40px; } .page-template-default header.entry-header h1 { font-size: 28px; } .page-template-default header.entry-header{ position: relative; padding-bottom: 20px; border-bottom: 1px solid #ccc; } .page-template-default header.entry-header:after { position: absolute; height: 5px; width: 20%; background: #d9167e; content: ""; bottom: -3px; } h2.ap-pro-front-form-title { text-align: center; } .ap-pro-form-field-wrapper { margin-bottom: 0px; } .ap-pro-form-field-wrapper p { padding-top: 10px; } .ap-pro-form-field-wrapper .label-wrap label { padding-bottom: 0px; } .ap-pro-form-field .wp-editor-container textarea.wp-editor-area { min-height: 148px; } .ap-pro-form-field-wrapper.category select { padding: 10px; font-size: 15px; } .ap-pro-form-field-wrapper.payment-agreement { text-align: center; } .payment-agreement.ap-pro-form-field-wrapper input[type="submit"] { max-width: 200px; background: #d9167e; border: 0px !important; box-shadow: inherit !important; font-size: 16px; height: 46px; line-height:46px; } .payment-agreement.ap-pro-form-field-wrapper input[type="submit"]:hover { background: #b40a65 !important; } .user-registration-account header.entry-header h1 { font-size: 28px; } .user-registration-account header.entry-header{ position: relative; padding-bottom: 20px; border-bottom: 1px solid #ccc; } .user-registration-account header.entry-header:after { position: absolute; height: 5px; width: 20%; background: #d9167e; content: ""; bottom: -3px; } .blog-user-registration .post-title input, .blog-user-registration .post-content input, .blog-user-registration .primary-competency input, .blog-user-registration .ap-checkbox-wrap input{background: #F8F8F8 0% 0% no-repeat padding-box; box-shadow: inset 0px 3px 6px #7B7B7B29; border: 1px solid #BFBFBF; opacity: 1;} span.edit-link { display: none !important; } #user-registration { margin: 42px 0 30px; } .user-registration-account .login .form-row{ justify-content: center; display: flex; flex-wrap: wrap; } .user-registration-account .form-row.form-row-wide{ display:block } .user-registration-account .form-row input[type=submit]{ width: 200px; background: #d9167e; color: #fff; font-size: 18px; margin-top: 10px; height: 46px; line-height: 20px; } .ur-frontend-form .ur-button-container .ur-submit-button, .user-registration-MyAccount-content .ap-form-submit-wrapper input { margin: 20px auto 34px; width: 200px; background: #d9167e; color: #fff; font-size: 18px; height: 46px; line-height: 20px; } .user-registration-MyAccount-content .ap-form-submit-wrapper{ text-align: center; } .user-registration-MyAccount-content .ap-form_field select{ font-size: 16px; } .user-registration-MyAccount-content .ap-form-field-wrapper label{ font-size: 14px; } .ur-frontend-form { margin-top: 38px; padding: 30px; } .ur-frontend-form .ur-field-item { width: 46.666%; display: inline-block; margin: 0 1.333% 0px !important; } .ap-form-wrapper{ text-align:left; } .user-registration-account span.edit-link { margin-top: -21px; display: block; } .publishedblog { padding-bottom: 40px; } .publishedblog h2 { margin-bottom: 12px !important; } span.user-registration-nick-name { display: none; } .publishedblog .status-publish, .unpublishedblog .status-publish, .userblog .status-draft{ width: 47%; display: inline-block; margin: 0 1%; margin-top: 26px; vertical-align: top; min-height: 330px; } #user-registration p { color: #333; font-size: 14px; } #user-registration .user-registration-MyAccount-content .edit-password legend, #user-registration .user-registration-MyAccount-content h2{ font-family: "Montserrat", sans-serif; color: #000000; opacity: 1; text-align: center;} .user-registration-message a { padding: 12px 10px; clear: both; font-size: 14px; display: block; margin-left: 14px; border: 1px solid #d9167e; max-width: 178px; margin: 0 auto; background: #d9167e; color: #fff; text-decoration: none; } .user-registration-message a:hover{ background:#b40a65; } .user-registration-message { border-top-color: #d9167e; background: rgba(143,174,27,.1); color: #000000; font-size: 16px; font-weight: 600; text-align: center; display: block; margin-bottom: 12px !important; } .register .buisness-error, .register .user-registration-error { font-size: 13px !important; position: absolute; } form.register .ur-field-item { position: relative; } input[type=checkbox]{-webkit-appearance: auto;} .ap-pro-form-field-wrapper input[type="checkbox"] { height: 16px; width: 16px; } .register .user-registration-message{display:none;} #header #menu > ul .menu-expanded ul li:last-child a{text-transform: none;} .category-list ul li a { text-transform: inherit; } @media screen and (max-width: 1023px){ #header .search-icon{ background-position: -10px 13px; background-size: 180%; background-color: transparent !important; } #header .search-icon span{display:none;} .site-logo{background-position: -98px 3px !important;} } @media screen and (max-width: 991px){ .ttn-login-tutorial{ padding: 0 !important; } .user-registration { padding: 0 !important; } .ur-frontend-form .ur-field-item, .page-template-default .status-publish { width: 100%; margin: 0 !important; } .ur-frontend-form { padding: 10px; } .publishedblog .status-publish, .unpublishedblog .status-publish, .userblog .status-draft{width: 100%;margin:10px 0px;} .ap-checkbox-wrap label.ap-checkbox-label{ width:50%; } .acs_search_results_items{ grid-template-columns: repeat(2,1fr); } } @media screen and (max-width: 800px){ div.ap-form-wrapper { padding: 10px 8px !important; } .breadcrumbs{ height: 32px; overflow:inherit; white-space:inherit; } .breadcrumbs li:before { padding: 0 8px; } .page-template-default .status-publish{ padding: 20px 10px; } .user-registration-MyAccount-content .wppb-user-forms ul{ padding: 0 15px; } .wppb-user-forms ul li { margin: 0; padding-bottom: 14px; display: flex; justify-content: center; flex-wrap: wrap; } .wppb-user-forms label { text-align: left; margin: 2px 0px; width: 100%; font-size: 13px; } .wppb-user-forms .wppb-form-field input, .wppb-user-forms textarea { width: 100% !important; } } @media screen and (max-width: 600px){ #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a { padding: 10px 4px; font-size: 15px !important; letter-spacing: -1px; } #user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link{display: inline-block;} div.ap-checkbox-wrap label.ap-checkbox-label { width: 50%; font-size: 12px !important; } div.ap-pro-form-field-wrapper input[type="checkbox"] { margin: 0 5px 5px 0; } #user-registration .user-registration-MyAccount-content { padding: 15px 0px; } .acs_search_results_items{ grid-template-columns: auto; } .col-xs-1.col-md-1.clear-all-filter{ bottom: 20px; } } @media screen and (max-width: 480px){ .category-list .cat-dropdown ul{max-height: 130px;overflow: auto;} .category-list .cat-dropdown .sort-by-dropdown-blog{max-height:inherit;} .ap-checkbox-wrap label.ap-checkbox-label{ width:100%; } div.ap-pro-form-field-wrapper input[type="checkbox"] { height: 14px; width: 12px; } } @media screen and (max-width:1024px){ #header ul#menu-ttn-menu li a { padding: 11px 20px 15px 0px !important; } } </style> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.min.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.selectbox-0.2.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/bootstrap.min.js"></script> <script src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.validate.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/application.js"></script> <script src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.mCustomScrollbar.concat.min.js"></script> <script src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/masonry.pkgd.min.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.cookie.min.js"></script>  <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '296707276361693'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=296707276361693&ev=PageView&noscript=1" /></noscript>   <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">  </head> <body class="post-template-default single single-post postid-61199 single-format-standard user-registration-page custom-font-enabled">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N939BGV" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-M2TS6P" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-M2TS6P');</script>  <div id="container"> <header id="header"> <div class="container"> <div class="clearfix region-header"> <div class="logo"> <a rel="nofollow" href="/" class="site-logo"></a> </div> <div class="custom-search"> <form accept-charset="UTF-8" id="views-exposed-form-search-result-page-1" method="get" action="/search"> <div class="form--inline clearfix"> <label for="edit-combine"> </label> <input type="text" class="form-text" maxlength="128" size="30" value="" name="search_keyword" id="edit-combine" placeholder="Enter search term" /> <input type="submit" class="button js-form-submit form-submit" value="Apply" id="edit-submit-search-result" /> </div> </form> </div> <nav class="clearfix"> <div id="menu"> <ul id="menu-ttn-menu" class="clearfix menu"><li class="menu-expanded"><a href="/services">Services</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/digital-engineering">Digital Engineering</a></li> <li class="menu-item"><a href="/cloud-devops">Cloud & DevOps</a></li> <li class="menu-item"><a href="/media-and-entertainment-solutions">Media & Entertainment Solutions</a></li> <li class="menu-item"><a href="/data-analytics">Data & Analytics</a></li> <li class="menu-item"><a href="/cx">CX & Content</a></li> <li class="menu-item"><a href="/digital-marketing">Digital Marketing</a></li> </ul> </li> <li class="menu-expanded"><a href="/industries">Industries</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/industries/isv">Independent Software Vendors</a></li> <li class="menu-item"><a href="/industries/media-entertainment">Media & Entertainment</a></li> <li class="menu-item"><a href="/industries/consumer-internet">Consumer Internet</a></li> <li class="menu-item"><a href="/industries/ecommerce">E-Commerce</a></li> <li class="menu-item"><a href="/industries/bfsi">Financial Services</a></li> <li class="menu-item"><a href="/industries/healthcare-pharma">Healthcare & Pharma</a></li> <li class="menu-item"><a href="/industries/igaming">iGaming</a></li> </ul> </li> <li class="menu-expanded"><a href="/solutions">Solutions</a><span class="arrow"></span> <ul> <li class="menu-item has-description"><a href="/solutions/hawk">HAWK<span class="wrap">| Infra monitoring & Log Analytics</span></a></li> <li class="menu-item has-description"><a href="/solutions/Prism">Prism<span class="wrap">| AI-based Test Automation</span></a></li> <li class="menu-item has-description"><a href="/solutions/nimbus">Nimbus<span class="wrap">| Custom Data Ingestion Solution</span></a></li> <li class="menu-item has-description"><a href="/solutions/videoready">VideoReady<span class="wrap">| OTT & Video CMS framework</span></a></li> <li class="menu-item has-description"><a href="/solutions/bolt">BOLT<span class="wrap">| Faster AEM Development</span></a></li> </ul> </li> <li class=""><a href="/technologies">Technologies</a></li> <li class="menu-expanded"><a href="/insights">Insights</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/success-stories">Success Stories</a></li> <li class="menu-item"><a href="/insights?resource=67">Whitepapers</a></li> <li class="menu-item"><a href="/insights?resource=66">Webinars</a></li> <li class="menu-item"><a href="/insights?resource=652">Podcasts</a></li> <li class="menu-item"><a href="/blog/">Blogs</a></li> <li class="menu-item"><a href="/insights?resource=62">e-Books</a></li> <li class="menu-item"><a href="/insights?resource=162">Magazines</a></li> <li class="menu-item"><a href="/insights?resource=574">Spotlight</a></li> </ul> </li> <li class=""><a href="/careers">Careers</a></li> <li class="menu-expanded"><a href="/about-us">About</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/about-us">About Us</a></li> <li class="menu-item"><a href="/leadership">Leadership</a></li> <li class="menu-item"><a href="/partnership">Partners</a></li> <li class="menu-item"><a href="/press-releases">Press Releases</a></li> <li class="menu-item"><a href="/media-coverage">Media Coverage</a></li> <li class="menu-item"><a href="/awards">Awards & Analyst Relations</a></li> <li class="menu-item"><a href="/events">Events</a></li> <li class="menu-item"><a href="/our-social-impact">CSR</a></li> </ul> </li> <li class=""><a href="/contact-us" id=h-contact-us>Contact Us</a></li> </ul> </div> <div class="menu-btn"> <div class="burger-container"> <div id="burger"> <div class="bar topBar"></div> <div class="bar btmBar"></div> </div> </div> </div> <a class="search-icon" href="#">Search <span>|</span></a> </nav> </div> </div> </header> <div id="banner" class="clearfix"> <div class="overlay"> <img src="https://www.tothenew.com/blog/wp-content/themes/ttn/images/banner/blog_banner.png" alt="Blog"> </div> <div class="banner-text"> <h2>Blogs</h2> <p>Told you, we love sharing!</p> <div class="subscribe-mobo-btn header-subscribe"> <div class="subscrb"> <div class="subscribe"> <ul class="sign-up-frm"> <li class="width100"> <input class="submit subscribeButton" type="submit" value="Subscribe Blogs"> </li> </ul> </div> </div> </div> </div> <div class="col-xs-12 breadcrumbs padding0"> <ul>  <li><a rel="nofollow" href="/">Home</a></li><li><a rel="v:url" property="v:title" title="Go to TO THE NEW Blog." href="https://www.tothenew.com/blog/" class="home">Blog</a></li><li><a rel="nofollow" property="v:title" title="Go to the Front End Development category archives." href="https://www.tothenew.com/blog/category/front-end-development/" class="taxonomy category">Front End Development</a></li><li><span property="v:title">Unveiling the Power of Design Patterns in JavaScript</span></li> </ul> </div> </div> <div class="clearfix category-list white"> <div class="container"> <div class="row"> <div class="normal"> <div class="col-xs-9 col-sm-9 col-md-9 category-filter-outer-b"> <div class="col-xs-8 col-md-4 main-cat category-filter-blog"> <div class="heading category-head">Category</div> <div class="cat-dropdown category-filter-blog-dropdown"> <div class="cat-drop-inner mCustomScrollbar inset-dark"> <div class="heading">Categories</div> <ul> <li class="cat-item cat-item-5867"><a href="https://www.tothenew.com/blog/category/net/">.NET</a> </li> <li class="cat-item cat-item-5868"><a href="https://www.tothenew.com/blog/category/adobe/">Adobe</a> </li> <li class="cat-item cat-item-1993"><a href="https://www.tothenew.com/blog/category/agile-2/">Agile</a> </li> <li class="cat-item cat-item-4685"><a href="https://www.tothenew.com/blog/category/anaytics/">Anaytics</a> </li> <li class="cat-item cat-item-518"><a href="https://www.tothenew.com/blog/category/android/">Android</a> </li> <li class="cat-item cat-item-1439"><a href="https://www.tothenew.com/blog/category/angular/">AngularJS</a> </li> <li class="cat-item cat-item-2026"><a href="https://www.tothenew.com/blog/category/appsec/">Application Security</a> </li> <li class="cat-item cat-item-1818"><a href="https://www.tothenew.com/blog/category/automation-testing-testing-2/">Automation Testing</a> </li> <li class="cat-item cat-item-1174"><a href="https://www.tothenew.com/blog/category/aws-2/">AWS</a> </li> <li class="cat-item cat-item-4837"><a href="https://www.tothenew.com/blog/category/b2b-2/">B2B</a> </li> <li class="cat-item cat-item-4925"><a href="https://www.tothenew.com/blog/category/b2c/">B2C</a> </li> <li class="cat-item cat-item-5869"><a href="https://www.tothenew.com/blog/category/ba/">BA</a> </li> <li class="cat-item cat-item-5870"><a href="https://www.tothenew.com/blog/category/bi/">BI</a> </li> <li class="cat-item cat-item-1395"><a href="https://www.tothenew.com/blog/category/big-data/">Big Data</a> </li> <li class="cat-item cat-item-4778"><a href="https://www.tothenew.com/blog/category/blockchain/">Blockchain</a> </li> <li class="cat-item cat-item-4308"><a href="https://www.tothenew.com/blog/category/cloud-devops-technology/">Cloud</a> </li> <li class="cat-item cat-item-4682"><a href="https://www.tothenew.com/blog/category/cloud-managed-services/">Cloud Managed Services</a> </li> <li class="cat-item cat-item-3479"><a href="https://www.tothenew.com/blog/category/connected-tv/">Connected TV</a> </li> <li class="cat-item cat-item-1541"><a href="https://www.tothenew.com/blog/category/corporate/">Corporate</a> </li> <li class="cat-item cat-item-4835"><a href="https://www.tothenew.com/blog/category/covid-19/">Covid 19</a> </li> <li class="cat-item cat-item-4831"><a href="https://www.tothenew.com/blog/category/data-analytics/">Data & Analytics</a> </li> <li class="cat-item cat-item-6194"><a href="https://www.tothenew.com/blog/category/data-engineering/">Data Engineering</a> </li> <li class="cat-item cat-item-5871"><a href="https://www.tothenew.com/blog/category/data-science/">Data Science</a> </li> <li class="cat-item cat-item-5872"><a href="https://www.tothenew.com/blog/category/database-administration/">Database Administration</a> </li> <li class="cat-item cat-item-2348"><a href="https://www.tothenew.com/blog/category/devops-technology/">DevOps</a> </li> <li class="cat-item cat-item-2251"><a href="https://www.tothenew.com/blog/category/digital-analytics/">Digital Analytics</a> </li> <li class="cat-item cat-item-4839"><a href="https://www.tothenew.com/blog/category/digital-engineering/">Digital Engineering</a> </li> <li class="cat-item cat-item-1964"><a href="https://www.tothenew.com/blog/category/digital-marketing/">Digital Marketing</a> </li> <li class="cat-item cat-item-4112"><a href="https://www.tothenew.com/blog/category/digital-transformation-2/">Digital Transformation</a> </li> <li class="cat-item cat-item-5873"><a href="https://www.tothenew.com/blog/category/dm-analytics/">DM – Analytics</a> </li> <li class="cat-item cat-item-3602"><a href="https://www.tothenew.com/blog/category/drupal/">Drupal</a> </li> <li class="cat-item cat-item-3887"><a href="https://www.tothenew.com/blog/category/user-experience-design/">Experience Design</a> </li> <li class="cat-item cat-item-3429"><a href="https://www.tothenew.com/blog/category/front-end-development/">Front End Development</a> </li> <li class="cat-item cat-item-7"><a href="https://www.tothenew.com/blog/category/grails/">Grails</a> </li> <li class="cat-item cat-item-6853"><a href="https://www.tothenew.com/blog/category/healthtech/">HealthTech</a> </li> <li class="cat-item cat-item-4687"><a href="https://www.tothenew.com/blog/category/hybrid/">Hybrid</a> </li> <li class="cat-item cat-item-5981"><a href="https://www.tothenew.com/blog/category/igaming/">iGaming</a> </li> <li class="cat-item cat-item-1814"><a href="https://www.tothenew.com/blog/category/industry-buzz/">Industry Buzz</a> </li> <li class="cat-item cat-item-1400"><a href="https://www.tothenew.com/blog/category/ios/">iOS</a> </li> <li class="cat-item cat-item-446"><a href="https://www.tothenew.com/blog/category/java/">Java/JVM</a> </li> <li class="cat-item cat-item-5876"><a href="https://www.tothenew.com/blog/category/js/">JS</a> </li> <li class="cat-item cat-item-1817"><a href="https://www.tothenew.com/blog/category/manual-testing/">Manual Testing</a> </li> <li class="cat-item cat-item-1953"><a href="https://www.tothenew.com/blog/category/marketing/">Marketing</a> </li> <li class="cat-item cat-item-4926"><a href="https://www.tothenew.com/blog/category/marketing-automation/">Marketing Automation</a> </li> <li class="cat-item cat-item-4684"><a href="https://www.tothenew.com/blog/category/mean-2/">MEAN</a> </li> <li class="cat-item cat-item-4686"><a href="https://www.tothenew.com/blog/category/mobile-automation-testing-2/">Mobile Automation Testing</a> </li> <li class="cat-item cat-item-1772"><a href="https://www.tothenew.com/blog/category/mobility/">Mobility</a> </li> <li class="cat-item cat-item-5877"><a href="https://www.tothenew.com/blog/category/msp/">MSP</a> </li> <li class="cat-item cat-item-1185"><a href="https://www.tothenew.com/blog/category/node-js-2/">Node.js</a> </li> <li class="cat-item cat-item-3917"><a href="https://www.tothenew.com/blog/category/product-engineering-2/">Product Engineering</a> </li> <li class="cat-item cat-item-5878"><a href="https://www.tothenew.com/blog/category/project-management/">Project Management</a> </li> <li class="cat-item cat-item-5879"><a href="https://www.tothenew.com/blog/category/python/">Python</a> </li> <li class="cat-item cat-item-5880"><a href="https://www.tothenew.com/blog/category/qe/">QE</a> </li> <li class="cat-item cat-item-5881"><a href="https://www.tothenew.com/blog/category/react-native/">React Native</a> </li> <li class="cat-item cat-item-3038"><a href="https://www.tothenew.com/blog/category/react-js/">React.js</a> </li> <li class="cat-item cat-item-4670"><a href="https://www.tothenew.com/blog/category/sails-js/">Sails JS</a> </li> <li class="cat-item cat-item-6009"><a href="https://www.tothenew.com/blog/category/salesforce/">Salesforce</a> </li> <li class="cat-item cat-item-5270"><a href="https://www.tothenew.com/blog/category/digital-marketing/seo/">SEO</a> </li> <li class="cat-item cat-item-3477"><a href="https://www.tothenew.com/blog/category/smart-tv/">Smart TV</a> </li> <li class="cat-item cat-item-1994"><a href="https://www.tothenew.com/blog/category/software-development/">Software development</a> </li> <li class="cat-item cat-item-1"><a href="https://www.tothenew.com/blog/category/technology/">Technology</a> </li> <li class="cat-item cat-item-1816"><a href="https://www.tothenew.com/blog/category/testing-2/">Testing</a> </li> <li class="cat-item cat-item-3109"><a href="https://www.tothenew.com/blog/category/user-experience/">User Experience</a> </li> <li class="cat-item cat-item-4683"><a href="https://www.tothenew.com/blog/category/video-solutions/">Video Solutions</a> </li> <li class="cat-item cat-item-4488"><a href="https://www.tothenew.com/blog/category/web-content-management/">Web Content Management</a> </li> <li class="cat-item cat-item-5021"><a href="https://www.tothenew.com/blog/category/wordpress/">WordPress</a> </li> </ul> </div> </div> </div> <div class="col-xs-2 col-md-3 main-cat year-filter-blog"> <div class="heading"> Sort By </div> <div class="cat-dropdown year-filter-blog-dropdown"> <div class="cat-drop-inner mCustomScrollbar inset-dark"> <ul class='sort-by-dropdown-blog'> <li class="latest active">Latest</li> <li class="year"> <div class="year-heading"> Year</div> <div class="year-dropdown"> <ul class='year-filter-dropdown-blog'> <li class="cat-item"> <a href="">2024</a> </li> <li class="cat-item"> <a href="">2023</a> </li> <li class="cat-item"> <a href="">2022</a> </li> <li class="cat-item"> <a href="">2021</a> </li> <li class="cat-item"> <a href="">2020</a> </li> <li class="cat-item"> <a href="">2019</a> </li> <li class="cat-item"> <a href="">2018</a> </li> <li class="cat-item"> <a href="">2017</a> </li> <li class="cat-item"> <a href="">2016</a> </li> <li class="cat-item"> <a href="">2015</a> </li> <li class="cat-item"> <a href="">2014</a> </li> <li class="cat-item"> <a href="">2013</a> </li> <li class="cat-item"> <a href="">2012</a> </li> <li class="cat-item"> <a href="">2011</a> </li> <li class="cat-item"> <a href="">2010</a> </li> <li class="cat-item"> <a href="">2009</a> </li> <li class="cat-item"> <a href="">2008</a> </li> </ul></div> </li> </ul> </div> </div> </div> <div class="search-form"> <form id="searchform" action="https://www.tothenew.com/blog/"> <div> <input type="submit" id="searchsubmit" value="Search" class="btn" /> <input type="text" id="textstring" name="s" id="s" value="Search blog" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> </div> </form> </div> <div class="col-xs-1 col-md-1 clear-all-filter"> </div> </div> <div class="col-xs-3 col-sm-3 col-md-3 subscribe-mobo-btn menu-subscribe"> <div class="col-md-12 subscrb"> <div class="subscribe">  <ul class="sign-up-frm"> <li class="width100">  <input class="submit subscribeButton" type="submit" value="Subscribe Blogs"> </li> </ul>  </div> </div> </div> </div> </div> </div> </div> </div> <div id="blog-section" itemscope itemType="http://schema.org/BlogPosting"> <div class="container"> <form class="filter-blog-form" method="GET" action="https://www.tothenew.com/blog" style="display: none;"> <input type="text" value="" name="y" id ="year" /> <input type="text" value="latest" name="l" id ="latest" /> <input type="submit" value="apply" id="submit-blog-filter"> </form> <div class="row"> <div class="col-md-9 left-content"> <div class="post-body"> <div class="blogs"> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://www.tothenew.com/blog/unveiling-the-power-of-design-patterns-in-javascript/"/> <div class="date-header"> <time datetime="2024-04-11T13:57:56+05:30" itemprop="datePublished"> </time> <time datetime="2024-04-11T13:57:56+05:30" itemprop="dateModified"> </time> </div> <header class="entry-header"> <h1 itemprop="headline">Unveiling the Power of Design Patterns in JavaScript</h1> </header> <div class="tag"> <ul> <li> <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/technology/" title="View all posts in Technology">Technology</a> </li> </ul> </div> <div class="date-author">11 / Apr / 2024 <em>by <a class="url fn n" href="https://www.tothenew.com/blog/author/himanshi/" title="View all posts by Himanshi Gera" rel="nofollow">Himanshi Gera</a></em> <a href="https://www.tothenew.com/blog/unveiling-the-power-of-design-patterns-in-javascript/#respond"><span class="leave-reply">0 comments</span></a> </div> <div class="share-this"> <div class="share-heading">Share this blog</div>  <script type="text/javascript" src="//tps.tothenew.com/js/300/addthis_widget.js#pubid=ra-56efa64a8b443494"></script> <div class="addthis_inline_share_toolbox" style="display:inline;"></div> </div> <div itemprop="description"> <div class="addtoany_share_save_container addtoany_content addtoany_content_top"><div class="a2a_kit a2a_kit_size_32 addtoany_list" data-a2a-url="https://www.tothenew.com/blog/unveiling-the-power-of-design-patterns-in-javascript/" data-a2a-title="Unveiling the Power of Design Patterns in JavaScript"><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2Funveiling-the-power-of-design-patterns-in-javascript%2F&linkname=Unveiling%20the%20Power%20of%20Design%20Patterns%20in%20JavaScript" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_x" href="https://www.addtoany.com/add_to/x?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2Funveiling-the-power-of-design-patterns-in-javascript%2F&linkname=Unveiling%20the%20Power%20of%20Design%20Patterns%20in%20JavaScript" title="X" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_linkedin" href="https://www.addtoany.com/add_to/linkedin?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2Funveiling-the-power-of-design-patterns-in-javascript%2F&linkname=Unveiling%20the%20Power%20of%20Design%20Patterns%20in%20JavaScript" title="LinkedIn" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2Funveiling-the-power-of-design-patterns-in-javascript%2F&linkname=Unveiling%20the%20Power%20of%20Design%20Patterns%20in%20JavaScript" title="Email" rel="nofollow noopener" target="_blank"></a></div></div><p><span style="font-weight: 400;">As JavaScript developers, we’re constantly faced with the challenge of writing code that is not only functional but also maintainable and scalable. Design patterns offer us proven solutions to common problems encountered in software development. The design patterns are backed by a strong community of developers which makes them safe to use. Many developers face the same problems which could be solved by the same solutions, aka, design patterns. In this blog post, we’ll delve into five widely used design patterns in JavaScript, exploring their real-life applications and providing examples to illustrate their effectiveness.</span></p> <ol> <li><b>Singleton Pattern:</b><b><br /> </b><span style="font-weight: 400;"><span style="font-weight: 400;">The Singleton pattern ensures that a class has only one instance and provides a global point of access to it. This pattern is particularly useful in scenarios where there should be only one instance of a class throughout the application, such as managing a configuration object or a database connection.</span></span> </p> <p><i>Use Case: </i>Consider a logging service in a web application. You want to ensure that there is a single logger instance that is accessible across different modules.<br /> <img decoding="async" class="alignnone wp-image-61194 size-full" src="https://www.tothenew.com/blog/wp-ttn-blog/uploads/2024/04/Screenshot-2024-04-04-at-4.14.34-PM.png" alt="" width="2080" height="700" srcset="/blog/wp-ttn-blog/uploads/2024/04/Screenshot-2024-04-04-at-4.14.34-PM.png 2080w, /blog/wp-ttn-blog/uploads/2024/04/Screenshot-2024-04-04-at-4.14.34-PM-300x101.png 300w, /blog/wp-ttn-blog/uploads/2024/04/Screenshot-2024-04-04-at-4.14.34-PM-1024x345.png 1024w, /blog/wp-ttn-blog/uploads/2024/04/Screenshot-2024-04-04-at-4.14.34-PM-768x258.png 768w, /blog/wp-ttn-blog/uploads/2024/04/Screenshot-2024-04-04-at-4.14.34-PM-1536x517.png 1536w, /blog/wp-ttn-blog/uploads/2024/04/Screenshot-2024-04-04-at-4.14.34-PM-2048x689.png 2048w, /blog/wp-ttn-blog/uploads/2024/04/Screenshot-2024-04-04-at-4.14.34-PM-624x210.png 624w" sizes="(max-width: 2080px) 100vw, 2080px" /> </li> <li><b>Factory Pattern:<br /> </b>The Factory pattern is used to create objects without specifying the exact class of object that will be created. It provides a way to delegate the instantiation logic to child classes. This pattern is beneficial when you need to create multiple objects of similar types. </p> <p><i>Use Case:</i> In a web application, you may need to create different types of users, such as regular users, admins, and moderators. Using the Factory pattern, you can abstract the object creation process and create user instances based on their roles.<br /> <img decoding="async" loading="lazy" class="alignnone wp-image-61195 size-full" src="https://www.tothenew.com/blog/wp-ttn-blog/uploads/2024/04/factory.png" alt="" width="2101" height="1481" srcset="/blog/wp-ttn-blog/uploads/2024/04/factory.png 2101w, /blog/wp-ttn-blog/uploads/2024/04/factory-300x211.png 300w, /blog/wp-ttn-blog/uploads/2024/04/factory-1024x722.png 1024w, /blog/wp-ttn-blog/uploads/2024/04/factory-768x541.png 768w, /blog/wp-ttn-blog/uploads/2024/04/factory-1536x1083.png 1536w, /blog/wp-ttn-blog/uploads/2024/04/factory-2048x1444.png 2048w, /blog/wp-ttn-blog/uploads/2024/04/factory-624x440.png 624w" sizes="(max-width: 2101px) 100vw, 2101px" /></p> <p> </li> <li><b>Observer Pattern:</b><span style="font-weight: 400;"><br /> </span><span style="font-weight: 400;">The Observer pattern is a behavioral design pattern where an object (known as the subject) maintains a list of its dependents (observers) and notifies them of any state changes. This pattern is commonly used in event handling systems, where multiple objects need to be notified of changes in the application state.</span><span style="font-weight: 400;"><br /> </span><span style="font-weight: 400;"><br /> </span><i><span style="font-weight: 400;">Use Case:</span></i><span style="font-weight: 400;"><span style="font-weight: 400;"> Consider a stock trading application where multiple users are interested in updates to stock prices. Whenever the price of a stock changes, all subscribed users should be notified.<br /> <img decoding="async" loading="lazy" class="alignnone size-full wp-image-61196" src="https://www.tothenew.com/blog/wp-ttn-blog/uploads/2024/04/observer.png" alt="" width="2093" height="1442" srcset="/blog/wp-ttn-blog/uploads/2024/04/observer.png 2093w, /blog/wp-ttn-blog/uploads/2024/04/observer-300x207.png 300w, /blog/wp-ttn-blog/uploads/2024/04/observer-1024x705.png 1024w, /blog/wp-ttn-blog/uploads/2024/04/observer-768x529.png 768w, /blog/wp-ttn-blog/uploads/2024/04/observer-1536x1058.png 1536w, /blog/wp-ttn-blog/uploads/2024/04/observer-2048x1411.png 2048w, /blog/wp-ttn-blog/uploads/2024/04/observer-624x430.png 624w" sizes="(max-width: 2093px) 100vw, 2093px" /></span></span> </li> <li><b>Decorator Pattern:</b><b><br /> </b><span style="font-weight: 400;"><span style="font-weight: 400;">The Decorator pattern allows behavior to be added to individual objects dynamically without affecting the behavior of other objects from the same class. This pattern is useful for adding functionalities to objects without modifying their structure.</span></span> </p> <p><i>Use Case:</i> Imagine you have a text editor application, and you want to add additional formatting options to text, such as bold, italic, and underline. Using the Decorator pattern, you can dynamically add these formatting options to the text.<br /> <img decoding="async" loading="lazy" class="alignnone size-full wp-image-61197" src="https://www.tothenew.com/blog/wp-ttn-blog/uploads/2024/04/Decorator.png" alt="" width="2075" height="1417" srcset="/blog/wp-ttn-blog/uploads/2024/04/Decorator.png 2075w, /blog/wp-ttn-blog/uploads/2024/04/Decorator-300x205.png 300w, /blog/wp-ttn-blog/uploads/2024/04/Decorator-1024x699.png 1024w, /blog/wp-ttn-blog/uploads/2024/04/Decorator-768x524.png 768w, /blog/wp-ttn-blog/uploads/2024/04/Decorator-1536x1049.png 1536w, /blog/wp-ttn-blog/uploads/2024/04/Decorator-2048x1399.png 2048w, /blog/wp-ttn-blog/uploads/2024/04/Decorator-624x426.png 624w" sizes="(max-width: 2075px) 100vw, 2075px" /> </li> <li><b>Module Pattern:</b><b><br /> </b><span style="font-weight: 400;"><span style="font-weight: 400;">The Module pattern allows you to create encapsulated modules with private and public methods and variables. It helps in keeping the code clean and organized by preventing pollution of the global namespace.</span></span> </p> <p><i>Use Case:</i> In a web application, you may have utility functions or helper methods that are used across different modules. Using the Module pattern, you can encapsulate these methods within a module and expose only the necessary functions to other parts of the application.<br /> <img decoding="async" loading="lazy" class="alignnone size-full wp-image-61198" src="https://www.tothenew.com/blog/wp-ttn-blog/uploads/2024/04/module.png" alt="" width="2088" height="793" srcset="/blog/wp-ttn-blog/uploads/2024/04/module.png 2088w, /blog/wp-ttn-blog/uploads/2024/04/module-300x114.png 300w, /blog/wp-ttn-blog/uploads/2024/04/module-1024x389.png 1024w, /blog/wp-ttn-blog/uploads/2024/04/module-768x292.png 768w, /blog/wp-ttn-blog/uploads/2024/04/module-1536x583.png 1536w, /blog/wp-ttn-blog/uploads/2024/04/module-2048x778.png 2048w, /blog/wp-ttn-blog/uploads/2024/04/module-624x237.png 624w" sizes="(max-width: 2088px) 100vw, 2088px" /></li> </ol> <p><span style="font-weight: 400;">Design patterns are indispensable tools for JavaScript developers, aiding in the creation of robust, maintainable, and scalable applications.We’ve explored five of the most widely used design patterns in JavaScript: Singleton, Factory, Observer, Decorator, and Module. Each pattern addresses specific concerns and offers solutions to common problems encountered during software development.</span></p> <p><span style="font-weight: 400;">While these five design patterns are fundamental and widely used, it’s essential to note that there are numerous other design patterns available for exploration. Each pattern has its strengths and use cases, and mastering them empowers developers to architect robust and scalable applications. By understanding and applying design patterns effectively, developers can write cleaner, more maintainable code that is easier to understand and extend. So, keep exploring, experimenting, and incorporating design patterns into your projects to improve code quality and productivity.</span></p> <div class="ap-custom-wrapper"></div><div class="addtoany_share_save_container addtoany_content addtoany_content_bottom"><div class="a2a_kit a2a_kit_size_32 addtoany_list" data-a2a-url="https://www.tothenew.com/blog/unveiling-the-power-of-design-patterns-in-javascript/" data-a2a-title="Unveiling the Power of Design Patterns in JavaScript"><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2Funveiling-the-power-of-design-patterns-in-javascript%2F&linkname=Unveiling%20the%20Power%20of%20Design%20Patterns%20in%20JavaScript" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_x" href="https://www.addtoany.com/add_to/x?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2Funveiling-the-power-of-design-patterns-in-javascript%2F&linkname=Unveiling%20the%20Power%20of%20Design%20Patterns%20in%20JavaScript" title="X" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_linkedin" href="https://www.addtoany.com/add_to/linkedin?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2Funveiling-the-power-of-design-patterns-in-javascript%2F&linkname=Unveiling%20the%20Power%20of%20Design%20Patterns%20in%20JavaScript" title="LinkedIn" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2Funveiling-the-power-of-design-patterns-in-javascript%2F&linkname=Unveiling%20the%20Power%20of%20Design%20Patterns%20in%20JavaScript" title="Email" rel="nofollow noopener" target="_blank"></a></div></div> </div> <div class="sharethis-text"> <div class="pre-loader">FOUND THIS USEFUL? SHARE IT</div> </div> <div class="share-this footer-sharethis" style="text-align:center;"> <div class="addthis_inline_share_toolbox"></div> </div> <div class="tag-cloud"> <h3>Tag -</h3> <a href="https://www.tothenew.com/blog/tag/javascript/" rel="tag nofollow">javascript</a> <a href="https://www.tothenew.com/blog/tag/javascript-design-patterns/" rel="tag nofollow">JavaScript Design Patterns</a> <a href="https://www.tothenew.com/blog/tag/js/" rel="tag nofollow">js</a> <a href="https://www.tothenew.com/blog/tag/web-development/" rel="tag nofollow">Web Development</a> </div> </div> </div> <div class="post-body"> <section id="comment-reply"> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/unveiling-the-power-of-design-patterns-in-javascript/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://www.tothenew.com/blog/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><div class="g-recaptcha" data-sitekey=" site key"></div> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='61199' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div> </div> </section> </div> </div> <div class="col-md-3 sidebar"> <div class="sidebar-in"> <div class="resources" itemprop="author"> <div itemscope itemtype="http://schema.org/Person"> <div class="thumb"><img alt='' src='https://newersworld-sf-static.tothenew.net/prod/profilePicFolder/82c30ae5-e8e8-4e24-bdcd-4a9c0617e81d_932-Himanshi-.-PROFILEPICTURE.jpeg' srcset='https://newersworld-sf-static.tothenew.net/prod/profilePicFolder/82c30ae5-e8e8-4e24-bdcd-4a9c0617e81d_932-Himanshi-.-PROFILEPICTURE.jpeg 2x' class='avatar avatar-90 photo' height='90' width='90' loading='lazy' decoding='async'/></div> <div class="name" itemprop="name">by<br/><a href="https://www.tothenew.com/blog/author/himanshi/" rel="nofollow">Himanshi Gera</a></div> <p></p> <meta itemprop="homeLocation" content="INDIA"> </div> </div> <div class="suggested"> <p>YOU MAY ALSO LIKE</p><div class='yarpp yarpp-related yarpp-related-widget yarpp-template-list'> <ol><li><a href="https://www.tothenew.com/blog/lets-know-more-about-angular-module/" rel="bookmark">Lets know more about angular module</a></li><li><a href="https://www.tothenew.com/blog/manually-bootstrapping-an-angularjs-application/" rel="bookmark">Manually Bootstrapping an AngularJS Application</a></li><li><a href="https://www.tothenew.com/blog/comparison-between-angular-and-polymer/" rel="bookmark">Comparison between Angular and Polymer</a></li></ol> </div> </div> <div class="followUs"> <div class="heading"><img src="https://www.tothenew.com/blog/wp-content/themes/ttn/images/followous.jpg" /></div> <a href="https://www.facebook.com/tothenewdigital/" rel="nofollow" class="st_facebook_custom" onclick="window.open(this.href); return false;" st_processed="no"></a> <a href="https://twitter.com/TOTHENEW" rel="nofollow" class="st_twitter_custom" onclick="window.open(this.href); return false;" st_processed="no"></a>  <a href="https://www.linkedin.com/company/tothenew" rel="nofollow" class="st_linkedin_custom" onclick="window.open(this.href); return false;" st_processed="no"></a> <a href="https://www.glassdoor.co.in/Overview/Working-at-TO-THE-NEW-EI_IE1011609.11,21.htm" rel="nofollow" class="glassdoor-follow" onclick="window.open(this.href); return false;" st_processed="no">Glassdoor</a> </div> </div> </div> <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject"> <meta itemprop="url" content="http://1.gravatar.com/avatar/7b1612e6049d9fa3f2389defb2df55a3?s=90&d=http%3A%2F%2Fwww.tothenew.com%2Fblog%2Fwp-content%2Fthemes%2Fttn%2Fimages%2Fdefault-avatar.png%3Fs%3D90&r=G"> <meta itemprop="width" content="90"> <meta itemprop="height" content="90"> </span> <span itemprop="publisher" itemscope itemtype="https://schema.org/Organization"> <span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <meta itemprop="url" content="https://www.tothenew.com/blog/wp-content/themes/ttn/images/logo.jpg"> </span> <meta itemprop="name" content="TO THE NEW"> </span> </div> </div> </div> </div> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.ellipsis.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.suggested .heading a').trunk8({ lines: 2 }); jQuery('#commentform .comment-form-author input').val(''); jQuery('#commentform .comment-form-email input').val(''); jQuery('#commentform .comment-form-comment textarea').val(''); jQuery('#commentform .comment-form-author input').after("<span id='comment-name' class='comment-span'></span>"); jQuery('#commentform .comment-form-email input').after("<span id='comment-email' class='comment-span'></span>"); jQuery('#commentform .comment-form-comment textarea').after("<span id='comment-comment' class='comment-span'></span>"); jQuery('.comment-span').css('color','red'); // alert('Hello'); jQuery('#submit').click(function(){ // $ a=jQuery('span').attr('class'); // alert($a); var name=jQuery('#commentform .comment-form-author input').val(); var email=jQuery('#commentform .comment-form-email input').val(); var comment=jQuery('#commentform .comment-form-comment textarea').val(); var pattern = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/; if (name== '') { // alert("Please Enter your Name"); jQuery('#comment-name').html('<strong>Please Enter Your Name</strong>'); return false; } else if (email == '') { // alert("Please Enter Your Email"); jQuery('#comment-email').html('<strong>Please Enter Your Email</strong>'); return false; } if(!pattern.test(email)) { // alert('Hii'); jQuery('#comment-email').html('<strong>Please Enter correct Email</strong>'); return false; } else if (comment == '') { // alert ("please enter Comment"); jQuery('#comment-comment').html('<strong>Please Enter Comment</strong>'); return false; } else if(comment.length>100) { jQuery('#comment-comment').html('<strong>Comment Length Should not exceed 100 Characters.</strong>'); return false; } // else{ // jQuery.ajax({ // type: "POST", // url: "simple.php", // data: // { // "name": name; // "email": email; // "comment": comment; // }, // datatype: "text", // success: function(text) { // response = text; // } // }); // } }); jQuery('#commentform .comment-form-author input').on('keypress keydown keyup',function(){ jQuery('#comment-name').empty(); }); jQuery('#commentform .comment-form-email input').on('keypress keydown keyup',function(){ jQuery('#comment-email').empty(); }); jQuery('#commentform .comment-form-comment textarea').on('keypress keydown keyup',function(){ jQuery('#comment-comment').empty(); }); }); jQuery(window).resize(function () { jQuery('.suggested .heading a').trunk8({ lines: 2 }); }); </script> <div id="subscribe-blog">  </div> <footer> <div class="gry-bg"> <div class="container"> <div class="footer-menus"> <nav> <div class="f-heading">Who We Are</div> <ul class="clearfix menu"> <li class="menu-item"><a rel="dofollow" href="/about-us">About</a></li> <li class="menu-item"><a rel="dofollow" href="/leadership">Leadership</a></li> <li class="menu-item"><a href="/partnership" rel="dofollow">Partners</a></li> <li class="menu-item"><a rel="dofollow" href="/press-releases">Press Releases</a></li> <li class="menu-item"><a rel="dofollow" href="/awards">Awards</a></li> <li class="menu-item"><a rel="dofollow" href="/media-coverage">Media Coverage</a></li> <li class="menu-item"><a rel="dofollow" href="/events">Events</a></li> <li class="menu-item"><a href="/our-social-impact" rel="dofollow">CSR</a> </li> <li class="menu-item"><a rel="dofollow" href="/privacy-policy">Privacy Policy</a></li> <li class="menu-item"><a rel="dofollow" href="/modern-slavery-statement">Modern Slavery Statement</a></li> </ul> </nav> <nav> <div class="f-heading">What We Do</div> <ul class="clearfix menu"> <li class="menu-item"><a href="/services" rel="dofollow">Services</a></li> <li class="menu-item"><a href="/technologies"rel="dofollow">Technologies</a></li> <li class="menu-item"><a href="/solutions" rel="dofollow">Solutions</a> </li> <li class="menu-item"><a href="/industries" rel="dofollow">Industries</a> </li> <li class="menu-item"><a rel="dofollow" href="/idanim">Idanim</a></li> </ul> </nav> <nav> <div class="f-heading">Insights</div> <ul class="clearfix menu"> <li class="menu-item"><a rel="dofollow" href="/success-stories">Success Stories</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=67">Whitepapers</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=66">Webinars</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=652">Podcasts</a></li> <li class="menu-item"><a rel="dofollow" href="/blog/">Blogs</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=62">E-Books</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=162">Magazines</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=574">Spotlight</a></li> </ul> </nav> <nav> <div class="f-heading">Contact Us</div> <ul class="clearfix menu"> <li class="menu-item"><a rel="dofollow" href="/contact-us?q=request-form">Request for Services</a></li> <li class="menu-item"><a rel="dofollow" href="/contact-us?q=join-form">Join us!</a></li> <li class="menu-item"><a rel="dofollow" href="/contact-us?q=media-form">Media Queries</a></li> <li class="menu-item"><a rel="dofollow" href="/careers">Career</a></li> <li class="menu-item"><a rel="dofollow" href="/responsible-disclosure">Responsible Disclosure</a></li> </ul> </nav> </div> <div class="footer-right"> <div class="heading">Connect With Us</div> <div class="social"> <ul> <li class="ln"><a href="https://www.linkedin.com/company/tothenew" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li> <li class="twt"><a href="https://twitter.com/tothenew" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li> <li class="fb"><a href="https://www.facebook.com/TOTHENEWDigital/" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li>  <li class="Ytube"><a href="https://www.youtube.com/c/tothenew" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li> <li class="glassdoor-footer"><a href="https://www.glassdoor.co.in/Overview/Working-at-TO-THE-NEW-EI_IE1011609.11,21.htm" onclick="window.open(this.href);return false;" rel="dofollow">Glassdoor</a></li> </ul> </div> <div class="copyright"> <img alt="ttn logo" src="/cms-assets/s3fs-public/2021-08/ttnweb.svg"><p>©2024 TO THE NEW</p> </div> </div> </div> </div> </footer> <div id="bottom"> <div class="container"> <div class="row"> <div class="col-xs-12 servicesSection"> <div class="heading">Services</div> <span class="bottom-arrow-down"></span> <ul class="clearfix"> <li class="clearfix"> <span>Cloud & DevOps</span> <ul class="clearfix">   <li><a href="/devops-automation-consulting" title="DevOps as a Service">DevOps as a Service</a></li> <li><a href="/devops-aws" title="DevOps on AWS">DevOps on AWS</a></li> <li><a href="/devops-chef-puppet-docker" title="DevOps Tools">DevOps Tools</a></li>  </ul> </li> <li class="clearfix"> <span>Backend Engineering</span> <ul class="clearfix"> <li><a href="/python-development" title="Python Development">Python Development</a></li> <li><a href="/mean-node-js-development-consulting" title="Node.js Development">Node.js Development</a></li> <li><a href="/grails-application-development" title="Grails Development">Grails Development</a></li> <li><a href="/java-development-services" title="Java Development">Java Development</a></li> <li><a href="/mean-stack-web-development-consulting" title="MEAN Development">MEAN Development</a></li>  </ul> </li> <li class="clearfix"> <span>Digital Marketing</span> <ul> <li><a href="/digital-marketing/email-marketing" title="Email Marketing">Email Marketing</a></li> <li><a href="/digital-marketing/search-engine-optimization" title="Search Engine Optimization">Search Engine Optimization</a></li> <li><a href="/digital-marketing/marketing-automation" title="Marketing Automation">Marketing Automation</a></li> <li><a href="/digital-marketing/social-listening" title="Social Listening">Social Listening</a></li> <li><a href="/digital-marketing/digital-analytics" title="">Digital Analytics</a></li> <li><a href="/digital-marketing/analytics" title="Web Analytics">Web Analytics</a></li> <li><a href="/digital-marketing" title="Digital Marketing">Digital Marketing</a></li> <li><a href="/digital-marketing/influencer-marketing" title="Influencer Marketing">Influencer Marketing</a></li> <li><a href="/digital-marketing/content-marketing" title="Content Marketing">Content Marketing</a></li> <li><a href="/digital-marketing/social-media-marketing" title="Social Media Marketing">Social Media Marketing</a></li> <li><a href="/digital-marketing/creative-strategy" title="Creative Strategy">Creative Strategy</a></li> <li><a href="/digital-marketing/digital-campaigns-activations" title="Digital Campaigns and Activations">Digital Campaigns and Activations</a></li> <li><a href="/digital-marketing/media-buying-planning-company" title="Media planning and buying">Media planning and buying</a></li> <li><a href="/digital-marketing/search-marketing" title="Search Marketing">Search Marketing</a></li> <li><a href="/digital-marketing/digital-strategy" title="Digital Strategy">Digital Strategy</a></li> </ul> </li> <li class="clearfix"> <span>Web Content Management</span> <ul class="clearfix"> <li><a href="/wcm/web-content-management-services" title="Web Content Management">Web Content Management</a></li> <li><a href="/wcm/cq-aem-development-consulting" title="AEM Development">AEM Development</a></li> <li><a href="/wcm/drupal-development-consulting-services" title="Drupal Development">Drupal Development</a></li>  </ul> </li> <li class="clearfix"> <span>Digital Transformation</span> <ul> <li><a href="/digital-transformation" title="Digital Transformation">Digital Transformation</a></li> </ul> </li> <li class="clearfix"> <span>Experience Design</span> <ul class="clearfix"> <li><a href="/experience-design" title="Experience Design">Experience Design</a></li> </ul> </li> <li class="clearfix"> <span>Mobility</span> <ul class="clearfix"> <li><a href="/mobile-application-development-services" title="Mobility">Mobility</a></li> <li><a href="/mobile-ios-application-development-services" title="iOS App Development">iOS App Development</a></li> <li><a href="/mobile-android-application-development-services" title="Android Development">Android Development</a></li> <li><a href="/digital-engineering/smart-tv-apps" title="Smart TV App Development">Smart TV App Development</a></li> <li><a href="/testing/automated-mobile-application-testing" title="Mobile Automation Testing">Mobile Automation Testing</a></li> <li><a href="/mobile-hybrid-application-development" title="Hybrid Application Development">Hybrid Application Development</a></li>  </ul> </li> <li class="clearfix"> <span>Frontend Engineering</span> <ul class="clearfix"> <li><a href="/front-end-angularjs-development" title="AngularJS Development">AngularJS Development</a></li> <li><a href="/react-native-development-services" title="React Native Development">React Native Development</a></li> <li><a href="/react-js-development-consulting-company" title="React js Development">React js Development</a></li> </ul> </li>  <li class="clearfix"> <span>Video Solutions</span> <ul class="clearfix"> <li><a href="/digital-video-solutions" title="Video Solutions">Video Solutions</a></li>  <li><a href="/digital-multiscreen-video-solution" title="Multiscreen Solutions">Multiscreen Solutions</a></li> </ul> </li> <li class="clearfix"> <span>Software Development</span> <ul class="clearfix"> <li><a href="/offshore-software-development-company" title="Offshore Software Development">Offshore Software Development</a></li> <li><a href="/outsourced-software-product-development" title="Outsourced Software Product Development">Outsourced Software Product Development</a></li> <li><a href="/custom-software-development-company" title="Custom Software Development">Custom Software Development</a></li> <li><a href="/bespoke-software-development-company" title="Bespoke Software Development">Bespoke Software Development</a></li> </ul> </li> <li class="clearfix"> <span>Web Application Development</span> <ul class="clearfix"> <li><a href="/custom-web-application-development-company" title="Custom Web Application Development">Custom Web Application Development</a></li> <li><a href="/outsource-web-application-development" title="Outsource Web Application Development">Outsource Web Application Development</a></li> </ul> </li> <li class="clearfix"> <span>Development Center</span> <ul class="clearfix"> <li><a href="/offshore-development-center" title="Offshore Development Center">Offshore Development Center</a></li> </ul> </li> </ul> </div> </div> </div> </div> <script type="text/javascript"> jQuery('body a').each((index, element) => { if (element.href.match("^http://")) { element.href = element.href.replace('http://', 'https://'); } else if (element.href.match('^www.')) { element.href = 'https://' + element.href; } }) </script> <link rel='stylesheet' id='yarppRelatedCss-css' href='https://www.tothenew.com/blog/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=5.30.3' type='text/css' media='all' /> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/metronet-profile-picture/js/mpp-frontend.js?ver=2.6.0' id='mpp_gutenberg_tabs-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-includes/js/comment-reply.min.js?ver=6.2.2' id='comment-reply-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/themes/ttn/js/navigation.js?ver=20140711' id='ttn_new-navigation-js'></script> <script type='text/javascript' id='elastic-search-js-extra'> /* <![CDATA[ */ var ajax_object = {"ajax_url":"https:\/\/www.tothenew.com\/blog\/wp-admin\/admin-ajax.php","nonce":"8d488f2c30"}; /* ]]> */ </script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/themes/ttn/js/elastic-search.js' id='elastic-search-js'></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/post-block.js"></script> <script type="text/javascript"> jQuery(document).ajaxComplete(function(){ //for box height var highestBox = 0; jQuery('.latest_posts_wrapper .border .blue-box').each(function(){ if(jQuery(this).height() > highestBox){ highestBox = jQuery(this).height(); } }); jQuery('.latest_posts_wrapper .border .blue-box').height(highestBox); }); jQuery(document).ready(function(){ //for box height var highestBox = 0; jQuery('.latest_posts_wrapper .border .blue-box').each(function(){ if(jQuery(this).height() > highestBox){ highestBox = jQuery(this).height(); } }); jQuery('.latest_posts_wrapper .border .blue-box').height(highestBox); setTimeout(function(){ jQuery("#ap_form_post_content_1-tmce").trigger('click'); }, 2000); }); jQuery(document).ready(function(){ setTimeout(function(){ jQuery("#postcontent-tmce").trigger('click'); }, 2000); }); jQuery(document).ready(function(){ jQuery(function (e) { // jQuery("#cat").selectbox(); // jQuery(".postform").selectbox(); jQuery('.normal .main-cat .heading').click(function () { jQuery(this).siblings().slideToggle(); jQuery(this).parent().toggleClass('active'); jQuery('.overlay-cat').toggleClass('hide'); }); jQuery('.overlay-cat').click(function () { jQuery('.normal .main-cat .heading').parent().removeClass('active'); jQuery('.cat-dropdown').slideUp(); jQuery('.overlay-cat').toggleClass('hide'); }); jQuery('.subscribeButton').click(function(){ //jQuery('body').append(subscribeModal); jQuery("#subModal").modal('show'); //jQuery('.pop').addClass('show'); }); }); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { jQuery('.register').find(':submit').click(function(e) { if( ! isGmail( jQuery('#user_email').val() ) ) { e.preventDefault(); if (jQuery('.user-registration .field-user_email .form-row .buisness-error').length<1) { jQuery('.user-registration .field-user_email .form-row').append('<label class="user-registration-error buisness-error">You can only register with an @tothenew.com email address!</label>'); } return false; } else{ jQuery('.user-registration .field-user_email .form-row .buisness-error').remove(); } }); jQuery('#user_email').on("keypress keydown keyup",function(e) { if( ! isGmail( jQuery('#user_email').val() ) ) { if (jQuery('.user-registration .field-user_email .form-row .buisness-error').length<1) { jQuery('.user-registration .field-user_email .form-row').append('<label class="user-registration-error buisness-error">You can only register with an @tothenew.com email address!</label>'); } } else{ jQuery('.user-registration .field-user_email .form-row .buisness-error').remove(); } }); }); function isGmail( address ) { if (address.indexOf("@")>0 && address.indexOf(".")>0) { if (address.substr(address.indexOf(".")+1).length>0) { return address.indexOf("@tothenew.com", this.length - 10) !== -1; } } return true; } jQuery(window).scroll(function(){ var headerHeight = jQuery('#header').innerHeight(); var resource = jQuery('.resources').height(); var suggested = jQuery('.suggested').height(); var totalHeight = headerHeight + resource + suggested + 360; var sticky = jQuery('.white'); var sticky1 = jQuery('.followUs'); scroll = jQuery(window).scrollTop(); if (scroll >= 300){ sticky.addClass('fixed'); jQuery('#blog-section').css('padding-top', '91px'); }else { sticky.removeClass('fixed'); jQuery('#blog-section').css('padding-top', '19px'); } if (scroll >= totalHeight){ var widthS = jQuery('.suggested').width()+31; sticky1.addClass('fixed1'); sticky1.css('width', widthS); }else { sticky1.removeClass('fixed1'); sticky1.css('width', '100%'); } }); jQuery(document).ready(function(){ }); jQuery(document).ready(function(){ bindFooterScroller(); jQuery(".year-data").click(function(){ jQuery(this).parents('li').find('.blog-month').slideToggle(); jQuery(this).find('.plus-icon').toggleClass('active'); jQuery(this).parent().siblings().find('.plus-icon').removeClass('active'); jQuery(this).parent().siblings().children().next().slideUp(); return false; }); jQuery('.burger-container').click(function(){ jQuery(this).parent().parent().find('#menu').toggleClass('menu-opened'); }); jQuery('.f-heading').on('click', function () { jQuery(this).parent().toggleClass('visible'); }); var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); if (jQuery(window).width() <= 1024){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '75%'); } if (jQuery(window).width() <= 640){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); } }); jQuery(window).resize(function(){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); if (jQuery(window).width() <= 1024){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '75%'); } if (jQuery(window).width() <= 640){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); } }); $header = jQuery("#header"), $clone = $header.before($header.clone().addClass("clone")); jQuery(window).scroll(function () { jQuery("#header").toggleClass("down", (jQuery(window).scrollTop() > 100)); }) jQuery.fn.scrollStopped = function (callback) { var jQuerythis = jQuery(this), self = this; jQuerythis.scroll(function () { if (jQuerythis.data('scrollTimeout')) { clearTimeout(jQuerythis.data('scrollTimeout')); } jQuerythis.data('scrollTimeout', setTimeout(callback, 250, self)); }); }; function bindFooterScroller() { jQuery(window).scroll(function () { var headerHeight = jQuery('#header').innerHeight(); var sticky1 = jQuery('.followUs'); var sticky = jQuery('.white'); var footerElement = jQuery('#subscribe-blog'); // if (isScrolledIntoView(footerElement)) { // sticky.hide(); // sticky1.hide(); // //jQuery('#blog-section').css('padding-top', '19px'); // } // else { var headerHeight = jQuery('#header').innerHeight(); var resource = jQuery('.resources').height(); var suggested = jQuery('.suggested').height(); var totalHeight = headerHeight + resource + suggested + 360; var sticky1 = jQuery('.followUs'); sticky.show(); sticky1.show(); var sticky = jQuery('.white'); var sticky1 = jQuery('.followUs'); scroll = jQuery(window).scrollTop(); if (scroll >= 300){ jQuery('#blog-section').css('padding-top', '91px'); jQuery('.controls').css('display','block'); }else { //jQuery('#blog-section').css('padding-top', '19px'); jQuery('.controls').css('display','none'); } if (scroll >= totalHeight){ var widthS = jQuery('.suggested').width()+31; sticky1.addClass('fixed1'); sticky1.css('width', widthS); }else { sticky1.removeClass('fixed1'); sticky1.css('width', '100%'); } // } }) } function isScrolledIntoView(jQueryelem) { var docViewTop = jQuery(window).scrollTop() + jQuery(window).height(); var elemTop = jQueryelem.offset().top; return (elemTop <= docViewTop); } function bindLoaderScroller() { jQuery(window).scroll(function () { var loaderElement = jQuery('#loader'); if (isScrolledIntoView1(loaderElement)) { setTimeout(function(){ jQuery(".left-content .border:eq(9), .left-content .border:eq(10), .left-content .border:eq(11), .left-content .border:eq(12), .left-content .border:eq(13), .left-content .border:eq(14), .left-content .border:eq(15), .left-content .border:eq(16),.left-content .border:eq(17), .more-post").fadeIn( "slow" ); jQuery('#loader').fadeOut("slow"); jQuery('.left-content').isotope({ itemSelector: '.border' }); }, 2000); } }) } function isScrolledIntoView1(jQueryelem1) { var docViewTop = jQuery(window).scrollTop() + jQuery(window).height(); var elemTop = jQueryelem1.offset().top; return (elemTop <= docViewTop); } jQuery(window).load(function(){ var Wwidth = jQuery(window).width(); if ((Wwidth <=767)) { var rsW = jQuery('.resources1 .banner-text').innerHeight(); jQuery('.resources1 .overlay img').css('height', rsW); }else{ jQuery('.resources1 .overlay img').css('height', 'auto'); } }); jQuery(window).resize(function(){ var Wwidth = jQuery(window).width(); if ((Wwidth <=767)) { var rsW = jQuery('.resources1 .banner-text').innerHeight(); jQuery('.resources1 .overlay img').css('height', rsW); }else{ jQuery('.resources1 .overlay img').css('height', 'auto'); } }); var bcrumb1; jQuery(document).ready(function(){ var all = []; var s = 0; jQuery('.breadcrumbs li').each(function () { all[s++] = jQuery(this).text().trim(); }); bcrumb1 = all.join('|'); }); </script> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "Organization", "address": { "@type": "PostalAddress", "addressLocality": "New Jersey, USA", "postalCode": "08902-3040", "streetAddress": "1588 US Highway 130 - North Brunswick" }, "name" : "TO THE NEW", "url" : "http://www.tothenew.com", "logo" : "https://www.tothenew.com/blog/wp-content/themes/ttn/images/logo-large.png", "sameAs" : [ "https://www.linkedin.com/company/tothenew", "https://twitter.com/TOTHENEW", "https://www.facebook.com/TOTHENEWDigital/", "https://plus.google.com/+TOTHENEW", "https://www.youtube.com/c/tothenew", "http://www.slideshare.net/tothenewtech", "http://www.slideshare.net/tothenew" ] } </script> <div class="overlay-cat hide"></div> <div class="modal fade" id="subModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="subscribe-popup"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>  <div class="subs-hbsp-form">  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> <script> hbspt.forms.create({ portalId: "481864", formId: "7a02d2db-8a8f-44bb-94ac-85b3421eea2d" }); </script> </div> </div> </div> </div> <div id="instructionModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Tips for writing a blog</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <iframe src="https://www.tothenew.com/blog/wp-content/plugins/ttn-blog-enhancements//docs/how-to-write-a-blog.pdf" style="width: 100%; height:500px;" frameborder="0"></iframe> </div> </div> </div> </div> <div id="captionHelpModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Learn how to write a caption</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <iframe src="https://www.tothenew.com/blog/wp-content/plugins/ttn-blog-enhancements//docs/how-to-add-perfect-caption.pdf" style="width: 100%; height:500px;" frameborder="0"></iframe> </div> </div> </div> </div> <script> $(document).ready(function(){ }); </script> </body> </html>

CINXE.COM

Unveiling the Power of Design Patterns in JavaScript | TO THE NEW Blog