I am reading the Eloquent Javascript book. There is a task to build a triangle like this:

#
##
###
####
#####
######
#######

with a loop.

I did it successfully with a for loop.

for (var result = "#"; result.length <=7; result = result + "#")
console.log(result);

But for some reason I can't do it with a while loop.

var result = "#"
while(result.length <=7 ){
console.log(result);
result = result + "#";
}
VM920:3 #
VM920:3 ##
VM920:3 ###
VM920:3 ####
VM920:3 #####
VM920:3 ######
VM920:3 #######
"########"

For some reason I am getting this extra line at the bottom with 8 # symbols wrapped in quotes. Why is this happening?

I am reading the Eloquent Javascript book. There is a task to build a triangle like this:

#
##
###
####
#####
######
#######

with a loop.

I did it successfully with a for loop.

for (var result = "#"; result.length <=7; result = result + "#")
console.log(result);

But for some reason I can't do it with a while loop.

var result = "#"
while(result.length <=7 ){
console.log(result);
result = result + "#";
}
VM920:3 #
VM920:3 ##
VM920:3 ###
VM920:3 ####
VM920:3 #####
VM920:3 ######
VM920:3 #######
"########"

For some reason I am getting this extra line at the bottom with 8 # symbols wrapped in quotes. Why is this happening?

• javascript
• loops

Share Improve this question Follow asked Nov 10, 2016 at 16:41 Igor SchekotihinIgor Schekotihin 17722 silver badges1212 bronze badges 3

• Is there any code after the while loop? – RamenChef Commented Nov 10, 2016 at 16:43
• Any chance you're running this directly from the browser console? – TimoStaudinger Commented Nov 10, 2016 at 16:43
• Because on the last checking of the loop condition the result has a length of 7, then you go through the loop again. – enhzflep Commented Nov 10, 2016 at 16:48

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

It's the result of the final expression in your code. Type in "5+5" in your JS console and you'll get a result. If you put "5+5" at the end of a script, same thing. That's what's happening here:

var result = "#"
while(result.length <=7 ){
    console.log(result);
    result = result + "#";  // <-- this is the last statement executed, so it is returned
}

In contrast, the last statement below is a logging statement, which has no return value. So the result of the script is undefined.

for (var result = "#"; result.length <=7; result = result + "#")
    console.log(result);

You can see this more clearly if you try something like this:

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

Here, the last expression is simply i. This code prints each number from 0-4 inclusive, then prints the 4 a second time because its the final expression.

0
1
2
3
4  <-- the final console.log() call
4  <-- the final expression

I see two solutions for this For some reasons I prefer this one

var newItem = '';
for (var number = 0; number < 7; number++){
    console.log(newItem = newItem + '#');
}

But second is more eloquent

for (var newItem = '#'; newItem.length < 7; newItem = newItem + '#') {
  console.log(newItem);
}

You can also use repeat method where it constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.

for (let i = 0; i <= 7; i++) {
  console.log("#".repeat(i))
}

var result = "#"
while(result.length <=7 ){
console.log(result);
result = result + "#";
}

The code works fine.

This is my personal favourite way to answer that question;

let i = 0;
let finalValue = "";
while(i < 8) {
    finalValue += "#"; i++
    console.log(finalValue);
}

but there is also this solution;

let i = 0;
while(i < 8) {
let finalValue = ""; i++
let j = 0;
while (j < i+1) {
    finalValue += "#"; j++
    console.log(finalValue);
}
}

Hope this helps :}

Actually javascript engine needs notification that a function has finished it's task. In case of this scenario, programming language understands not as finished but as has finished. The main fact is that it is not only true for javascript but also for other languages. In some languages like C# we call it using method signature for example,

public void ReturnNothind(){
    // Code...
} 

The method returns void when it needs to notify that it has finished it's business.

In case of javascript, it is not declared in method signature but it works according to this philosophy.

In case of for loop it returns undefined. On the other hand, for the while loop it has notified the js engine by returning the value of the result variable.

So, to get the same result from the while loop you can do as following...

function print(){var result = "#"
while(result.length <=7 ){
console.log(result);
result = result + "#";
}}
print()