Avoid magic strings and boost your development

The problem with magic strings
1) Problem with API route because of magic strings

Our typical rest API route looks like

router.get(
  '/fetchProducts',
  controller
);

Now the problem is you are using the same route in your frontend for calling it

fetch('/fetchProducts', {
        method: "get",
});

Now you decide to rename the route from '/fetchProducts' to '/getProducts', you will end up doing changes everywhere you used this api and ended up wasting time

2) Problem with navigation routes because of magic strings

Our typical navigation looks like this in react

<Switch>
      <Route exact path="/home" component={Home} />
</Switch>
//Navigating with link like
<Link to="/home"> </Link>

Now again you decide to rename the route from '/home' to '/landingPage', you will end up doing changes everywhere you used this route in to redirect.

The big picture
Instead of focusing on your project, you will end up wasting time on doing these changes because you didn't made single source of truth instead you used Magic strings.

The solution
Make your magic strings as constant
For API Routes

1) make one file to define constants

export const getProductsRoute="/fetchProducts";

2) Import the constant from your file and your code will look like

import {getProductsRoute} from './apiConstant'
router.get(
  getProductsRoute,
  controller
);

3) Copy the same file in your frontend and your code will look like

import {getProductsRoute} from './apiConstant'
fetch(getProductsRoute, {
        method: "get",
});

For Navigation Routes

1) Make another file to define constants for your Routes

export const RouteToHomeComponent="/Home"

2) Import constants and use them

import {RouteToHomeComponent} from './routeConstant'

<Switch>
      <Route exact path={RouteToHomeComponent} component={Home} />
</Switch>
//Navigating with link like
<Link to={RouteToHomeComponent} > </Link>

How it speeds up the development ?
Now you don't need to waste your time to revisit 10 pages to edit the code, also there is more context in your code, when you will read after months you don't need to think what this route was doing as the naming would help us with the context, whenever there are changes required you can do them in one go.

Conclusion
When you are working on project separate your concerning part and make them constants, because that way it will be easy for you to make any changes and speed up your development by not wasting your time on editing besides this your code would be more easy to read and work with

Comments

[Alfredo Salzillo]

Now you don't need to waste your time to revisit 10 pages to edit the code, also there is more context in your code, when you will read after months you don't need to think what this route was doing as the naming would help us with the context, whenever there are changes required you can do them in one go.

This is not always true. In your example

export const getProductsRoute="/fetchProducts";

the string fetchProducts is as explicate as getProductsRoute.

Also, the best solution is to export a fetchProducts function and import her into all the project, so when the API change, you need only to reimplement the fetchProducts

export const fetchProducts = () => fetch('/fetchProducts');

Magic strings are not magic at all, in this case, if the API routes are named well.

In your example, the route /fetchProducts is a bad name, no need of the fetch in the name.

Your API constants it's like an enum, and enums are the evilest thing to use in a javascript project.

[Aditya Pahilwani]

This looks as good as my solution with constants , doesn't bring a big difference
I use this to create route path when passing values with it in React

[Alfredo Salzillo]

Also, with a modern IDE find and replace the string '/home' it's easier than create a file and import it every time.

[Aditya Pahilwani]

Consider the scenario , where you get back to your project after like month and when you try to edit the API route you don't remember where exactly they were getting used, that's why with constants there is single source of truth to that route
I came up with this because it happened with me to keep track of all these route

[Alfredo Salzillo]

maiusc+ctrl+f, maiusc+ctrl+r

If you use the same route in different projects and the constants are a shared library, you need to release the library and recompile all the projects.

What if you don't remember all the projects where you use this library? You'll make a 'constant of libraries of constants' to remember that?

Also, it's true you have a single source of truth but you are binding all your applications to a single file.

The best solution is to use good naming, and always remember that strings, especially URLs can be used by someone else.

[Aditya Pahilwani]

Your point is right no doubt , but with me with constants am able to get more context while reading the code though the example I used wasn't good enough and you are write that if there are many projects linked to this it could be troublesome to reload with updated file but as am student and work alone , I didn't faced that issue thanks for your points will look into that

[Dan Silcox]

Works with things like input parameter names as well, especially in big "management" APIs where you have loads of endpoints using similar/same fields.

[Alfredo Salzillo]

please add the javascript tag to the code blocks

[Aditya Pahilwani]

Added, sorry am new to writing blogs

[Julius Huck]

I just wrote a package to avoid magic strings in routes management. Supports nested routes, placeholders and query strings. npmjs.com/package/@juliushuck/gene...