Is there a glitch in the console when sorting an array of dates?

Question

Is there a glitch in the console when sorting an array of dates?

I'm puzzled by the fact that the console is displaying a sorted array in both logs. It doesn't make sense to me because it should not be sorted at the first log, right?

  static reloadAndSortItems() {
    let array = [];
    const items = Store.getStoredItems();

    items.forEach(function (item) {

      // converting stored date back to date object

      let episodeDate = Date.parse(item.episode);
      let parsedEpisode = new Date(episodeDate);

      array.push(parsedEpisode);

    });

    **// array should not be sorted at this point
    console.log('not sorted', array);**

    let tested = array.sort(function (a, b) {
      return a - b
    });
    **// array should be sorted at this point
    console.log('sorted', tested);**

  }

The incoming array is out of order:

["2018-09-13T00:30:00.000Z","2018-09-14T05:25:00.000Z","2018-09-13T00:30:00.000Z","2018-09-11T01:30:00.000Z","2018-09-11T01:30:00.000Z"]

javascript arrays sorting

Answer 1

Answer №1

One reason for this is that the sort() method both modifies the original array and returns a new one, resulting in two arrays with identical element orders:

let arr = [1, 6, 2, 9, 3, 7];
let result = arr.sort((a, b) => a - b);

console.log('Original:', arr);
console.log('Final:', result);

To prevent this behavior, you can create an additional array (using, for example, the map() method, which creates a new array without modifying the original), and then use it as your initial array:

let arr = [1, 6, 2, 9, 3, 7];
let duplicate = arr.map(d => d);
arr.sort((a, b) => a - b);

console.log('Sorted:', arr);
console.log('Duplicate of the initial array:', duplicate);

Answer 2

One reason for this is that the sort() method both modifies the original array and returns a new one, resulting in two arrays with identical element orders:

let arr = [1, 6, 2, 9, 3, 7];
let result = arr.sort((a, b) => a - b);

console.log('Original:', arr);
console.log('Final:', result);

To prevent this behavior, you can create an additional array (using, for example, the map() method, which creates a new array without modifying the original), and then use it as your initial array:

let arr = [1, 6, 2, 9, 3, 7];
let duplicate = arr.map(d => d);
arr.sort((a, b) => a - b);

console.log('Sorted:', arr);
console.log('Duplicate of the initial array:', duplicate);

Answer 3

Answer №2

When using the sort() method, it's important to note that it mutates the array that it is called on. Therefore, it is recommended to log the array variable rather than the tested variable:

static reloadAndSortItems() {
    let array = [];
    const items = Store.getStoredItems();

    items.forEach(function (item) {

      // Convert stored date back to a Date object

      let episodeDate = Date.parse(item.episode);
      let parsedEpisode = new Date(episodeDate);    

      array.push(parsedEpisode);    
    });

    array.sort(function (a, b) {
      return a - b
    });

    console.log('sorted', array);    
  }

Alternatively, you can clone the array variable by using .map(), and then apply the .sort() method on the cloned array like this:

static reloadAndSortItems() {
    let array = [];
    const items = Store.getStoredItems();

    items.forEach(function (item) {

      // Convert stored date back to a Date object

      let episodeDate = Date.parse(item.episode);
      let parsedEpisode = new Date(episodeDate);    

      array.push(parsedEpisode);    
    });

    // Copy/clone the array using map into tested variable
    const tested = array.map(function(item) { return item; });

    // Sort the tested array. Calling sort on tested will leave array unaffected
    tested.sort(function (a, b) {
      return a - b
    });

    console.log('sorted', tested);  // Sorted
    console.log('array', array);    // Unsorted
  }

Answer 4

When using the sort() method, it's important to note that it mutates the array that it is called on. Therefore, it is recommended to log the array variable rather than the tested variable:

static reloadAndSortItems() {
    let array = [];
    const items = Store.getStoredItems();

    items.forEach(function (item) {

      // Convert stored date back to a Date object

      let episodeDate = Date.parse(item.episode);
      let parsedEpisode = new Date(episodeDate);    

      array.push(parsedEpisode);    
    });

    array.sort(function (a, b) {
      return a - b
    });

    console.log('sorted', array);    
  }

Alternatively, you can clone the array variable by using .map(), and then apply the .sort() method on the cloned array like this:

static reloadAndSortItems() {
    let array = [];
    const items = Store.getStoredItems();

    items.forEach(function (item) {

      // Convert stored date back to a Date object

      let episodeDate = Date.parse(item.episode);
      let parsedEpisode = new Date(episodeDate);    

      array.push(parsedEpisode);    
    });

    // Copy/clone the array using map into tested variable
    const tested = array.map(function(item) { return item; });

    // Sort the tested array. Calling sort on tested will leave array unaffected
    tested.sort(function (a, b) {
      return a - b
    });

    console.log('sorted', tested);  // Sorted
    console.log('array', array);    // Unsorted
  }

Is there a glitch in the console when sorting an array of dates?

Answer №1

Answer №2

Similar questions

Display validation in HTML5 only when the form is submitted

Unable to automatically prompt the button inside the iframe

I'm attempting to utilize a basic webcam capture upload feature, but it seems that the upload function is not functioning properly

What is the best way to determine the dimensions of a KonvaJs Stage in order to correctly pass them as the height/width parameters for the toImage function

Tips on displaying a selected choice | Utilizing Material UI Autocomplete

Generate an automatic "proxy" for ASP.NET MVC Controller to communicate with AngularJs service

Express.io is encountering an issue where it is unable to read the property 'expires' of an undefined element

Encountering difficulty retrieving the value of a hidden input with jQuery's find method

Show a distinct row from an API using React

Guide on utilizing Json.net for extracting an array from a json document

The anchor tag fails to trigger the onClick function in React

JavaScript is failing to execute the DELETE SQL transaction

The Material UI Popover is appearing outside the designated boundaries

Unable to locate module with React and Material-UI integration

Error: Cannot iterate over Redux props map as it is not a function

Setting all array elements to zero in C# without employing for loops

Creating a private variable to perform a select_sum query

Encountering issues with creating a session in Selenium/webdriver while utilizing Safari 12

Verifying dynamic number inputs generated using JavaScript values and calculating the total with a MutationObserver

Count the number of times an iteration occurs in AngularJS/JavaScript