Blog
Object Comparisons in JavaScript
By Martin Schaeferle | July 20, 2012
In our last article, we discussed Escape Sequences in String Literals and their use in JavaScript. In this article, we'll take a deeper dive into JavaScript and look at the use of object comparisons.
Object Comparisons
Unlike primitive values, JavaScript compares objects by reference. This means that two object variables are equal only if the two variables hold a reference to the same object in memory. If the two variables hold a reference to two different objects in memory, even if the objects are the exact same-have the same properties, in the same order, all with the same values-the object variables are not the same. Some code will show how this works.
It starts by creating two objects in memory, obj1 and obj2, each with an identical set of properties each set to the same value. The first comparison checks to see if these objects are equal, which they are not. Then the code creates another object variable, obj3, and sets it to reference obj1. This time, because obj1 and obj3 both hold a reference to the same object in memory, the comparison is true. You can see these results in Figure 21.
var obj1 = { t: 5, l: 5, b: 5, r: 5 }; var obj2 = { t: 5, l: 5, b: 5, r: 5 }; // Will never be true: two different references console.log("Is obj1 == obj2? " + (obj1 == obj2)); var obj3 = obj1; // obj3 now holds a reference to obj1 console.log("Is obj1 == obj3? " + (obj1 == obj3));
Figure 21. Comparing Objects.
Next the code changes a value in obj1, setting its t property to 10. The code then displays the value of t for each of the three object variables and once again tests to see if obj1 is equal to obj3. You can see the results in Figure 22, which shows that t in obj1 and obj3 are still equal, but obj2 is unchanged because it is an entirely different object.
obj1.t = 10; console.log("obj1.t = " + obj1.t); console.log("obj2.t = " + obj2.t); console.log("obj3.t = " + obj3.t); console.log("Is obj1 == obj3? " + (obj1 == obj3));
Figure 22. Changing the value of an object with two references.
If you want to make a copy of an object in memory, rather than having two variables that reference the same object in memory, you have to write the code to do it. The following code shows two ways to copy an object. The first is a brute force way to do it, creating an empty object that will be the copy, and writing code to copy the value of each property from obj1 to obj4. The second way uses some nice features of JavaScript objects to loop through the objects' property collection and the [] notation to reference object properties instead of the dot (.) notation.
// One way var obj4 = {}; // Create an empty object obj4.t = obj1.t; obj4.l = obj1.l; obj4.b = obj1.b; obj4.r = obj1.r; console.log("obj4 created as copy of obj1."); console.log("Is obj1 == obj4? " + (obj1 == obj4)); console.log(""); // Another way var obj5 = {}; for (var prop in obj1) { obj5[prop] = obj1[prop]; } console.log("obj5 created as copy of obj1.");
WARNING! This is not robust code for copying objects in memory. It copies only one level of properties-you can have object properties in addition to primitive values-and will copy a base object's properties as well, if any. There are ways to robustly copy objects in JavaScript, but that will have to wait until you learn more about JavaScript objects. Figure 23 shows the results displayed in the Console panel.
Figure 23. The results of creating two new duplicate objects in memory. If you want to inspect either obj4 or obj5, you can switch to the Scripts panel and put a breakpoint on the last line of code, the final console.log statement, and refresh the page. Then hover the mouse over either obj4 or obj5 to see its properties and values, as shown in Figure 24. As you can see, the properties of obj5 are identical to those in obj1 (remember that the code earlier changed it to 10).
Figure 24. Inspecting the properties of an object in the Scripts panel.TIP: When you first go to the Scripts panel, it may not have the JavaScript codefrom the page loaded. Just refresh the page, and the panel should display thecode.
Get more JavaScript training Today!
