Skip to main content Accessibility Feedback

Adding more structure to your JavaScript projects

When you write a lot of code, and manage a lot of projects, having a consistent structure to your code is really important.

It makes your code easier to read, for both you and others jumping into the project later. It also lets you come back to your code months or years later and more easily start working with code you haven’t seen in a while. Everything feels familiar.

Today, let’s look at a simple pattern you can use to add more structure to your JS projects.

A simple pattern

All of my plugins, scripts, and functions follow the same general pattern:

  1. Variables
  2. Methods
  3. Inits and Event Listeners

First, I list or setup any variables related to the plugin. Then I include all of my functions and methods. Then, at the end, I run any initializations or functions, and setup my event listeners.

An example

Here’s an example using a revealing module pattern.

var myPlugin = (function () {

    'use strict';

    // Variables

    var app = document.querySelector('#app');
    var someOtherVar = 'abc';
    var num = 123;
    var timer;

    // Methods

    var add = function () {
        total = 0;
        for (var i = 0; i < arguments.length; i++) {
            total += arguments[i];
        return total;

    var subtract = function () {
        if (arguments.length < 1) return 0;
        total = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            total = total - arguments[i];
        return total;

    var sayHi = function (event) {

    // Inits & Event Listeners

    timer = 0;
    add(1, 2, 3);

    document.addEventListener('click', sayHi, false);


It works inside functions, too

I also use this approach inside functions, to give them a structure that mirrors the script or plugin they’re part of.

var toggleAccordion = function (toggle) {

	// Variables
	var activeToggle = document.querySelector('');
	var activeContent = document.querySelector('');
	var content = document.querySelector(toggle.hash);
	if (!content) return;

	// Hide active content

	// Show new content