Discussion on: If Javascript Is Single Threaded, How Is It Asynchronous?

[Eugene Karataev]

I like asynchronous nature of javascript because it helps me to sort arrays easily. No more bubble, selection, merge or quick sort algorithms. Timeout sort for the win!

let arr = [10, 100, 500, 20, 35];

arr.forEach(item => {
  setTimeout(() => console.log(item), item);
})
// 10 20 35 100 500

🤣🤣🤣

[Nandan Kumar]

Hey Eugene,
Would you please help me understand how does this happen. Any link or reference would be very helpful.

TIA :)

[Eugene Karataev]

Well, it's a joke and shouldn't be used anywhere in production code.

We iterate on every element (N) in array of numbers and ask a JS engine to log this number in the console after N milliseconds from now. So, these numbers will be logged in a sorted way, because time in our universe flows in one direction 😁

[Nandan Kumar]

Yes, indeed it's a joke and should not be used anywhere in production. But it's nice to know how things work, It took me some time to figure out but it was worth it.
Thanks 😁

[Brian Barbour]

In the course I'm doing we had to use setTimeout as a way to avoid stack overflow. I don't think I'd ever do it in a real app, but it was an interesting trick.

[Alex]

Unfortunatelly, this cute sorting algorithm doesn't work on values that < 1.

[Eugene Karataev]

It also poorly works with floats (ex. [1.5, 1.4, 1.3, 1.2, 1.1]) and big numbers 😄

[SAURABH BAKOLIA]

Try with this example: [10, -100, 500, -20, 35];

[Bradley Griffith]

did a flex-box version: jsfiddle.net/bradleygriffith/2dsag...

<div class="sorted-list" id="my-list"></div>

.sorted-list {
  align-items: flex-start;
  display: flex;
  margin: 0 -5px;
}

.sorted-list-item {
  margin: 0 5px;
}

const listEl = document.getElementById("my-list");
const arr = [10, 100, 500, 20, 35];

arr.forEach(n => {
  const itemEl = document.createElement("div");

  itemEl.className = "sorted-list-item";
  itemEl.innerHTML = n;
  itemEl.style.order = n;

  listEl.appendChild(itemEl);
});

[Eugene Karataev]

Ahaha, awesome! 😂

[Anton]

half a second sort for 5 items, very quickly

[AWCode0X]

It's amazing
good work

[Nando]

I think you are a bit crazy, bro ;)

[Prabhjeet Singh]

how does it sort with timeout? should it not pick items with index

[Abhishek Bhardwaj]

It has limitation that if any item of array contained number in billion or millions it will keep in waiting unless the time finish.

[James Q Quick]

This is amazing lol

[Syed Aqeel]

This is called timeout sort I think :D

[Ryan Mattos]

genius

[timepp]

This is mostly equivlant with the following code

let arr = [10, 100, 500, 20, 35];
let sorted = 0
for (let i = 0; sorted < arr.length; i++) {
    for (const v of arr) {
        if (v === i) { 
            console.log(v);
            sorted++;
        }
    }
}

[Hamza Pasking Akhtar]

Lol I just saw a content creator talking about this that she interviewed someone that wrote a code this way.

I mean it works, it's creative. 😂