chapter 2 – Ode to STEM

Exercise 1: Looping a Triangle

Write a loop that makes seven calls to console.log to output the following triangle:

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

Useful to know: You can find the length of a string by writing .length after it.

Example:

var abc = "abc";
console.log(abc.length);
//-> 3

Approach:

Given info:
– need a loop
– seven calls to console.log
– the sharp/number symbol (#) is the string text that needs to be repeated

What do I know? :
– conditional statements (if, else, switch)
– looping statements (while, do…while, for)
– .length after a string gives me the length of the string
– need to concatenate # incrementally

Questions:
-How do I choose which kind of looping statement to use?

Putting together info:
– counter variable starts at 0 (there is no # yet)
EDIT – encountered epiphany during first line of Solution Attempt 1: # is of type string. So counter variable should hold an empty string initially.
EDIT 2 – after writing out Solution Attempt 1, I realize that starting at an “” string is unnecessary. It will not be outputted. Counter variable should hold “#” initially.

– condition: counter variable holds a value less than seven
EDIT – same epiphany time: the length of the string value of the counter variable should hold a value … less than 8? less than or equal to 7? less than 7? NOT SURE YET
EDIT 2: At the end of everything — should have given this more thought.

– update/final-expression: counter variable = counter variable + “#”

Didn’t consider:
-what the counter variable represents, and its value type in this exercise — length of the sign/word/symbol (type number)? Number of repeats (type number)? Type string?
EDIT: so the counter variable represents the value to be repeated; since it will be displayed, it is the base symbol of the whole triangle; it is of type string. At the same time, its length is what keeps track of the number of iterations.

(I actually wrote this down under Given Information, but then forgot about it.)

Solution Attempt 1:

for (var signLength = ""; signLength.length < 8; signLength = signLength + "#") {
    console.log(signLength);
}

Checking Understanding:

First iteration–
The variable signLength holds an empty string.
The length of an empty string is 0.
This means that the condition holds.
The statement inside the loop body is executed {right wording?}.
Nothing is shown as output, because counter variable holds an empty string.
signLength’s value is ‘updated’ from “” to “#”.
Execution goes to the beginning of the loop for the next iteration {right wording?}

Issues:
– nothing is outputted for the first iteration if I start the counter variable as holding the value of an empty string —> let the counter variable grasp “#” as its initial value
– signLength as the variable name doesn’t make sense, and is made redundant in the condition signLength.length < 8 —> change the variable name to reflect that it holds the base symbol for the whole triangle, but the symbols continue to expand

Questions:
-Would the update shortcut work with strings? i.e. signLength = signLength + “#” becomes signLength += “#” ?
Remember that it’s string concatenation though, not arithmetic addition.
ANSWER – after writing out everything up to “Solution with symbol <= 7”, I checked Hints, and yes, += “#” is usable.

Solution Attempt 2

for (var symbol = "#"; symbol.length < 8; symbol = symbol + "#") {
    console.log(symbol);
}

Checking Understanding:

First iteration–
The variable symbol holds a string character “#”.
The length of symbol is 1.
This means that the condition holds.
The statement inside the loop body is executed.
# is outputted.
symbol’s value is ‘updated’ from “#” to “##”.
Execution goes to the beginning of the loop for the next iteration.

Second iteration–
The variable symbol holds the string text “##”.
The length of symbol is 2.
This means that the condition holds.
The statement inside the loop body is executed.
## is outputted. (as a whole, it goes underneath the # from the first iteration)
symbol’s value is ‘updated’ from “##” to “###”.

Third iteration–
The variable symbol holds the string text “###”.
The length of symbol is 3.
This means that the condition holds.
The statement inside the loop body is executed.
### is outputted.
symbol’s value is ‘updated’ from “###” to “####”.

Fourth iteration–
The variable symbol holds the string text “####”.
The length of symbol is 4.
This means that the condition holds.
The statement inside the loop body is executed.
#### is outputted.
symbol’s value is ‘updated’ from “####” to “#####”.

Fifth iteration–
The variable symbol holds the string text “#####”.
The length of symbol is 5.
This means that the condition holds.
The statement inside the loop body is executed.
##### is outputted.
symbol’s value is ‘updated’ from “#####” to “######”.

Sixth iteration–
The variable symbol holds the string text “######”.
The length of symbol is 6.
This means that the condition holds.
The statement inside the loop body is executed.
###### is outputted.
symbol’s value is ‘updated’ from “######” to “#######”.

Seventh iteration–
symbol holds the string text “#######”.
Length of symbol is 7.
Condition holds.
Statement is executed.
####### is outputted.
symbol’s value is ‘updated’ from “#######” to “########”.

Eighth iteration–
symbol holds the string text “########”.
Length of symbol is 8.
Condition evaluates to false.
Execution jumps outside the for loop.
Nothing is outputted (as a whole, the triangle should be outputted).

CONCLUSION: Solution Attempt 2 should work properly.

Issues:
-Should place something outside the loop body? Not sure if the whole triangle is outputted??
EDIT: after testing it in JS console, yes it works.

looping triangle less than 8 — Solution with symbol < 8 works properly

Solution with symbol <= 7

looping triangle less than and equal to 7 — Also works properly

Seventh iteration–
symbol holds the string text “#######”.
Length of symbol is 7.
Condition holds (symbol.length <= 7).
Statement is executed.
####### is outputted.
symbol’s value is ‘updated’ from “#######” to “########”.

Solution with symbol < 7

looping triangle less than 7 — Does not work properly

Seventh iteration–
symbol holds the string text “#######”.
Length of symbol is 7.
Condition evaluates to false (symbol.length < 7).
Execution jumps outside the for loop.
Nothing is outputted (as a whole, a triangle with six levels is outputted).

CONSIDER: Both Solution with symbol.length < 8 and symbol.length <= 7 outputs the desired result. But which one is processed more quickly?

Solution Attempt 3: Final submission

for (var symbol = "#"; symbol.length < 8; symbol += "#") {
    console.log(symbol);
}

NB: Changed from symbol = symbol + “#” to symbol += “#”

looping triangle update shortcut — symbol += “#” works properly

.
.
.

BOOK SOLUTION

variable name is line, which seems more reasonable than symbol, since the string value’s length is used to keep track of the progress of the program
the condition – < 8 is used, instead of <= 7
my solution is more or less the same to the book solution