Sitemap
Anik

Anik

Software Engineer | Web3 & AI Enthusiast

Quantum Computing Simplified

5 min readApr 17, 2025

--

Quantum computing processes information in ways that classical computers cannot. At its core, this approach swaps out bits for qubits — quantum units whose amplitudes α and β satisfy that the sum of their squared magnitudes equals one, and the state collapses to one of the basis states (|0⟩ or |1⟩) upon measurement based on these amplitudes and any gates applied.

Bits ∈ {0, 1} → qubits ∈ {superpositions of |0⟩, |1⟩}

α, β ∈ ℂ with |α|² + |β|² = 1 ensures total probability = 1

While actual quantum speedups require specialized hardware, we can still spin up the quantum magic on our everyday hardware — perfect for hands‑on learning, rapid prototyping, and doing fun experiments.

Press enter or click to view image in full size

Core Concepts in Quantum Simulation

1. Qubits

Unlike classical bits, which exist in state 0 or 1, a qubit can exist in a superposition of states. Mathematically, a qubit is represented as:

∣ψ⟩=α∣0⟩+β∣1⟩

Here, α and β are complex amplitudes whose squared magnitudes give the probability of the qubit being measured in the corresponding state. These amplitudes obey the normalization condition:

∣α∣²+∣β∣²=1

In real qubits, α and β are complex, and any global phase e^{iφ} doesn’t affect measurement probabilities. This condition guarantees that the total probability of all possible outcomes is 1.

2. Quantum Gates and Operations

Quantum gates are operations that change the state of qubits by performing unitary transformations. Here are three important gates:

a. Hadamard Gate (H)

The Hadamard gate creates an equal superposition from a basis state. It operates as follows:

H|0⟩ = (|0⟩ + |1⟩) / √2 (equal superposition)
H|1⟩ = (|0⟩ - |1⟩) / √2

This gate is crucial for generating quantum parallelism because it allows one qubit to represent a combination of both 0 and 1 simultaneously.

b. Pauli‑X Gate (X)

The Pauli‑X gate acts like a classical NOT gate by flipping the qubit state:

X|0⟩ = |1⟩
X|1⟩ = |0⟩

c. Controlled-NOT Gate (CNOT)

The CNOT gate is a two-qubit operation where one qubit acts as the control and the other as the target. The target qubit is flipped only if the control qubit is in state |1⟩. Its behaviour on the two-qubit basis states is:

CNOT|00⟩ = |00⟩
CNOT|01⟩ = |01⟩
CNOT|10⟩ = |11⟩
CNOT|11⟩ = |10⟩

This gate is fundamental for generating entanglement between qubits.

Get Anik’s stories in your inbox

Join Medium for free to get updates from this writer.

These gates form a universal set: any quantum computation can be built from H, X, CNOT (plus others).

3. Measurement

In quantum mechanics, measurement is the process that causes a qubit’s state to collapse into one of the basis states. For a qubit represented by

|ψ⟩ = α|0⟩ + β|1⟩

the measurement outcomes are given by:

  • Probability of |0⟩: P(0) = |α|²
  • Probability of |1⟩: P(1) = |β|²

When a measurement is performed, the qubit’s state vector projects onto the measured basis vector (|0⟩ or |1⟩), reflecting the probabilistic nature of quantum mechanics.

Simulating Quantum Operations in JavaScript

Below, are JavaScript examples that simulate both single-qubit and two-qubit systems. These examples demonstrate the application of various quantum gates and incorporates a measurement method that collapses the qubit state to mimic real quantum measurements.

1. Single-Qubit Simulation with Gate Operations and Measurement

This class simulates a single qubit. It includes methods for applying the Hadamard and Pauli‑X gates, and it implements measurement that collapses the qubit state.

class Qubit {
// Initialize with amplitudes for |0> and |1>.
// For simplicity, we are using real-valued amplitudes.
constructor(a, b) {
this.a = a;
this.b = b;
// Normalize the state: |a|² + |b|² = 1.
this.normalize();
}

normalize() {
let norm = Math.hypot(this.a, this.b); // √(a²+b²)
this.a /= norm;
this.b /= norm;
}

// Apply the Hadamard gate:
// H|0> = (|0> + |1>) / √2
// H|1> = (|0> - |1>) / √2
applyHadamard() {
const sqrt2Inv = 1 / Math.sqrt(2);
const newA = sqrt2Inv * (this.a + this.b);
const newB = sqrt2Inv * (this.a - this.b);
this.a = newA;
this.b = newB;
}

// Apply the Pauli-X gate (quantum NOT):
// X|0> = |1> and X|1> = |0>
applyPauliX() {
const temp = this.a;
this.a = this.b;
this.b = temp;
}

// Measurement with state collapse:
// This function simulates the measurement process by collapsing the state
// into either |0> or |1> based on the probabilities.
measure() {
const prob0 = this.a * this.a;
let rand = Math.random();
if (rand < prob0) {
// Collapse to |0⟩.
this.a = 1;
this.b = 0;
return 0;
} else {
// Collapse to |1⟩.
this.a = 0;
this.b = 1;
return 1;
}
}

// Utility: Display the current state as a string.
getState() {
return `|ψ⟩ = ${this.a.toFixed(2)}|0⟩ + ${this.b.toFixed(2)}|1⟩`;
}
}

// Example usage for a single qubit:
let qubit = new Qubit(1, 0); // Initialize to |0⟩.
console.log("Initial State:", qubit.getState());

qubit.applyHadamard(); // Apply Hadamard to create a superposition.
console.log("After Hadamard:", qubit.getState());

qubit.applyPauliX(); // Apply Pauli-X to flip the state.
console.log("After Pauli-X:", qubit.getState());

// Perform measurement; the state will collapse.
const outcome = qubit.measure();
console.log("Measurement Outcome:", outcome);
console.log("State after measurement:", qubit.getState());

Explanation

  • State Initialization:
    The qubit is initialized with specified amplitudes for |0⟩ and |1⟩. The normalize method ensures that the state is valid.
  • Gate Operations:
    a. The Hadamard gate creates a superposition.
    b. The Pauli‑X gate flips the state as one would expect from a classical NOT gate.
  • Measurement:
    The measure method calculates the probability for the state |0⟩, compares it to a randomly generated number, and then collapses the state to either |0⟩ or |1⟩, mimicking the quantum measurement process.

2. Two-Qubit Simulation for the CNOT Gate

The Controlled-NOT (CNOT) gate requires two qubits and introduces entanglement. The following example simulates a two-qubit system, where each state is represented by one of four amplitudes corresponding to |00⟩, |01⟩, |10⟩, and |11⟩.

class TwoQubit {
// a: |00⟩, b: |01⟩, c: |10⟩, d: |11⟩ amplitudes
constructor(a, b, c, d) {
this.a = a;
this.b = b;
this.c = c;
this.d = d;
this.normalize();
}

// Ensure |a|² + |b|² + |c|² + |d|² = 1
normalize() {
const norm = Math.hypot(this.a, this.b, this.c, this.d); // √(a²+b²+c²+d²)
this.a /= norm;
this.b /= norm;
this.c /= norm;
this.d /= norm;
}

// Controlled‑NOT: flip target (second qubit) if control (first qubit) = 1
applyCNOT() {
// swap amplitudes for |10⟩ and |11⟩
[this.c, this.d] = [this.d, this.c];
}

// Return a formatted string of the current state
getState() {
return `|ψ⟩ = ${this.a.toFixed(2)}|00⟩ + ${this.b.toFixed(
2
)}|01⟩ + ${this.c.toFixed(2)}|10⟩ + ${this.d.toFixed(2)}|11⟩`;
}
}

// --- Example usage ---
const twoQubit = new TwoQubit(0, 0, 1, 0); // start in |10⟩ (c=1)

console.log("Initial amplitudes:", {
"|00⟩": twoQubit.a,
"|01⟩": twoQubit.b,
"|10⟩": twoQubit.c,
"|11⟩": twoQubit.d,
});
console.log("Initial state:", twoQubit.getState());

twoQubit.applyCNOT(); // control=1 flips target

console.log("After CNOT amplitudes:", {
"|00⟩": twoQubit.a,
"|01⟩": twoQubit.b,
"|10⟩": twoQubit.c,
"|11⟩": twoQubit.d,
});
console.log("After CNOT state:", twoQubit.getState());

Explanation

  • State Representation:
    The TwoQubit class represents the quantum state across four basis states, fully capturing the state of a two-qubit system.
  • Normalization:
    As in the single-qubit example, normalization ensures that the sum of the probabilities equals 1.
  • CNOT Gate Operation:
    The applyCNOT method swaps the amplitudes for |10⟩ and |11⟩—thus flipping the target qubit when the control is in state |1⟩.

Wrap-Up

These simulations capture superposition, entanglement, and measurement collapse on classical hardware. Note that quantum simulation scales poorly (requiring 2ⁿ amplitudes). This exponential growth means classical sims quickly max out at ~20–30 qubits. These examples are meant for learning and prototyping quantum-inspired algorithms.

Note: This idealized simulator omits real‑world decoherence and hardware noise.

--

--

Written by Anik

Software Engineer | Web3 & AI Enthusiast