IT 231 -- Jan 23, 2024 Notes

IT 231 -- Jan 23, 2024

Review Exercises

What is the difference between the =, ==, and === operators?
Answer: = is the assignment operator. It assigns the value on the right side to the variable on the left. For example:
```
var n = 25;
```
== is the "tolerant" comparison operator. It returns true if the expressions are equal after converting then to number values. For example:
```
3 == "3"
```
returns true because 3 and "3" are equal after converting both to numbers.

=== is the strict comparison operator. It returns true if the expressions are equal and have the same datatype. For example:
```
3 === "3"
```
returns false because, although both expressions are equal to 3 when converted to numbers, they are different datatypes so the strict comparison operator declares them not equal.

Rewrite these JavaScript statements using expression interpolation:

var name = "Alice";
var greeting = "Hello, " + name + ", how are you?";
Answer:
var name = "Alice";
var greeting = `Hello, ${name}, how are you?`;

What is the output of this script?

function f(s, t) {
    return "*" + s + "*" + t + "*";
}
console.log(f("Illinois", "Wisconsin"));
// Output:
*Illinois*Wisconsin*

Rewrite the return value of the function f in the preceding problem using expression interpolation. Answer:
```
return `*${s}*${t}*`;
```

Give some examples of string constants. Answer:

"apple"  "123"  "!@#$%^&*()"  " " (space)  
"" (null string = string of length zero)

Single quotes can also be used for JavaScript strings:

'apple'  '123'  '' (null string = string of length zero)  
' ' (space)  '!@#$%^&*()'

How do you define a JavaScript array?
Answer: Use square brackets ( [ ] ) to delimit the array and use commas to separate the array items, for example:
```
var arr = ["dog", "cat", "mouse", "goldfish"];
```
What is the JavaScript array-lookup operator?
Answer: The array lookup operator is [ ]. For example, a[3] has the value "goldfish".
What does it mean that JavaScript arrays are zero-based?
Answer: It means that the index of the first item is zero = 0.

Practice Quiz 3a

Take Practice Quiz 3a on D2L.

Practice Problems

String Methods Look up the list of String methods on the W3Schools JavaScript String Reference Page:
www.w3schools.com/jsref/jsref_obj_string.asp
Pick out some String properties and methods and test them. For simplicity, use REPL (interactive Node) to test these String properties and method. Enter node in a Command Prompt Window (Windows) or Terminal Window (Mac) to bring up REPL. Answer: We tested these string methods:
```
charAt  includes  indexOf  lastIndexOf  repeat  toUpperCase
```
Also, test the string property length. Here is the interactive Node (REPL) script for testing these string methods:
```
> var s = "elephant";
undefined
> s.charAt(4)
'h'
> s.includes("eph")
true
> s.indexOf("eph")
2
> "abc".repeat(10)
'abcabcabcabcabcabcabcabcabcabc'
> s.toUpperCase( )
'ELEPHANT'
> s.length
8
```

Array Methods. Look up the list of Array methods on the W3Schools JavaScript Array Reference Page:
www.w3schools.com/jsref/jsref_obj_array.asp
Pick out some Array properties and methods and test them. Again, test the Array property and methods using REPL. Answer:

> var a = ["apple", "pear", "peach"];
undefined
> var b = ["orange", "lemon"];
undefined
> a.concat(b)
[ 'apple', 'pear', 'peach', 'orange', 'lemon' ]
> a.indexOf("pear")
1
> a.indexOf("kiwi")
-1
> a.push("cherry")
4
> a
[ 'apple', 'pear', 'peach', 'cherry' ]
> a.sort( )
[ 'apple', 'cherry', 'peach', 'pear' ]
> a.pop( )
'pear'
> a
[ 'apple', 'cherry', 'peach' ]
> a.length
3

Anonymous Functions Example

An anonymous function is a function without a name.
Anonymous functions are used extensively in Node programming.
By itself, an anonymous function is not useful. For example:
```
function(n) {
    return 3 * n + 2;
}
```
This function cannot be used later.
You could call an anonymous function like this:
```
var result = function(n) {
    return 3 * n + 2;
}(5);
console.log(result);
// Output: 17
```
This works in an HTML script. However, it does not work as a Node.js script. In either case, it is simpler just to write:
```
var result = 3 * 5 + 1;
console.log(result);
// Output: 17
```
To save the anonymous function to use later, save it in a variable like this:
```
var f = function(n) {
    return 3 * n + 2;
}
```
Then you could test the function stored in the variable f like this:
```
console.log(f(5));
// Output:
17
```

Start with this FtInToCm function defined as a traditional function:

function ftInToCm(feet, inches) {
    return (12 * feet + inches) * 2.54;
}

Rewrite the function as an anonymous function saved in a variable and test it. Answer:

var ftInToCm = function(feet, inches) {
    return (12 * feet + inches) * 2.54;
}
console.log(ftInToCm(5, 10))
// Output: 177.8

Now change the following script (Method 3 for the loop discussed previously) so that the print function is passed in to the arr.forEach method as an anonymous function:

// Original script:
var arr = ["ibm", "microsoft", "google", "oracle"];
function print(item) {
    console.log(item);
}
arr.forEach(print)

// Using an anonymous function instead of the print function:
var arr = ["ibm", "microsoft", "google", "oracle"];
arr.forEach(function(item) {
    console.log(item);
});

Arrow Notation for Anonymous Functions

A popular notation for JavaScript functions is arrow notation.
Arrow notation for functions comes from math.
Traditional math notation for defining a function:
```
f(x) = x * x
```
Math arrow notation for defining a function:
```
f: x -> x * x
```
or
```
f: x => x * x
```
The symbol -> is called a thin arrow; => is called a fat arrow.
Functions defined with arrow notation in computer languages are called lambda functions.
Some computer languages like Java use thin arrows for lambda functions, whereas most other languages, including JavaScript and C# use fat arrows for them.

As an example, use this function that converts a length in feet and inches to centimeters:

function ftInToCm(f, i) {
    return (f * 12 + i) * 2.54;
}

var ftInToCm = function(f, i) {
    return (feet * 12 + i) * 2.54;
}

Here is this same function defined in arrow notation:
```
var ftInToCm = (f, i) => (f * 12 + i) * 2.54;
```

Here is a function with zero parameters, defined in both traditional notation and arrow notation:

// Traditional notation
function printGreeting( ) {
    console.log( );
}
// Arrow notation
var printGreeting = ( ) => { console.log( ); }

// Test statement that calls printGreeting in both notations:
printGreeting( );

A function with one parameter does not need parentheses around the parameter; function with zero or more than two parameters do need parentheses for the parameters.

Here is a function with one parameter:

// Traditional notation
function makeGreeting(name) {
    return `Hello, ${name}, how are you?`;
}
// Arrow notation
var makeGreeting = name => `Hello, ${name}, how are you?`;

Anonymous functions written using arrow notation are commonly used in Node and Express applications.
For the SimpleServer Example, change the processRequest function to be an anonymous function, and also a function defined using arrow notation.

Also, the SimpleServer Example hardcodes the status code:

app.listen(200);

Instead, use the http-status-codes module like this:

const HttpStatusCodes = require("http-status-codes");
...
app.listen();
response.writeHead(HttpStatusCodes.StatusCodes.OK,
    {"Content-Type": "text/html" });

To run the code in main.js, first create a Node project and install the http-status-codes module:

Create a folder named simple-server-v2.
Open a Command Prompt or Terminal Window and navigate to that folder.

Create (initialize) a Node project and answer the questions that are posed:

> npm init
...
Press ^C at any time to quit.

package name: (simple-server-v2)
version: (1.0.0)
description: SimpleServer Example Version 2
entry point: (index.js) main.js
test command:
git repository:
keywords:
author: Stan Smith
license: (ISC)
About to write to <path_name>\package.json:
{
  "name": "simple-server-v2",
  "version": "1.0.0",
  "description": "SimpleServer Example Version 2",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Stan Smith",
  "license": "ISC"
}
Is this OK? (yes)

npm means Node Package Manager.

Install the http-status-codes module:
```
> npm i http-status-codes
```
The option i means install.
In the simple-server-v2 module, create a main.js script that contains the code from the SimpleServer Example. Modify it to add this statement at the top of the script:
```
const HttpStatusCodes = require("http-status-codes");
```
Also, modify the script to use
```
response.writeHead(HttpStatusCodes.StatusCodes.OK,
    {"Content-Type": "text/html" });
```
instead of
```
response.writeHead(200, {"Content-Type": "text/html" });
```
Run the main.js script:
```
> node main.js
```
View the browser output using the usual localhost URL with port 3000:
```
localhost:3000/
```