I am trying to create an ascii type table to output to the console. One of the columns will have an input column header, a persons name. Since name length will vary, I wanted to create a dynamic way to build the table etc.

Here is a hypothetical goal:

+---------+---------+------------+
|  Round  |  Bruce  |  Computer  |
+---------+---------+------------+
|    1    | X       |            |
|    2    |         | X          |
|    3    | X       |            |
|    4    | X       |            |
|    5    |         | X          |
+---------+---------+------------+

In order to get the columns to line up etc, they'll need to be able to vary. Just starting, I wanted to create the horizontal 'border' and I tried the following:

let dasher = (nameLength) => {
    let temp = '----';
    for (let i = 0; i < nameLength; i++) {
        temp + '-';
    }
    return temp;
}

let hr = `+---------+` + dasher(playerName.length) + `+------------------+`;

However, I only get the 4 initial '-', but no additional '-'. The output is:

+---------+----+------------------+

But the desired output for the name Bruce, should be:

+---------+---------+------------------+

I am certain it has something to do with JS's asynchronous behaviours, just don't know how or how else to get what I am looking for