title: Javascript Array splice removes data but does not reset index
body: <p>I have an array of objects. 
  It had 3 objects</p>
  
  <p><img src="https://i.stack.imgur.com/ix50S.png" alt="Print out in console. Array of three objects starting at index 0"></p>
  
  <p>I then deleted them one by one using
  arr.splice(0,1)
  which I repeated 3 times.
  I then added a new object to the (what is supposed to be an empty array)
  and printed out the ENTIRE array in console.
  <img src="https://i.stack.imgur.com/M1KFL.png" alt="Console output after adding object to emptied array"></p>
  
  <p>As you can see, it IS the only object in the array, but instead of starting with index 0, it starts with index 3.
  Also, the indexes for 0,1,2 are not there, they are not "null"  or anything like it. their gone. 
  What's going on?</p>
  
  <p>This is the actual code for removal. I invoke it 3 times. </p>
  
  <pre><code>this.removeSelected = function () {
  
          //Remove from array
          //I have verified that selFramePos=0 many times. 
          f.splice(selFramePos, 1);
  }
  </code></pre>
  
  <p>This object that I keep in each array slot(Just a bunch of data, nothing special):</p>
  
  <pre><code>  Data = {
          normal : normData,
          imageUrl: selfDefaults.viewport.src,
          topLeftX: norm(cf.paper.width, vpo.cx, vpw),
          topLeftY: norm(cf.paper.width, vpo.cy, vpw),
          width: norm(cf.paper.width, vpo.width, vpw),
          height: norm(cf.paper.width, vpo.height, vpw),
          rotation: selfRotator.getRotation().rotation,
          cropping:
          {
              shape: selfSelector.getSelection().shape,
              tlx: mathUtils.normalize(cf.paper.width, selfSelector.getSelection().left, vpw),
              tly: mathUtils.normalize(cf.paper.width, selfSelector.getSelection().top, vpw),
              w: mathUtils.normalize(cf.paper.width, selfSelector.getSelection().width, vpw),
              h: mathUtils.normalize(cf.paper.width, selfSelector.getSelection().height, vpw),
              color: selfSelector.getSelection().color,
              opacity: selfSelector.getSelection().opacity
          },
          filters: null,
          transition:
  {
      type: 'dissolve',
      time: 500
  },
          requireUserInput: true
      }
  </code></pre>
  
  <p><strong>My problem was that I kept creating new array slots with an increasing index number like so:</strong></p>
  
  <pre><code>        var i=0
          function add2Array () {
          arr[i]='something'
          i++
          }
  </code></pre>
  
  <p>So every time I called the function, it created a 'unique id' of sort instead of working with indexes and positions. </p>
  
  <p>I fixed it by removing i and just using 'push' instead of arbitrarily increasing indexes.  </p>