DEV Community

loading...

Is there Race Condition in Javascript: Yes and No

Jimmy
Code, design, think.
Updated on ・3 min read

In a nutshell: The race condition in Javascript could only be fabricated but one could almost never find race condition in reality

A quick Google search if there exists race condition in Javascript, the first result you get this article that claims there's no race condition, and second result is this article that claims there is race condition, and provided an example. For people that don't know what race condition is:

A race condition is an undesirable situation that occurs when a device or system attempts to perform two or more operations at the same time, but because of the nature of the device or system, the operations must be done in the proper sequence to be done correctly.

You can read more about it here

A simple example of race condition would be one light source that is attached to two different light controllers. When we target the light source with two simultaneous actions - one switches on, and the other switches off. The uncertain end result whether the light source is on or off is race condition

It is a more common problem in software/language that leverage multiple processes. Two different processes that can change a data source at the same time can potentially cause race condition. But in the single-threaded world of Javascript, how can race condition happen?

Javascript synchronous functions execute from top down so if you have two functions that try to change the same data source

   let lightbulb = 'white';

   syncChangeToRed(lightbulb);

   synChangeToBlue(lightbulb);

They will execute from top down order, so the same lightbulb will change to red first and then blue.

But suppose you have two asynchronous functions that try to change the same lightbulb, here's where it gets funky:

   let lightbulb = 'white';

   asyncChangeToRed(lightbulb);

   asyncChangeToBlue(lightbulb);

The returned time of each async function is not known. The part where async function done running in heap and handed over to queue is unknown and so whether asyncChangeToRed or asyncChangeToBlue to be executed first is undetermined.

event-loop

As you can see the diagram, the race can only happen inside the heap, but when it's handed over to the queue, they are executed in ordered sequence.

Here are a few scenarios for you to think about:

  1. If you fire asyncChangeToRed() and asyncChangeToBlue() from the same network, even if they spend the same amount of time in heap, because asyncChangeToRed() was fired first, it will be handed over to queue first.
    It is deterministic, so no race condition.

  2. If you fire asyncChangeToRed() on a low speed network, and asyncChangeToBlue() on a fast speed network, because asyncChangeToBlue returned faster from heap, it will be handed over to queue first hence executed first. The change is still deterministic because the speed of the network is known, so no race condition.

  3. Now a more theoretical case if asyncChangeToRed() is fired on a x speed network vs. asyncChangeToBlue() on a y speed network separately at the same time, because x and y are unknown, the only way for a race condition to happen is if x === y.

In reality, you never see it happen because what causes the "race" is external (aka the speed of the network that fires the asynchronous function) not from the system itself. Even if you find an example in reality where x === y, they all funnel into queue to be executed in order, so the nature of javascript can never execute two javascript functions at the same time. You can't really race with another human when you and the other person run in a one-man tunnel? That's why there's not an algorithm that ranks the order of execution in the world of Javascript when "race condition" is posed.

To conclude, just like whether you are team Yanny or Laurel your answer might be different depends on how you look at it. I am team no race condition in Javascript, what about you?

Discussion (0)