I have been doing a lot of CodeSignal challenges recently. If you have not used their platform yet, I highly encourage it. They have a more video-game type of layout and it really does put me more at ease than HackerRank. I do not know why but HackerRank intimidates me. I guess I have issues. I am not sure.

Anyway, on with the challenge, Add Border.

Given a rectangular matrix of characters, add a border of asterisks(*) to it.
Example
For picture = 

[“abc”, 

“ded”]

the output should be addBorder(picture) =

 [“*****”, 

     “*abc*”, 

                      “*ded*”,                      

“*****”]

Understand

First things first, understand the problem. It looks like we need to unshift and push new strings to the array. The strings will be asterisks and it looks like their lengths will need to be the length of the strings that already exist plus 2. The reason for the “plus 2” is because we will be adding asterisks to the beginning and end of the strings that are currently in the array.

Plan

How do we add to a string?

This is where knowledge of concatenating really comes into play. In JavaScript, concatenating is pretty simple. We can just use ‘+’. So maybe we do a for-loop over the array and for every element we add an asterisk to the beginning and the end of the string.

Okay, that’s cool and all but how do we add a string of asterisks that will be determined in length based on the length of the strings in the array? Again this is JavaScript, not C where we have to declare how long our strings and arrays will be.

There is actually this really cool method I did not know about until I attempted this problem. It is .repeat(). Whatever it is you want repeated, in our case, asterisks, you would attach to the .repeat and inside of the parentheses you declare how many times you want it to be repeated. So, yeah. We will be using that.

Execute

Alright, now for the fun part.

function addBorder(picture) {
    // shift a string of '*' to the array the length of the strings

    let topFrame = '*'.repeat(picture[0].length)
    picture.unshift(topFrame)
    console.log(picture)
    // add a '*' to the beginning and end of each string
    for(let i = 0; i < picture.length; i ++){
        picture[i] = picture[i] + '*'
        picture[i] = '*' + picture[i]
    }
    
    
    // push a string of '*' to the array with the same length as the strings
    let bottomFrame = '*'.repeat(picture[1].length)
    
    picture.push(bottomFrame)
    return picture
}

Reflect

When attempting this code the first time I tried to do:

let topFrame = '*'.repeat(picture[0].length + 2)

While that is all fine and dandy, I ran into an issue with my for-loop. It would add to the beginning and end of the asterisks string as well. Looking back I suppose I could have just set i = 1 instead of 0. I instead decided to let the for-loop do my work for me. I mean, we are already at linear time we might as well get the most out of it. So, that is why I dropped the + 2 in my solution.

If you can do this better, let me know in the comments!! I would love to see your solution.