Код после цикла не правильно работает, почему?

После выхода из цикла нужно вернуть upScopeTitle как ее значение, однако, почему-то если за циклом возвращать (ну по крайней мере консоль лог показывает что переменная не изменилась), что не так?

var upScopeTitle = []
    const realTrack = () => {
        for (let i = 0; i < tracks.length; i++) {
        jsmediatags.read(`http://127.0.0.1:3000/AppMusic/assets/tracks/${tracks[i]}.mp3`, {
            onSuccess: function(tag) {
            let tags = tag.tags;;
                let { data } = tags.picture;
                let base64String = "";
                for (let i = 0; i < data.length; i++) {
                    base64String += String.fromCharCode(data[i]);
                }
                let img = document.querySelector('.card-img-top')
                img = `data:${data.format};base64,${window.btoa(base64String)}`;
                upScopeTitle += `${tags.title};` // Здесь увеличиваю скоуп заданной переменной 
            $(`<div class="container card chartsCard" data-musicid="${i}">
                <img class="card-img-top" src="${img}" alt="Card image cap"></img>
                <div class="card-body">
                    <h5 class="card-title">${tags.title}</h5>
                    <p class="card-text">${tags.artist}</p>
                </div>
            </div`).appendTo('.charts');
            }
        });
        } // Почему тут эта переменная выводиться без изменений?
        console.log(upScopeTitle) // [], но если поместить внутрь цикла то все правильно выводиться, правда каждую итерацию, а мне нужно только конечное значение
        return upScopeTitle
    }