star row problem

Example:

solve(5)
// prints
// *
// **
// ***
// ****
// *****

I love this problem, because it uses the fundementals of programming and is pretty-much easy to understand.

Since we want to print each row, we need to start from 1. So our loop needs to start at 1 and end at N.

So let’s define the for loop, in javascript the loop syntax is:

for(initial statement; condition; post statement) {
// code
}

Initial statement is the statement that gets executed before the loop runs. Condition is the condition we check if we should continue the loop or not.

Then the post statement, If the Condition is true we execute post statement and anything inside the braces.

Now we want to start at 1, so we will define i as 1 in the initial statement

for(var i=1; condition; post statement) {
// code
}

After that, we want to check if our variable i is smaller or equal to n. So we start at 1 and end up at N. If n was 5, the loop would run like so:

1: run
2: run
3: run
4: run
5: run
6: stop

Actual code:

for(var i=1; i <= n; post statement) {
// code
}

Afterwards we want to increase our variable i by 1. So we use the operator ++.

for(var i=1; i <= n; i++) {
// code
}

So just to recap: set i to 1, check if i is smaller or equal to n: if yes - increase, if no - stop.

Just as a safety measure, let’s run the loop above in the console and print each loop iteration.

var n=5;
for(var i=1; i <= n; i++) {
	console.log(i);
}

Okie dokie, everything’s alright. Hopefully you caught a grasp on how loop logic works, now let’s move on to the problem.

In the problem, we print each row with i amount of stars. So row number 3, would have 3 stars.

Now the cool thing about for loops is that you can nest them, meaning you could put a loop inside another loop and so-on.

So because we want to have row number 3 with 3 stars in them, we need to repeat the character. And we use another loop inside our own loop

for(var i=1; i <= n; i++) {
	for(var j=1; j <= i; j++) {
	}
}

Now to keep track of the repeated characters, we need to define a variable called str. str will have the text that we want to print/output.

for(var i=1; i <= n; i++) {
	var str = "";
	for(var j=1; j <= i; j++) {
	}
}

After we define the variable, we need to add the character * to our variable str.

for(var i=1; i <= n; i++) {
	var str = "";
	for(var j=1; j <= i;j++) {
		// add star to the end of string
		str = str + "*";
	}
}

Now the last thing we need to do, is to print our variable.

var n=5;
for(var i=1; i <= n; i++) {
	var str = "";
	for(var j=1; j <= i;j++) {
		// add star to the end of string
		str = str + "*";
	}
	// print our variable
	console.log(str)
}

Lastly wrap it in a function:

function solve(n) {
	for(var i=1; i <= n; i++) {
		var str = "";
		for(var j=1; j <= i;j++) {
			// add star to the end of string
			str = str + "*";
		}
		// print our variable
		console.log(str)
	}
}

Recap: first loop -> define our variable -> second loop -> add i amount of characters -> end of second loop -> print our variable -> end of first loop

Voilà, works as expected.

Bonus: String.repeat

You could accomplish the same result with the string function repeat, which does the same thing as our second loop.

Also we could skip the variable and just use it on the string, for example:

console.log("a".repeat(5))
// would print: aaaaa

Replacing the second loop with the repeat function, and replacing the string variable with the string constant would produce this short function:

function solve(n) {
	for(var i=1; i <= n; i++) {
		console.log("*".repeat(i));
	}
}