Leverage Your Code Editor: Store Constants Into An Object

As developer, I believe you will “playing around” with the code editor. It is not a wise way if you code a complete project using only Notepad (without ++) while there are a bunch of code editors free to use. Notepad is a great tool for you to do some adjustment code like .env file or similar.

A modern code editor has their own intelisense (or code completion). It means, code editor helps you to complete your writing by only typing some characters (or pressing CTRL/Cmd+Space). Heads up to VS Code documentation to find out more about intellisense. The explanation there is also applied to other code editors, like JetBrains family.

IntelliSense Come To Solve This Problem

In every aspect in this world, remembering something is a hard thing but we cannot run away from it. From elementary school until today, we have to memorized something. And we often forget about that.

To tackle this obstacle, we often memorizing the pattern instead of memorizing the whole thing. It is also applied in coding. We can’t memorized every single thing in our code, but we can made a pattern on our work. Creating an organized directory structure is also a way to creating a pattern to help us remembering our work.

Remembering constants in our codebase is not just tedious—it’s also a recipe for errors. Imagine you have a hardcoded API URL spread across multiple files, and one day, the API provider changes its endpoint. Without a centralized constant, you’ll have to manually search and update every occurrence. What if you miss one? This could lead to bugs, failed requests, or even security vulnerabilities if deprecated endpoints expose sensitive data.

In this article, constant is a hard-coded variable that won’t change (read only), not stored in database or something (or anything that can be assigned in an JavaScript object, including a function). At this point, we have the same definition about constant.

In this article, I will demonstrate how I manage constants in VS Code and reduced our mind to memorizing something (that might have no point if we memorizing it). And the language scope that we are going to use is JavaScript/TypeScript.

Benefit:

1. More organized constant. Constant is playing vital role, and the most important thing we can ensure the constant (its value) is typo-free so it can avoid error.
2. Easy to remember. You only need to remember one keyword [or some keywords if you grouped constant into some groups]. Once you import the object, VS Code will suggest every single thing inside the object.

Start Working!

Let's break down each level step by step into smaller steps and see how we can implement it effectively.

Level 1: Centralizing Constants in a Single File

At the basic level, you should start by creating a dedicated file to store all your constants. This helps to maintain consistency and avoid duplication.

1. Create a constants file

Inside your project, create a file named constants.ts (or .js if you're not using TypeScript).

1. Define and export constants

// constants.ts
export const API_URL = "https://api.example.com";
export const APP_NAME = "My Awesome App";
export const MAX_RETRY_ATTEMPTS = 3;

1. Import and use the constants

Now, in any module that needs these constants, simply import them:

import { API_URL, APP_NAME } from "./constants";

console.log(`Welcome to ${APP_NAME}. Fetching data from ${API_URL}`);

Level 2: Leveraging IntelliSense by Grouping Constants into an Object

Instead of exporting individual constants, we can organize them into an object. This allows IntelliSense to suggest all available constants once we reference the object.

1. Refactor constants into an object

Modify your constants.ts file:

export const CONSTANTS = {
  API_URL: "https://api.example.com",
  APP_NAME: "My Awesome App",
  MAX_RETRY_ATTEMPTS: 3,
} as const; // `as const` ensures the object values remain readonly.

1. Import the object and access constants with IntelliSense

Now, when you import CONSTANTS, VS Code will provide suggestions for available properties.

import { CONSTANTS } from "./constants";

console.log(`Welcome to ${CONSTANTS.APP_NAME}. Fetching data from ${CONSTANTS.API_URL}`);

1. Add documentation to enhance readability

Documenting your constants makes it easier for developers to understand their purpose.

export const CONSTANTS = {
  /** The base URL for API requests */
  API_URL: "https://api.example.com",

  /** The application name displayed in UI */
  APP_NAME: "My Awesome App",

  /** The maximum number of retry attempts for failed requests */
  MAX_RETRY_ATTEMPTS: 3,
} as const;

Now, whenever you hover over the properties in VS Code, you'll see helpful tooltips explaining what each constant does. This image below is an example if you implement this level.

Level 3: Scaling Up by Organizing Constants into Modules

As your application grows, managing all constants in a single file becomes inefficient. You can group related constants into separate files and import them into an index.ts file for better organization.

1. Create separate files for related constants

// constants/api.ts
export const API = {
  BASE_URL: "https://api.example.com",
  TIMEOUT: 5000,
} as const;

// constants/app.ts
export const APP = {
  NAME: "My Awesome App",
  VERSION: "1.0.0",
} as const;

// constants/settings.ts
export const SETTINGS = {
  MAX_RETRY_ATTEMPTS: 3,
  ENABLE_LOGGING: true,
} as const;

1. Create an index file to simplify imports

// constants/index.ts
export { API } from "./api";
export { APP } from "./app";
export { SETTINGS } from "./settings";

1. Import constants using IntelliSense

Now, in your main code, you can simply import everything from constants and enjoy IntelliSense support.

import { API, APP, SETTINGS } from "./constants";

console.log(`App Name: ${APP.NAME}`);
console.log(`API Base URL: ${API.BASE_URL}`);
console.log(`Max Retry Attempts: ${SETTINGS.MAX_RETRY_ATTEMPTS}`);

This approach keeps constants modular, easy to maintain, and helps developers find the necessary values quickly. Like level 2, this level emphasizes the purpose-driven segregation of constants.

Conclusion

By following these levels, you can improve the way you manage constants in JavaScript/TypeScript:

✅ Level 1: Keep all constants in a dedicated file to avoid duplication.

✅ Level 2: Store constants inside an object for better IntelliSense suggestions.

✅ Level 3: Organize constants into separate files and import them through an index.ts file for scalability.

By leveraging the power of IntelliSense, you reduce the cognitive load of memorizing constants, making your development process smoother and error-free. Happy coding!

BONUS

This section's placement is somewhat arbitrary. I added it after finishing the article and struggled to find a more suitable location 😬.

Common Mistakes 1: Using Magic Numbers/String Values Directly

Instead of writing this code:

if (user.role === "admin") { ... } // ❌ Hardcoded string

We can create this constant:

export const ROLES = {
  ADMIN: "admin",
  USER: "user",
} as const;

Then refactor the code:

if (user.role === ROLES.admin) { ... } // ❌ Hardcoded string

Common Mistakes 2: Not Using as const in TypeScript

Without as const, object properties could be unintentionally reassigned. Here is the solution ✅:

export const APP = { NAME: "MyApp" } as const;