How are Race Conditions in single threaded JavaScript possible?

Concurrency Problems
● Race condition
● Deadlock
● Livelock
● Resource starvation
● Resource leaks

Solutions
javascruptissinglethreaded

Solutions
nodejsissinglethreaded

Solutions
Promises
async/await

Concurrent Computing

Race Condition
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
async move(dx, dy) {
this.x = await add(this.x, dx);
this.y = await add(this.y, dy);
}
}

Race Condition
const random = (min, max) => Math
.floor(Math.random() * (max - min + 1)) + min;
const add = (x, dx) => new Promise(resolve => {
setTimeout(() => {
resolve(x + dx);
}, random(20, 100));
});

Race Condition
const p1 = new Point(10, 10);
console.log(p1);
p1.move(5, 5);
p1.move(6, 6);
p1.move(7, 7);
p1.move(8, 8);
setTimeout(() => {
console.log(p1);
}, 1000);

Race Condition
Initial
Point { x: 10, y: 10 }
Expected
Point { x: 36, y: 36 }
Actual
Point { x: 18, y: 25 }

Race Condition

Possible Solutions
● Synchronization
● Resource locking
● Special control ﬂow organization
● Queuing theory
● Actor model
● Use DBMS transactions

Synchronization Primitives
Semaphore
Binary semaphore
Counting semaphore
Condition variable
Spinlock
Mutex
Timed mutex
Shared mutex
Recursive mutex
Monitor
Barrier

Semaphore
class Semaphore {
constructor()
enter(callback)
leave()
}
semaphore.enter(() => {
// do something
semaphore.leave();
});
github.com/HowProgrammingWorks/Semaphore
class Semaphore {
constructor()
async enter()
leave()
}
await semaphore.enter();
// do something
semaphore.leave();

Mutex
class Mutex {
constructor()
async enter()
leave()
}
await mutex.enter();
// do something with shared resources
mutex.leave();
https://github.com/HowProgrammingWorks/Mutex

Resource Locking
class Lock {
constructor() {
this.active = false;
this.queue = [];
}
leave() {
if (!this.active) return;
this.active = false;
const next = this.queue.pop();
if (next) next();
}
}
enter() {
return new Promise(resolve => {
const start = () => {
this.active = true;
resolve();
};
if (!this.active) {
start();
return;
}
this.queue.push(start);
});
}

Resource Locking
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
this.lock = new Lock();
}
async move(dx, dy) {
await this.lock.enter();
this.x = await add(this.x, dx);
this.y = await add(this.y, dy);
this.lock.leave();
}
}

Resource Locking
const p1 = new Point(10, 10);
console.log(p1);
p1.move(5, 5);
p1.move(6, 6);
p1.move(7, 7);
p1.move(8, 8);
setTimeout(() => {
console.log(p1);
}, 1000);

Resource Locking
Initial
Point { x: 10, y: 10 }
Expected
Point { x: 36, y: 36 }
Actual
Point { x: 36, y: 36 }

Resource Locking

Asynchronous Res Locks

Flow Commutation
const fx = metasync(
[f1, f2, f3, [[f4, f5, [f6, f7], f8]], f9]
);
like in electronics

Real-life Example
Warehouse API
● Check balances
● Ship goods
● Lock balances
github.com/HowProgrammingWorks/RaceCondition

Web Locks API
locks.request('resource', opt, async lock => {
if (lock) {
// critical section for `resource`
// will be released after return
}
});
https://wicg.github.io/web-locks/

Web Locks: await
(async () => {
await something();
await locks.request('resource', async lock => {
});
await somethingElse();
})();

Web Locks: Promise
locks.request('resource', lock => new Promise(
(resolve, reject) => {
// you can store or pass
// resolve and reject here
}
));

Web Locks: Thenable
locks.request('resource', lock => ({
then((resolve, reject) => {
// you can call resolve and reject here
})
}));

Web Locks: Abort
const controller = new AbortController();
setTimeout(() => controller.abort(), 200);
const { signal } = controller;
locks.request('resource', { signal }, async lock => {
// lock is held
}).catch(err => {
// err is AbortError
});

Web Locks for Node.js
github.com/nodejs/node/issues/22702
Open
github.com/nodejs/node/pull/22719
Closed

Safe data structures
● Low-level structures
e.g. Register, Counter, Buffer, Array, Lists, etc.
● Abstract structures
e.g. Queue, Graph, Polyline, etc.
● Subject-domain classes
e.g. Sensors, Payment, Biometric data, etc.
● Resources and handles
e.g. Sockets, Connections, Streams, etc.

Deadlock
(async () => {
await locks.request('A', async lock => {
await locks.request('B', async lock => {
});
});
})(); (async () => {
await locks.request('B', async lock => {
await locks.request('A', async lock => {
});
});
})();

Livelock
State1 State2
State3 State4

Alternative Solutions
● Thread safe data structures
● Lock-free data structures
● Wait-free algorithms
● Conﬂict-free data structures

Links
habr.com/ru/post/452974/
github.com/HowProgrammingWorks/RaceCondition
github.com/HowProgrammingWorks/Semaphore
github.com/HowProgrammingWorks/Mutex
github.com/metarhia/metasync
wicg.github.io/web-locks

Thanks
github.com/tshemsedinov
youtube.com/TimurShemsedinov
github.com/HowProgrammingWorks
timur.shemsedinov@gmail.com

How are Race Conditions in single threaded JavaScript possible?

Related slideshows

More Related Content

How are Race Conditions in single threaded JavaScript possible?