DEV Community

Ben Matt, Jr.
Ben Matt, Jr.

Posted on • Updated on • Originally published at code-rainbow.web.app

Master Objects in JS 🍨 (Part 1)

Objects

Objects are JavaScript’s fundamental data structure. Intuitively, an object represents a table relating strings to values. But when you dig deeper, there is a fair amount of machinery that goes into objects.

Most strongly typed languages such as Java use isEquals() to check whether two objects
are the same. You may be tempted to simply use the == operator to check whether two
objects are the same in JavaScript.
However, this will not evaluate to true.

let firstEmptyObject = {};
let secondEmptyObject = {};

firstEmptyObject == secondEmptyObject; // returns false
firstEmptyObject === secondEmptyObject; // returns false
Enter fullscreen mode Exit fullscreen mode

Although these objects are equivalent (same properties and values), they are not
equal. Namely, the variables have different addresses in memory.
This is why most JavaScript applications use utility libraries such as lodash or
underscore, which have the isEqual(object1, object2) function to check two objects
or values strictly. This occurs via implementation of some property-based equality
checking where each property of the object is compared.
In this example, each property is compared to achieve an accurate object equality result.

let personOne = {
  name: "Will",
  lastName: "Owen",
};

let personTwo = {
  name: "Will",
  lastName: "Owen",
};


function isEquivalent(a, b) {
    // arrays of property names
    var aProps = Object.getOwnPropertyNames(a);
    var bProps = Object.getOwnPropertyNames(b);

    // If their property lengths are different, they're different objects
    if (aProps.length != bProps.length) {
        return false;
    }

    for (var i = 0; i < aProps.length; i++) {
        var propName = aProps[i];

        // If the values of the property are different, not equal
        if (a[propName] !== b[propName]) {
            return false;
        }
    }

    // If everything matched, correct
    return true;
}
Enter fullscreen mode Exit fullscreen mode

However, this would still work for objects that have only a string or a number as the
property.

let obj1 = { prop1: "test", prop2: function () {} };
let obj2 = { prop1: "test", prop2: function () {} };
equivalenceCheck(obj1, obj2); // returns false
Enter fullscreen mode Exit fullscreen mode

This is because functions and arrays cannot simply use the == operator to check for
equality.

let function1 = function () {
  console.log(2);
};
let function2 = function () {
  console.log(2);
};
console.log(function1 == function2); // prints 'false'
Enter fullscreen mode Exit fullscreen mode

Although the two functions perform the same operation, the functions have

different addresses in memory, and therefore the equality operator returns false.
The primitive equality check operators, == and ===, can be used only for strings and
numbers. To implement an equivalence check for objects, each property in the object
needs to be checked.

Now let dig a little bit deeper 😋.

Freezing an object 🥶

The first thing you need to know about objects in JavaScript is that they are mutable (meaning they can be changed). That flexibility it one the most powerful things about JavaScript! 🤩 However in order to make your code more robust 💪

you sometimes need to create objects that are immutable, for example perhaps you use an object to keep track of data that are constant and need to remain constant, in a case like that you need to freeze the object to prevent it from being changed.

Another common application is in functional programming using such a of paradigm you want to avoid mutating data. let's look at an example of how to freeze an object.

let courseInfo = {
  question: 10,
  possScore: 100,
  active: true,
  startPage: "./page1.html",
};
Enter fullscreen mode Exit fullscreen mode

Now let say you want to modify the courseInfo object, you would write something like this.

delete courseInfo.possScore;
console.log(courseInfo); // {question: 10, active: true, startPage: "./page1.html"};
Enter fullscreen mode Exit fullscreen mode

As you can see we can't access the possScore property anymore as we deleted it, But let's look at how we would prevent that from happening.

const courseInfo = Object.freeze({
  question: 10,
  possScore: 100,
  active: true,
  startPage: "./page1.html",
}); // Our object is now freezed!🥶
Enter fullscreen mode Exit fullscreen mode

Let's do a step by step analysis.

step 1. We changed courseInfo variable from let to a constant variable because we don't want it to be reassigned either.

step 2. We make use of the Object.freeze static method to prevent all the properties and values of the object from being changed.

But now how do we check if our courseInfo is actually frozen? Well you can try to delete or add new things to it but one simple way of doing is to use the isFrozen method like so.

console.log(Object.isFrozen(courseInfo)); // This returns true 😉
Enter fullscreen mode Exit fullscreen mode

Create a copy of an object 🧪

One of the problems JavaScript developers usually faces when working with objects is creating a copy of them. This happens because they try to assign the variable that they want to assign a variable X to a variable Y thinking that this would help them in anyway, but the truth is by doing so, we are just using a reference to the original object, as the result when ever the original object is modified the so called "copy" will change as well.

A simple and efficient way of achieving that task is making use of both the JSON.parse() and JSON.stringify() methods like so.

let courseInfo = {
  question: 10,
  possScore: 100,
  active: true,
  startPage: "./page1.html",
};
// Create a copy of the courseInfo object
let copyOfCourseInfo = JSON.parse(JSON.stringify(courseInfo));

// Modify the original object
delete courseInfo.question;

console.log(courseInfo); // {possScore: 100, active: true, startPage: "./page1.html"};

console.log(courseInfo); // {question: 10, possScore: 100, active: true, startPage: "./page1.html"};
Enter fullscreen mode Exit fullscreen mode

🎉🎉🎉 Thank you for reading the first part this article! 🎉🎉🎉

Don't forget to checkout the second part of this serie because we dig even deeper 🥳! JS Objects and Prototypes.

And if you want more in depth knowledge about your favorite languages checkout my personal blog to become an on demand developer 😉, and you can find me on twitter as well😃.

Discussion (10)

Collapse
mellen profile image
Matt Ellen • Edited
  objectOneProperties.forEach((property, index) => {
    let propName = objectOneProperties[index];
    if (objectOne[propName] == objectTwo[propName]) {
      isEqual = true;
    } else {
      isEqual = false;
    }
  });
Enter fullscreen mode Exit fullscreen mode

This returns true if the last property values are equal, regardless of the other values.

It would make more sense to me if you use a regular for loop and break on false:

  let isEqual = true;

  for(let propName of objectOneProperties)
  {
    if(objectOne[propName] != objectTwo[propName])
    {
      isEqual = false;
      break;
    }
  }
Enter fullscreen mode Exit fullscreen mode
Collapse
jrmatanda profile image
Ben Matt, Jr. Author

Thanks for the tip, but as you already know if it ain't broke don't touch it 😉, but honestly I didn't though about it thanks 👍

Collapse
mellen profile image
Matt Ellen

If you change personTwo to

let personTwo = {
  name: "james",
  lastName: "Owen",
};
Enter fullscreen mode Exit fullscreen mode

Then you still get true, but the properties are not all the same. Is that what you intended?

Thread Thread
jrmatanda profile image
Ben Matt, Jr. Author

No your feedbacks are priceless thanks a lot, I've changed it thanks

Collapse
huzaifa99 profile image
Huzaifa Rasheed • Edited

Good Read. Another approach for copying objects could be Object.assign which can make a deep copy. Anyways keep up the good work.

Collapse
vikkrantxx7 profile image
Vikrant Sharma

Object.assign does a shallow copy

Collapse
huzaifa99 profile image
Huzaifa Rasheed • Edited

Oops. Sry My bad. I dont remember where I learned that. Thanks for correction.

Collapse
capscode profile image
capscode

Nice one...
Do checkout my blog post as well, i have summed up some of the things there as well.
dev.to/capscode/dot-and-bracket-no...

Collapse
adamfousek profile image
Adam Fousek

Hi!
Thanks for article!
Can you give some examples, in which cases, use to freeze feature?
Thanks.
Adam

Collapse
vikkrantxx7 profile image
Vikrant Sharma

Nice candidate for a bookmark.