Up next in 10
Learn how to Sort Numbers in JavaScript in a very easy way!
Article: https://www.ceos3c.com/javascript/how-to-sort-numbers-in-javascript/
⮘-=[⭐All important links in one place⭐]=-⮚
↬ https://linktree.stefanrows.com
⮘-=[⭐All the stuff I use | Stefan's Amazon Store⭐]=-⮚
↬ https://www.amazon.com/shop/ceos3ctutorials
⮘-=[⭐Join this channel to get access to perks⭐]=-⮚
https://www.youtube.com/channel/UCDqZyVCTwg9UyRWKgQ7Gizg/join
⮘-=[Subscribe]=-⮚
↬ https://www.youtube.com/stefanrows?sub_confirmation=1
⮘-=[Sign Up to my popular 5-Bullet-Friday Newsletter]=-⮚
↬http://eepurl.com/cNJ_Dj
⮘-=[100$ Credit on Digital Ocean for your VPS Droplet]=-⮚
Show More Show Less View Video Transcript
0:00
Hey guys, what's up everyone and welcome back to a new video. In today's video I'm going to show you how to sort numbers in JavaScript
0:07
There are a couple of ways on how to do that and I get this question a lot in our JavaScript tutorials that people want to know how to sort numbers in JavaScript
0:17
And I'm trying to show that to you guys in an easy and easy to follow way
0:22
So as you guys know we always have a written tutorial that goes along with our videos
0:26
If you want to pull that up, I leave the link in the video description below so you can go ahead and look at the code
0:31
If I'm moving too fast or you can copy and paste some of the code or just have it open next to you
0:36
That might help you to stay on top of things and help you to follow along with the video
0:42
All right guys, let's dive right in. Okay guys to get started. We create an array with numbers here
0:47
so we say our numbers array and then we say let numbers and we
0:52
I just copy and paste it from the article. So this is an array with a bunch of numbers
0:57
Which are not sorted in any shape or form so we can see it's 2250 then 1 2
1:03
39 29 and 10 now if you just think about how you would actually sort it
1:09
You will probably search for JavaScript sort and you will end up on this page here
1:14
Which is array prototype sort now if you actually use this function so we say numbers.sort with its default values and
1:24
then you would console.log the numbers array and expect that it will be
1:30
sorted you will be surprised because if you run it and the output the output
1:35
shows then we see it's 1, 10, then it's 2, then 22, 29, 39, 50 and so on. So it's not
1:42
It's not really sorted, but why? If you go back to the MDN documentation here
1:47
then we actually see that if they use string values, that it's actually gonna sort that by the string value
1:56
so alphabetically. And this is because the sort function is per default at least is made for strings So if you look at this here they have an array example too They have an array with the number 1 30 4 21 and then 100
2:12
And they call the sort function on this array and then console.log it. You will see that there comes 1, then comes 100,000, then comes 21, then comes 30, and 4
2:22
So it's not really sorted either. and that is because the function basically treats the numbers that we
2:29
enter there as strings so if you look at that then 25 is basically bigger than
2:34
100 because 2 is bigger than 1 if that makes sense to you so the there is a way
2:41
to circumvent this and I'm going to show you exactly how so the way to do it is
2:45
we still gonna use the sort function but in a slightly modified fashion so we
2:50
keep our numbers array here and then we create our own sort function say like
2:56
this then we do function we call that sort numbers and then we want to input
3:02
an array open our curly braces here and then we say numbers or array in that
3:09
case that's the array we're gonna input in the function and then we call the sort function but instead of just calling it empty we are going to give it
3:17
some values we give it a value a and then comma and the value B and then we
3:22
do an arrow function here and we say a minus B or return a minus B and I'm gonna
3:31
explain to you how that works in a second but if we now call the function
3:37
then we do sort numbers numbers and then we lock the result console lock numbers
3:49
okay and then we hit run and let's see if that worked if that is actually sorting the numbers
4:00
and now we can see that it's 1, 2, 10, 22, 29, 39 and 50
4:06
So now that we know how to sort numbers in JavaScript using our sort numbers function let actually break it down and explain to you guys how that works under the hood so you better understand what you doing
4:18
So how the function works. And for that we just create another function and we just call that function compare numbers or whatever
4:27
And we say two values, a and b. And we open our curlies here
4:32
and we say console.log a minus b and this is just a simple demonstration but in essence it's the same
4:41
thing as here the number you would go ahead and we would say compare numbers whatever one
4:49
and five we enter the numbers here and we save takes a little bit okay and then we run the code
4:58
then you can see that minus four is the result of this which basically means that a is less than b
5:09
so in essence that's exactly the same what our created sort numbers function here does with
5:14
every single value of this array so it's comparing the values and checks which one is larger
5:19
and to explain that is a little bit confusing so I'm actually gonna read to
5:24
you what I've written down in that regard because it's a little bit confusing so
5:28
how that works is by simply subtracting B from A will always return greater than
5:34
zero if A is larger than B it will zero it will return zero if both values are
5:43
equal or less than zero if a is less than b now this is a little bit confusing i understand but
5:51
this is how the sort function or this compare function actually works under the hood and then
5:57
according to that if value a is greater than b or vice versa according to that it's sorting the
6:03
number one slot to the left or one slot to the right and then we end up with a result that is
6:10
correctly sorted. I hope that was okay to understand If not as I said there is a link inside of the article that leads to a stack overflow post where this function is explained in great
6:25
detail if you want to dive into that but this is basically how it works and
6:30
that's an easy way I think to sort numbers in JavaScript now if you want to
6:34
dive deeper if you want to learn more JavaScript head over to see you sec com click on learn in the nav bar and then click on JavaScript and if you are
6:41
there you can see that we have a bunch of beginner friendly articles here every one of those articles
6:46
has also a video attached to it as it is fashion here on our channel so we always like to provide
6:53
a video and an article together to make the experience more interactive and you can also
6:59
just open up this repl and play around with it the link is also in the article for you to learn
7:05
and we are in the process of creating a complete javascript beginner section where you can go
7:10
through step by step and have a complete setup for web development etc the same is true for python
7:16
if you're interested in learning python i recommend you clicking on the python link here and we
7:21
already started to create a beginner section for python so if you click here on start here
7:26
and then you can see a step-by-step guide on how to get started with python and set up your
7:30
development environment etc so if you like this video guys make sure to subscribe to the youtube
7:35
channel as well as the humix channel i would love to see you over there as well humix is a great
7:41
video platform if you don't know that check it out at seosec.com forward slash humix and all of
7:47
my videos can be found there and on youtube and i hope to see you back in the next one i hope this
7:52
was easy to understand leave some comments below hit that subscribe button and the notification bell
7:56
and i hope to see you back in the next one thanks for watching until then