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

Добрый день! У меня есть массив который загружается с базы данных. Если после загрузки массива отобразить его в консоль, то он без проблем отобразится. 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>