{"id":5695,"date":"2022-03-15T04:13:22","date_gmt":"2022-03-15T04:13:22","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=5695"},"modified":"2022-03-15T05:10:16","modified_gmt":"2022-03-15T05:10:16","slug":"module-design-pattern","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/module-design-pattern\/","title":{"rendered":"Module Design Pattern"},"content":{"rendered":"

The Module Pattern is the most common design pattern<\/a> used in JavaScript. It keeps the particular code block independent from the other components. It wraps a set of variables and functions together in a particular scope. Module patterns enable better maintainability since all the related code can be encapsulated inside a single scope. This functionality is in the form of modules, and since we can reuse them, we do not need to define them again.<\/p>\n

We can allow some properties and functions to be accessible from outside of the scope. as well as limiting the function and properties of the object itself will allow us to implement data hiding and abstraction.<\/p>\n

Creating a module:<\/strong> Simple module patterns using an anonymous closure Anonymous closures are just functions that wrap our code in a single scope. Closures are one of the efficient features in JavaScript.
\n(function() {
\n \/\/ declare private variables and\/or functions
\n return {
\n \/\/ declare public variables and\/or functions
\n }
\n})();<\/code>
\nModule pattern implementation with the public fields Here is the example:
\nfunction StudentDetails() {
\n var name: \"Jon\";
\n var age = 30;
\n var course = \"Web Development\"
\n return {
\n\tname: name,
\n\tage: age,
\n\tcourse: course
\n }
\n}
\nvar newStudent = StudentDetails()
\nvar userName = newEmployee.name;
\nvar userAge = newEmployee.age;
\nvar userDesignation = newEmployee.designation;<\/code><\/p>\n

Now we will expand the above code, which restricts some variables to access outside the scope. Here is the example
\nfunction StudentDetails() {
\n var name: \"Jon\";
\n var age = 30;
\n var course = \"Web Development\",
\n var fee = 10000;
\n return {
\n\tname: name,
\n\tage: age,
\n\tcourse: course
\n }
\n}
\nvar newStudent = StudentDetails()
\n\/\/ This will result in \"undefined\" value
\nvar fees = newStudent.fee;<\/code><\/p>\n

Data hiding using this pattern:<\/strong> The above code creates a new variable with the name “fees”, but it is not accessible outside of the class StudentDetails<\/strong>. This variable is seen as a private variable, which is why it is not accessible outside the scope.<\/p>\n

Here is the example to access this variable from the outside the class with declaring it as a public:
\nfunction StudentDetails() {
\n var name: \"Jon\";
\n var age = 30;
\n var course = \"Web Development\",
\n var fee = 10000;
\n var calculateFees = function(amount) {
\n\ttotal = fee + amount;
\n }
\n return {
\n\tname: name,
\n\tage: age,
\n\tcourse: course,
\n\tcalculateFees: calculateFees
\n }
\n}
\nvar newStudent = StudentDetails()
\nvar userName = newStudent.calculateFees(1000);<\/code><\/p>\n

The Above code uses the private variable \u201cfee\u201d to calculate the total amount. So although the \u201cfee\u201d cannot be accessed directly using new student, it still remains in the scope so that other components can use this value for other calculations.<\/p>\n

People having good knowledge of Financial accounting can get an Accounting Certification<\/a> from StudySection to increase their chances of getting a job in this field. You can get a foundation level certification if you are new to Financial accounting or you can go for advanced level certification if you have expert level skills in Financial accounting.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

The Module Pattern is the most common design pattern used in JavaScript. It keeps the particular code block independent from<\/p>\n","protected":false},"author":1,"featured_media":5696,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[757,769],"acf":[],"yoast_head":"\nModule Design Pattern - StudySection Blog<\/title>\n<meta name=\"description\" content=\"The Module Pattern is the most common design pattern used in JavaScript. It keeps the particular code block independent from the components.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/module-design-pattern\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Module Design Pattern - StudySection Blog\" \/>\n<meta property=\"og:description\" content=\"The Module Pattern is the most common design pattern used in JavaScript. It keeps the particular code block independent from the components.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/module-design-pattern\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-15T04:13:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-15T05:10:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/03\/Module-Design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/module-design-pattern\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/module-design-pattern\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Module Design Pattern\",\"datePublished\":\"2022-03-15T04:13:22+00:00\",\"dateModified\":\"2022-03-15T05:10:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/module-design-pattern\/\"},\"wordCount\":337,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"Design\",\"Module\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/module-design-pattern\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/module-design-pattern\/\",\"url\":\"https:\/\/studysection.com\/blog\/module-design-pattern\/\",\"name\":\"Module Design Pattern - StudySection Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2022-03-15T04:13:22+00:00\",\"dateModified\":\"2022-03-15T05:10:16+00:00\",\"description\":\"The Module Pattern is the most common design pattern used in JavaScript. It keeps the particular code block independent from the components.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/module-design-pattern\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/module-design-pattern\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/module-design-pattern\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Module Design Pattern\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Module Design Pattern - StudySection Blog","description":"The Module Pattern is the most common design pattern used in JavaScript. It keeps the particular code block independent from the components.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/module-design-pattern\/","og_locale":"en_US","og_type":"article","og_title":"Module Design Pattern - StudySection Blog","og_description":"The Module Pattern is the most common design pattern used in JavaScript. It keeps the particular code block independent from the components.","og_url":"https:\/\/studysection.com\/blog\/module-design-pattern\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2022-03-15T04:13:22+00:00","article_modified_time":"2022-03-15T05:10:16+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/03\/Module-Design.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/module-design-pattern\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/module-design-pattern\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Module Design Pattern","datePublished":"2022-03-15T04:13:22+00:00","dateModified":"2022-03-15T05:10:16+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/module-design-pattern\/"},"wordCount":337,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["Design","Module"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/module-design-pattern\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/module-design-pattern\/","url":"https:\/\/studysection.com\/blog\/module-design-pattern\/","name":"Module Design Pattern - StudySection Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2022-03-15T04:13:22+00:00","dateModified":"2022-03-15T05:10:16+00:00","description":"The Module Pattern is the most common design pattern used in JavaScript. It keeps the particular code block independent from the components.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/module-design-pattern\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/module-design-pattern\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/module-design-pattern\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Module Design Pattern"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":317,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5695"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=5695"}],"version-history":[{"count":2,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5695\/revisions"}],"predecessor-version":[{"id":5698,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5695\/revisions\/5698"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/5696"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=5695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=5695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=5695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}