<p dir="auto">The following code snippets behave differently, is this working as intended?</p>
<h3 dir="auto">Input Code</h3>
<p dir="auto">Unexpected behaviour:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var obj = { 2: 3, 4: 5 };
var {[2] : first, ...remaining} = obj
console.log('first', first)
console.log('remaining', remaining) //remaining contains first"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">obj</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">2</span>: <span class="pl-c1">3</span><span class="pl-kos">,</span> <span class="pl-c1">4</span>: <span class="pl-c1">5</span> <span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-kos">{</span><span class="pl-kos">[</span><span class="pl-c1">2</span><span class="pl-kos">]</span> : <span class="pl-s1">first</span><span class="pl-kos">,</span> ...<span class="pl-s1">remaining</span><span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-s1">obj</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'first'</span><span class="pl-kos">,</span> <span class="pl-s1">first</span><span class="pl-kos">)</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'remaining'</span><span class="pl-kos">,</span> <span class="pl-s1">remaining</span><span class="pl-kos">)</span> <span class="pl-c">//remaining contains first</span></pre></div>
<p dir="auto">This behaves as expected:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var obj = { 2: 3, 4: 5 };
var {&quot;2&quot; : first, ...remaining} = obj
console.log('first', first)
console.log('remaining', remaining)"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">obj</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">2</span>: <span class="pl-c1">3</span><span class="pl-kos">,</span> <span class="pl-c1">4</span>: <span class="pl-c1">5</span> <span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-kos">{</span><span class="pl-s">"2"</span> : <span class="pl-s1">first</span><span class="pl-kos">,</span> ...<span class="pl-s1">remaining</span><span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-s1">obj</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'first'</span><span class="pl-kos">,</span> <span class="pl-s1">first</span><span class="pl-kos">)</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'remaining'</span><span class="pl-kos">,</span> <span class="pl-s1">remaining</span><span class="pl-kos">)</span></pre></div>
<h3 dir="auto">Babel Configuration (.babelrc, package.json, cli command)</h3>

<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    [
      &quot;env&quot;,
      {
        &quot;targets&quot;: {
          &quot;node&quot;: &quot;current&quot;
        }
      }
    ],
    &quot;stage-3&quot;
  ]
}
"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"presets"</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">[</span>
      <span class="pl-s">"env"</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-s">"targets"</span>: <span class="pl-kos">{</span>
          <span class="pl-s">"node"</span>: <span class="pl-s">"current"</span>
        <span class="pl-kos">}</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-s">"stage-3"</span>
  <span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Expected Behavior</h3>
<p dir="auto">I expect both code snippets to behave identically</p>
<h3 dir="auto">My Environment</h3>
<table role="table">
<thead>
<tr>
<th>software</th>
<th>version(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>babel-core</td>
<td>6.24.1</td>
</tr>
<tr>
<td>babel-plugin-transform-object-rest-spread</td>
<td>6.22.0</td>
</tr>
<tr>
<td>node</td>
<td>7.9.0</td>
</tr>
<tr>
<td>npm</td>
<td>n/a</td>
</tr>
<tr>
<td>yarn</td>
<td>0.23.4</td>
</tr>
<tr>
<td>Operating System</td>
<td>macOS Sierra 10.12.4 (16E195)</td>
</tr>
</tbody>
</table>
<blockquote>
<p dir="auto">Issue originally made by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vtambourine/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vtambourine">@vtambourine</a></p>
</blockquote>
<h3 dir="auto">Bug information</h3>
<ul dir="auto">
<li><strong>Babel version:</strong> 6.6.5</li>
<li><strong>Node version:</strong> 5.7.0</li>
<li><strong>npm version:</strong> 3.6.0</li>
</ul>
<h3 dir="auto">Options</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    &quot;es2015&quot;,
    &quot;stage-1&quot;,
    &quot;react&quot;
  ],
  &quot;plugins&quot;: [
    &quot;syntax-object-rest-spread&quot;
  ]
}"><pre class="notranslate"><code class="notranslate">{
  "presets": [
    "es2015",
    "stage-1",
    "react"
  ],
  "plugins": [
    "syntax-object-rest-spread"
  ]
}
</code></pre></div>
<h3 dir="auto">Input code</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const state = { foo: 'bar' };
const id = 3;

const newState = {
  [id]: 'three',
  ...state
}

const {
  [id]: omit,
  ...nextState
} = newState;"><pre class="notranslate"><code class="notranslate">const state = { foo: 'bar' };
const id = 3;

const newState = {
  [id]: 'three',
  ...state
}

const {
  [id]: omit,
  ...nextState
} = newState;
</code></pre></div>
<h3 dir="auto">Description</h3>
<p dir="auto">Consider following example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const state = { foo: 'bar' };
const id = 3;

const newState = {
  [id]: 'three', // A
  ...state
}

const {
  [id]: omit, // B
  ...nextState
} = newState;"><pre class="notranslate"><code class="notranslate">const state = { foo: 'bar' };
const id = 3;

const newState = {
  [id]: 'three', // A
  ...state
}

const {
  [id]: omit, // B
  ...nextState
} = newState;
</code></pre></div>
<p dir="auto">While using object rest spread syntax to immutably remove a property from object (it is useful in Redux reducers), I cannot use same variable as I used to set this property.</p>
<p dir="auto">Here, I expect nextState to be <code class="notranslate">{ foo: 'bar' }</code>, but I get it <code class="notranslate">{ '3': 'three', foo: 'bar' }</code>.</p>
<p dir="auto">However, if I manually convert to string property, I will have expected results.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const {
  [id.toString()]: omit,
  ...nextState
} = newState;"><pre class="notranslate"><code class="notranslate">const {
  [id.toString()]: omit,
  ...nextState
} = newState;
</code></pre></div>
<p dir="auto">Now nextState is { '3': 'three', foo: 'bar' }.</p>
<p dir="auto">Here is an example: <a href="http://www.es6fiddle.net/im23ggzk/" rel="nofollow">http://www.es6fiddle.net/im23ggzk/</a></p>