Caesar’s Cipher

Libor Marko
Aug 8 · 3 min read

I completed another interesting front-end web project whose main purpose is to decrypt an encrypted message — Caesar’s Cipher. You can find the source code of this project on my GitHub profile.

Caesar’s Cipher

Programming concepts I used

  • ES6
  • Regular Expressions
  • Data Structures
  • Algorithm Scripting
  • Debugging
  • Functional Programming

Technologies I used

  • JavaScript

How it works

Caesar’s cipher or Caesar’s shift is a simple encryption technique, where one substitutes each letter in text by a letter located some fixed number of positions down the alphabet. ROT13 is a letter substitution cipher that replaces a letter with the letter located 13 letters after it.

I defined a function rot13 that takes a string as an argument (for a purpose of this project a given string is always UPPERCASE). The given string is split into an array of characters.

The map method loops through each character and stores it in a variable x as an integer representing the UTF-16 code. We want to decipher characters A-Z that are represented within 65 and 90 in the UTF-16 code, so everything outside this range (all non-alphabetical characters) is passed on as it is. We want to decipher the first 13 characters of the alphabet A-M, by shifting them by 13 places forward. On the other hand, we want to shift the last 13 characters of the alphabet N-Z backward, in order to stay within a range of characters A-Z, and not move into a-z (see the corresponding table). This ensures to decrypt the given characters correctly.

ASCII characters and their corresponding Decimal and Heximal values [source]

The last step of the function is to join the characters array back into a decrypted string.

Ex.: Let’s decrypt the “TBBQ WBO!” message!
1.
A string is split into an array (“T,B,B,Q, ,W,B,O,!”).
2. A character after character is taken and shifted or passed on considering its representing integer in the UTF-16 code:
“T” is represented by an integer 84, what is more than 78=>a character “T” is shifted by 13 places backward to a character “G”.
“B” is represented by 66, what is less than 78=>”B” is shifted by 13 places forward to “O”.
…same principle is used for other characters in the message:
“B” shifts to “O”
“Q” shifts to “D”
“ ” shifts to “ ”
“W” shifts to “J”
“B” shifts to “O”
“O” shifts to “B”
“!” is represented by 33, what is out of the range 65 to 90, so it is passed on as it is “!”.
3. The last step is to join the array back to a string “GOOD JOB!”.


Libor Marko

Written by

A self-taught web developer always curious about a new challenge. More about me on my linkedin and my web page: http://libormarko.github.io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade