CHAPTER 2 · 21 lessons · 267 exercises
Loops, and where your data lives
Repeat the same work over and over, and hold many values at once. This is where a program starts to be useful.
The programs you wrote in the last chapter had one big limit: they could only handle as many values as you wrote lines for. Three people's data means three lines; a hundred people means a hundred. You cannot build a real app that way.
This chapter breaks through that wall. You will use two tools: repetition and containers that hold things together.
Repetition comes in two spellings, while and for. while means "keep doing the same thing for as long as a condition holds". for means "settle a number of laps and do the same thing that many times". Either can do the other's job, but when the number is clear, for reads better.
The thing you will certainly meet here is the infinite loop. Get the ending condition wrong and the program never stops. In this course we cut it off automatically after a while and tell you what happened, so do not be afraid to make one on purpose. Once you can explain to yourself why it will not finish, you have understood it.
For containers we start with arrays. Write ["apple", "orange", "grape"] to line values up in order under one name, and pull them out with numbers that count from 0, as in fruits[0]. From 0 rather than 1 always throws people at first, and it takes a little while to get used to phrases like "the last item is number length - 1".
The other one is objects. If an array is "a container you take from by number", an object is "a container you take from by name". Write { name: "Yui", age: 15 } and pull it out with person.name. It suits anything where several details belong to one thing — a person, a shop, a product.
Using the two together is where it gets real. Line objects up in an array and real data — a register, a product list — comes out just as it is. Put repetition over that and a hundred or a thousand entries go through the same code.
At the end of the chapter you will also meet undefined, the value that comes back when there is nothing there. It turns up when you go looking for a number or a property that does not exist, and without knowing it you cannot read the cause of an error.
Combining repetition with branching is another of this chapter's climbs. "Look at an array one entry at a time and show only the ones that match" is a shape you will write more times than you care to count. Work out a total, find the largest, count how many — they are all built on the same frame.
There is one habit worth taking away from here: set the variable that holds a total up outside the loop. Make it inside and it goes back to zero every lap. This chapter is the first time you will feel that where you make a variable changes the answer.
Learn how to look into it when it will not work, too. Put a console.log inside the loop and see what the variables look like on each lap. That is faster and surer than chasing it in your head. This course also has a way of running a line at a time and watching what is in the variables, so do reach for that when you get stuck.
With repetition, arrays, objects and branching all in hand, the range of what you can build widens out enormously. Somewhere around the end of this chapter you should start to feel that you are "writing a program". Go on with any of this left vague, on the other hand, and the later chapters get hard. This chapter is worth taking slowly.
Lessons in this chapter
Repeat the same work
- 20A quick recapBring variables and branching back to mind before we start the new chapter.Go to the exercises
- 21Repeating with whileGet the same work done over and over, for as long as a condition holds.Go to the exercises
- 22Repeating with forLearn the other way of writing a loop, with the start, the condition and the update all on one line.Go to the exercises
- 23Choosing between the two loopsGet a feel for how to decide whether to reach for while or for.Go to the exercises
Line values up in an array
- 24Holding values together in an arrayLearn how to keep several values together in a single container.Go to the exercises
- 25Taking one item out of an arrayName a position and take a single value out of the array.Go to the exercises
- 26Changing what is in an arrayName a position and swap an item out for something else.Go to the exercises
- 27Working through an array with a loopStep the number up one at a time and handle the items in order.Go to the exercises
- 28Using the length of an arrayTake the number of items with .length and let the array decide the number of laps.Go to the exercises
Hold values by name with objects
- 29Holding values by name with an objectLearn the other way of holding data — gathering information up as name and value pairs.Go to the exercises
- 30Reading and writing propertiesName a property to take its value, change it, or add a new one later on.Go to the exercises
- 31Putting objects in an arrayLine objects of the same shape up in an array and reach values out of the nesting.Go to the exercises
- 32Running a loop over the nestingPut a for over an array of objects to list them out and add them up.Go to the exercises
When there is no value
- 33Peeking at a value that is not thereMeet undefined, the value you get back when you ask for a number or a property that does not exist.Go to the exercises
- 34Checking for undefined and stepping around itSpot the case where there is no value with a branch, and switch to a different display or a different route.Go to the exercises
Put it together
- 35Putting the chapter togetherCombined practice using arrays, objects, loops and branching together. As a round-up there are no basics — just the ten practice questions.Go to the exercises
- 36Tidying up the outputCombined practice on headings, numbers, separators and units, to finish with output people can read. As a round-up there are no basics — just the ten practice questions.Go to the exercises
More combined practice
- 37Putting for and arrays togetherLearn the single most important pattern there is: working through every item of an array with a for loop.Go to the exercises
- 38Putting for, if and arrays togetherGet to where you can handle "only the items that match" out of the whole lot.Go to the exercises
- 39Putting for, if-else and arrays togetherGet to where you can send every item down "one way or the other".Go to the exercises
- 40Putting for, if-else if and arrays togetherTake on the culminating pattern: sorting every item into three or more groups.Go to the exercises