handler.set in ES6 Proxy return value

Question

In this code

function report(message) {
  console.log(message);
}
function makeLoggable(target) {
  return new Proxy(target, {
    get(target, property) {
      report(`Reading ${property}`);
      const param = target;
      return param[property];
    },
    set(target, property, value) {
      report(`Writing value ${value} to ${property}`);
      const param = target;
      return param[property] = value;
    },
  });
}
let ninja = { name: 'Jack' };
ninja = makeLoggable(ninja);
console.assert(ninja.name === 'Jack', 'Our ninja Jack');
ninja.status = '';

I have two questions:

1. Why do I get an error if I set the property status, on the last line, to 0 or ""(empty string)?

Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'status'(…)

2. In the specification it says that I should return a boolean value. But in my case, in the set() method I do not return any boolean value. In that case why does this code work?

Answer 1

You are getting a TypeError because "" is falsy. You would receive the same error if you tried to set the property value to 0 or false.

As MDN states

In strict mode, a false return value from the set handler will throw a TypeError exception.

MDN is somewhat unclear here as it appears that any falsy value (not just false) will cause the set handler to throw a TypeError.

Your code works for most cases because you are returning the result of the assignment. ninja.test = 'string' will return string which is truthy.

In order to fix this problem, simply change your set function to the following:

set(target, property, value) {
  report(`Writing value ${value} to ${property}`);
  const param = target;
  param[property] = value;
  return true;
}