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

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;
}

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

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'

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",
};

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"};

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!🥶

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 😉

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"};

🎉🎉🎉 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😃.

Comments

[Matt Ellen-Tsivintzeli]

  objectOneProperties.forEach((property, index) => {
    let propName = objectOneProperties[index];
    if (objectOne[propName] == objectTwo[propName]) {
      isEqual = true;
    } else {
      isEqual = false;
    }
  });

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;
    }
  }

[Ben Matt, Jr.]

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 👍

[Matt Ellen-Tsivintzeli]

If you change personTwo to

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

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

[Ben Matt, Jr.]

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

[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...

[Vikrant Sharma]

Object.assign does a shallow copy

[Adam Fousek]

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

[Vikrant Sharma]

Nice candidate for a bookmark.