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 Pattern

In my opinion, the JavaScript Module Pattern is the way to structure your JavaScript into more reusable pieces of 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 methods.

Private function

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

Public method

A public method is just like the private one a function. But a function inside a Object is called a 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 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 have:

• A let mrFrontendMethods variable which is an Object
• A let title variable which contains a 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 module?

• The title 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 module.

What is public inside this module?

• The mrFrontendMethods Object
• The getTitle method

These things are public because they are returned by the return statement. So accessible via the module, to use it outside this 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 modules.

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

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

When this code will be executed you will see this as result: “The Mr Frontend JavaScript Module ”.

And that is expected!

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

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

We will get this 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 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 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 website.

Do you want to have a training by me?

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

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

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

Originally published at Mr Frontend Blog.