This parameter outside of expected inside an anonymous function

Question

I made a code to train handling Arrays and Javascript. This is part of the code:

function Playlist (nome ='Playlist'){
    const musicas = [];
    function addMusicas(...novasMusicas){
        novasMusicas.forEach(function(musica){
            // aqui o this é o objeto global
            this.musicas.unshift(musica);
        })
    }
    return {
        nome,
        musicas,
        addMusicas,
    }
}

const playlist01 = new Playlist(); 
playlist01.addMusicas('Dream on', 'Drive', 'Sex and Candy');

Note that whoever performs the function within the forEach is the global object. Without the this, the scope is that of the object created by Playlist(). Can someone explain to me why this occurs?

Answer 1

This is because when a function is not a property of an object, it is invoked with the parameter this linked to the global object.

There are many ways to escape from this, you could use bind, call, apply, that. But because the question has the ES6 tag, I recommend using a Arrow Function, because she keeps the this where she was raised.

See how it would look:

function Playlist (nome ='Playlist'){
    const musicas = [];
    function addMusicas(...novasMusicas){
        novasMusicas.forEach(musica => { // perceba aqui a sintaxe da criação de uma arrow function
            this.musicas.unshift(musica);
        })
    }
    return {
        nome,
        musicas,
        addMusicas,
    }
}

const playlist01 = new Playlist(); 
playlist01.addMusicas('Dream on', 'Drive', 'Sex and Candy');
console.log(playlist01.musicas);