Implementing a Caesar Cipher in JavaScript

The Caesar Cipher is a simple cryptographic algorithm with a colorful history and one that can be implemented relatively easy in JavaScript.

Cipher's are a great way to practice your logical coding skills. Plus, they're kind of fascinating. Ciphers have been used for hundreds, if not thousands of years to transmit information between parties in a secretive fashion. And they are still used today to do exactly the same in our current digital world.

The Caesar Cipher itself is relatively outdated by today's standards, because it is incredibly simple to crack. But because of its simplicity and ease of implementation it makes for a great introduction into the world of algorithms.

A brief history of the Caesar Cipher

Before we get to the code, let's get into what a Caesar Cipher is exactly.

A Caesar Cipher, also known as a Shift Cipher or a Caesar shift is a method of cryptography believed to have been used by Julius Caesar himself to transmit sensitive military information to his generals.

At its core, it essentially involves shifting the letters of the alphabet by 'n' amount either to the left or to the right on a given string.

A Caesar Cipher is (from a technical standpoint), one of the simplest ciphers to implement due to its single character replacement mechanism.

Here is a quick example of a Caesar shifted alphabet. 

Original: ABCDEF...
New: CDEFGH...

You can easily spot that in this case we are only shifting the alphabet by 2 letters to the right. And you can also shift elements to the left as well, and this would still be considered a Caesar Cipher shift.

Original: CDEFGH...
New: ABCDEF...

It's quite possible that during its early days, the shift was indeed secure as most working people could not easily read.

Implementation

There are 2 different ways to implement the Caesar cipher. The first being that we create the new shifted alphabet ahead of time and perform a 1 to 1 lookup to find the new character to replace.

The second method involves shifting the letters in real-time as we navigate down the original message.

Both methods yield the exact same results. I will be showing the implementation to the first method down below.

Method #1

Let's start by creating 2 different variables. The first will represent the original alphabet in the original language, stored as one large string. And the second will represent the new shifted alphabet based on the 'n' shift parameter. That value will be empty by default.

var alphabet = "abcdefghijklmnopqrstuvwxyz";
var newalpha = "";

Now let's setup a function to create the newly shifted alphabet.

function shift(n){
	for (let i = 0; i < alphabet.length; i++){
		let offset = (i + n) % alphabet.length;
		newalpha += alphabet[offset];
	}
}

The algorithm essentially looks ahead by 'n' characters and it wraps around back to the beginning once it reaches the end of the alphabet.

This will give you the new alphabet to work with for the encoding phase.

Next up, let's create the actual encoding function.

The actual encoding logic is relatively straightforward for the most part. You simply take each of the letters in a given message and find its replacement character in the new alphabet.

function encode(message){
    let result = "";
    message = message.toLowerCase();
    for (let i = 0; i < message.length; i++){
        let index = alphabet.indexOf(message[i]);
        result += newalpha[index];
    }
    return result;
}

Here you can see it in action with a n = 1 shift to the right.

Demo

Decode

Now that we have an encoded string, let's work our backwards to decode the new message.

The process is essentially identical to the encoding. The only difference being that the new alphabet will be used as the lookup table.

function decode(message){
    let result = "";
    message = message.toLowerCase();
    for (let i = 0; i < message.length; i++){
        let index = newalpha.indexOf(message[i]);
        result += alphabet[index];
    }
    return result;
}

And that is a quick implementation of the Caesar Cipher. It's important to note that you probably should not use this to secure either your own or your clients personal data.

For that, you might want to take a look at encryption instead, which is different from either hashing or substituting.

Download on Codepen.io