Console.log vs console.table HELP

JavaScript
1

Hi, I am having a difficult time trying to understand why console the same object (using console.log and console.table) it results in differents orders of the object.

image
image1280Ă—653 61.7 KB 

// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
const orderedInventors = inventors.sort((a, b) => {
    return a.year - b.year;
});
console.log("3) Inventors sorted by birthdate (oldest to youngest): ");
console.table(orderedInventors);

This is the code I used to sort the next object:

const inventors = [
    { first: "Albert", last: "Einstein", year: 1879, passed: 1955 },
    { first: "Isaac", last: "Newton", year: 1643, passed: 1727 },
    { first: "Galileo", last: "Galilei", year: 1564, passed: 1642 },
    { first: "Marie", last: "Curie", year: 1867, passed: 1934 },
    { first: "Johannes", last: "Kepler", year: 1571, passed: 1630 },
    { first: "Nicolaus", last: "Copernicus", year: 1473, passed: 1543 },
    { first: "Max", last: "Planck", year: 1858, passed: 1947 },
    { first: "Katherine", last: "Blodgett", year: 1898, passed: 1979 },
    { first: "Ada", last: "Lovelace", year: 1815, passed: 1852 },
    { first: "Sarah E.", last: "Goode", year: 1855, passed: 1905 },
    { first: "Lise", last: "Meitner", year: 1878, passed: 1968 },
    { first: "Hanna", last: "Hammarström", year: 1829, passed: 1909 },
];

So my question is: why the object in plane object format (blue box in the picture) is not sorted but the object in table format (orange box in the picture) is.

Thank you for your help.

2

How are you executing the code? I assume the image is from an up-to-date version of Chrome?

No matter how I run it, it logs it out sorted (directly in the console, or through a script loaded on a page). Does refreshing the page change anything?

If you hover over the i icon you will see the message This value was evaluated upon first expanding it may have changed since then. It is technically possible that mutated objects are not reflected as expected. Although, I think most up-to-date browsers might have fixes for that. I don’t know why the console is showing you what it is. It doesn’t do that for me.

1 Like
4

Hi, i find the problem. That article really helped me, also this article explain very good how reference and values works, which really was my problem Explaining Value vs. Reference in Javascript | by Arnav Aggarwal | codeburst

The main problem was that I don’t shared all the code (stupid me), also, what it makes the orderedInventors variable to change was this line of code:

// 5. Sort the inventors by years lived
const livedYearsOrdered = inventors.sort((a, b) => {
    return a.passed - a.year - (b.passed - b.year);
});
console.log("5) Inventors sorted by years lived: ");
console.table(livedYearsOrdered);

This change the main object ( inventors ), and because the orderedInventors object has a reference to that object, that changed its value.

So my guessing is that console.table doesn’t change over time like console.log do with objects, that’s why the table shows me the right answer and the array don’t.

I hope I have explained myself well. Thank you very much for your help.

5

The solution I think can work to prevent this from happening is this:

// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
const orderedInventors = inventors.slice().sort((a, b) => {
    return a.year - b.year;
});
console.log("3) Inventors sorted by birthdate (oldest to youngest): ");
console.table(orderedInventors);

I added the .slice() funtion before the .sort() function. That way a I create a copy that has not a reference to the inventors object. What do you think?

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.