Hacking Javascript Objects - I Quiz

Background

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

https://twitter.com/aakansha1216/status/1278634296517857283

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

1. 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`

```js
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

```js
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`.

1. 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 🙂.

1. 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 "🙂".

1. 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!