proxy

Author: iliakan

1-js/09-classes/02-class-inheritance/super-homeobject-wrong.png

@@ -0,0 +1,23 @@
+
+```js run
+let user = {
+  name: "John"
+};
+
+function wrap(target) {
+  return new Proxy(target, {
+    get(target, prop, receiver) {
+      if (prop in target) {
+        return Reflect.get(target, prop, receiver);
+      } else {
+        throw new ReferenceError(`Property doesn't exist: "${prop}"`)
+      }
+    }
+  });
+}
+
+user = wrap(user);
+
+alert(user.name); // John
+alert(user.age); // Error: Property doesn't exist
+```

1-js/09-classes/02-class-inheritance/[email protected]

@@ -0,0 +1,31 @@
+
+# Error on reading non-existant property
+
+Create a proxy that throws an error for an attempt to read of a non-existant property.
+
+That can help to detect programming mistakes early.
+
+Write a function `wrap(target)` that takes an object `target` and return a proxy instead with that functionality.
+
+That's how it should work:
+
+```js
+let user = {
+  name: "John"
+};
+
+function wrap(target) {
+  return new Proxy(target, {
+*!*
+      /* your code */
+*/!*
+  });
+}
+
+user = wrap(user);
+
+alert(user.name); // John
+*!*
+alert(user.age); // Error: Property doesn't exist
+*/!*
+```

10-misc/01-proxy/01-error-nonexisting/solution.md

@@ -0,0 +1,19 @@
+
+```js run
+let array = [1, 2, 3];
+
+array = new Proxy(array, {
+  get(target, prop, receiver) {
+    if (prop < 0) {
+      // even if we access it like arr[1]
+      // prop is a string, so need to convert it to number
+      prop = +prop + target.length;
+    }
+    return Reflect.get(target, prop, receiver);
+  }
+});
+
+
+alert(array[-1]); // 3
+alert(array[-2]); // 2
+```

10-misc/01-proxy/01-error-nonexisting/task.md

@@ -0,0 +1,33 @@
+
+# Accessing array[-1]
+
+In some languages, we can access array elements using negative indexes, counted from the end.
+
+Like this:
+
+```js
+let array = [1, 2, 3];
+
+array[-1]; // 3, the last element
+array[-2]; // 2, one step from the end
+array[-3]; // 1, two steps from the end
+```
+
+In other words, `array[-N]` is the same as `array[array.length - N]`.
+
+Create a proxy to implement that behavior.
+
+That's how it should work:
+
+```js
+let array = [1, 2, 3];
+
+array = new Proxy(array, {
+  /* your code */
+});
+
+alert( array[-1] ); // 3
+alert( array[-2] ); // 2
+
+// Other array functionality should be kept "as is"
+```

10-misc/01-proxy/02-array-negative/solution.md

@@ -0,0 +1,40 @@
+The solution consists of two parts:
+
+1. Whenever `.observe(handler)` is called, we need to remember the handler somewhere, to be able to call it later. We can store it right in the object, using our symbol as the key.
+2. We need a proxy with `set` trap to call handlers in case of any change.
+
+```js run
+let handlers = Symbol('handlers');
+
+function makeObservable(target) {
+  // 1. Initialize handlers store
+  target[handlers] = [];
+
+  // Store the handler function in array for future calls
+  target.observe = function(handler) {
+    this[handlers].push(handler);
+  };
+
+  // 2. Create a proxy to handle changes
+  return new Proxy(target, {
+    set(target, property, value, receiver) {
+      let success = Reflect.set(...arguments); // forward the operation to object
+      if (success) { // if there were no error while setting the property
+        // call all handlers
+        target[handlers].forEach(handler => handler(property, value));
+      }
+      return success;
+    }
+  });
+}
+
+let user = {};
+
+user = makeObservable(user);
+
+user.observe((key, value) => {
+  alert(`SET ${key}=${value}`);
+});
+
+user.name = "John";
+```

10-misc/01-proxy/02-array-negative/task.md

@@ -0,0 +1,29 @@
+
+# Observable
+
+Create a function `makeObservable(target)` that "makes the object observable" by returning a proxy.
+
+Here's how it should work:
+
+```js run
+function makeObservable(target) {
+  /* your code */
+}
+
+let user = {};
+user = makeObservable(user);
+
+user.observe((key, value) => {
+  alert(`SET ${key}=${value}`);
+});
+
+user.name = "John"; // alerts: SET name=John
+```
+
+In other words, an object returned by `makeObservable` has the method `observe(handler)`.
+
+Whenever a property changes, `handler(key, value)` is called with the name and value o the property.
+
+
+P.S. In this task, please handle only writing to a property. Other operations can be implemented in a similar way.
+P.P.S. You might want to introduce a global variable or a global structure to store handlers. That's fine here. In real life, such function lives in a module, that has its own global scope.