JavaScript

How to Do Base64 Encoding and Decoding in JavaScript

Java Script is one of the most widely used programming languages in web-based programming. The biggest advantage of using this scripting language is that the code written in this language is extremely concise and compact for it allows you to shrink multiple lines of code within a single line and offers the exact same functionality. This is in fact the major reason behind its popularity among a vast community of developers. As far as this guide is concerned, we want to teach you the method of performing the Base64 encoding and decoding in Java Script using the Windows 10 operating system. In this article, you will be able to witness how easy it is to carry out these processes within Java Script and that too without having the need of installing any additional compiler.

Performing the Base64 Encoding and Decoding in Java Script in Windows 10

You do not even need to install a dedicated compiler rather you can easily do this while using any web browser of your choice to perform the Base64 encoding and decoding in Java Script. In our case, we will be using the Google Chrome browser with a Windows 10 system. To learn the Base64 encoding and decoding methods in Java Script, you will have to go through the following two main steps. These steps are extremely simple and very easy to execute.

Step 1: Accessing the Console of the Desired Web Browser

First, we have launched the Google Chrome web browser on our Windows 10 system by clicking on its icon. Then, we simply clicked on its hamburger menu icon to expand it.

From the hamburger menu of our Google Chrome browser, we need to click on the “More tools” option as shown in the following image:

Clicking on this option will launch a sub-cascading menu from which we need to select the “Developer tools” option as highlighted below:

This option will launch a small developer tools pane on the right side of your Google Chrome window. From this developer tools pane, you need to switch to the “Console” tab where we will be writing our Java Script code.

Step 2: Writing and Running the Java Script Code for Performing the Base64 Encoding and Decoding

For doing the Base64 encoding and decoding in Java Script, we have written the code shown in the image below within our browser’s console. You will have to press the Enter key after writing each statement so that it can be executed. Now, we will thoroughly discuss this Java Script code in this section.

The first statement in this Java Script code is “var str = “I Am a Tech Junkie”. With the help of this statement, we have created a random string that we first want to encode and then decode later. Then, our second statement is “console.log(“The original string is: ”+ str)”. This statement will simply print our original string on the console as you can see from the line “VM56:1” of the image shown above. Now, to encode our original string, we used the statement “var encodedString = btoa(str)”.

In this statement, we have created a string named “encodedString” for holding the encoded string and then we have just equalized it to the output of the function “btoa(str)”. This is a built-in function of the Java Script and is used to encode any given string with Base64 encoding. You simply need to pass the desired string to this function and let it perform its magic. After that, we have used the statement “console.log(“The encoded string is: ”+ encodedString)” for printing our encoded string on the console. You can witness our encoded string from the line “VM76:1” of the image shown above.

Then, we wanted to decode this encoded string with Base64 in Java Script. To do that, we have used the statement “var decodedString = atob(encodedString)”. In this statement, we have first created a string named “decodedString” and equalized it to the result of the “atob(encodedString)” function. Again, this is a built-in function of the Java Script that is used for decoding an encoded string with Base64. This function simply takes an encoded string as its input. Finally, we have used the “console.log(“The decoded string is: ”+ decodedString)” statement for printing our decoded string on the terminal. You can see our decoded string from the line “VM265:1” of the image shown above. From here, you can easily verify that our decoded string is exactly the same as our original string which means that we have managed to carry out the Base64 encoding and decoding processes successfully while using the Java Script in Windows 10.

Conclusion

This article was designed to teach you the methods of performing the Base64 encoding and decoding using the Java Script in Windows 10. For that, we have used the Google Chrome browser’s console in Windows 10. This was the best part of this method as we did not require any additional compiler for running our code. After accessing the Google Chrome browser’s console, we created and executed a Java Script code for encoding and decoding the given string. Using the very same method, you can encode or decode any string of your choice with Base64 in Windows 10. You can even use browser consoles other than Google Chrome such as Firefox, Internet Explorer, Microsoft Edge, etc. However, if you do not want to use the browser console for executing the Java Script code, then you can use any compiler of your choice to do so.

About the author

Saeed Raza

Hello geeks! I am here to guide you about your tech-related issues. My expertise revolves around Linux, Databases & Programming. Additionally, I am practicing law in Pakistan. Cheers to all of you.