Loading lesson path
Concept visual
Start at both ends
Formula
Atomics Object provides low - level atomic operations on shared memory.Typed Arrays to share data between workers.
When multiple threads (for example, the main thread and one or more workers) access the same data, you can get race conditions. Atomics helps avoid these race conditions by providing operations that:
Are performed atomically (cannot be interrupted halfway)
Atomics object is a global object (like
) with static methods such as Atomics.load(), Atomics.store(), Atomics.add(), and more. Atomics are an advanced feature. You typically use Atomics when you work with:
A
A typed array that uses the shared buffer (e.g.
) One or more workers (or threads) that share the same buffer
Formula
Browsers may require special headers (like COOP/COEP) forSharedArrayBuffer to be enabled on the web.
Create a shared buffer and a shared integer array:
const buffer = new SharedArrayBuffer(4 * Int32Array.BYTES_PER_ELEMENT);
// Shared integer array with 4 elements const sharedArray = new Int32Array(buffer);
// Initialize the array sharedArray[0] = 10;
sharedArray[1] = 20;
sharedArray[2] = 30;
sharedArray[3] = 40;Atomics.load() to read and Atomics.store() to write an element in a shared typed array.
Example: Atomics.load() and Atomics.store()
var buffer = new SharedArrayBuffer(4 * Int32Array.BYTES_PER_ELEMENT);
var sharedArray = new Int32Array(buffer);// Store a value atomically
Atomics.store(sharedArray, 0, 123);
// Load the value atomically var value = Atomics.load(sharedArray, 0);
console.log("Value:", value); // Value: 123
Atomics.store() returns the value you stored.
Atomics.load() returns the current value of the element.Atomics.add() and Atomics.sub()
change a value and return the old value.Example: Atomics.add()
var buffer = new SharedArrayBuffer(4 * Int32Array.BYTES_PER_ELEMENT);
var sharedArray = new Int32Array(buffer);
sharedArray[0] = 5;
var oldValue = Atomics.add(sharedArray, 0, 3);
console.log("Old:", oldValue); // Old: 5 console.log("New:", sharedArray[0]);// New: 8Example: Atomics.sub()
var buffer = new SharedArrayBuffer(4 * Int32Array.BYTES_PER_ELEMENT);
var sharedArray = new Int32Array(buffer);
sharedArray[0] = 10;
var oldValue = Atomics.sub(sharedArray, 0, 4);
console.log("Old:", oldValue); // Old: 10 console.log("New:", sharedArray[0]);// New: 6Atomics.exchange() sets a new value and returns the old one. Atomics.compareExchange() only sets a new value if the current value is equal to a given expected value.
Example: Atomics.exchange()
var buffer = new SharedArrayBuffer(4 * Int32Array.BYTES_PER_ELEMENT);
var sharedArray = new Int32Array(buffer);
sharedArray[0] = 1;
var oldValue = Atomics.exchange(sharedArray, 0, 99);
console.log("Old:", oldValue); // Old: 1 console.log("New:", sharedArray[0]); // New: 99Example: Atomics.compareExchange()
var buffer = new SharedArrayBuffer(4 * Int32Array.BYTES_PER_ELEMENT);
var sharedArray = new Int32Array(buffer);
sharedArray[0] = 10;
// Only replace 10 with 20 if the current value is 10 var oldValue = Atomics.compareExchange(sharedArray, 0, 10, 20);
console.log("Old:", oldValue); // Old: 10 console.log("New:", sharedArray[0]); // New: 20
// Now it will NOT change because the expected value does not match oldValue = Atomics.compareExchange(sharedArray, 0, 10, 30);
console.log("Old:", oldValue); // Old: 20 console.log("New:", sharedArray[0]); // New: 20
Atomics.wait() and Atomics.notify()
Atomics.wait()
(in workers) can put a thread to sleep until the value at a position changes, and
Atomics.notify()wakes up one or more sleeping threads.
Atomics.wait() can only be used in worker contexts (not on the main thread) in browsers.