Sorting by default in Javascript and Typescript

Question

Sorting by default in Javascript and Typescript

I'm currently exploring TypeScript and I'm puzzled by the behavior of the code snippet I've shared here: https://codepen.io/anon/pen/EpVMJX. In this code, I noticed that the test array's order changed after I sorted it, even though I stored the result in the 'res' variable. Initially, I thought that the sorting operation automatically modifies the original array. However, I also attempted to create a copy of the original array in a new variable called 'defaultArr' before sorting, and it too changed its order.

let arr:any = [
            { count: 13, year: '1956' },
            { count: 1, year: '1971' },
            { count: 23, year: '1989' },
            { count: 11, year: '1988' }];
let defaultArr = arr;
async function foo(){
  console.log(defaultArr);
  console.log(arr);
  let res = arr.sort((n1,n2)=> n1.count > n2.count? -1:1);
  console.log(res); 
}
foo();

How can I prevent the original array from changing its order?

typescript sorting

Answer 1

Answer №1

My initial assumption was that the sorting process automatically alters the sorted array itself.

Indeed, sort modifies the array it is called on. The return value simply points to the same array for convenience.

However, I also attempted to duplicate the original array into another variable (defaultArr) before sorting, but it still ended up having its order changed.

In reality, you did not duplicate the array; you merely duplicated the reference to the array. Consequently, both arr and defaultArr ended up referencing the same array object:

slice:

defaultArr = arr.slice();




Additionally, a couple of points to consider:


There is no necessity for foo to be declared as async since it does not involve any asynchronous operations.
Your sort callback is flawed as it does not account for instances where the counts are equal.


Below is your updated example, where the array is copied, foo is no longer async, and the sort callback is corrected (refer to the comments within the code for further clarification):



let arr = [
            { count: 13, year: '1956' },
            { count: 1, year: '1971' },
            { count: 23, year: '1989' },
            { count: 11, year: '1988' }];
// This function does not need to be `async`
function foo(){
  let res = arr.slice();
  // The return value of `sort` should be less than zero if n1 should precede n2,
  // greater than zero if n1 should follow n2,
  // or zero if they are deemed equal for sorting purposes.
  // By using n2.count - n1.count, we obtain this number directly.
  res.sort((n1,n2) => n2.count - n1.count);
  console.log(res); 
}
foo();
.as-console-wrapper {
  max-height: 100% !important;
}

Answer 2

My initial assumption was that the sorting process automatically alters the sorted array itself.

Indeed, sort modifies the array it is called on. The return value simply points to the same array for convenience.

However, I also attempted to duplicate the original array into another variable (defaultArr) before sorting, but it still ended up having its order changed.

In reality, you did not duplicate the array; you merely duplicated the reference to the array. Consequently, both arr and defaultArr ended up referencing the same array object:

slice:

defaultArr = arr.slice();




Additionally, a couple of points to consider:


There is no necessity for foo to be declared as async since it does not involve any asynchronous operations.
Your sort callback is flawed as it does not account for instances where the counts are equal.


Below is your updated example, where the array is copied, foo is no longer async, and the sort callback is corrected (refer to the comments within the code for further clarification):



let arr = [
            { count: 13, year: '1956' },
            { count: 1, year: '1971' },
            { count: 23, year: '1989' },
            { count: 11, year: '1988' }];
// This function does not need to be `async`
function foo(){
  let res = arr.slice();
  // The return value of `sort` should be less than zero if n1 should precede n2,
  // greater than zero if n1 should follow n2,
  // or zero if they are deemed equal for sorting purposes.
  // By using n2.count - n1.count, we obtain this number directly.
  res.sort((n1,n2) => n2.count - n1.count);
  console.log(res); 
}
foo();
.as-console-wrapper {
  max-height: 100% !important;
}

Sorting by default in Javascript and Typescript

Answer №1

Similar questions

Exploring the methods of connecting with data-checked and data-unchecked attributes in Angular

Nextjs REACT integration for self-service registration through OKTA

Encountering 'null' error in template with Angular 4.1.0 and strictNullChecks mode

What are the steps to set up ChartJS on a personal computer?

Guide on merging non-modular JavaScript files into a single file with webpack

Unable to download tsc through the Terminal on OS X

Tips for accessing the app instance within a module in Nest.js

The ng2-chart library displays date in the form of a Unix timestamp

"Unlocking the full potential of Typescript and Redux: Streamlining the use of 'connect' without the need to

Obtaining attributes of a class from an object passed into the constructor

Using Typescript to set the image source from a pipe

What is the process for obtaining an AccessToken from LinkedIn's API for Access Token retrieval?

Unable to include option object in the SHA3 function using typescript

An error has occurred: Type 'x' is not compatible with type 'x' (during Vercel deployment)

What is the method for transmitting a concealed attribute "dragable" to my component?

Playwright failing to execute GraphQL tests due to TypeScript configuration problems

Experiencing a hitch when attempting to deploy an Angular 2 application on Heroku

Does the routing in Angular 2 get disrupted by parameter breaks in sub-modules?

Angular Tutorial: Understanding the Difference Between TypeScript's Colon and Equal To

Using Next.js, it is not possible to use absolute imports within SASS