JavaScript Basics: How to create private & public functions in JavaScript with the Module Pattern
Tags: javascriptmodules, javascript, modulepattern, javascriptbasics
Published: 2017-12-19 22:11:18

---
title: "JavaScript Basics: How to create private & public functions in JavaScript with the Module Pattern"
published: true
tags: javascript-modules,javascript,module-pattern,javascript-basics
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*tYTDNJnDLKxf4tbmAgJFPg.png)

I’m gonna show you how you can create private functions and public methods with Vanilla JavaScript using the Module Pattern (Object Literal).

#### JavaScript Module&nbsp;Pattern

In my opinion, the JavaScript Module Pattern is the way to structure your JavaScript into more reusable pieces of&nbsp;code.

But today I’m not gonna talk about everything of that Module Pattern. Today I’m gonna show you how you can create private functions and public&nbsp;methods.

{% youtube bEYjWhqrt\_0 %}

#### Private function

A private functions is private, because it is not accessible form outside the&nbsp;module.

#### Public method

A public method is just like the private one a function. But a function inside a Object is called a&nbsp;method.

Maybe experienced developers will tell, my explanation is to easy. Please explain in the comments!

#### Self-invoking-function-expression

A JavaScript module is created by a variable. Inside that we put a “Self-invoking-function-expression”. This function is called automatically.

Enough talking, just dive into the&nbsp;code!

#### JavaScript Module

Let’s create a module called MrFrontendModule.

```
var MrFrontendModule = (function() {
  let mrFrontendMethods = {};
  let title = 'The Mr Frontend JavaScript Module';

  let addEmoticon = function() {
    return title + ' ';
  }

  mrFrontendMethods.getTitle = function() {
    return addEmoticon();
  }

  return mrFrontendMethods;
})();
```

Inside the module we&nbsp;have:

- A let mrFrontendMethods variable which is an&nbsp;Object
- A let title variable which contains a&nbsp;title
- A let addEmoticon function which returns the title variable and an additional emoticon.
- A getTitle method, which is connected to the mrFrontendMethods Object
- A return statement which returns the mrFrontendMethods Object

What is **private** inside this&nbsp;module?

- The title&nbsp;variable
- The addEmoticon function

These things are private because they are not being returned by the return statement. So they won’t be accessible outside the&nbsp;module.

What is **public** inside this&nbsp;module?

- The mrFrontendMethods Object
- The getTitle&nbsp;method

These things are public because they are returned by the return statement. So accessible via the module, to use it outside this&nbsp;module.

#### How to use the public and private method and function?

We created this module because we want to make it re-usable across our other&nbsp;modules.

Let’s start with just using the MrFrontendModule. It is very easy, just call the methods like&nbsp;this:

```
console.log(‘Title: ‘, MrFrontendModule.getTitle());
```

When this code will be executed you will see this as result: “_The_ Mr _Frontend JavaScript Module_&nbsp;”.

And that is expected!

What if we try to call the function addEmoticon like&nbsp;this?

```
console.log(‘Title: ‘, MrFrontendModule.addEmoticon());
```

We will get this&nbsp;error:

```
"TypeError: MrFrontendModule.addEmoticon is not a function
```

And that is correct because this function is not returned by the module, so basically hidden for everything outside the&nbsp;module.

So we can only call the functionaddEmoticon inside the MrFrontendModule.

#### How to use the public methods inside another JavaScript Module?

```
var SecondModule = (function(MrFrontendModule) {
  let secondModuleMethods = {};

  secondModuleMethods.getTitleFromOtherModule = function() {
    return MrFrontendModule.getTitle();
  }

  return secondModuleMethods;
})(MrFrontendModule);
```

#### How would you handle private and public functions?

If you have another way of using private and public functions?

Which JavaScript module pattern do you prefer to&nbsp;use?

Please let me know in the comments!

If you want to search more about this Module Pattern, I highly recommend to [check it out on the Todd Motto’s&nbsp;website](https://toddmotto.com/mastering-the-module-pattern/).

#### **Do you want to have a training by&nbsp;me?**

With Mr Frontend, I want to help you get more focused on the things that matter and the things that will help you&nbsp;grow.

If you want me to help you more, support my blogs, video’s and podcast and go to [https://patreon.com/mrfrontend](https://patreon.com/mrfrontend) and choose the amount of money you want to spend. For (almost) every amount there is a thank you&nbsp;package!

A few packages have some personal training moments in it, so go and check it&nbsp;out!

_Originally published at_ [_Mr Frontend&nbsp;Blog_](https://blog.mrfrontend.org/2017/11/javascript-basics-create-private-public-functions-javascript-module-pattern/)_._

* * *