DEV Community

Cover image for Quantum Computing with Javascript using Q.js
Simon Pfeiffer for Codesphere Inc.

Posted on

8 2

Quantum Computing with Javascript using Q.js

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 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.

//creating the circuit for the bell state
const phiPlus = Q`
H-X#0
I-X#1
`
//rendering the circuit on the page
document.body.appendChild(phiPlus.toDom())
//simulating and reporting the results
const reportArr = phiPlus.report$().split('\n')
//Rendering the result on the page
for(let i = 1; i < reportArr.length - 1; i++) {
const div = document.createElement('div')
div.appendChild(document.createTextNode(reportArr[i]))
document.body.appendChild(div)
document.body.appendChild(document.createElement('br'))
}
view raw bell_state.js hosted with ❤ by GitHub

You should see something like this on your webpage

Image description

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

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


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 is the first cloud provider that lets you work directly in the cloud environment through an IDE and terminal. Check us out!

Happy Coding!

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay