📖
Maissen's Grimoire
  • Maissen's Grimoire
  • Html and css grimoire
    • HTML5 Periodical Table
    • HTML Cheat Sheet
    • CSS Cheatsheets
  • Javascript Grimoire
    • JavaScript Cheat Sheet
      • Javascript Array in depth
      • Tagged Template Literals
      • Guard Clauses - The Best Way To Write Complex Conditional Logic
      • JavaScript Optional Chaining
      • JavaScript Null Coalesce
      • What Are Magic Numbers And Why Are They Bad
      • ES6/ECMAScript2015 Cheatsheet
      • First-class and Higher Order Functions: Effective Functional JavaScript
    • Useful JavaScript Tips, Tricks and Best Practices
    • Bits of code
    • Useful JavaScript libraries
      • Components
      • Animation
      • Maps
      • Helpers
      • Presentations
      • Charts
      • Games
      • Audio
      • Images
      • Video
    • Js the right way
  • Angular Grimoire
    • Angular doc
    • Getting Started
    • Angular clean architecture
    • Angular Cheat Sheet
    • TypeScript Cheat Sheet
    • My Favorite Tips and Tricks in Angular
    • NgRx: tips & tricks
    • Bits of code
      • Execute Multiple HTTP Requests in Angular
      • Authentification
        • Angular 8 JWT Authentication with HttpInterceptor and Router
      • Integrations
        • Spring Boot
          • Rest Example
            • Angular,Spring Boot,Spring Data and Rest Example(CRUD)
          • Authentification
            • Angular, Spring Boot: JWT Authentication with Spring Security example
            • Angular Spring Boot Security Oauth2
              • Spring Boot OAUTH2 Role-Based Authorization
              • Spring Boot Security Google Oauth
              • Spring Security OAuth2 User Registration
    • Most used dependency
  • Node Grimoire
    • Express.js 4 Cheatsheet
    • Useful Dependencies
    • How To Use And Write Express Middleware
    • Node.js with SQL databases
      • Node.js Token Based Authentication & Authorization example
      • Node.js Rest APIs example with Express, Sequelize & MySQL
      • Node.js Express & PostgreSQL: CRUD Rest APIs example with Sequelize
      • Sequelize
        • Sequelize Many-to-Many Association example – Node.js & MySQL
        • Sequelize One-to-Many Association example with Node.js & MySQL
    • Node.js with NOSQL databases
      • Node.js + MongoDB: User Authentication & Authorization with JWT
      • Node.js, Express & MongoDb: Build a CRUD Rest Api example
      • MongoDB One-to-One relationship tutorial with Mongoose example
      • MongoDB One-to-Many Relationship tutorial with Mongoose examples
      • MongoDB Many-to-Many Relationship with Mongoose examples
  • Upload files
    • How to upload multiple files in Node.js
    • Upload & resize multiple images in Node.js using Express, Multer, Sharp
    • Upload/store images in MySQL using Node.js, Express & Multer
    • How to upload/store images in MongoDB using Node.js, Express & Multer
  • React Grimoire
    • React Doc
    • React Grimoire
    • React Cheat Sheet
  • spring boot Grimoire
    • Getting started
    • Spring Boot, Spring Data JPA – Rest CRUD API example
    • Spring Boot Token based Authentication with Spring Security & JWT
  • Mongo Grimoire
    • MongoDb-Mongoose Cheat Sheet
  • Development tools
    • Design Patterns
  • maissen_grimoire
Powered by GitBook
On this page

Was this helpful?

  1. Javascript Grimoire
  2. JavaScript Cheat Sheet

What Are Magic Numbers And Why Are They Bad

Chances are you have probably never heard the term magic numbers, but I guarantee that you have dealt with magic numbers in your code. The best way to explain magic numbers is through a quick example.

function convert(amount) {
  return amount * 1.61
}

The code above is a simple function that converts an amount by using 1.61 as the conversion factor, but it is unclear what 1.61 is representing. This is a magic number, because it is a number in code that does not have any obvious meaning. Instead the number just magically works.

In this example the number 1.61 represents how to convert miles to kilometers, but just by looking at the code this is impossible to discern. Luckily, this is a fairly simple problem to solve, so let’s look at various methods to solve the magic number problem.

1. Comments

The first and easiest way to fix magic numbers is to just add a comment to the code denoting what the number is used for. Here is how we could improve the above code.

function convert(amount) {
  return amount * 1.61 // Conversion from miles to kilometers
}

While technically the above solution works it is definitely not ideal. If this code ever changes or is used in other places the comment will be useless unless it is also updated and moved accordingly. This is why, in my opinion, comments are a solution to the magic number problem that should never be used.

2. Use Good Method/Variable Names

A much better way to improve the readability of magic numbers is by using good variable and methods names around the number so that the intent of the magic number is clear. Here is an example of doing that.

function convertMilesToKilometers(miles) {
  return miles * 1.61
}

It is immediately clear that 1.61 is the conversion factor used to convert miles to kilometers, and this solution solves the magic number problem much better. There is however one additional way we can improve this solution which is by far my favorite way to fix magic numbers.

3. Extract Magic Numbers Into Variables

The best way to fix magic numbers is to move them into their own constant variables. This way the variable name of the magic number can describe exactly what the variable does.

const MILES_TO_KILOMETERS_CONVERSION_FACTOR = 1.61
function convertMilesToKilometers(miles) {
  return miles * MILES_TO_KILOMETERS_CONVERSION_FACTOR
}

This code completely removes the magic number since the number is now assigned to a well-named variable. Something to note about this variable name is that it is in all caps with underscores between words. This is common practice when defining global constants like this. It makes it easier to read through code and know which variables are global constants and which variables are local values.

What About Magic Strings?

Magic values do not only come in number form. Some of the most common types of magic values are magic strings. These can be a bit harder to detect though.

document.querySelectorAll('[data-container]')
        .addEventListener('click', e => {
  e.target.classList.toggle('active')
})

document.querySelectorAll('[data-container-child]')
        .forEach(child => {
  const parent = child.closest('[data-container]')
  parent.classList.add('active')
})

The above code utilizes multiple magic strings, but this can be hard to detect since code like this is so common. The easiest magic string to spot is the duplication of the [data-container] selector. This selector can easily be moved into a variable to denote what exactly the selector is for. It also makes it easy to update the selector in the future without changing every instance in the code. Here is an updated version of the code that removes magic strings.

const CONTAINER_SELECTOR = '[data-container]'
const CONTAINER_CHILD_SELECTOR = '[data-container-child]'
const ACTIVE_CLASS = 'active'

document.querySelectorAll(CONTAINER_SELECTOR)
        .addEventListener('click', e => {
  e.target.classList.toggle(ACTIVE_CLASS)
})

document.querySelectorAll(CONTAINER_CHILD_SELECTOR)
        .forEach(child => {
  const parent = child.closest(CONTAINER_SELECTOR)
  parent.classList.add(ACTIVE_CLASS)
})

It is now obvious in the code what each string is representing and more importantly which selectors are used in multiple places across the code. It may seem like this is a lot of extra work and code for little gain, but once you start implementing this system into larger projects it will become apparent how much easier it is to read code that uses variables instead of magic values.

PreviousJavaScript Null CoalesceNextES6/ECMAScript2015 Cheatsheet

Last updated 5 years ago

Was this helpful?