Hacking Javascript Objects - I Quiz

Background

Some time back I had started a Froiz (front-end quiz)

on various topics and received a great response from the community. However unfortunately I wasn't able to find time to continue with the quizzes but finally now I am trying to get back and this blog is an attempt to restart the quiz 🥳

It is recommended to read the blog Hacking Javascript Objects - I before taking the Quiz.

Quiz

If you have not taken the quiz yet you can try it out below or directly go to the link for better experience here

All the best 😊

Woohoo congratulations on completing the Quiz 🎉! How did it go ?

If you scored 100% then its awesome 🎉! If not, nothing to worry the below section is definitely going to help so let's dive into the Solutions of the quiz.

Solutions

1. An attempt to "Hack" console.log 😱

   Object.defineProperty(console, "log", {
    value: () => "console.log is hacked 😱",
   });
   console.log("Hello world!");
   

   Explanation

   The output will be👇🏻

   console.log is hacked 😱
   

   Overriding the behaviour of console.log is possible, as thelogproperty in the console object is writeable.

   Object.getOwnPropertyDescriptor(console, 'log').writable // true
   

2. What will be the value of arr and why 🤔 ?

    var arr = [1, 2, 3, 4, 5];
    arr.length = 2;
    console.log(arr);
   

   Explanation

   Arrays are list-like objects, and length property is writeable hence it reduces the length of the array when updating length. Hence the value of arr will be 👇🏻

   [1,2]
   

   If you increase the length then it will add empty slots to the remaining indexes

    var arr = [1, 2, 3, 4, 5];
    arr.length = 7;
    arr // [1, 2, 3, 4, 5, empty × 2]
   

   Note: The behavior need not be the same in all browsers as it depends if the browsers permit redefining the length of the array. Also do not use this in production 😉

   You can always check if the browser allows it

    var arr = [1, 2, 3, 4, 5];
    Object.getOwnPropertyDescriptor(arr, 'length')
     // {value: 7, writable: true, enumerable: false, configurable: false} in chrome
   

   This means you can update the length attribute but cannot delete or enumerate.

3. Pass or Fail? 🤞🏻

    var myObj = { marks: 60 };
    myObj = Object.defineProperty(myObj, "result", {
    get: () => {
      if (myObj.marks < 50) return "Fail";
      else return "Pass";
      },
    });
    console.log(myObj.result);
    myObj.result = "modified result";
    console.log(myObj.result);
   

   Explanation

   The output will be 👇🏻

   Pass
   Pass
   

   Since myObj.marks is 60 hence when accessing the result attribute , the get method for result will return "Pass" as myObj.marks < 50 evaluates to false 😎

   get: () => {
    if (myObj.marks < 50) return "Fail"; 
    else return "Pass";
    },
   });
   console.log(myObj.result); // will print "Pass"
   

   As myObj.result doesn't have a set method so setting the value using assignment (=) operator is not possible. Hence myObj.result will still log "Pass".

   // This will not work as `set` method is not present
   myObj.result = "modified result"; 
   console.log(myObj.result);  // will print "Pass"
   

   Additionally even if set method is added still when accessing the value returned will be Pass or Fail as per the get method's implementation 🙂.

4. Playing with console 😎. What will console.happy()evaluate to?

   

   Explanation

   The output will be 👇🏻

   "🙂"
   "🙂"
   

   Line 2 of course evaluates to "🙂" as thats what the value is being set to for happy property.

   What happens when the line 3 is executed ?

   delete console.happy;
   

   Since the property happy property of console object is not configurable hence it cannot be deleted.

   Object.getOwnPropertyDescriptor(console, 'happy').configurable // false
   

   console.happy(); // "🙂"
   

   As property happy couldn't be deleted hence line 4 evaluates to "🙂".

5. Trying out with Functions 🧐

   function Dev() {
    Object.defineProperties(this, {
      name: {
        set: (name) => {
          this.devName = name;
        },
        get: () => {
          return this.devName;
        },
      },
      type: {
        set: (devType) => {
          type = devType;
        },
        get: () => {
          return type;
        },
      },
    });
   }
   dev1 = new Dev();
   dev1.name = "Maria";
   dev1.type = "backend";
   dev2 = new Dev();
   dev2.name = "June";
   dev2.type = "frontend";
   console.log(`${dev1.name} is a ${dev1.type} developer and ${dev2.name} is a ${dev2.type} developer`);
   

   Explanation

   Functions are objects as any method or property can be attached to the function just like regular objects.

   The set and get methods are defined for both the name and type properties of the function.

   However, there is a slight difference, for name the property points to the object which is accessing the property hence every object has its own name, whereas for type the property is shared by all objects.

   So every developer has its own name but since the type shared by all objects so it will be same for all devs. The type will be frontend as thats what is set at last and shared by all.

    dev1 = new Dev();
    dev1.name = "Maria";
    dev1.type = "backend";
    dev2 = new Dev();
    dev2.name = "June";
    dev2.type = "frontend"; // shared by all devs
   

   Hence the output will be 👇🏻

    Maria is a frontend developer and June is a frontend developer
   

Closing thoughts

Are you still there ? Thank so much for reading! Hope you enjoyed the Quiz and learned something 😊. Will be coming up with more content, quiz and sharing experiences soon so stay tuned!