JavaScript Basics: How to create private & public functions in JavaScript with the Module Pattern

Image for post
Image for post

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

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.

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

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!

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!

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.

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.

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

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

return secondModuleMethods;
})(MrFrontendModule);

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.

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.

Written by

I write stories about Frontend Dev, JavaScript, Typescript, Angular, NodeJS, Serverless Functions, JAM Stack, FaunaDB, Netlify, Apple, iOS— https://byrayray.dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store