 <p>Be careful about trusting the console, there is often asynchronous behavior that can trip you up.</p> <p>You're expecting <code>console.log(x)</code> to behave like this:</p> <ol> <li>You call <code>console.log(x)</code>.</li> <li><code>x</code> is dumped to the console.</li> <li>Execution continues on with the statement immediately following your <code>console.log(x)</code> call.</li> </ol> <p>But that's not what happens, the reality is more like this:</p> <ol> <li>You call <code>console.log(x)</code>.</li> <li>The browser grabs a reference to <code>x</code>, and queues up the "real" <code>console.log</code> call for later.</li> <li>Various other bits of JavaScript run (or not).</li> <li>Later, the <code>console.log</code> call from <strong>(2)</strong> gets around to dumping the current state of <code>x</code> into the console but this <code>x</code> won't necessarily match the <code>x</code> as it was in <strong>(2)</strong>.</li> </ol> <p>In your case, you're doing this:</p> <pre><code>console.log(this.attributes); console.log(this.attributes.widgets); </code></pre> <p>So you have something like this at <strong>(2)</strong>:</p> <pre><code> attributes.widgets ^ ^ | | console.log -+ | console.log -----------+ </code></pre> <p>and then something is happening in <strong>(3)</strong> which effectively does <code>this.attributes.widgets = [...]</code> (i.e. changes the <code>attributes.widget</code> reference) and so, when <strong>(4)</strong> comes around, you have this:</p> <pre><code> attributes.widgets // the new one from (3) ^ | console.log -+ console.log -----------&gt; widgets // the original from (1) </code></pre> <p>This leaves you seeing two different versions of <code>widgets</code>: the new one which received something in <strong>(3)</strong> and the original which is empty.</p> <p>When you do this:</p> <pre><code>console.log(_(this.attributes).clone()); console.log(_(this.attributes.widgets).clone()); </code></pre> <p>you're grabbing copies of <code>this.attributes</code> and <code>this.attributes.widgets</code> that are attached to the <code>console.log</code> calls so <strong>(3)</strong> won't interfere with your references and you see sensible results in the console.</p> <p>That's the answer to this:</p> <blockquote> <p>It's showing that widgets is not empty when logging <code>this.attributes</code> but it's shown as empty when logging <code>this.attributes.widgets</code>. Does anyone know what would cause this?</p> </blockquote> <p>As far as the underlying problem goes, you probably have a <code>fetch</code> call somewhere and you're not taking its asynchronous behavior into account. The solution is probably to bind to an <code>"add"</code> or <code>"reset"</code> event.</p>