Quantum Computing with Javascript using Q.js
Tags: javascript, quantum, programming, tutorial
Published: 2021-12-29 15:58:28

While Quantum Computing may feel like a new buzzword, it’s been around for quite a long time. What started as a theoretical idea in the 1980s is slowly becoming a reality. 

In this tutorial, we’ll be talking about how Quantum computing works and how you can use Javascript to simulate a simple Quantum circuit that you can play around with.

---

###What is Quantum Computing?

Quantum computing is a form of computation that harnesses the power and potential of Quantum Mechanics. Unlike classical computing that works with transistors and bit values 0 and 1, quantum computing uses the properties exhibited by subatomic particles to perform computations and solve problems too complex for classical computers.

It utilizes what’s known as qubits, which can have values 0, 1, or both 0 and 1 at the same time. This property of having two values at the same time is a feature of superposition and is only possible within quantum states and not classical ones.
 
Devices that perform quantum computations are known as quantum computers. These are specially designed and maintained to be able to harness the various properties of quantum states. It is seen that quantum computers are gaining tremendous attention and are considered to be the future of computing. 

---

###Applications of Quantum Computing
Any problem that can be solved by a classical computer can be solved by a quantum computer. More importantly, some potential applications that become possible or exponentially more efficient with Qubits include:

* Cryptography
* Quantum Chemistry & computer-aided drug design
* Simulating quantum systems
* Machine learning
* Computational biology

Since applications in quantum need specialized hardware, we use classical computers to simulate quantum computer behavior with the help of languages like python, JavaScript, etc. Here, we have a short example to create bell state circuits in JavaScript and further simulate the quantum behavior.

---

###What we’ll be making
By using a library called [Q.js](https://quantumjavascript.app/) we can run basic quantum computing circuits inside the Javascript console and add the results to the HTML page. Q.js is an open-source JavaScript library that helps in creating and simulating various quantum circuits.

Here we are going to have a look at how to use the Q.js library to create a Bell state circuit and simulate it. The Bell state is a special and important quantum circuit involving two qubits. It creates entangled pairs of qubits which have various uses. This circuit is designed using a Hadamard gate(H) and a Controlled-Not gate(CX).
 
---

###Demo Circuit
First, download the build folder from the Q.js library repo in GitHub. It has the basic structure to begin building your first quantum circuit using Q.js. It also has a `build.sh` file but we will not be using it. 

https://github.com/stewdio/q.js/tree/master/build

Next, Create a new JavaScript file in the same folder. You can manipulate the DOM elements and create the circuit from the JavaScript console in your browser itself but we are going to use the file to keep it for future reference.

In our Javascript file, we can then create the circuit object in text format as mentioned in the code. We can also append this circuit to the webpage’s body using the `toDom()` method.
 
{% gist https://gist.github.com/RanjanSushant/0b1a9ae87898ca2fdfaa02a5eeb1dfab %}

You should see something like this on your webpage

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzw0vno2afi80j7i5vp2.png)

The result of simulating any quantum circuit is the probability of getting a particular combination as the output. You can simulate the above circuit using the `report$()` method (It returns the results as a string). 

If you display this on your webpage using the traditional JavaScript way you will get something like this.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lt7gtmhrezx0k378ojdx.png)


To display the results on your webpage in a cleaner way you can use the `split()` method (split at newline) and save the probability for each two-qubit combination as an array element. 

Because of how `.report$()` works the first and last element of the array will be empty strings. The rest of the elements can be displayed on the webpage by adding them to a div and appending it to the body.

Your final result will look something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvb70s3h6mrvvjlkotxk.png)


---

There you go! You’ve made your first Quantum Circuit with Javascript. Play around with it and observe how the results change. You can also create your own circuit from scratch by taking help from the API documentation on the Q.js website.
 
There’s no question that quantum computing is going to forever change the cloud. When that day comes, you want a cloud provider that you can trust to stay at the forefront of computing without making life harder for you. [Codesphere](https://link.codesphere.com/HG) is the first cloud provider that lets you work directly in the cloud environment through an IDE and terminal. Check us out!

Happy Coding!