{"id":393,"date":"2011-12-20T15:14:04","date_gmt":"2011-12-20T15:14:04","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-16T23:09:22","modified_gmt":"2017-11-16T23:09:22","slug":"lesson-24-sorting-array","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/","title":{"rendered":"JavaScript Lesson 24: Sorting An Array"},"content":{"rendered":"<h4 align=\"center\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/\">&lt;Lesson 23&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-25-generating-random-values-array\/\">&lt;Lesson 25&gt;<\/a><\/strong><\/h4>\n<h3><strong>24.1: Introduction to Array Sorting in JavaScript<\/strong><\/h3>\n<p>When we deal with data, an especially massive amount of data, it is a common practice to sort the data in a kind of order so that they are easier managed, analyzed and look up. For example, the bank will sort customers&#8217; names in alphabetical order so that they can send the financial statements according to this order at the end of each month. All computer programming language provide certain kind of sorting methods or functions, JavaScript is no exception.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h3><strong>24.2\u00a0Sorting an Array<\/strong><\/h3>\n<p>We have learned about arrays in previous lessons. In those lessons, we learned how to perform mathematical operations on data in an array and present them in a table. In this lesson, we will learn how to sort those data and present them in ascending order.<\/p>\n<p>For example, we have a group of students who took computer programming test recently and obtain the marks as shown in the table below. Now, we can sort the mark in ascending order.<\/p>\n<div align=\"center\">\n<table style=\"table-layout: fixed; width: 70%; font-size: 100%;\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\n<tbody>\n<tr>\n<th width=\"232\"><strong>Name of Student<\/strong><\/th>\n<th align=\"center\" width=\"236\"><strong>Mark<\/strong><\/th>\n<\/tr>\n<tr>\n<td width=\"232\">Alex<\/td>\n<td align=\"center\" width=\"236\">100<\/td>\n<\/tr>\n<tr>\n<td width=\"232\">Brian<\/td>\n<td align=\"center\" width=\"236\">12<\/td>\n<\/tr>\n<tr>\n<td width=\"232\">Carmen<\/td>\n<td align=\"center\" width=\"236\">29<\/td>\n<\/tr>\n<tr>\n<td width=\"232\">Dave<\/td>\n<td align=\"center\" width=\"236\">42<\/td>\n<\/tr>\n<tr>\n<td width=\"232\">Graham<\/td>\n<td align=\"center\" width=\"236\">18<\/td>\n<\/tr>\n<tr>\n<td width=\"232\">Keynes<\/td>\n<td align=\"center\" width=\"236\">33<\/td>\n<\/tr>\n<tr>\n<td width=\"232\">Morgan<\/td>\n<td align=\"center\" width=\"236\">77<\/td>\n<\/tr>\n<tr>\n<td width=\"232\">Olson<\/td>\n<td align=\"center\" width=\"236\">54<\/td>\n<\/tr>\n<tr>\n<td width=\"232\">Selina<\/td>\n<td align=\"center\" width=\"236\">60<\/td>\n<\/tr>\n<tr>\n<td width=\"232\">Terrence<\/td>\n<td align=\"center\" width=\"236\">85<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Sorting data in an array in JavaScript required the use of the built-in method\u00a0<strong>sort. <\/strong>The sort method examines its argument in the form of a function which is usually known as the comparator function. The comparator function compares two arguments and returns a positive value if the first argument is greater than the second argument, returns a zero value if the arguments are equal and returns a negative value if the first argument is less than the second argument.<\/p>\n<p>Sort is actually the method of an\u00a0<strong>Array object. <\/strong>Therefore, we can initiate the sort method for the Mark using\u00a0<strong>Mark.sort( compareValues ) <\/strong>where compareValues is the comparator function. This function is passed to the sort method as an argument.<\/p>\n<p>The complete code to sort the Mark array is shown below:<\/p>\n<pre>&lt;HTML&gt;\r\n&lt;head&gt;&lt;script type = \"text\/javascript\"&gt;\r\n&lt;!--\r\nfunction SortData()\r\n{var Mark = [ 100, 12, 29, 42, 18, 33, 77, 54, 60, 85 ];\r\n\r\ndocument.writeln( \"&lt;h1&gt;Sorting an Array&lt;\/h1&gt;\" );\r\nShowArray( \"Marks in original order: \", Mark );\r\nMark.sort( compareValues ); \/\/ sort the array\r\nShowArray( \"Marks in ascending order: \", Mark );\r\n}\r\n\r\nfunction ShowArray( Title, myArray )\r\n{\r\ndocument.writeln( \"&lt;p&gt;\" + Title +\r\nmyArray.join( \" \" ) + \"&lt;\/p&gt;\" );\r\n}\r\n\r\nfunction compareValues( value1, value2 )\r\n{\r\nreturn parseInt( value1 ) - parseInt( value2 );\r\n}\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;&lt;body onload = \"SortData()\"&gt;&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p>The sorted mark show is\u00a012 18 29 33 42 54 60 77 85 100\u00a0in ascending order.<\/p>\n<p>Now click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example24.1.htm\">Example 24.1<\/a> to view the actual output.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/\">&lt;Lesson 23&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-25-generating-random-values-array\/\">&lt;Lesson 25&gt;<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 23&gt; [Contents] &lt;Lesson 25&gt; 24.1: Introduction to Array Sorting in JavaScript When we deal with data, an especially massive amount of data, it is a common practice to sort the data in a kind of order so that they are easier managed, analyzed and look up. For example, the bank will sort customers&#8217; names &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 24: Sorting An Array&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-393","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Lesson 24: Sorting An Array - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"This javascript lesson illustrates the sorting of array in JavaScript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 24: Sorting An Array - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"This javascript lesson illustrates the sorting of array in JavaScript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-16T23:09:22+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/\",\"name\":\"JavaScript Lesson 24: Sorting An Array - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-20T15:14:04+00:00\",\"dateModified\":\"2017-11-16T23:09:22+00:00\",\"description\":\"This javascript lesson illustrates the sorting of array in JavaScript\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 24: Sorting An Array\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Lesson 24: Sorting An Array - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"This javascript lesson illustrates the sorting of array in JavaScript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 24: Sorting An Array - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"This javascript lesson illustrates the sorting of array in JavaScript","og_url":"https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-16T23:09:22+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/","url":"https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/","name":"JavaScript Lesson 24: Sorting An Array - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-20T15:14:04+00:00","dateModified":"2017-11-16T23:09:22+00:00","description":"This javascript lesson illustrates the sorting of array in JavaScript","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 24: Sorting An Array"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=393"}],"version-history":[{"count":21,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/393\/revisions"}],"predecessor-version":[{"id":2503,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/393\/revisions\/2503"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}