How to Build Your Own JavaScript Library

In this tutorial, we’ll walk you through building a simple library using plain JavaScript, focusing on how you can make your code more maintainable and shareable.

Why Create a JavaScript Library?

There are many reasons why you might want to build your own library:

• Personal Satisfaction: It feels great to create something from scratch.
• Code Organization: Keeps your code organized and manageable.
• Maintainability: Libraries make it easier to maintain your code over time.
• Sharing: You can easily share it with others.
• Reusability: You write functions once and reuse them whenever you need them.

However, before starting, make sure you understand why you need the library. It’s often better to search for existing libraries or plugins that can solve your problem. There’s no need to reinvent the wheel, as other solutions may already be faster, more efficient, and easier to integrate into your project.

Step 1: Set Up the Basic Structure

To begin, let's create a global variable that will hold our library. This will make the library accessible throughout the window context.

(function(window) {
  // Strict mode can be enabled by uncommenting the line below
  // 'use strict';

  function myLibrary() {
    var _customLibraryObject = {};

    // Add library functions here!

    return _customLibraryObject;
  }

  // Assign to the global window object if it's not already defined
  if (typeof(window.customWindowGlobalLibraryName) === 'undefined') {
    window.customWindowGlobalLibraryName = customLibrary();
  }
})(window);

Now, we can access myWindowGlobalLibraryName anywhere in the code. Since we wrapped the library inside an anonymous function, it prevents conflicts with other external JavaScript files.

console.log(myWindowGlobalLibraryName);

Step 2: Add Custom Functions to Your Library

Next, let’s add some custom functions. In this example, we’ll create a function that logs a variable’s type, checks if it’s a number, and logs its length (if applicable).

(function(window) {
  // Strict mode can be enabled by uncommenting the line below
  // 'use strict';

  function customLibrary() {
    var _customLibraryObject = {};

    // Adding a custom log function
    _customLibraryObject.customLog = function(itemToLog) {
      console.log("Custom-Log > Type of variable: " + typeof(itemToLog));
      console.log("Custom-Log > Is number: " + !isNaN(itemToLog));
      console.log("Custom-Log > Length: " + (itemToLog).length);

      return console.log(itemToLog);
    };

    return _customLibraryObject;
  }

  if (typeof(window.customWindowGlobalLibrary) === 'undefined') {
    window.customWindowGlobalLibrary = customLibrary();
  }
})(window);

// Call the custom function
customWindowGlobalLibrary.customLog(["My library", "Rules"]);

Step 3: Use Private Variables Within Your Library

Sometimes you may want to store settings or data that should not be exposed outside the library. You can use variables that are only accessible within your library’s scope.

(function(window) {
  // Strict mode can be enabled by uncommenting the line below
  // 'use strict';

  function myLibrary() {
    var _customLibraryObject = {};

    // Private settings that cannot be accessed from outside
    var settings = {
      volume: 100,
      mute: false
    };

    // Public method to change the volume
    _customLibraryObject.setVolume = function(volume) {
      settings.volume = volume;
      return volume;
    };

    // Public method to mute/unmute
    _customLibraryObject.setMute = function(muteStatus) {
      if (typeof(muteStatus) === 'boolean') {
        settings.mute = muteStatus;
      } else {
        console.error("You need to specify true or false for mute!");
      }
      return settings.mute;
    };

    // Public method to check if sound is muted
    _customLibraryObject.haveSound = function() {
      return settings.mute;
    };

    return _customLibraryObject;
  }

  if (typeof(window.customWindowGlobalLibraryName) === 'undefined') {
    window.customWindowGlobalLibraryName = customLibrary();
  }
})(window);

// Try accessing the library
console.log(customWindowGlobalLibraryName);

// This will show only three properties: setMute, setVolume, and haveSound. 
// The 'settings' variable is hidden from direct access.

Making Private Data Available (If Needed)

If you do want to expose a private variable (like settings) without making it directly accessible, you can create a method to return a "safe" copy of the object.

_customLibraryObject.getSettings = function() {
  var securityCopy = {};

  for (var key in settings) {
    if (settings.hasOwnProperty(key)) {
      securityCopy[key] = settings[key];
    }
  }

  return securityCopy;
};

This method ensures that the settings object is returned as a copy, making it immutable and safe from external manipulation.