Array's new value is being displayed before being assigned

Question

I will try to explain my problem in most understandable way.

1. Description
2. Problem

1. Description

tl;dr console.logging displays array data which is being assigned to it after performing ajax request in the future. Displaying it before assignment!

this is my js structure:

var details = {
    var contactsData = [];
    [...]

    saveNotes: function() {
     console.log(this.contactsData);
     this.saveDefault();
    }

    saveDefault: function() {
        var that = this;
        $.ajax({
            [...]
        }).done(function (response) {
            that.contactsData[that.contactsData.length] = response;
            console.log(that.contactsData);
    });
}

STEP 1: I have an input field. Using event querySelector and keypress eventListener I call saveNotes()

STEP 2: saveNotes() console logs this.contactsData before calling another function.

STEP 3: I execute saveDefault() and call ajax, it returns response which I attach to contactsData as a new value and console.log this.contactsData.

2. Problem

Console.log in SaveNotes() logs this

and console log in .done logs this

Note the (26) vs (27) info in inspector and length: value

How this is even possible, help please and thanks.