# 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](https://aakansha.dev/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](https://forms.gle/m2qFCxt9db5c1rSo9) 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` 😱 ```js Object.defineProperty(console, "log", { value: () => "console.log is hacked 😱", }); console.log("Hello world!"); ``` **Explanation** The output will be👇🏻 ```js console.log is hacked 😱 ``` Overriding the behaviour of `console.log` is possible, as the`log`property in the `console` object is `writeable`. ```js Object.getOwnPropertyDescriptor(console, 'log').writable // true ``` 2. What will be the value of `arr` and why 🤔 ? ```js 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 👇🏻 ```js [1,2] ``` ````plaintext 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`. ```` 3. `Pass` or `Fail`? 🤞🏻 ```js 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 👇🏻 ```js Pass Pass ``` ```plaintext 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 😎 ``` ```js get: () => { if (myObj.marks < 50) return "Fail"; else return "Pass"; }, }); console.log(myObj.result); // will print "Pass" ``` ```plaintext 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". ``` ```js // This will not work as `set` method is not present myObj.result = "modified result"; console.log(myObj.result); // will print "Pass" ``` ```plaintext 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1662009584262/DW1cvhPVU.png align="left") **Explanation** The output will be 👇🏻 ```js "🙂" "🙂" ``` ```plaintext 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 ? ``` ```js delete console.happy; ``` ```plaintext Since the property `happy` property of `console` object is not `configurable` hence it cannot be `deleted`. ``` ```js Object.getOwnPropertyDescriptor(console, 'happy').configurable // false ``` ```js console.happy(); // "🙂" ``` ```plaintext As property `happy` couldn't be deleted hence line 4 evaluates to "🙂". ``` 5. Trying out with Functions 🧐 ```javascript 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** ```plaintext `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](https://cdn.hashnode.com/res/hashnode/image/upload/v1661978257872/XtniFw74K.png align="left") ```plaintext 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. ``` ```js 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 👇🏻 ````plaintext ``` 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!