How to print elements of a 2D array with different lengths in an aligned manner?

I have a 2-D array:

board_grid = [
    ["4",     "167",    "2",    "5",  "167",  "16",   "3",   "8",  "9"  ],
    ["13789", "13789",  "3789", "79", "4",    "189",  "2",   "6",  "5"  ],
    ["89",    "689",    "5",    "2",  "3",    "689",  "1",   "4",  "7"  ],
    ["389",   "389",    "1",    "6",  "5",    "2",    "48",  "7",  "48" ],
    ["6",     "78",     "78",   "1",  "9",    "4",    "5",   "3",  "2"  ],
    ["2",     "5",      "4",    "3",  "8",    "7",    "6",   "9",  "1"  ],
    ["5",     "246789", "6789", "79", "267",  "3",    "478", "1",  "468"],
    ["1378",  "123678", "3678", "4",  "1267", "156",  "9",   "25", "68" ],
    ["179",   "124679", "679",  "8",  "1267", "1569", "47",  "25", "3"  ]
]

I want to transform this array into a string, such that all elements are displayed as the same as above (i.e., each element of the same row/column are perfectly aligned). The square brackets, double quotes, commas don't necessarily have to be printed. Just newlines and whitespaces are enough to make each element distinguishable.

I actually want to display this string in the alert block.

The attempt I have tried:

function board_grid_to_display_string(board_grid) {
    var V_PADDING = " "; // Insert after each square
    var H_PADDING = '\n'; // Insert after each row
    var V_BOX_PADDING = "  "; // Box vertical padding
    var H_BOX_PADDING = '\n'; // Box horizontal padding

    var display_string = "";
    var i = 0;

    for (var r = 0; r < 9; ++r) {
        for (var c = 0; c < 9; ++c) {
            var square = board_grid[r][c];
            // Add the square and vertical padding
            display_string += square + V_PADDING;
            // Vertical edge of a box, insert vertical box padding
            if (i % 3 === 2) {
                display_string += V_BOX_PADDING;
            }
            // End of a line, insert horizontal padding
            if (i % 9 === 8) {
                display_string += H_PADDING;
            }
            // Horizontal edge of a box, insert horizontal box padding
            if (i % 27 === 26) {
                display_string += H_BOX_PADDING;
            }
            i++;
        }
    }

    return display_string;
}

Following flattens the whole array to reduce down the longest string length then uses String.proptotype.padEnd() to add extra spaces as needed.

The outer map is joined with the line break and the inner map pads each element and is joined with a single space between each column. You can adjust as needed

// get maximum element string length
const mLen = grid.flat().reduce((a,c) => Math.max(c.length,a), 0);

const res = grid.map(arr => arr.map(s => s.padEnd(mLen,' ')).join(' ')).join('\n')

console.log(res)

<script>
const grid = [
    ["4",     "167",    "2",    "5",  "167",  "16",   "3",   "8",  "9"  ],
    ["13789", "13789",  "3789", "79", "4",    "189",  "2",   "6",  "5"  ],
    ["89",    "689",    "5",    "2",  "3",    "689",  "1",   "4",  "7"  ],
    ["389",   "389",    "1",    "6",  "5",    "2",    "48",  "7",  "48" ],
    ["6",     "78",     "78",   "1",  "9",    "4",    "5",   "3",  "2"  ],
    ["2",     "5",      "4",    "3",  "8",    "7",    "6",   "9",  "1"  ],
    ["5",     "246789", "6789", "79", "267",  "3",    "478", "1",  "468"],
    ["1378",  "123678", "3678", "4",  "1267", "156",  "9",   "25", "68" ],
    ["179",   "124679", "679",  "8",  "1267", "1569", "47",  "25", "3"  ]
]

</script>

I don't think that's the best idea but

• Get the greatest number
• Count how many digit have this number
• for each value in your array -> add many space in string

For your exemple, your greatest number is 246789 so it have 6 digits.
Take any number in array like 48 (it have 2 digits)
6 - 2 = 4
Add 4 spaces before this value