DEV Community

Ahmad khattab
Ahmad khattab

Posted on

Avoid. Magic. Numbers

#javascript #computerscience

Magic numbers, you see them everyday and probably have used a fair amount of them once in a while. What are magic numbers, and magic booleans?.

Well, I'll try to define both of them at once, a magic number (or boolean)is an argument to a function, you don't know how it works, or what it will do and how it will affect the function, you just know that it's there, and you don't play with it in fear something breaking.

So, what would you usually do to discover what a magic number/boolean will do?. Well, you might go visit the docs of the tool that you're using, or read the source code trying to figure out what this black magic does and why it exists in your codebase.

Let's illustrate this with an example,

  check(e) {
    if (e.keyCode === 13) {
      this.attemptSendMessage(e);
    }
  }
Enter fullscreen mode Exit fullscreen mode

What does this do?. Well, obviously this is an event listener, as it receives e as an argument, it listens for a specific key-code 13 and when matched it calls attemptSendMessage. We're not concerned with the attemptSendMessage method. But, let's examine the number. What does the number refer to? which is the key that this accepts?.

A few possible solutions that might come to mind, you mind find yourself doing this


  check(e) {
    console.log(e.code) // logs the key that was pressed
    if (e.keyCode === 13) {
      this.attemptSendMessage(e);
    }
  }
Enter fullscreen mode Exit fullscreen mode

Or, you might google and find a question on stackoverflow. These, all are possible solutions that will eventually solve this issue of your understanding of this magic number. However, a better way to write this is storing the magic number inside a variable that explains what this number is really is.

If you tried any of the solutions above you'll find out that the number 13 is the key-code of enter key on the keyboard.

Now, with this knowledge let's store the number inside a variable and see what changes, shall we?.

  check(e) {
    const keycodeOfEnter = 13;
    if (e.keyCode === keycodeOfEnter) {
      this.attemptSendMessage(e);
    }
  }
Enter fullscreen mode Exit fullscreen mode

Can you spot the difference?, Well we stored the number inside a constant and used the constant instead of the number. Now, any developer(or yourself) when they look at this code, they will now instantly what this magic number is, it saves you a couple of minutes of googling and searching.

You should also be aware that keyCode has been deprecated and replaced with code. Then you can replace it with

check(e) {
    if (e.key == "Enter") {
      this.attemptSendMessage(e);
    }
  }
Enter fullscreen mode Exit fullscreen mode

Always, try to store magic numbers inside variables. Magic numbers can be vague and evil, because you have no idea what they are for and what they represent.

In a future post, I'll be illustrating the case for magic booleans. Until then, have a great day. And, thank you for reading this.

Related Links

Keyboard Events

Top comments (5)

Collapse
 
grahamthedev profile image
GrahamTheDev • • Edited

I mean, I agree, but the example isn't a good one as really if you are going to use keyCode (which is deprecated by the way) then what is wrong with:

check(e) {
    if (e.keyCode === 13) { //13 is Enter Key
      this.attemptSendMessage(e);
    }
  }
Enter fullscreen mode Exit fullscreen mode

No memory assignment, no extra bytes in compiled code as comments are removed, readable by a human and no having to name it in the first place.

There is decent support for .key so you could use that and make it even easier!

check(e) {
    if (e.key == "Enter") {
      this.attemptSendMessage(e);
    }
  }
Enter fullscreen mode Exit fullscreen mode

Instead magic numbers are things like if you have a function and it has numeric values used for loops etc. it is better to define them at the top:

e.g.

function dealCards(){
   for(x = 0; x < 52, x++){
     //deal card;
  }
}
Enter fullscreen mode Exit fullscreen mode

Would be better as the following as it is easy to understand what "52" is!

function dealCards(){
   var deckSize = 52;
   for(x = 0; x < deckSize, x++){
     //deal card;
  }
}
Enter fullscreen mode Exit fullscreen mode

And even better in ES6 if you aren't stuck in the dark ages like me due to IE9 support 😁

Collapse
 
rockwell profile image
Ahmad khattab • • Edited

This is same thing, if you're using key then this case is already covered for you by the browser. Then you're good to go!. I was aware of the code thing. But you're correct. I have also added it to the post, huge thanks for pointing this out!.

Collapse
 
grahamthedev profile image
GrahamTheDev •

Added an example that is more in keeping with magic numbers and the sentiment of your post as I do agree, they are evil!

Collapse
 
rockwell profile image
Ahmad khattab •

Greatly agree, this too. Haven't the support for IE stopped? Microsoft has the new Edge as their flagship browser? You guys still are stuck with that monstrosity xD

Collapse
 
grahamthedev profile image
GrahamTheDev •

I work in accessibility and there are still a lot of people stuck on IE due to their screen reader etc. so I still support IE9+ (and by support I mean it all works fine but it might be a bit ugly or clunky in places, perfectly accessible but maybe missing a few "bells and whistles" afforded by modern browsers).

If IE11 support hasn't already stop it is due to soon so for most people it isn't a concern!

Read next

michelledey4you profile image

Created a Npm package for Vite, React Tailwindcss starter code with configuration.

Plain -

joshuaamaju profile image

The Right Way to Add Images to Emails in Next.JS

Joshua Amaju -

garciadiazjaime profile image

React: How Often Does a Cleanup Function Run?

Jaime -

paharihacker profile image

A Complete Guide to React useEffect vs useLayoutEffect for Beginners

Rajesh Dhiman -