How to create a JavaScript library

Everyone uses JavaScript libraries; jQuery is the most notable example. Libraries are components built in JavaScript packaged and served in an intuitive way. It keeps you from having to reinvent the wheel.

In some cases you reuse a specific block of code in several projects — say, an image carousel. You don’t rewrite it every time, but you have to refactor the code to meet the needs of the current project. This takes time, which is scarce.

What if you turned that block of code into a library?

You wouldn’t have to change anything in the code between projects. You wouldn’t have to account for different variables and variations brought by the project’s needs.

const imageCarousel = new ImageCarousel({
target: '#item1',
transition: 'fadeOut'

Wouldn’t this be easier; all you have to do is change the variables in the calling function. The library does the rest.

Now let’s learn how to whip up our own JavaScript library in a few simple steps, using a recent library I created called Downloadify.js as an example.

Before I begin, I must note that the key to understanding code is to understand the intention behind the decision, so that we are well-equipped to make our own. It builds on our foundation as programmers; more abstract principles can be refactored to solve other analogous problems.

First consider what your library will do

Let’s imagine you have a website that is serving a downloadable product to your users. You support Windows, MacOS, and Linux; there are three different executables depending on the platform.

The download link needs to check for the user’s platform, and decide which link it wants to give them in order to get the right downloadable.

You don’t need a paradigm-shifting library that will change the course of JavaScript as we know it. The library can be simple.

Requirements for our library

The purpose for creating a library is to reduce headaches from refactoring our code; let’s not create more of them.

  • The library is going to be run in the browser, so take that into consideration.
  • The library mustn’t interfere with any other code in the website; it must be encapsulated.
  • The library must be accessible from anywhere from any script in the webpage.

Consider the implementation of your library

Implementation of the Downloadify.js library

How do you want to use your library during a project?

First, we import the library (downloadify.js) in a <script> tag.

Second, we define the button that we went to dynamically change.

Next, we define a new object that takes the target button and an instance of the global navigator variable as parameters.

We want an object that will contain the three URLs that will be used depending on the operating system.

If you’re using a Windows, the button will take you to; if you’re using a Mac, it will take you to; if you’re using Linux, it will take you to

We want to define how we will call the library first because the important thing is how intuitive it is to import and call the library. There is no point in writing the library first, then finding that it is cumbersome to fiddle with.

Build the library

Write an anonymous function

Let’s remember the requirement that the library code must’nt intefere with any other code in the website. Let’s first write a self-enclosed anonymous function:

The purpose of an anonymous function is that no variables or functions defined inside of it will interfere with preexisting definitions in the web page. This function will execute itself, so there is no need to call it.

Write the Downloadify class

We are going to organize the methods and state of our library in an ES6 class.

ES6 classes are readable, encapsulated, and you can create infinite copies of them. Most importantly, they make the library easy to use.

We write a new class Downloadify. Inside the constructor method, we define 3 parameters corresponding with the 3 we wanted to implement (See Consider the implementation).

We assign the “props” to this, so they are accessible from anywhere in the function.

After we have defined the necassary class variables for our library, we need to devise a way to accomplish the functions of our library in code. If you are taking preexisting code to turn into a library, you just need to divide the various functions into two groups: those necessary at instantiation, and those no necessary at instantiation.

The former group belongs in the constructor method, while the latter belongs inside a method.

In this case, we would have to add an event listener to listen for button clicks on our target button inside the constructor.

We would want the code that executed in the event of a click in a class method, because we don’t need it until the button is clicked.

Add the library to the global object

Finally, in order to make the library easily accessible to the user, it needs to be added to the global object:

Add this line right under, but not inside of, your class. Make sure it is inside the anonymous function Now, when the user uses the keyword ‘Downloadify’ anywhere in the web page, it will refer to the Downloadify class.

Test and Compile

When you’ve finished writing the basic code, it may be wise to write tests for it with Mocha or Jest; it will save you time and pain.

Also, it is good practice to compile your library using Babel to more widely supported JavaScript code, because classes are a feature of ES6.

Use my babel-boilerplate to convert, lint, and minify the files quickly.

Look back

That is a basic guide into how you can take your idea for a JavaScript library and turn it into reality.

JS libraries are a good way for us to package code we frequently reuse so that we don’t have to change the code to account for differences on a project-by-project basis.

You can the entire Downloadify.js library on GitHub.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Definitive Guide to JavaScript Arrays (Part I)

How to Create a React Application from Scratch with Babel and Webpack

Uncomplicate the WEB Using Web Components

Roarr! the perfect JSON logger for Node.js and browser

React vs Vue: Programming Experience

Import image in React JS

Adobe / Magento PWA Studio Storefront Performance 2022

Angular + Prettier + Husky (updated)

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


More from Medium

Context in Javascript an

Working on my Final for Phase 1

Introduction to Modern JavaScript.

Const myFirstJavascriptBlog = “Declaring Variables”