Why this JavaScript is not dynamically creating object properties?
<p>This code can't dynamically set object properties.  <code>console.log(key, val)</code> shows that the loop iterates correctly over the <code>options</code> (merged with <code>defaults</code> and filtered by the keys of <code>defaults</code>):</p>



<pre class="lang-js prettyprint-override"><code>function Foo(options) {
   var defaults = { foo: "bar" },
       options  = _.defaults(options || {}, defaults);

    _.each(_.pick(options, _.keys(defaults)), function(val, key) {
        this[key] = val; // Not working
    });

    this.baz = 'bar'; // Works
};

var foo = new Foo();

foo.hasOwnProperty('foo'); // false
foo.hasOwnProperty('baz'); // true
</code></pre>

<p><strong>Q1</strong>: Why it's not working? Is <code>this[key]</code> wrong?</p>

<p><strong>Q2</strong>: How (normally) one should deal with the key-sensitive problem, that is passing<code>{"FOO": "bar"}</code>?</p>

<p>Functions (if matters): <a href="http://underscorejs.org/#defaults" rel="nofollow"><code>._defaults</code></a>, <a href="http://underscorejs.org/#pick" rel="nofollow"><code>_.pick</code></a> and <a href="http://underscorejs.org/#keys" rel="nofollow"><code>_.keys</code></a>.</p>
