Object.entries is not working with Class in JavaScript

Question

I know many questions have been asked and answered, but I'm still facing this issue. Maybe someone can point out where the mistake is being made.

I tried to compare two Objects in JavaScript but it isn't working for me.

This is the code I tried.

console.log('typeof Object1', typeof val);
console.log('Object1', val);
console.log('Object1 {...val}', {...val});
console.log('Object.getOwnPropertyNames(Object1)', Object.getOwnPropertyNames(val));
console.log('Object.entries(Object1)', Object.entries(val));
console.log('Object.keys(Object1)', Object.keys(val));
console.log('Object.values(Object1)', Object.values(val));
console.log('getClass(Object1)', getClass(val));

console.log('----------------------------------------');

console.log('typeof Object2', typeof divElemStyles[property][index]);
console.log('Object2', divElemStyles[property][index]);
console.log('Object1 {...Object2)}', {...divElemStyles[property][index]});
console.log('Object.getOwnPropertyNames(Object2)', Object.getOwnPropertyNames(divElemStyles[property][index]));
console.log('Object.entries(Object2)', Object.entries(divElemStyles[property][index]));
console.log('Object.keys(Object2)', Object.keys(divElemStyles[property][index]));
console.log('Object.values(dObject2)', Object.values(divElemStyles[property][index]));
console.log('getClass(Object2)', getClass(divElemStyles[property][index]));

//lodash
console.log('_.isEqual(Object1, Object2)', _.isEqual(val, divElemStyles[property][index]));

//underscore
console.log('_.isEqual(Object1, Object2)', _.isEqual(val, divElemStyles[property][index]));

//native
console.log('Object.is(Object1, Object2)', Object.is(val, divElemStyles[property][index]));

//equal sign
console.log('Object1 === Object2', val === divElemStyles[property][index]);

Considering both Object1 and Object2 hold the same property, comparing them should result in True, but instead, I'm getting False.

You can also notice this, both Objects are instances of the CSSKeywordValue class. Also using with Object.entries() return empty array. Weird for me.

Here is how you can regenerate this issue. Please see the result in chrome console, instead of codepen or jsfiddle.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1 {
            display: flex;
        }

        .div2 {
            display: block;
        }
    </style>
</head>
<body>

<div class="div1">

</div>
<div class="div2">

</div>

<script>
    function getClass(obj) {

        // if the type is not an object return the type
        let type = typeof obj
        if((type !== 'object')) {
            return type;
        } else { //otherwise, access the class using obj.constructor.name
            return obj.constructor.name;
        }
    }

    var elem1 = document.querySelector('.div1');
    var elemStyles1 = {};
    for (const [prop, val] of elem1.computedStyleMap()) {
        elemStyles1[prop] = val;
    }

    var elem2 = document.querySelector('.div2');
    var elemStyles2 = {};
    for (const [prop, val] of elem2.computedStyleMap()) {
        elemStyles2[prop] = val;
    }

    var Object1 = elemStyles1['display'][0];
    var Object2 = elemStyles2['display'][0];

    console.log('typeof Object1', typeof Object1);
    console.log('Object1', Object1);
    console.log('Object1 {...Object1}', {...Object1});
    console.log('Object.getOwnPropertyNames(Object1)', Object.getOwnPropertyNames(Object1));
    console.log('Object.entries(Object1)', Object.entries(Object1));
    console.log('Object.keys(Object1)', Object.keys(Object1));
    console.log('Object.values(Object1)', Object.values(Object1));
    console.log('getClass(Object1)', getClass(Object1));
    console.log('----------------------------------------');
    console.log('typeof Object2', typeof Object2);
    console.log('Object2', Object2);
    console.log('Object2 {...Object2}', {...Object2});
    console.log('Object.getOwnPropertyNames(Object2)', Object.getOwnPropertyNames(Object2));
    console.log('Object.entries(Object2)', Object.entries(Object2));
    console.log('Object.keys(Object2)', Object.keys(Object1));
    console.log('Object.values(Object2)', Object.values(Object2));
    console.log('getClass(Object2)', getClass(Object2));

    //native
    console.log('Object.is(Object1, Object2)', Object.is(Object1, Object2));
    //equal sign
    console.log('Object1 === Object2', Object1 === Object2);
    //Json Stringfy
    console.log('JSON.stringify(Object1) === JSON.stringify(Object2)', JSON.stringify(Object1) === JSON.stringify(Object2));
</script>
</body>
</html>

In JavaScript two object-typed variables are only considered as "equal" if they they actually point to the _same_ object. — Carsten Massmann, Oct 25 '22 at 13:32
I know. That's why I also used lodash and underscore separately, but I still got false. — Faizan Anwer Ali Rupani, Oct 25 '22 at 13:36
It shouldn't give false because both have the same properties and value. — Faizan Anwer Ali Rupani, Oct 25 '22 at 13:36
could you please post your objects? at least a significant part of them that results not equal — GrafiCode, Oct 25 '22 at 13:39
Create two `CSSKeywordValue` constructors with the same properties and values as shown in the image. Then try to compare them. The result will be false. I tried all deep clone compare functions I could find, but the result is always false. Even Lodash and Underscore library also didn't work — Faizan Anwer Ali Rupani, Oct 25 '22 at 13:41
@GrafiCode Please check my edit to regenerate this issue. Try setting the same or different CSS display propery to see the result. — Faizan Anwer Ali Rupani, Oct 25 '22 at 14:03
@Lain I posted an example in my question. You can check. JSON.stringify didn't work. — Faizan Anwer Ali Rupani, Oct 25 '22 at 14:05
@FaizanAnwerAliRupani actually `"JSON.stringify(Object1) === JSON.stringify(Object2)", true` because `{} === {}` — GrafiCode, Oct 25 '22 at 14:09
It should be false, one div has a display property value of flex, and another div has a display property of block. — Faizan Anwer Ali Rupani, Oct 25 '22 at 14:11
You can try it yourself, try changing the display properties of both divs, or set the same display properties for both divs. The result is always the same. — Faizan Anwer Ali Rupani, Oct 25 '22 at 14:12
that's because `JSON.stringify(Object1)` and `JSON.stringify(Object2)` both result in `{}` — GrafiCode, Oct 25 '22 at 14:14
Yes, any solution for that? How do I compare these two objects? They do contain properties. I want to compare properties. — Faizan Anwer Ali Rupani, Oct 25 '22 at 14:15
how about `(elemStyles1['display'][0].value === elemStyles2['display'][0].value)`? — GrafiCode, Oct 25 '22 at 14:18
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/249043/discussion-between-faizan-anwer-ali-rupani-and-graficode). — Faizan Anwer Ali Rupani, Oct 25 '22 at 14:19
@GrafiCode Share screenshots in the Discussion, please check. Sometimes it contains no property, and sometimes more than one property. — Faizan Anwer Ali Rupani, Oct 25 '22 at 14:26
[deepCompare](https://stackoverflow.com/a/1144249/4728913) worked with the two objects you provided. — Lain, Oct 25 '22 at 14:27
@FaizanAnwerAliRupani seems like you can use the `toString()` method: `( Object1.toString() === Object2.toString() )` — GrafiCode, Oct 25 '22 at 14:35
Turns out that If I get computedStyleMap from an element Inside the Iframe, and outside Iframe. Though they look the same, the object comparison fails somehow. Even the deepCompare fails there. But if they are from the same top-level frame. deepCompare is working there. — Faizan Anwer Ali Rupani, Oct 25 '22 at 15:26

Carsten Massmann · Answer 1 · 2022-10-25T13:38:09.280

-1

In JavaScript two object-typed variables are only considered to be "equal" if they they actually point to the same object. Here are a few more samples:

const obj={a:123,b:456}, dat=new Date(), a=obj, b=obj, 
        c={a:123,b:456}; d=dat, e=new Date(dat.getTime());
        

console.log(a===b);   // true
console.log(a===c);   // false
console.log(dat===d); // true
console.log(dat===e); // false

In this respect it does not matter whether you define the objects directly or through a class template.

edited Oct 25 '22 at 13:38

answered Oct 25 '22 at 13:37

Carsten Massmann

26,510
2
22
43

That's not what I asked. Read my comments – Faizan Anwer Ali Rupani Oct 25 '22 at 13:38

Object.entries is not working with Class in JavaScript

1 Answers1