JavaScript in Plain Language (2015)

PART II: ENTERING THE SECOND REALM

2.13 Lab work 10

Building a mechanism to fetch a variable from an array

This exercise will review variable assignments, and creating arrays with variables as elements, plus function declarations, reassignment of variables and the usage of indexOf.

The idea is to call a function and select a language as an argument. Then, based on the language selected, the correct sentence will be displayed. Does it sound interesting?

Example:

When calling show(english);

This sentence gets displayed:

"The quick brown fox jumped over the lazy dog".

· Notice how english is not wrapped in quotes (and it is in lower case). That tells us that it must be a variable name, not a string.

I have used Google Translate to convert my sentences from English to Portuguese and Spanish (and later French). My apologies to native speakers if it sounds funny, it is well intended.
Link to the convenient jsbeautify.

· Please do the exercise on your own.
A link to my own file will be given in the end.
Interim files will also be available so that you can check your work.

1- Declare three variables named
english, portuguese, spanish.
Respectively, assign to each one of them the following sentences:
(Link to convenient copy/paste: raw file | bit.ly/1mpqCsr )

"The quick brown fox jumped over the lazy dog"
"A ligeira raposa marrom saltou sobre o cão preguiçoso"
"El rápido zorro marrón saltó sobre el perro perezoso"

2- Declare an array named langVersion with the following elements:
english, portuguese, spanish.

Remember, since these names are already declared as variables, we should not write them in quotes, just separate them with commas.

The purpose of this array is to save each variable in a sequence. Couldn’t we just use the variables directly and forget about the array? Yes, we could. However, in a large program those variables will be saved along with many others and by creating an array we are listing the variables related to language translation, which can be further manipulated, edited, erased or even become part of a larger group of languages. Of course there are other ways to do this but right now we are practicing with arrays and it is a very important practice.

3- Declare one more variable named sentence with the numeric value of 0.

This variable will be used to store the location number of the language we are going to select from all the languages in the array.

The reason why we are giving this variable a value of zero is to tell JavaScript ahead of time that this variable will be numeric. In reality JavaScript will change the type of value if needs be, but it is a good practice to declare our intention, even if this intention may only help a human inspecting the code, rather than helping JavaScript to process it.

(Link to convenient copy/paste for steps 1,2,3: raw file | bit.ly/1Dt7fnS )

4- Below your current code, create a function named show.

The purpose of this function will be to display the correct sentence based on the language we choose when we call the function. The sentence will be picked from the array of languages.
function show() {}

5- Introduce to the function an input parameter named language.

6- In the function’s body, line 1, reassign the already declared variable sentence to the location number of the language selected. We do this by using indexOf() to find the location, like this:
sentence = langVersion.indexOf(language);

Later, when we call the function, like for example show(portugese), the parameter language will be replaced by whatever language argument we give to the function. And the indexOf(language) will assign variable sentence with the correct array address for that language.

7- Finally, on the next line and still inside of the function body, write a console.log to display the contents of the variable chosen when someone calls the function:
console.log(langVersion[sentence]);

From step 6 we know that variable sentence is the location number of one of the items in the array.

8- Paste your code on the Console and call the function show() to test each sentence
(Note: if you get an error thank the gods for the opportunity to do some debugging because it is a very good practice):
show(english);
show(portuguese);
show(spanish);

You may see on your screen the term undefined after the output sentence. That is normal in test Consoles. It is just telling us that the function show() did not explicitly return anything and so, it automatically returns undefined because JavaScript functions always return something.

See the final version on the following links:

forum | raw text.

bit.ly/1r0Ho2D | bit.ly/1mCJogu

Side note:

· If something is not clear, do not move forward until you consciously frame a question. Stop, step back and try to see what each line is attempting to do. Try it 100 times if you need to do so. Then, when you think you know what it is that you don’t understand, move forward to see if understanding comes at the end of the assignment when you look at the script as a whole. Do not let it go if you have any doubts. Concepts need to be thought of; we can’t fly over them and think that we will get them later.

· On the other hand, understanding comes in layers, but we consciously need to make sure we can continue our path even if we don’t fully grasp the idea about something. Ask yourself a question and give yourself an honest answer before moving forward. They say that the act of askingis in itself half of the answer and many times the answer becomes obvious when we properly frame the question.

Adding French to the array

Suddenly someone complains because there is not French version of the Quick brown fox.

1- If you still have your Console open, add a variable french at the prompt:
var french =

Don’t worry about being all the way at the bottom of the script. We are just testing stuff. Notice how french is in small letters.

Variables start with small letters.

2- Assign the following line to variable french:

"Le renard brun rapide saute par dessus le chien paresseux"
raw file. | bit.ly/1wGvYQS.

3- Now, use the method push() to insert the variable french into the array langVersion.
langVersion.push(french);

4- Test the script by calling
show(french);

· See final version here:
forum | raw text.
bit.ly/1r0Ho2D | bit.ly/1mCJogu

Printing out the array contents

Do you still remember how to create a for loop? for loops are great to traverse array elements.

In this project we are going to create a for loop to console.log the items from array langVersion just to illustrate a point leading us to our next topic.

If you don’t have the previous script on your Console, copy it from the previous page all the way at the bottom, and paste it on the Console. Then proceed to step 1:

1- Create a for loop to print the array elements to screen.
I will use the common designation i as a variable for the counter,
and langVersion.length as the limiter for my loop repetition.

2- In the loop body, console.log the contents of the array.
This is accomplished by dynamically addressing langVersion[i],
which is the current location of each element as the loop repeats itself.

· See my script on the forum (the fourth script shown) | bit.ly/1r0Ho2D
or as a raw file | bit.ly/1DtOsZu

Did you notice how the variable names are not being printed?

The only thing we get displayed is the text value from each variable.

That’s because each variable name is instantly evaluated by JavaScript and the value to which the variable points to is the one that JavaScript fetches and displays on the screen.

What if we just wanted a list of the variable names as shown on the array?

To get those labels (english, portuguese, etc) we would need to write console.log(i) by itself, instead of console.log(langVersion[i]). However, that would only print 0,1,2,3. Not the name of the variables, right?

I really would like to display my labels. How can we list those?

That will be covered on the next topic. You see, arrays work great and are frequently used but they are not always the best data structure for the job at hand. When it comes to labels such as the names of those variables, an unordered list may be more appropriate, as opposed to an ordered list like an array.

Let’s move forward and talk about unordered lists. If they are unordered we don’t address them numerically, right?

Let’s see how we handle unordered lists. They are really popular and useful.

END OF LAB