Avoid. Magic. Numbers

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);    }  }

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);    }  }

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);    }  }

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);    }  }

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