Challenge 1: Getters and Setters

[00:00:00]
>> Evan You: We're gonna look into how to actually do this ourselves, and we're gonna actually implement a mini data observer that's similar to how it works in view. So I assume everyone's got the zipped repository, so let's extract it and go into the repository. So we'll see these files, inside reactivity look at 1.1.md.

[00:00:26]
So each exercise comes with a markdown file that describes the requirement and an associated html file, which asks you to implement the requirements. So the first exercise is understanding how to use Object.defineProperty. If you've never used this API before, look it up on MDN, and check out how the API works.

[00:00:58]
Essentially how Object.defineProperty works, I think I'm going to just quickly walk through it, because reading through the docs may take some time. It's just a global API that looks like this, Property, all right? And it takes the source object, obviously, as the first argument, and the second argument is the key of the property that you want to manipulate.

[00:01:27]
So this key can be in the existing key, or in an unexisting key. So if it doesn't exist it'll create it for you, if it exists it depends on whether that property is so-called configurable. If it's configurable, we can override it. So we'll just use a random key, and then the third argument should be an object descriptor.

[00:01:52]
So this descriptor can take some properties like, enumerable.
>> Evan You: By default all of these properties are false. So if a property is declared as enumerable false, then when you use, say, for far keying object to iterate over it, it will not show up, because it's not enumerable. Similarly it will not show up in object keys, and configurable as we just talked about, prevents it from being redefined again.

[00:02:26]
So once you've define something with configurable false, it can never be changed again, so be careful with that. And then we have writable, so if a property is not writable, you can still assign to it, but it will have no effect, and it will fail silently. So it's also something that you should be careful about.

[00:02:48]
But finally the most important thing is the get and set functions. So we can define functions get and set,
>> Evan You: And this will overwrite the default behavior, so get overwrites the .access, and set overwrites the assignment. So you can return arbitrary values from the get function. So if you [LAUGH] return bar, so you will have a property that always, always, always return bar no matter what, you cannot change it [LAUGH] anymore.

[00:03:21]
What you can do to change it, though, is, so the set obviously takes the new value as the argument, and the problem's how do you save this value somewhere, right? So obviously, you have to save it somewhere else, so the realValue, you need to put it in another variable.

[00:03:40]
So you can then return realValue,
>> Evan You: And I'll let you fill in the rest, so let's open the first exercise.
>> Evan You: So the exercise requires you to implement a convert object. [COUGH] And the requirement is, it should walk through all the properties inside the given object, and convert each of them into a pair of getters and setters.

[00:04:13]
And the converting object should retain the original behavior, so if you assign it a new value and then you access it again, it should return the new value. It should just act just like the original object, but at the same time, whenever you access a property, you should console.log that access.

[00:04:32]
And whenever you set a property to a new value, it should also be logged. Essentially you need to create an object that automatically logs all the access and assignments that's happening on it. Is that clear?
>> Evan You: So, if you have Node.js installed on your machine, inside the repository you can run NPM Install to install some testing tools.

[00:04:56]
Some of these exercises include automated test suites that you can run with NPM Test, to assert whether your current implementation is correct. Make sure to pass these arguments, so that you limit the test to the current exercise.