You have to organize your JavaScript code structure. A clean layout helps you read and fix your code. Whether you build a small script or a large app.
Table of Content
You will understand how to write a structural code in JavaScript and organize your project directories in a standard way.
Understand the JavaScript Code Structure
JavaScript code structure refers to how your code is organized and written. It includes the layout of files and the order of statements.
Also, how functions and variables are grouped and how modules are used. A clear structure helps make your code more readable.
Here is how to structure your project files and folders in JavaScript:
A well-planned folder structure keeps your project organized. It helps you find files quickly and understand how different parts connect.
Here is a basic example:
This layout works for small projects with just one:
- HTML
- CSS
- JS
Here is another example for larger projects:
Folders and Purpose:
- js/: JavaScript files split by function or feature
- css/: Stylesheets
- assets/: fonts or media files
- incs/: Reusable UI parts or logic
- README.md: Project info or setup instructions
Keep file names short and use lowercase and hyphens or camel-case for consistency.
Let’s move on to the following section to understand how to declare variables and constants in JS.
Declare Variables and Constants Properly
Use the right keywords to declare variables and constants that help you to prevent bugs and improve code clarity.
Use const when the value won’t change. It signals that the variable is fixed.
const MAX_USERS = 100;
const apiUrl = 'https://api.example.com';Also, use let if the value needs to change later. Here is an example:
let count = 0;
count += 1;The var keyword has function scope and creates hoist-related issues. Modern JavaScript uses let and const for block scope and clearer behavior.
Use descriptive names that show what the variable holds.
Bad:
let x = 25;Good:
let userAge = 25;Stick to camelCase for variables and lower_snake_case or UPPER_SNAKE_CASE for constants. That depends on your style guide.
Let’s move on to the following section to see how to group functions and logic.
Group Functions and Logic Clearly
Organize functions and logic into well-defined blocks. That makes your code more readable for other developers.
Keep related functions in the same file or module. Anyone can read your code and know where to find related functionality in this way.
Group functions in one place if you have several that interact with an API. Here is an example:
// api.js
function fetchData(url) {
// code to fetch data
}
function handleResponse(response) {
// code to handle response
}
function logError(error) {
// code to log errors
}Comment on complex logic to help others (and yourself) understand it. Avoid obvious comments like // increment count.
// Check if the user logs in first. Then do the action
if (isUserLoggedIn) {
// proceed with action
}Break the function into smaller and focused parts if it does too much. The examples below show bad and good structures.
Bad:
function processData(data) {
cleanData(data);
transformData(data);
saveData(data);
}Good:
function processData(data) {
const cleaned = cleanData(data);
const transformed = transformData(cleaned);
saveData(transformed);
}Split your code into modules that handle specific tasks or features in larger projects, such as utilities or API calls. This keeps code organized and reusable.
Let’s move on to the following part to learn how to split JavaScript code or structure into modules.
Split Code in JavaScript with Modules
ES6 modules allow you to export and import functionality between files in modern JavaScript.
// math.js (module)
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}The file of math.js defines two functions: add and subtract. Each function takes two numbers as input and returns the result of either addition or subtraction.
// main.js (importing module)
import { add, subtract } from './math.js';
console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2This file exports both functions so other files can use them. The second file, main.js, imports the add and subtract functions from math.js.
It then uses them to perform basic math operations and prints the results to the console.
Let’s move on to the following section to learn how to name files in JavaScript.
Names for Files and Code
Names should clearly describe what the variable or function does. You also need to avoid single letters or cryptic names.
Use camelCase for variables and functions. Start with a lowercase letter and capitalize subsequent words.
Here is an example:
let userName = 'John Doe';
function calculateTotal() { /* code */ }Also, constants that don’t change should be in all uppercase letters, with words separated by underscores.
Here is an example:
const MAX_USERS = 100;
const API_KEY = '123abc';Use PascalCase for classes and constructors. Capitalize the first letter of each word.
For example:
class UserProfile { /* code */ }
function Person() { /* code */ }Use lowercase with hyphens for multi-word filenames:
// Good
index.html
user-profile.js
api-request.js
// Bad
UserProfile.js
APIRequest.js
Keep filenames short and relevant. Avoid overly long or vague file names and choose a name that directly reflects the content or purpose of the file.
For example:
// Good
user.js
auth.js
cart.js
// Bad
myScript.js
finalVersion.js
Let’s move on to the following part to see how to format and style code in JavaScript.
Structure and Format Code for Reusability
Use the same format and style across your codebase. This makes your code easier to read and manage. Tools like Prettier and ESLint handle the work for you. They keep everything consistent across the whole project.
- Use the same layout in your code. It helps everyone follow the same pattern. You avoid mix-ups that slow people down.
- Well-structured code reads like a story. You understand it faster. This matters more in big projects.
- Formatting tools and linters spot problems fast. You fix them before they turn into real bugs.
- No need to argue about tabs or spaces. No need to fix messy code by hand. Let the tools do that.
Let’s move on to the following section to see bad and good examples for code structure in JavaScript.
Bad and Good in Code Structure within JavaScript
Break your code into small parts. Each part should do one job. Then you can use it anywhere.
Here is an example:
// api.js
export function fetchData(url) {
return fetch(url).then(response => response.json());
}
// In other parts of the project
import { fetchData } from './api';Avoid hardcoding values in your functions or components. Pass parameters to make your code flexible.
// Bad: Hardcoding values
function calculateTax() {
return 100 * 0.2; // 20% tax
}
// Good: Accepting dynamic values
function calculateTax(amount, rate) {
return amount * rate;
}Put repeated code into functions. This keeps your code short and easy to change.
// Bad: Repeating logic
const price1 = 10;
const price2 = 20;
const tax1 = price1 * 0.2;
const tax2 = price2 * 0.2;
// Good: Using a function
function calculateTax(price) {
return price * 0.2;
}
const tax1 = calculateTax(10);
const tax2 = calculateTax(20);Use tools and libraries that already solve common problems. They save time and reduce bugs.
import _ from 'lodash';
const numbers = [1, 2, 3, 4];
const doubled = _.map(numbers, num => num * 2);Do not repeat code that only changes a little. Make one function do both jobs.
// Bad
function calculateDiscount(price) {
return price * 0.1;
}
function calculateTax(price) {
return price * 0.2;
}
// Good
function calculatePercentage(price, rate) {
return price * rate;
}
const discount = calculatePercentage(100, 0.1);
const tax = calculatePercentage(100, 0.2);Here are tools that help you clean and organize your code. They spot mistakes early and make sure your code stays clear and works well with others:
- Linters check your code for problems like ESLint
- Formatters keep code style consistent like Prettier
- Organizers tidy up your files like JS-Beautifier
- Type checkers spot type issues early such as TypeScript or Flow
- Bundlers combine code into one place such as Webpack or rollup
- Structure validators check file structure rules like eslint-plugin-import
- Code Review tools help teams review and comment on code such as GitHub or GitLab
Wrapping Up
You’ve learned how to structure your JavaScript code for readability, and maintainability.
Here’s a quick recap:
- A clear folder and file structure helps you find and understand your JavaScript code.
- Proper use of
letandconstwith descriptive names help you to prevent bugs. - Keep related functions together and break down complex logic.
- Split your code into manageable chunks for better maintainability.
- Use consistent names to avoid confusion.
- Use tools like Prettier and ESLint for consistent code quality.
- Avoid redundancy and ensure your code can be reused in different contexts.
