Atomics - Quick Guide



Atomics - Overview

Atomics

The Atomics is an object in JavaScript which provides atomic operations to be performed as static methods. Just like the methods of Math object, the methods and properties of Atomics are also static. Atomics are used with SharedArrayBuffer objects.

The Atomic operations are installed on an Atomics Module. Unlike other global objects, Atomics is not a constructor. Atomics cannot be used with a new operator or can be invoked as a function.

Atomic Operations

Atomic operations are uninterruptible.

When memory is shared, multiple threads can read or write an existed data in the memory. So if any data got changed, there will be a loss of data Atomic operations make sure that predicted values(data) are written and read accurately. Atomic operations wont start until and unless the current operation is finished, so there is no way to change an existed data.

Example

Following is the code demonstrating use of JavaScript Atomics Operation −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.add(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Output

Verify the result.

Atomics - add() Method

Atomics

The Atomics is an object in JavaScript which provides atomic operations to be performed as static methods. Just like the methods of Math object, the methods and properties of Atomics are also static. Atomics are used with SharedArrayBuffer objects.

The Atomic operations are installed on an Atomics Module. Unlike other global objects, Atomics is not a constructor. Atomics cannot be used with a new operator or can be invoked as a function.

Atomic Operations

Atomic operations are uninterruptible.

When memory is shared, multiple threads can read or write an existed data in the memory. So if any data got changed, there will be a loss of data Atomic operations make sure that predicted values(data) are written and read accurately. Atomic operations wont start until and unless the current operation is finished, so there is no way to change an existed data.

Example

Following is the code demonstrating use of JavaScript Atomics Operation −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.add(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Output

Verify the result.

Atomics - add() Method

add method adds a provided value at a given position in the array. It returns the old value at that position. This atomic operation ensures that no other write can happen until the modified value is written back.

Syntax

Atomics.add(typedArray, index, value)

Parameters

  • typedArray is the integer typed array.

  • index is position in typedarray.

  • value to be added.

Return

Returns old value at given position.

Exceptions

  • TypeError in case passed array is not a integer typed array.

  • RangeError if index passed is out of bound in typed array.

Example

Following is the code for implementing JavaScript Atomics −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.add(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Output

Verify the result.

Atomics - and() Method

and method computes the bitwise AND with a provided value at a given position in the array. It returns the old value at that position. This atomic operation ensures that no other write can happen until the modified value is written back.

Syntax

Atomics.and(typedArray, index, value)

Parameters

  • typedArray is the integer typed array.

  • index is position in typedarray.

  • value with which bitwise AND to be computed.

Return

Returns old value at given position.

Exceptions

  • TypeError in case passed array is not a integer typed array.

  • RangeError if index passed is out of bound in typed array.

Example

Following is the code for implementing JavaScript Atomics −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.and(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            //6 & 2 = 110 & 010 = 010 = 2
            container.innerHTML = Atomics.and(arr, 0, 2) + '<br/>'+ Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Output

Verify the result.

Atomics - compareExchange() Method

compareExchange method compares and exchanges a replacement value if given value is not same as old value. It returns the old value at that position. This atomic operation ensures that no other write can happen until the modified value is written back.

Syntax

Atomics.compareExchange(typedArray, index, expectedValue, replacementValue)

Parameters

  • typedArray is the integer typed array.

  • index is position in typedarray.

  • expectedValue to check for equality.

  • replacementValue to exchange.

Return

Returns old value at given position.

Exceptions

  • TypeError in case passed array is not a integer typed array.

  • RangeError if index passed is out of bound in typed array.

Example

Following is the code for implementing JavaScript Atomics −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.compareExchange(arr, 0, 6, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.compareExchange(arr, 0, 6, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Output

Verify the result.

Atomics - exchange() Method

exchange method exchanges a given value at given position of an array. It returns the old value at that position. This atomic operation ensures that no other write can happen until the modified value is written back.

Syntax

Atomics.exchange(typedArray, index, value)

Parameters

  • typedArray is the integer typed array.

  • index is position in typedarray.

  • value to exchange.

Return

Returns old value at given position.

Exceptions

  • TypeError in case passed array is not a integer typed array.

  • RangeError if index passed is out of bound in typed array.

Example

Following is the code for implementing JavaScript Atomics −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.exchange(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.exchange(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Output

Verify the result.

Atomics - isLockFree() Method

isLockFree method is used to determine whether locks are to be used or not for atomic operations. If given size is one of TypedArray.BYTES_PER_ELEMENT property of integer TypedArray types then it returns true. TypedArray.BYTES_PER_ELEMENT represents the size in bytes of each element of an typed array.

Syntax

Atomics.isLockFree(size)

Parameters

  • size to be checked in bytes.

Return

Returns true if operation is lock free as false.

Example

Following is the code for implementing JavaScript Atomics −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.isLockFree(1)</p>
      <p>Atomics.isLockFree(3)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            // Int8Array.BYTES_PER_ELEMENT = 1
            container.innerHTML = Atomics.isLockFree(Int8Array.BYTES_PER_ELEMENT) + '<br/>' + Atomics.isLockFree(3);
         }
      </script>
   </body>
</html>

Output

Verify the result.

Atomics - load() Method

load method returns a value at given position in the array.

Syntax

Atomics.load(typedArray, index)

Parameters

  • typedArray is the integer typed array.

  • index is position in typedarray.

Return

Returns value at given position.

Exceptions

  • TypeError in case passed array is not a integer typed array.

  • RangeError if index passed is out of bound in typed array.

Example

Following is the code for implementing JavaScript Atomics −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.add(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Output

Verify the result.

Atomics - notify() Method

notify method notifies the waiting agent to wake up. notify method can work only with Int32Array created using SharedArrayBuffer. It returns 0 in case of non-shared ArrayBuffer object is used.

Syntax

Atomics.notify(typedArray, index, count)

Parameters

  • typedArray is a shared Int32Array.

  • index is position in typedarray to wake up on.

  • count is the number of sleeping agents to notify.

Return

Returns the number of agents woken up.

Exceptions

  • TypeError in case passed array is not a integer typed array.

  • RangeError if index passed is out of bound in typed array.

Example

Following is the code for implementing JavaScript Atomics −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.store(arr, 0, 5)</p>
      <p>Atomics.notify(arr, 0, 1)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(16);
            var arr = new Int32Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;            
            container.innerHTML = Atomics.store(arr, 0, 5) + '<br>' + Atomics.notify(arr, 0, 1);
         }
      </script>
   </body>
</html>

Output

Verify the result.

Atomics - or() Method

or method computes the bitwise OR with a provided value at a given position in the array. It returns the old value at that position. This atomic operation ensures that no other write can happen until the modified value is written back.

Syntax

Atomics.or(typedArray, index, value)

Parameters

  • typedArray is the integer typed array.

  • index is position in typedarray.

  • value with which bitwise OR to be computed.

Return

Returns old value at given position.

Exceptions

  • TypeError in case passed array is not a integer typed array.

  • RangeError if index passed is out of bound in typed array.

Example

Following is the code for implementing JavaScript Atomics −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.or(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            //6 | 2 = 110 | 010 = 110 = 6
            container.innerHTML = Atomics.or(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Output

Verify the result.

Atomics - store() Method

store method stores a value at provided location in an array and returns the same. This atomic operation ensures that no other write can happen until the modified value is written back.

Syntax

Atomics.store(typedArray, index, value)

Parameters

  • typedArray is the integer typed array.

  • index is position in typedarray where value to be stored.

  • value to be stored.

Return

Returns value stored at given position.

Exceptions

  • TypeError in case passed array is not a integer typed array.

  • RangeError if index passed is out of bound in typed array.

Example

Following is the code for implementing JavaScript Atomics −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.store(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;           
            container.innerHTML = Atomics.store(arr, 0, 2) + '<br/>'
            + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Output

Verify the result.

Atomics - sub() Method

sub method subtracts a provided value at a given position in the array. It returns the old value at that position. This atomic operation ensures that no other write can happen until the modified value is written back.

Syntax

Atomics.sub(typedArray, index, value)

Parameters

  • typedArray is the integer typed array.

  • index is position in typedarray.

  • value to be subtracted.

Return

Returns old value at given position.

Exceptions

  • TypeError in case passed array is not a integer typed array.

  • RangeError if index passed is out of bound in typed array.

Example

Following is the code for implementing JavaScript Atomics −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.sub(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            //6 - 2 = 4
            container.innerHTML = Atomics.sub(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Output

Verify the result.

Atomics - xor() Method

xor method computes the bitwise XOR with a provided value at a given position in the array. It returns the old value at that position. This atomic operation ensures that no other write can happen until the modified value is written back.

Syntax

Atomics.xor(typedArray, index, value)

Parameters

  • typedArray is the integer typed array.

  • index is position in typedarray.

  • value with which bitwise XOR to be computed.

Return

Returns old value at given position.

Exceptions

  • TypeError in case passed array is not a integer typed array.

  • RangeError if index passed is out of bound in typed array.

Example

Following is the code for implementing JavaScript Atomics −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.xor(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            //6 xor 2 = 110 xor 010 = 100 = 4
            container.innerHTML = Atomics.xor(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Output

Verify the result.

Advertisements