当元素被推送到$ .getJSON回调时，我可以访问数组，但不能访问数组中的元素

Question

我试图通过使用jQuery循环几个$ .getJSON回调来访问我创建的数组中的元素。如果我在循环之后控制数组，那么我可以通过在控制台中展开数组来查看数组中所有被推送的元素。但是，如果我在console.log数组中的任何元素，它在控制台中返回“undefined”。如何在回调之外访问数组及其元素？ Codepen：https://codepen.io/timfalk/pen/bLNmdV

    var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

var user = "";
var channels = [];

for(var i = 0; i < users.length; i++){
    user = users[i];
    $.getJSON("https://wind-bow.glitch.me/twitch-api/users/" + user, function(channel) { 
      channels.push(channel);
    });
  }

console.log(channels); //returns fine with elements nested inside
console.log(channels[0]); //returns as undefined