2026-03-066 min read

structural (JavaScript)

Learn structural (JavaScript) step by step with clear examples and exercises.

Title: Structural JavaScript - Organize Your Code for Better Performance and Readability

Why This Matters

In large projects, maintaining a well-structured codebase is crucial for efficient development, debugging, and collaboration. JavaScript, being a dynamic language with no enforced structure, can quickly become messy if not organized properly. This lesson will guide you through best practices to structure your JavaScript code effectively, helping you write cleaner, more maintainable, and scalable code.

Prerequisites

Basic understanding of JavaScript syntax and data types
Familiarity with ES6 features like arrow functions, template literals, and destructuring assignments
Knowledge of common JavaScript libraries such as jQuery and React is a plus but not required

Before diving into the core concepts, let's first explore some essential prerequisites that will help you better understand the topics covered in this lesson.

ES6 Syntax and Features

To make the most out of this lesson, it's important to have a good grasp of ES6 syntax and features. If you're not familiar with them, we recommend reviewing resources such as Mozilla Developer Network (MDN) - ECMAScript 6.

Node.js and Browser Environments

Understanding the differences between Node.js (server-side JavaScript) and browser environments (client-side JavaScript) is crucial when working with modules and other structural concepts in JavaScript. If you're new to these topics, we recommend checking out MDN - Differences between Node.js and the Browser.

Core Concept

Modularization

Modularization is the practice of breaking down a large program into smaller, reusable modules. This approach makes it easier to manage complex projects by allowing developers to work on separate parts independently. In JavaScript, we can achieve modularization using several methods:

CommonJS (CJS): CommonJS is a module system that allows you to write and load JavaScript modules in Node.js. It uses the require() function to import modules and module.exports to export them.

ES6 Modules: ES6 introduced a new module system that can be used both in browser and Node.js environments. It uses the import statement to load modules and export to make them available for other files.

AMD (Asynchronous Module Definition) and UMD (Universal Module Definition): These are older module systems used primarily in browser environments before ES6 modules became widely supported. They allow you to write code that can be loaded by both AMD-compatible loaders like RequireJS and global scripts.

CommonJS vs ES6 Modules

CommonJS is used in Node.js, while ES6 modules can be used in both browser and Node.js environments. The main differences are in syntax (e.g., using require() vs. import) and how they handle exports. It's essential to understand these differences when working with JavaScript projects that use different environments.

Importing and Exporting Modules

In ES6 modules, you can export functions, classes, and variables using the export keyword:

// calculator.mjs
export function add(a, b) {
return a + b;
}

export const PI = 3.14;

To import these modules in another file, you can use the import statement:

// app.mjs
import { add, PI } from './calculator.mjs';

console.log(add(2, 3)); // Output: 5
console.log(PI); // Output: 3.14

Importing CommonJS Modules in ES6

To import a CommonJS module in an ES6 file, you can use the require() function from Node's built-in module object:

const calculator = require('./calculator.js');
// Now you can use calculator.add() and calculator.PI as needed

File Organization

Organizing your project's file structure is essential for maintaining a clean and scalable codebase. A common practice is to use a combination of folders and files:

src/ - Contains all the source code for your application
lib/ - Holds third-party libraries and utility functions
node_modules/ - Stores packages installed via npm or yarn
dist/ - Output directory for compiled files (e.g., minified JavaScript, CSS)
public/ - Contains static assets like images and fonts
test/ - Folder for unit tests and test runners

Best Practices

Keep functions short and focused on a single responsibility.
Use descriptive variable names to make your code easier to understand.
Comment your code to explain complex logic or unusual choices.
Avoid global variables as much as possible.
Use strict mode ('use strict') at the top of each file to enforce good practices.
Minify and compress your JavaScript files for production to reduce their size and improve load times.
Separate logic into separate modules, keeping them small and focused on specific tasks.
Use a consistent naming convention for your modules, functions, and variables.
Document your code using comments or tools like JSDoc to make it easier for others to understand.
Test your code thoroughly, both manually and with automated testing tools.

Worked Example

Let's create a simple module using ES6 modules:

// calculator.mjs
export function add(a, b) {
return a + b;
}

export const PI = 3.14;

Now, we can import and use this module in another file:

// app.mjs
import { add, PI } from './calculator.mjs';

console.log(add(2, 3)); // Output: 5
console.log(PI); // Output: 3.14

Common Mistakes

Not using modules at all: Avoid writing everything in the global scope as it can lead to naming collisions and hard-to-debug code.
Overusing global variables: Global variables should be used sparingly and only when necessary.
Lack of organization: Not separating your code into logical modules or using a messy file structure can make it difficult to maintain and scale your project.
Ignoring best practices: Failing to follow best practices like keeping functions short, using descriptive variable names, and commenting your code can lead to confusion and errors.
Not minifying production builds: Not optimizing your JavaScript files for production can result in slower load times and a poor user experience.
Misunderstanding CommonJS vs ES6 modules: Be aware of the differences between CommonJS (used in Node.js) and ES6 modules (used in both browser and Node.js environments).
Incorrectly handling module exports: Ensure you're exporting the correct objects from your modules and importing them correctly in other files.
Not using a package manager: Using a package manager like npm or yarn can help manage dependencies, avoid version conflicts, and simplify project setup.
Ignoring browser compatibility: Not considering browser compatibility when using ES6 features can lead to issues in older browsers that don't support them. Use tools like Babel to transpile your code for better cross-browser compatibility.
Not using linting tools: Linting tools help enforce coding standards and catch potential errors early on, making it easier to maintain a clean and consistent codebase.

Practice Questions

Write an ES6 module that exports a function to calculate the factorial of a number.
Create a simple CommonJS module that exports a function to reverse an array.
Given the following code snippet, identify and explain two potential issues:

let globalVar = 10;

function test() {
let localVar = 20;

console.log(globalVar); // Output: 10
console.log(localVar); // Output: 20
}

test();
console.log(globalVar); // Output: 10
console.log(localVar); // Error: localVar is not defined

FAQ

Why should I use modules in JavaScript?

Modules help organize your code, make it more maintainable, and reduce the risk of naming collisions. They also allow you to write reusable code that can be easily shared with others.

What is the difference between CommonJS and ES6 modules?

How do I import a CommonJS module in an ES6 file?

To import a CommonJS module in an ES6 file, you can use the require() function from Node's built-in module object:

const calculator = require('./calculator.js');
// Now you can use calculator.add() and calculator.PI as needed

Why should I avoid using global variables?

Global variables can lead to naming collisions, make it harder to debug issues, and make your code less modular. By avoiding them, you can write cleaner, more maintainable code.