Storing sequential data
Let's say that you need to store some sequential data, say Isaac Newton's colours of the rainbow. From what you know already, you can store the colours like this:
// INIT: initialize colour variables var colour1 ="Red"; var colour2 ="Orange"; var colour3 ="Yellow"; var colour4 ="Green"; var colour5 ="Blue"; // About indigo: Newton thought that seven was a more "natural" number, var colour6 ="Indigo"; // like the number of non-stellar objects in the solar system (as he knew it then). var colour7 ="Violet"; // Really, there are thousands of colours. Indigo is rarely used.
This works, but it is a little cumbersome. And what if you want to use the colours in a loop? There are ways to do it, but they are graceless.
Arrays are a way of storing data in sequence. Our colours, for example, could be handled like this instead:
// INIT: initialize colour array var colour =; // declare this variable as an array. Note the '' colour ="Red"; // Note that the first array is in cell 0 colour ="Orange"; colour ="Yellow"; colour ="Green"; colour ="Blue"; colour ="Indigo"; colour ="Violet";
Or, it could be shown even simpler:
// INIT: initialize colour array var colour =["Red", "Orange", "Yellow", "Green", "Blue", "Indigo", "Violet"];
Think of the
colour variable as having seven cells that can be accessed individually, like this:
|Rank||Description||Stripe & color|
|Tenth geup (급)||white||▬▬▬▬▬▬▬▬|
|Ninth geup||white belt with yellow stripe||▬▬▬▬▬▬▬▬|
|Seventh geup||yellow belt with green stripe||▬▬▬▬▬▬▬▬|
|Fifth geup||green belt with blue stripe||▬▬▬▬▬▬▬▬|
|Third geup||blue belt with red stripe||▬▬▬▬▬▬▬▬|
|First geup||red belt with black stripe||▬▬▬▬▬▬▬▬|
|First dan (단) or first-degree black belt||black||▬▬▬▬▬▬▬▬|
Initializing the belt info into arrays
The first thing you need to do is get the table data into arrays. In today's lesson, you are going to initialize your belt information three different ways in order to expand your skills:
Assigning arrays directly by cell index
For the belt rank names, we are going to assign each piece of data directly by specifying the index of the array cell, like so:
Assigning arrays with a list
For the colour descriptions of the belt, we are are going to put all the data entries in a list separated by commas and enclosed by square brackets (
Note that the list items are on different lines: this is not necessary, but it makes the code easier to read and edit.
Assigning arrays by splitting a string
Sometimes you get bored typing in a million quotation marks and commas.
.split() function can make you a happy programmer! For example:
var colour ="Red,Orange,Yellow,Green,Blue,Indigo,Violet".split(",");
...will create the same thing as the colour array at the beginning of this lesson.
var name ="Joséphine|Eléonore|Marie|Pauline|de Galard|de Brassacede|Béarn,|princesse de Broglie".split("|");
...will create will split the all the princess de Broglie's names into list, using "|" as a divider.
We can use
.split() strings to assign the colour names to the illustrations in the chart: one array for the belt,
.split() on commas, and one array for the belt, which is
.split() on the space character " ".
If there is no stripe, we will use a stripe of the same colour as the belt:
Array friendly HTML code
id='s that are in sequence, like this:
Notice how the
id='s all start with the same thing -
Also notice how there is an
id= number for each index of the data arrays, starting with index zero.
This block of HTML is just begging have the table cell (
<td>) information inserted inside the rows (
<tr>). So let's do that!
Processing the data into a new data into the
In this example,
mainProcedure() triggers two further subroutines:
- One function,
createOutputCellStrings(), to process the array data and compose the table rows, storing it inside a new array,
- And another function,
insertOutputCellStrings(), to insert the
outputCellsinside the table rows with the correct
createOutputCellStrings() sets up a loop that goes from 0→18.
Inside that loop, it creates HTML code to create table cells (
- The name of the belt level,
- The description of the belt,
- And an illustration of the belt colours and stripes, using
background-color:style codes and
▬to create "▬" symbols for the stripe
Then it combines the three sets of cell codes and stores it in
outputCells into the table rows
insertOutputCellStrings() sets up a loop that goes from 0→18.
Inside the loop, it inserts the
outputCells HTML data inside the table row with the
id= of the correct index number.
Show me an example!
Saving your work
Download the template and rename it to your last name, such as "
In this assignment you modify the template to initialize arrays, and use array data to create a table of information.
The template that you have been given is full of bugs and typos. I have specially crafted the bugs and typos so that they will draw attention to what you have learned about arrays. Some of the bugs will not show up as errors when you run the code.
Use the console log to troubleshoot the code, make changes, and then hand in normally.
Do it with style
The console log can send you information silently
By now, you have noticed all of the
console.log() commands in the code examples.
Usually there is a menu item that will display the console log.
- In Chrome, it is in the
- In Firefox, it is in the
- In older versions of Internet Explorer it is often, well, unreliable.
Run some code with the console open to see how it can help you debug things. It is like using alerts that you can keep buried in your code that nobody but you (and other developers) will see.
I recommend adding
- at the beginning of each function
- inside of each loop
- any time that you have to confirm a critical calculation
You can also type variable names and commands directly into the console, and it will report their values back to you.
I am not making console logging mandatory, but you might be crazy not to use it. It makes debugging much more pleasant!