JavaScript in Plain Language (2015)

PART II: ENTERING THE SECOND REALM

2.15 Lab work 11 - redo lab work 10

Do you still remember when in Lab 10 we displayed “The quick brown fox jumps over the lazy dog” in English, Portuguese, Spanish and French?

There were four variables: english, portuguese, spanish and french. Then we added the variables to an array of variable names.

The problem we encountered was attempting to list the array contents as variable names, or as key-value pairs, like for example:

english: “The quick brown fox jumps over the lazy dog”.

We could not dynamically display the variable name from the array, just the values themselves. This is because JavaScript treated the variable as an expression and gave us the evaluation result, which was the data inside of the variable. (Expressions will be further explained on the next topic).

Well, now we can! All we have to do is, instead of declaring separate variables, we declare them as properties of an object.

Let’s do this:

1- Create an object named langVersion.

2- Assign to this object four property keys: english, portuguese, spanish, french.

3- For each key add the correct value based on the following text:
raw file | bit.ly/1rt9dzZ

Do not declare the variables, use property keys instead as seen on the raw file.

4- You should now have a complete object.
Next create a for in loop outside of the object, to print out the contents of the object. The display of each property should look something like this:
english: "The quick brown fox jumped over the lazy dog";

· See my own results here:
forum | bit.ly/1tWQddJ
or the raw file version | bit.ly/1ofRRkS.

Transforming the for in loop into an object method

5- Once you have finished the project and everything is working, reengineer the for in loop so it becomes an internal method of object langVersion as follows:

a) Add a new comma after the original last property in the object so that you can write another property below it.

b) Give this new property a label named list so that you can call the method later,

c) And then write a function as the value for list.
Inside of the function place your current for in loop.

6- Paste your little program on the Console and
call the method to see how it prints:
langVersion.list();

· Compare your results with mine here:
forum | bit.ly/1uUYgbd
raw file | bit.ly/1rl24Bl

Your listing displays all the properties including the method and its internal script, right?

We can tweak the list method to filter out methods from printing as part of the list.

If you want to eliminate the method from the printed list you can use a conditional statement to filter out anything that is not of string type since list() is a function. The logic behind it goes like this: “if the type of property is a 'string', print it”.

Do you still remember how to use typeof? We covered it on Lab work 1:

When we write:

typeof "tony";

JavaScript replies with "string".

7- Reengineer the loop once again so that
if (typeof langVersion[k] === "string") {
console.log the desired output. No else is needed for this one..

· Compare your results with mine here:
forum | bit.ly/1tWSDsR
raw file | bit.ly/1pqbvtZ

In summary, there are times to use an array data structure, and there are times when an object data structure is more appropriate. In the end, both arrays and objects are lists from the JavaScript library wearing different customs.

In arrays we use a regular for loop and with objects we use a for in loop which is a for loop preconfigured to print out label names and with no length value declaration necessary.

If you want further practice visit the new forum as I will expand the subject there. Also my other eBook has many real life exercises to drill and expand this subject.

END OF LAB