TIL/2020–12–17
--
Today is my fifth day learning from the Treehouse Full Stack JavaScript Techdegree. I learned about the different loops I could use in JavaScript like the while, do-while and for loop.
These are my notes for today:
Loop: repeats the same set of actions a certain number of times or until a specific condition is true
Rather than writing code or running the code a hundred times — we can do a loop
The while loop:
while () {
The code block runs over and over again as long as the condition is true
}
As long as the counter is less than 10, it will keep running over and over again.
Basically, counter starts as 0. The JavaScript engine reads our while loop and executes it. Each time it executes our while loop, the counter is added by 1. And the condition in the while loop states counter < 10. So if it is less than 10, we will execute it over and over again.
Do-while loop: repeats the action over and over again while the condition is true
do {
} while ( );
What you put inside the do code block with run as long as while () condition is true
The difference between while and do-while is that for dowhile the do code block will execute at least once, before checking while() condition — while is not tested until after the code block
For the while loop, condition is checked first before executing the code block.
Use do-while if you need your code block to run at least one time
Use while when we need to check a condition first before running the code block
When to use a loop?
- When you want to repeat the same set of actions a certain number of times
A loop repeats an action over and over as long as the test condition returns true
INCREMENT OPERATOR (++)
Adding One to a Number using increment operator (++) instead of the shorthand operator of +=. It does the same thing but it is another approach that can be used.
Increment operator adds 1 to the current value stored in counter and returns a value each time through the loop
DECREMENT OPERATOR ( — )
Subtracts 1 from the value. Similarly with using -=, it counts down.
For example, if the set value of our counter/variable is 10, it will count down to 9.. 8.. 7.. 6
Always be aware of the condition of the loop. If it is always returning true (there is no stop point or limit set) then it will be an infinite loop and keep running forever.
Ways of breaking away from a loop: At one point it has to return false for it to stop
- Use “break”
- Setting a limit to the condition like what we did earlier with the increment/decrement operator to a counter variable.
A loop that runs forever is called infinite/unending loop and it should be avoided.
Examples of this are:
While (true){
Run code
}
Let counter = 0;
While (counter >= 0 ){
Run code
Counter++;
}
The two examples will let the condition always return true and the loop will never end.
Challenge:
You don’t always need to use a counter or specify an exact number of times that a loop must run. All you need is a condition that evaluates to false at some point so that the loop can end.
— — -
For Loops:
For statement creates a loop that contains three expressions
Separated by a semi-colon ;
For (variable; condition; actionforvariable)
Letters I and J are commonly used as the counter variable in for loops
for ( let i = 10; i !== 0; i — ) {
}
for (let i = 0; i < 10; i++ ) {
}
— —
JavaScript has two ways of exiting a loop:
- Once a value/counter returns false in the condition
- Using the break keyword in the loop
Break: When encountered inside a loop — immediately exits the loop
In this scenario, even when the user already entered the secretWord variable and the if statement returns true, the for loop will still keep going until it reaches false (1). To fix this, we can use the “break” keyword — it terminates/stops the execution of the loop and exits and moves on to the next line of command. Which is the message. Since the user was able to return true for the if statement, the message was then changed to “Welcome to the secret loop world!”.
Another example
Any code that appears after break will never run
Basically “break” in my own words — breaks away from the for loop (regardless as to where it currently is in the loop , the condition of the if statement is true then break is executed and exits the loop. In this scenario the message variable was changed to “abort” so that is what the alert will take.)
DRY Programming Principle — Don’t Repeat Yourself
- Reduce repetition of the program
- Use loops
- Use functions
Improving/simplifying code without changing its behavior is called refactoring
Challenge: Refactor this code
Answer:
But it is still repeating itself with the colors, so maybe we can add a function
Maybe the best is arrow function
Or something shorter (BEST OUTPUT)
Passing another function inside a function
— — — — — — —
PRACTICE
PROMPT SHOWS UP UNTIL YOU GUESSED THE RANDOM NUMBER
REMEMBER: NO NEED TO PUT IF STATEMENT IF GUESS IS THE SAME AS RANDOM NUMBER = THIS STATEMENT RETURNS TRUE ONCE THE DO LOOP FINISHES AND MOVES ON TO THE NEXT LINE OF CODE
NEXT PART OF THIS CHALLENGE: HOW MANY TIMES DID THE USER TRY TO GUESS?
NEXT PART OF THIS CHALLENGE — LIMIT GUESS ATTEMPTS BY 10
WE CAN MAKE THIS A FOR LOOP TO MAKE IT MORE CONCISE:
And it works the same! But less code
And since the guess variable is only used in the for loop — we can declare it in the for loop’s scope rather than in the global scope
