Javascript – get one function to run after another

I have a function that runs when a click event happens on a button – first(). Inside it populates a dictionary, and second() uses those values in the dictionary. I want second() to run after that dictionary has been populated. I have tried to put second() in a callback inside first() but it runs synchronously, meaning, (i think), the dictionarys are still empty when it starts the second function. I think that I need first to return a promise, or get second function to await the finish of first function, but I cannot figure out how. Any guidance is appreciated. Also I want to do this without JQuery (Ideally).

function first(){
  populateDict()
}

function second(){
  loopThroughDict()
}

>Solution :

To understand async await, you can refer to this article

Here second() function will be called only after populateDict() returns something

async function first(){
  await populateDict();
  second();
}