Naming Magic Numbers

Magic Number refers to directly inserting numerical values into the source code without explicitly stating their meaning.

For example, using the value 404 directly as the HTTP status code for Not Found, or using 86400 seconds directly to represent a day.

📝 Code Example

The following code is a function that retrieves the new like count when the like button is clicked.

async function onLikeClick() {
  await postLike(url);
  await delay(300);
  await refetchPostLike();
}

👃 Smell the Code

Readability

The value 300 passed to the delay function is used in an unclear context. If you are not the original developer of the code, you may not know why it waits for 300ms.

• Is it waiting for the animation to complete?
• Is it waiting for the like to be reflected?
• Was it a test code that was forgotten to be removed?

When multiple developers work on the same code, the intention may not be accurately understood, leading to unintended modifications.

INFO

This Hook can also be viewed from the perspective of cohesion.

✏️ Work on Improving

To accurately represent the context of the number 300, you can declare it as a constant ANIMATION_DELAY_MS.

const ANIMATION_DELAY_MS = 300;

async function onLikeClick() {
  await postLike(url);
  await delay(ANIMATION_DELAY_MS);
  await refetchPostLike();
}

🔍 Learn More

Magic numbers can also be viewed from the perspective of cohesion. Please also refer to the document Eliminating Magic Numbers to Increase Cohesion.