René's URL Explorer Experiment

{"@context":"https://schema.org","@graph":[{"@type":"Article","@id":"https://www.webcodegeeks.com/javascript/javascript-sort-array-example/#article","isPartOf":{"@id":"https://www.webcodegeeks.com/javascript/javascript-sort-array-example/"},"author":{"name":"Era Balliu","@id":"https://www.webcodegeeks.com/#/schema/person/c27ecf40c810e6396ba93ffb829c7b0e"},"headline":"JavaScript Sort Array Example","datePublished":"2014-11-18T12:29:04+00:00","dateModified":"2018-06-20T14:03:01+00:00","mainEntityOfPage":{"@id":"https://www.webcodegeeks.com/javascript/javascript-sort-array-example/"},"wordCount":1153,"commentCount":0,"publisher":{"@id":"https://www.webcodegeeks.com/#organization"},"image":{"@id":"https://www.webcodegeeks.com/javascript/javascript-sort-array-example/#primaryimage"},"thumbnailUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https://www.webcodegeeks.com/javascript/javascript-sort-array-example/#respond"]}]},{"@type":"WebPage","@id":"https://www.webcodegeeks.com/javascript/javascript-sort-array-example/","url":"https://www.webcodegeeks.com/javascript/javascript-sort-array-example/","name":"JavaScript Sort Array Example - Web Code Geeks - 2026","isPartOf":{"@id":"https://www.webcodegeeks.com/#website"},"primaryImageOfPage":{"@id":"https://www.webcodegeeks.com/javascript/javascript-sort-array-example/#primaryimage"},"image":{"@id":"https://www.webcodegeeks.com/javascript/javascript-sort-array-example/#primaryimage"},"thumbnailUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","datePublished":"2014-11-18T12:29:04+00:00","dateModified":"2018-06-20T14:03:01+00:00","description":"Interested to learn about Sort Array in JS? Check our Example on how to sort an array of numbers or structures ascending/descending/randomizing/reversing!","breadcrumb":{"@id":"https://www.webcodegeeks.com/javascript/javascript-sort-array-example/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://www.webcodegeeks.com/javascript/javascript-sort-array-example/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/javascript/javascript-sort-array-example/#primaryimage","url":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","contentUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https://www.webcodegeeks.com/javascript/javascript-sort-array-example/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.webcodegeeks.com/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https://www.webcodegeeks.com/category/javascript/"},{"@type":"ListItem","position":3,"name":"JavaScript Sort Array Example"}]},{"@type":"WebSite","@id":"https://www.webcodegeeks.com/#website","url":"https://www.webcodegeeks.com/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https://www.webcodegeeks.com/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://www.webcodegeeks.com/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https://www.webcodegeeks.com/#organization","name":"Exelixis Media P.C.","url":"https://www.webcodegeeks.com/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/#/schema/logo/image/","url":"https://www.webcodegeeks.com/wp-content/uploads/2022/06/exelixis-logo.png","contentUrl":"https://www.webcodegeeks.com/wp-content/uploads/2022/06/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https://www.webcodegeeks.com/#/schema/logo/image/"},"sameAs":["https://www.facebook.com/webcodegeeks","https://x.com/webcodegeeks"]},{"@type":"Person","@id":"https://www.webcodegeeks.com/#/schema/person/c27ecf40c810e6396ba93ffb829c7b0e","name":"Era Balliu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/#/schema/person/image/","url":"https://secure.gravatar.com/avatar/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","contentUrl":"https://secure.gravatar.com/avatar/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","caption":"Era Balliu"},"description":"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.","sameAs":["http://www.webcodegeeks.com/","https://www.facebook.com/era.balliu.7","https://www.instagram.com/eraballiu/","https://www.linkedin.com/in/eraballiu","https://www.pinterest.com/001r2gw0jt0ln6d/","https://x.com/BalliuEra","https://www.youtube.com/c/eraballiu"],"url":"https://www.webcodegeeks.com/author/era-balliu/"}]}

{"@context":"http:\/\/schema.org","@type":"BreadcrumbList","@id":"#Breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Home","@id":"https:\/\/www.webcodegeeks.com\/"}},{"@type":"ListItem","position":2,"item":{"name":"JavaScript","@id":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"}}]}

{"@context":"http:\/\/schema.org","@type":"Article","dateCreated":"2014-11-18T14:29:04+02:00","datePublished":"2014-11-18T14:29:04+02:00","dateModified":"2018-06-20T17:03:01+03:00","headline":"JavaScript Sort Array Example","name":"JavaScript Sort Array Example","keywords":[],"url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-sort-array-example\/","description":"Array sorting is a key development technique applied in a variety of situations. Below we'll show you exactly how to use Sort Array, be it sorting an array of numbers, names or structures, ascending,","copyrightYear":"2014","articleSection":"JavaScript","articleBody":"Array sorting is a key development technique applied in a variety of situations. Below we'll show you exactly how to use Sort Array, be it sorting an array of numbers, names or structures, ascending, descending or even randomizing and reversing an array.\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nThe sort() method\r\nThe sort() method sorts the elements of an array and returns the array. The sort is not necessary stable (read here for more information). The syntax for the function is like this:\r\n\r\n[js]\r\narr.sort([compareFunction])\r\n[\/js]\r\n\r\nThe sort() function takes the optional parameter compareFunction. This parameter specifies the sort order, and if omitted the sorting will go according to string Unicode code points. What if it's not omitted?\r\n\r\nIn this case the array elements are sorted according to the return value of the compareFunction. Which means, if a and b were two elements being compared then when the return value is less than 0, a is sorted to a lower index than b, if the return value is 0 than they're equal, and if the return value is greater than 0, a is sorted to a higher index than b. Beware that compareFunction(a, b) must always return the same value when given a specific pair of elements as it's arguments. If inconsistent results are returned then the sort order is undefined.\r\nSorting strings\r\nSo let's get to actually using them. The easiest use of the sort() function is sorting an array of strings. The code will go like this:\r\n\r\n[js]\r\nvar stringArray = ['Blue', 'Humpback', 'Beluga'];\r\n\r\nconsole.log('stringArray:', stringArray.join());\r\nconsole.log('Sorted:', stringArray.sort());\r\n[\/js]\r\n\r\nWe have only declared the array, and printed it as it was originally, and also after sorting. Pretty simple so far.\r\nSorting Numbers\r\nNow let's compare numbers:\r\n\r\n[js]\r\nvar numberArray = [40, 1, 5, 200];\r\n\r\nfunction compareNumbers(a, b) {\r\n    return a - b;\r\n}\r\n\r\nconsole.log('numberArray:', numberArray.join());\r\nconsole.log('Sorted without a compare function:', numberArray.sort());\r\nconsole.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers));\r\n[\/js]\r\n\r\nThe output will look like this:\r\n\r\n[js]\r\nnumberArray: 40,1,5,200\r\nSorted without a compare function: 1,200,40,5\r\nSorted with compareNumbers: 1,5,40,200\r\n[\/js]\r\n\r\nYou've certainly noticed that in using sorting without the compareNumbers function, the sorting is not correct, as 200 is very much greater than 5. This happens because as we told you in the beginning, the default way of sorting is by considering numbers as strings and comparing them based on Unicode code points.\r\nSorting numeric strings\r\nWe saw what happens when we compare strings, and what happens when we compare numbers. What we didn't mention is what happens when we compare numeric string. This is the code:\r\n\r\n[js]\r\nvar numericStringArray = ['80', '9', '700'];\r\n\r\nconsole.log('numericStringArray:', numericStringArray.join());\r\nconsole.log('Sorted without a compare function:', numericStringArray.sort());\r\nconsole.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers));\r\n[\/js]\r\n\r\nAnd this is how the output will look like:\r\n\r\n[js]\r\nnumericStringArray: 80,9,700\r\nSorted without a compare function: 700,80,9\r\nSorted with compareNumbers: 9,80,700\r\n[\/js]\r\n\r\nSo now you see that the numeric strings sorted without a compare function are sorted according to Unicode code points, but with a compare function they are treated entirely like numbers.\r\nMixed numeric Arrays\r\nThe other combination of numbers and strings we haven't mentioned is a mixed array of numbers of strings. The code will go like this:\r\n\r\n[js]\r\nvar mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200];\r\n\r\nconsole.log('mixedNumericArray:', mixedNumericArray.join());\r\nconsole.log('Sorted without a compare function:', mixedNumericArray.sort());\r\nconsole.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers));\r\n[\/js]\r\n\r\nYou might have guessed what the output will look like. Anyway, you can see it below, just to check:\r\n\r\n[js]\r\nmixedNumericArray: 80,9,700,40,1,5,200\r\nSorted without a compare function: 1,200,40,5,700,80,9\r\nSorted with compareNumbers: 1,5,9,40,80,200,700\r\n[\/js]\r\n\r\nSorting non-ASCII characters\r\nBy now you now how to sort numbers and strings and whatnot, but if you live in a country which uses special characters (my country uses \"\u00e7\" and \"\u00eb\") you might be thinking: How do I sort strings that contain those characters?\r\n\r\nIt's very easy: you use the function localeCompare like this:\r\n\r\n[js]\r\nvar items = ['r\u00e9serv\u00e9', 'premier', 'clich\u00e9', 'communiqu\u00e9', 'caf\u00e9', 'adieu'];\r\nitems.sort(function (a, b) {\r\n  return a.localeCompare(b);\r\n});\r\n[\/js]\r\n\r\nIt will turn out this array:\r\n\r\n[js]\r\nadieu, caf\u00e9, clich\u00e9, communiqu\u00e9, premier, r\u00e9serv\u00e9\r\n[\/js]\r\n\r\nAs easy as pie.\r\nSorting Maps\r\nSometimes you will have array elements, so different from each other that you will have no option but to use the compareFunction multiple times. As the number of elements, and the complexity of the compareFunction increases, the need for using sorting maps increases too. The general idea of sorting maps is to walk the array once and extract the actual values used for sorting in a temporary array, and then sort the temporary array to get the sorted array. This is the list we'll sort this time:\r\n\r\n[js]\r\nvar list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];\r\n[\/js]\r\n\r\nThe temporary holder of position and sort value will look like this:\r\n\r\n[js]\r\nvar map = list.map(function(e, i) {\r\n    return { index: i, value: e.toLowerCase() };\r\n})\r\n[\/js]\r\n\r\nThe sorting map's code containing the reduced values will be this:\r\n\r\n[js]\r\nmap.sort(function(a, b) {\r\n    return +(a.value > b.value) || +(a.value === b.value) - 1;\r\n});\r\n[\/js]\r\n\r\nAnd finally, the container for the resulting order is this:\r\n\r\n[js]\r\nvar result = map.map(function(e){\r\n    return list[e.index];\r\n});\r\n[\/js]\r\n\r\nSo now you can even use sorting maps! But it's not all. How about some reversing and randomizing arrays?\r\nReversing Arrays\r\nTo reverse array we use the function reverse(), which just puts the first element in last place and so on until the last element is placed first. The following code snippet is the creation and reversing of an array:\r\n\r\n[js]\r\nvar myArray = ['one', 'two', 'three'];\r\nmyArray.reverse(); \r\n\r\nconsole.log(myArray) \/\/ ['three', 'two', 'one']\r\n[\/js]\r\n\r\nNow on to the next exciting thing: Shuffling.\r\nRandomizing arrays\r\nThe most used and unbiased algorithm for shuffling is the Fisher-Yates Shuffle also known as Knuth Shuffle (you can also find it on Github). The code for it will go like this:\r\n\r\n[js]\r\nfunction shuffle(array) {\r\n  var currentIndex = array.length, temporaryValue, randomIndex ;\r\n\r\n  \/\/ While there remain elements to shuffle...\r\n  while (0 !== currentIndex) {\r\n\r\n    \/\/ Pick a remaining element...\r\n    randomIndex = Math.floor(Math.random() * currentIndex);\r\n    currentIndex -= 1;\r\n\r\n    \/\/ And swap it with the current element.\r\n    temporaryValue = array[currentIndex];\r\n    array[currentIndex] = array[randomIndex];\r\n    array[randomIndex] = temporaryValue;\r\n  }\r\n\r\n  return array;\r\n}\r\n\r\nvar arr = [2, 11, 37, 42];\r\nshuffle(arr);\r\nconsole.log(arr);\r\n[\/js]\r\n\r\nLet's explain what we did there. First we set the condition, which is \"until the last element of the array\". Then we pick one of the remaining elements, starting from the one we're at currently, and then we pick a remaining element, after which we reduce the current index by 1. Then we swap that with the current element. The function returns the array.\r\n\r\nIn the last part of the code we have the actual usage of the function, by giving values to the array.\r\n\r\nAnd that folks, is how we randomize an array.\r\nDownload the source code\r\nThis was an example of array sorting, using JavaScript.\r\nDownload\r\nYou can download the source code for this example here: SortArray","publisher":{"@id":"#Publisher","@type":"Organization","name":"Web Code Geeks","logo":{"@type":"ImageObject","url":"\/wp-content\/uploads\/2015\/12\/WebCodeGeeks-logo.png"},"sameAs":["http:\/\/feeds.feedburner.com\/WebCodeGeeks","https:\/\/www.facebook.com\/webcodegeeks","https:\/\/twitter.com\/webcodegeeks","https:\/\/www.youtube.com\/channel\/UCcJkBzpdp8TWzzu0bSjzikw","https:\/\/github.com\/webcodegeeks"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-sort-array-example\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"Era Balliu","url":"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/"},"image":{"@type":"ImageObject","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":1200,"height":150}}