Document on load

I do not understand this behaviour:

var nabil = {
    amjade: [],
    setAmjade() {
        nabil.amjade.push("3");

    },
    readAmjade() {
        console.log(nabil.amjade) // test 1 = []; test 2 = "3"

    }


}
nabil.setAmjade(); //test 2
nabil.readAmjade(); // test 2


console.log(nabil.amjade) //when test 1 =[]   when test 2 = "3";


document.addEventListener("DOMContentLoaded", () => {

    // nabil.setAmjade();  //test 1 
    // nabil.readAmjade(); //test 1

});

I do not understand two things: why the dom Content Load seems to fire after the console.log (line 9) and why even when it is fired my readAmjade() cannot read the nabil.amjade.
Whereas, when I fire the functions without the addeventListener test 2 everythings works; my console.log(line 9) and the readAmjade log out [“3”]. What’s wrong with this documentContentLoaded.

Thank you

The following works exactly as expected. The console.log on line 11 should result in an empty array, because it executes before the DOM content has loaded. Then, when the readAmjade method is executed with the call nabil.readAmjade(); inside the event listener callback function, ["3"] will be logged to the console.

var nabil = {
  amjade: [],
  setAmjade() {
    nabil.amjade.push("3");
  },
  readAmjade() {
    console.log(nabil.amjade); // ["3"]
  }
};

console.log(nabil.amjade); // [];

document.addEventListener("DOMContentLoaded", () => {
  nabil.setAmjade();
  nabil.readAmjade();
});

Thank you very much.