title: What’s happening in this code with Number objects holding properties and incrementing the number?
body: <p><a href="https://twitter.com/weitzelb/status/718623065480019968" rel="nofollow noreferrer">A recent tweet</a> contained this snippet of JavaScript.</p>
  
  <p>Can someone please explain what is happening in it step by step?</p>
  
  <pre><code>&gt; function dis() { return this }
  undefined
  &gt; five = dis.call(5)
  Number {[[PrimitiveValue]]: 5}
  &gt; five.wtf = 'potato'
  "potato"
  &gt; five.wtf
  "potato"
  &gt; five * 5
  25
  &gt; five.wtf
  "potato"
  &gt; five++
  5
  &gt; five.wtf
  undefined
  &gt; five.wtf = 'potato?'
  "potato?"
  &gt; five.wtf
  undefined
  &gt; five
  6
  </code></pre>
  
  <p>In particular, it is not clear to me:</p>
  
  <ul>
  <li>why the result of <code>dis.call(5)</code> is a <code>Number</code> with some kind of a <code>[[PrimitiveValue]]</code> property, but the results of <code>five++</code> and <code>five * 5</code> appear to just be the plain numbers <code>5</code> and <code>25</code> (not <code>Number</code>s)</li>
  <li>why the <code>five.wtf</code> property disappears after the <code>five++</code> increment</li>
  <li>why the <code>five.wtf</code> property is no longer even settable after the <code>five++</code> increment, despite the <code>five.wtf = 'potato?'</code> assignment apparently setting the value.</li>
  </ul>