Questions

Class 2

How does Javascript handle white space?

1const x = 10 + 5;

In this code, the javascript interpreter will break each piece of code into what are called tokens. Tokens are the meaningful chunks that are put together to do something in a line of code.

The tokens in this example would be const, x, =, 10, +, 5, and ;. Spaces are used to separate tokens so the interpreter understands each piece needed for the code to run.

Weird white space
1const     x =  10
2
3+
4
55
6;

This code still has the same 7 tokens(const, x, =, 10, +, 5, and ;) and will do the same thing. Spaces are still separating them. When the interpreter encounters several spaces in a row, it will keep moving forward until it finds something token-worthy.

White spaces in strings
1let name = "Henry    Van Dusen";
2console.log(name);
3//This will output:
4Henry    Van Dusen
5
6

When the interpreter finds a string, it will treat the white spaces literally, because the programmer might actually want to use several spaces inside a string.

How can we make the following code less repetitive?

Compliment program: improved with functions
1let compliment = function (student){
2  console.log(student + " is awesome!!!")
3}
4
5let names = ["Aleyna","Michael","Karim","Esin","Dominik","Paul","Hyerin"];
6compliment(names[0]);
7//Prints "Aleyna is awesome!!!"
8compliment(names[1]);
9//Prints "Michael is awesome!!!"
10compliment(names[2]);
11//Prints "Karim is awesome!!!"
12compliment(names[3]);
13//Prints "Esin is awesome!!!"
14compliment(names[4]);
15//Prints "Dominik is awesome!!!"
16compliment(names[5]);
17//Prints "Paul is awesome!!!"
18compliment(names[6]);
19//Prints "Hyerin is awesome!!!"

This code example from Lecture 2 illustrates how functions helps us re-use code and keep things organized. However it's still quite repetitive. In class the question was asked- how can we make this cleaner?

Notice we are calling the compliment function 7 times in a row, each time with the next successive element in our names array.

What if we used a for loop to run once per element in our list, and used our i counter variable, which counts up from 0?

Recall that for loops work like this:

For Loop pseudocode
1for(set looping variable; condition to end the loop; step after each loop){
2  //Code that runs within each loop, in between brackets.
3}

Our loop needs to run 7 times, so let's set up our loop like this:

For Loop
1for(let i=0; i<7; i++){
2  console.log(i);
3}
4//This will output:
50
61
72
83
94
105
116

Now look at our original program. See how numbers 0-6 are used there? We can swap out those numbers for i like so:

Looping over an array
1let compliment = function (student){
2  console.log(student + " is awesome!!!")
3}
4
5let names = ["Aleyna","Michael","Karim","Esin","Dominik","Paul","Hyerin"];
6for(let i=0; i<7; i++){
7  compliment(names[i]);
8}

There's one more improvement we can make to our code! What if we need to update the list of names? The "7" in our looping condition will also need to be updated manually. What if instead of counting the number of names ourselves and writing 7, we got the length of names directly from the variable itself?

Recall that we can get the length of the array like so:

1let names = ["Aleyna","Michael","Karim","Esin","Dominik","Paul","Hyerin"];
2console.log(names.length);
3//This will output:
47

We can use this directly in our looping condition, so no matter what our array is, the loop will repeat once for each element:

Looping over an array
1let compliment = function (student){
2  console.log(student + " is awesome!!!")
3}
4
5let names = ["Aleyna","Michael","Karim","Esin","Dominik","Paul","Hyerin"];
6for(let i=0; i<names.length; i++){
7  compliment(names[i]);
8}

Voila! That's some nice code :)