Build a square (7kyu): Codewars (TDD in JavaScript)

Hi! It’s Friday. So let’s chill and do something easy today. If this is your first time here and you want to learn Frontend and JavaScript, start right now by subscribing, and don’t forget to turn on the subtitles. [Music playing] Let’s solve today kata titled “Build a square.” I will give you an integer. Give me back a shape that is as long and wide as the integer. The integer will be a whole number between 0 and 50. Example.

00:33 - “n = 3” so expect a square 3x3 back just like below as a string. Okay, let’s try. Now we have a function that should return this string divided by a return symbol. Okay, let’s just simply solve this using a straightforward approach. Let’s create a value that should be a resultant string. It should be empty for now. Then a “for loop.” Let “index” starting from 0 and index “until int” (it’s our input value); “int” times “int.” Then index plus, plus. Then.

01:19 - If this index is the last element of the string, so it should be divided… The reminder should be equal to zero and this is not the first element of this sequence. Then add the divider string… Plus, equal a “return” symbol. Otherwise, add one more “plus” to this square sequence string. Okay and now return this string. Let’s try our solution. That’s correct. Good! Now let’s refactor our solution and instead of these “if” let’s do it a bit differently. Let’s create an additional array. Like this and I’ll put a string sequence here.

02:39 - So I need this “for loop” until “int,” then simply string “plus” and here I need one more loop that should be: “index” starting from 0 and until “index” is our input value, “index” plus, plus. Then push to the array one more string, like this. And then return an array joined by a “divider” symbol. Let’s try. Of course, this should be “string.” Good! That also works. Now let’s use a “repeat” method to make it even simpler. Instead of these, I’ll use only one “for loop,” so for that, I need this “for loop” and push a symbol itself, like “+” and repeat “int” times. Let’s try. Yes, and that’s correct.

04:06 - Now I can optimize this solution and instead of this “for loop” let’s use a “spread” operator for an array. So I’ll create an array, and it length should be “int” and then “map” over this array, and fill it with required symbols. Let’s do that as follow. Let’s remove everything and start from the scratch. So I’ll return a new value, that should be an array length “int” and then “map” over it. And after all, I’ll join this array using our divider symbol, like this. And now this “map” function.

04:56 - That should be: “X” and then our symbols “repeat” “int” times. Let’s try. Good! Now I can use a fat arrow to make this solution simpler. So “const” here, a “fat arrow” here, don’t need this one. And don’t need this one. Let’s check. Okay, let’s check against all the cases. Yes, that works. [Music playing] My code is available on GitHub. Documentation is available in the Internet. Follow the links if you’re eager to get more. If you like this video give it “thumbs up”, share it with your friends, subscribe to the channel and watch other episodes. Thanks for watching and dive deeper. .