Printing array with console.log is giving result other than directly access

Folks, when I print the 'vertical' array, I get the following:

  

(30) [0, 0, 3.21, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 , Function, shift: function, splice: function ...]

Here is the code:

<script type="text/javascript">
 var horizontal = [];
 var vertical = [];
 var backgroundColor = [];
 var borderColor = [];
 var ctx = document.getElementById("myChart").getContext('2d');

  for(i = 0 ; i < 30; i++) {
    vertical.splice(i, 0, 0);
  }

  $.get('Classes/buscarContas.php', function(dado) {
    dado = JSON.parse(dado);
    dado.forEach(function(obj) {
      var diaMesAno = obj['dtVencimento'].split('-');
      var dia = diaMesAno[2];
      //pega o valor atual
      var valor = parseFloat(obj['valor']);
      //corrige o zero a esquerda quando necessário
      if (dia < 10)
        dia = dia.replace('0', '');

      dia = parseInt(dia);

      vertical[dia] += valor;
    }); 
  });

console.log(vertical);

Funny that when I access position 3 of the array, it shows zero. I'm using this array to fill a graph and actually all values are at zero, but it looks like the array does not have all the values at zero. What am I doing wrong?

Thank you