Hacking Javascript Objects - I Quiz

Hacking Javascript Objects - I Quiz

Test your Javascript Skills 😎

Β·

5 min read

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?

    image.png

    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. image.png

    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!

Did you find this article valuable?

Support Aakansha's Blog by becoming a sponsor. Any amount is appreciated!

Β