I'm currently doing the 30 day JavaScript course by Asabeneh here in github. After fiddling around with the codes, there is this weird error if I put a self-invoking function after console.clear().

I have a list of country objects loaded:

const countries = [
  {
    name: 'Afghanistan',
    capital: 'Kabul',
    languages: ['Pashto', 'Uzbek', 'Turkmen'],
    population: 27657145,
    flag: 'https://restcountries.eu/data/afg.svg',
    currency: 'Afghan afghani'
  },
  {
    name: 'Åland Islands',
    capital: 'Mariehamn',
    languages: ['Swedish'],
    population: 28875,
    flag: 'https://restcountries.eu/data/ala.svg',
    currency: 'Euro'
  },...
]

These are the code I wanted to execute:

console.time('for of loop')
for(const country of countries){
    console.log(country.name, country.capital)
}
console.timeEnd('for of loop')

console.clear()

// Level 1.
(function () {
    console.table(countries)
})()

The error shows main.js:23 Uncaught TypeError: console.clear(...) is not a function at main.js:23:1.

if I remove the self-invoking code. The code works just fine.

Console was cleared

I just don't understand what is going on here.