JavaScript in Plain Language (2015)

PART III: STRENGTHENING THE WARRIOR'S ARSENAL

3.4 Lab work 12

Part A: Expressions, statements, arguments

(A link to my answers will be posted at the end of this page. You may actually navigate to the forum to mentally answer the questions because the answers are not visible until you click on the individual answer button.)

Let’s review some of the concepts we have covered in this section. Please try to answer all questions before you check my answers.

In general an expression is something JavaScript summarizes into one unit, and a statement is a complete sentence representing a command and terminated by a semicolon.

1- In the following example what are the expression(s) and what are the statement(s)?

if(10 < 11) {
console.log("I love JavaScript");
}

2- In the following function assignment what is the value of variable addTwo and what is the value of addTwo with post-fixed parentheses addTwo()?

var addTwo = function (){
return 3 + 2;
};

3- In the declaration of the above source code, which section of addTwo is known as an anonymous function?

4- On the function assignment from question 2, if I assign variable addTwo to a new variable x, and then later I reassign addTwo to the number 33, what will the value of both variable x and variable x() become?

5- What are function input parameters and why do we need parameters at all?

6- The object arguments is native to functions. How would we write two console.log statements, one to display the first value from object arguments, and the other to display the third value from object arguments of a function?

· Answers and further explanation can be found here:
forum | bit.ly/1qqmwvg

Part B: Passing data by value and by reference

1- Below, I have declared two variables. Variable b which has a numeric value of 33, and variable a which is assigned to the value of variable b:
var b = 33;
var a = b;

a) Was this an assignment by value or an assignment by reference?

b) What happens to the value of variable a, if I add 1 to b?

2- Below I have declared and assigned two variables. The first variable, c, is assigned to an array. The second variable, d, is assigned to a function.
var c = [1,2,3];
var d = function(){ return 9;};

a) Suddenly, I assign the value of c to d, like d = c; What is now the value of d? What happens to the previous value of d after the reassignment?

b) What is then the value of d if I reassign c to value null?
c = null;

3- In the following script, what will be the output of function myCastle() when we call it?
var f = 33;
var myCastle = function() {
var f = "Santarem";
return f;
};
myCastle();

4- How would you rewrite the script to output the outer variable f, instead of the inner variable f?

5- Which object acts as the parent for all global variables in a normal web page?

6- What data structure in JavaScript has the capability of wrapping its elements in a private manner?

· Answers and further explanation can be found here:
forum | bit.ly/1rm2pUg.

Part C: Find and replace a word in a string

The goal for this project is to create a mechanism that finds a word in a paragraph and replaces it with another word. The idea is to replace brown with red on the following paragraph:

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

The tools to use are as follows:

· Several variable names to be used as helpers:
paragraph – assigned to the original paragraph.
tempArray – assigned to the result of converting the string to array.
oldWord – assigned to the word "brown", the one we search for in order to replace.
newWord – assigned to the word "red", the one we want to use as a replacement.

· split() which converts the string into an array of separate words.
The result of splitting the string will be assigned to an array called tempArray.
(The reason for converting the string sentence into an array of words is so that we can target the desired word to replace).

· A for loop. The loop will traverse the array in order to find the targeted word and replace it.

· join() which will later reconvert the array back to string.

We first split into array, then search and replace, then convert back to string and assign the result back to the variable paragraph.

Finally we use console.log which prints variable paragraph displaying the end result.

It may sound complicated but it becomes easier after doing it the first time.

Here’s a recipe guide:

Declare the original string variable.
Convert the variable into individual words.
Introduce the word that needs to be found.
Introduce the new word to replace the existing word
Iterate over the array to find and to replace the word
Reconvert the modified array to string by assigning it to the original variable
Display your results

Take your time to think about it. Should you need an editor use jsbeautifier.org to write your script. Then paste it onto the Console for testing purposes.

· For a quick peek or further explanation and my own final version of this project please refer to the
forum board | bit.ly/1pqFAcC.
Or just the raw file | bit.ly/1uVMHjS.

Part D: Using a function to save and recall our code

Great job! Now let’s take it one step further:

Let’s save the script in a function called findReplace.

The idea is to convert both variables oldWord and newWord into input parameters, instead of declaring them in the script like we’ve done before. This makes our search and replace more flexible because from this point on we can search for any word and replace it with any other word we want.

Use either choice of function style:

function findReplace () { }
or
var findReplace = function() { };

I will use the first option but either one will be fine.

Don’t forget to include the input parameters.

Once you’re done, call the function by choosing any word and replacing it with any other word of your choice.

Examples:

findReplace("brown", "red");
findReplace("quick", "slow");
findReplace("dog", "cat"); ... you will have a problem with this one because of the dot at the end of the paragraph.

· For a quick peek or further explanation and my own final version of this project please refer to the
forum board | bit.ly/1rtG4EK.
or just the raw file | bit.ly/1ypiKg3

Part E: Making the search and replace more portable

On the previous project we created an automatic find and replace script, but it only worked with variable paragraph. It would be nice to have a portable function so that we can apply it to other variables or even to loose strings.

At this point it should be obvious the importance of using functions to create methods that can be reused in more than one application.

In order to make the project more portable we need to add a third input parameter, one which represents the targeted variable or just any string value for that matter.

1- All we have to do is to add a third input parameter and replace all the paragraph instance names from inside of the function, to this new input parameter’s name.

I have called my input parameter data.

· For a quick peek or further explanation and my own final version of this project please refer to the
forum board | bit.ly/1mqMRhT.
Or just the raw file. | bit.ly/1uijwc9.

If you can’t think of an example to test your scrip please look at the forum board for two samples of test data. You should find them right below the script we have just discussed.

p.s. I’m so happy that you have made it this far, thank you!
We’re almost done with the JavaScript lectures and exercises. Then, JSON and AngularJS will be optional studies that you can tackle later on if you need to take a break. However, please keep this truth in check: “out of sight, out of mind”. You will forget if you don’t keep practicing regularly, then you will have to read the book from the beginning again.