Необычное поведение javascript

Question

Добрый день! У меня есть массив который загружается с базы данных. Если после загрузки массива отобразить его в консоль, то он без проблем отобразится. console.log(arr) Но, если вывести его первый элемент console.log(arr[0]), то в консоли отобразится undefined . Я попробовал этот элемент вывести через 3 секунды после загрузки страницы. setTimeout('console.log(arr[0])', 3000). Все без проблем сработало. Можете пожалуйста объяснить это явление.

Вот код:

var root = 'https://jsonplaceholder.typicode.com';
var arr = [];
$.ajax({
  url: root + '/posts',
  method: 'GET'
}).then(function(data) {
  arr.push(data[0]);
});
function func() {
 console.log(arr[0])
}
setTimeout(func, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>