{"id":9629,"date":"2024-02-15T05:11:05","date_gmt":"2024-02-15T05:11:05","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=9629"},"modified":"2024-02-15T06:07:35","modified_gmt":"2024-02-15T06:07:35","slug":"sorting-an-array-of-objects-by-property-values","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/javascript\/sorting-an-array-of-objects-by-property-values","title":{"rendered":"Sorting an Array of Objects by Property Values"},"content":{"rendered":"<p>In JavaScript, you can sort an array of objects by their property values using the <strong>Array.sort()<\/strong> method along with a custom sorting function.<\/p>\n<p>Let&#8217;s say you have an array of objects like this:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">let arrayOfObjects = [\r\n   { name: 'John', age: 30 },\r\n   { name: 'Alice', age: 25 },\r\n   { name: 'Bob', age: 35 }\r\n ];\r\n<\/pre>\n<h3>Sorting by a Numeric Property<\/h3>\n<p>If you want to sort the array of objects based on a numeric property (e.g., age), you can use a comparison function inside sort():<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\narrayOfObjects.sort((a, b) => a.age - b.age);\r\n<\/pre>\n<p>This will sort the array in ascending order based on the age property.<\/p>\n<h3>Sorting by a String Property<\/h3>\n<p>If you want to sort based on a string property (e.g., name), you can use <strong>localeCompare()<\/strong> inside the comparison function:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\narrayOfObjects.sort((a, b) => a.name.localeCompare(b.name));\r\n<\/pre>\n<p>This will sort the array alphabetically based on the name property.<\/p>\n<h3>Sorting in Descending Order<\/h3>\n<p>To sort in descending order, you can switch a and b in the comparison function:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\narrayOfObjects.sort((a, b) => b.age - a.age); \/\/ For numeric property (e.g., age)\r\n\/\/ OR\r\narrayOfObjects.sort((a, b) => b.name.localeCompare(a.name)); \/\/ For string property (e.g., name)\r\n<\/pre>\n<h3>Handling Mutable Sorting<\/h3>\n<p>The <strong>sort()<\/strong> method sorts the array in place and mutates the original array. If you want to avoid mutating the original array, you can create a new sorted array using the spread operator or <strong>Array.slice()<\/strong>:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n\/\/ Sorting by age without mutating the original array\r\nconst sortedByAge = [...arrayOfObjects].sort((a, b) => a.age - b.age);\r\n\r\n\/\/ Sorting by name without mutating the original array\r\nconst sortedByName = arrayOfObjects.slice().sort((a, b) => a.name.localeCompare(b.name));\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>In JavaScript, you can sort an array of objects by their property values using the Array.sort() method along with a custom sorting function. Let&#8217;s say you have an array of objects like this: let arrayOfObjects = [ { name: &#8216;John&#8217;, age: 30 }, { name: &#8216;Alice&#8217;, age: 25 }, { name: &#8216;Bob&#8217;, age: 35 } [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9630,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[22],"tags":[],"class_list":["post-9629","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9629"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=9629"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9629\/revisions"}],"predecessor-version":[{"id":9632,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9629\/revisions\/9632"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/9630"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=9629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=9629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=9629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}