In this example I try to print one asterisk on the first line, two on the second and so on:
var n = 5;
for (i = 0; i < n; i++) {
for (j = 0; j < i; j++) {
console.log('*');
}
console.log('\r\n');
}
The output should look like this:
*
**
***
****
*****
But in the Chrome console I see this:
*
2 *
3 *
4 *
5 *
Why is this?
console.log is not designed to precisely control the rendering of the output. It is a log writer, not a terminal layout API.
It puts each log message on a line of its own, and collapses duplicate, sequential log messages into a single message with a count of the number of times it occurred next to it.
It's doing that because it's how dev tools handles multiple occurrences of the same value for the purposes of clarity.
You can use an array to achieve the effect you're after. Also note that we change j<i to j<= so that it outputs on the 5th.
Then, we use the .join('') method to flatten the array into a string.
Also, since we are console.logging on every iteration loop, a new line will be added automatically as it's one log per loop.
var n = 5;
for (i = 0; i < n; i++) {
var arr = [];
for (j = 0; j <= i; j++) {
arr.push('*');
}
console.log(arr.join(''));
}Please note that you wouldn't need an array if you were printing this into the DOM - it would work as you originally intended it to do.
Update: Ivar made a great solution as well and that's to use the String.repeat() function which only requires you to use one loop.
var n = 5;
for (i = 1; i <= n; i++) {
var str = '*';
str = str.repeat(i);
console.log(str);
}
String.repeat(). In that case you only need one loop.
Because that's the way it works, basically. Each call to console.log outputs a new log entry. Each log entry is in its own line.
If you log the same string multiple times, they will get summarized into one entry with the count in front.
Don't mistake console.log with Console.Write in C# or similar. It's more like Console.WriteLine.
