Decrementing Inside Loops:
Launch Countdown
This is a simple exercise but good practice with loops which is afterall the main idea of this page.
MDN Active Learning: Launch Countdown
I don't usually find myself decrementing in a loop block or using a while statement regularly. So, while (no pun intended) my preferred choice of looping is using the for statement, this is a good time to practice using while and do.. while and discussing a few pitfalls to avoid.
First, my initial recommendation is to write the statement in a comment block to avoid endless looping and crashing the browser, which I always seem to do at least twice before getting it right. Follow MDN's advice!
Second, remember that the exercise requires counting backwards from 10 to 1, which requires initializing the counter at 10 instead of the usual 0 and is the reason for decrementing instead of incrementing. Read about prefix and postfix incrementing and decrementing to familiarize yourself with a couple subtle (and tricky) ways these operators work.
Side note: using the insertAdjacentElement('afterend', ...) method will reverse the backwards countdown when output to the browser. I created a div and used the appendChild() method instead.
Guest List Exercise
MDN Active Learning: Guest List
Write a loop that iterates over the guests array. Append two paragraphs to the DOM, one labeled VIP and the other labeled Riffraff.
This isn't the most challenging of exercises, but it's another good opportunity to practice the syntax for various looping statements and declarations. In fact, a loop isn't absolutely necessary for this one since there are built-in JS methods, such as splice(), which do the looping internally for us.
One thing to consider is whether mutating the array could potentially be a problem; therefore, in this case I used the spread syntax (...) to first save the original array into a copy to ensure that the original isn't overwritten.
Prep Array for Looping – Exiting with break Statement
I wanted to try searching through an array of contacts and their telephone numbers to return just the number I'm looking for, based on this MDN looping example.
First, I need to add some simple HTML to my document:
- A text
<input>allowing us to enter a name to search for. - A
<button>element to submit a search. - And a
<p>element to display the results in.
Next, I'll select some elements on the page using querySelector() which is used to appended them to the DOM after manipulating the array of contacts.
The tricky bit for me is knowing how to extract the two pieces of the contacts data, each of which is one item in an array and separated with a colon. I'm no expert, but I believe most files come in this general format where individual pieces of data are delimited by characters, most commonly commas; hence, the CSV document file extension.
Since the data is in an array format, it can be manipulated and altered using a loop. However, since the two individual pieces of data are both contained within one item (or field) in the array, it first has to be manipulated into a string and then it can be divided into separate pieces (using the colon as a delimiter) to then be put back into a new array. After which time, the new array contains two items for each contact, instead of one, making it easier to access and manipulate each of the two pieces of data.
I had trouble getting access to the array items and after doing a couple searches found this Stack Overflow post which reminded me about using bracket notation. I also noodled around with the loop and discovered that the loop returns typeof string, something I can take advantage of in this situation.