title: Assigning variables in array vs manually in Javascript
body: <p>I am using Reactjs with <code>react-stockcharts</code> to create <code>candlestick chart</code>.
  I am trying to create a function that calculates Simple Moving Average and store data into an array for each iteration. The loop is giving me a single output however as compared to the manual method. The output is from the last element of the input array. This made me think it was due to some referencing issue and tried using <code>JSON.parse(JSON.stringify())</code> and <code>Object.assign()</code> but still did not work. I want to know why the manual mode works and the iterative method does not and how to go about it.</p>
  
  <p>outer variable</p>
  
  <pre><code>renderList=[]
  formulaList=[]
  accessorList=[]
  </code></pre>
  
  <p>This is the iterative mode</p>
  
  <pre><code>for(var i=0;i&lt;windowSizeList.length;i++){
          var _sma = sma()
          .id(i)
          .options({ windowSize: windowSizeList[i] })
          .merge((d, c) =&gt; { d['sma_'+i] = c })
          .accessor(d =&gt; d['sma_'+i])
          .stroke(colorList[i])
          var _sma_=Object.assign(_sma)
  
          this.formulaList.push(_sma_)
          this.accessorList.push(_sma_.accessor())
          this.renderList.push(&lt;LineSeries yAccessor={_sma_.accessor()} 
  stroke={_sma_.stroke()}/&gt;)
          this.renderList.push(&lt;CurrentCoordinate yAccessor={_sma_.accessor()} fill={_sma_.stroke()} /&gt;)
      }
  </code></pre>
  
  <p>Output I get</p>
  
  <p><a href="https://i.stack.imgur.com/GEiFi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GEiFi.png" alt="loop"></a></p>
  
  <p>This is the manual mode</p>
  
  <pre><code> //------------0
      var _sma0 = sma()
      .id(0)
      .options({ windowSize: windowSizeList[0] })
      .merge((d, c) =&gt; { d['sma_'+0] = c })
      .accessor(d =&gt; d['sma_'+0])
      .stroke(colorList[0])
  
      var _sma_=_sma0
  
      this.formulaList.push(_sma_)
      this.accessorList.push(_sma_.accessor())
      this.renderList.push(&lt;LineSeries yAccessor={_sma_.accessor()} stroke={_sma_.stroke()}/&gt;)
      this.renderList.push(&lt;CurrentCoordinate yAccessor={_sma_.accessor()} fill={_sma_.stroke()} /&gt;)
  
   //------------1
  
      var _sma0 = sma()
      .id(1)
      .options({ windowSize: windowSizeList[1] })
      .merge((d, c) =&gt; { d['sma_'+1] = c })
      .accessor(d =&gt; d['sma_'+1])
      .stroke(colorList[1])
  
      var _sma_=_sma0
  
      this.formulaList.push(_sma_)
      this.accessorList.push(_sma_.accessor())
      this.renderList.push(&lt;LineSeries yAccessor={_sma_.accessor()} stroke={_sma_.stroke()}/&gt;)
      this.renderList.push(&lt;CurrentCoordinate yAccessor={_sma_.accessor()} fill={_sma_.stroke()} /&gt;)
   //------------2
  
      var _sma0 = sma()
      .id(2)
      .options({ windowSize: windowSizeList[2] })
      .merge((d, c) =&gt; { d['sma_'+2] = c })
      .accessor(d =&gt; d['sma_'+2])
      .stroke(colorList[2])
  
      var _sma_=_sma0
  
      this.formulaList.push(_sma_)
      this.accessorList.push(_sma_.accessor())
      this.renderList.push(&lt;LineSeries yAccessor={_sma_.accessor()} stroke={_sma_.stroke()}/&gt;)
      this.renderList.push(&lt;CurrentCoordinate yAccessor={_sma_.accessor()} fill={_sma_.stroke()} /&gt;)
  </code></pre>
  
  <p>Output I get
  <a href="https://i.stack.imgur.com/eBdA3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eBdA3.png" alt="iteration"></a></p>