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