IT 238 -- Apr 28, 2025 Notes

IT 238 -- Apr 28, 2025

Review Exercises

Rewrite this traditional for loop as a modern for loop:

var output = "";
for(var i = 0; i < kidsArray.length; i++) {
    if (kidsArray[i].age < 12) {
        output += kidsArray[i].name + "\n";
    }
}

Answer:

var output = "";
for(var kid of kidsArray) {
    if (kid.age < 12) {
        output += kid.name + "\n";
    }
}

We saw earlier that the following lines round the value of n to two digits after the decimal point:
```
var n = 34.83728;
var nRounded = Math.round(n * 100) / 100;
```
Verify that the following line also rounds n to two digits after the decimal point:
```
var nRounded = n.toFixed(2);
// Answer: 34.84
```
We know how to attach a click event listener f to a button object btn1:
```
btn1.addEventListener("click", f);
```
Show how to use the onclick property to add the event listener f to the button object btn1. Answer:
```
btn1.onclick = f;
```
Do the same thing for a load event listener.
Answer:
```
window.addEventListener("load", init);
can also be written as
window.onload = init;
```

Functions as First Class Objects

In JavaScript, functions are first class objects.
This means that functions can be assigned to variables, passed as arguments to other functions, and even printed.

Try out this script:

// FirstClass Example

function s(n) {
    return n * n;
}

function c(n) {
    return n * n * n;
}

function evaluate(f) {
    return f(3);
}

document.writeln(s(5) + " ");
document.writeln(c(2) + " ");
g = s;
document.writeln(g(2) + "<br>");
document.writeln(evaluate(s) + 
    " " + evaluate(c) + "<br>");
document.writeln(s + "<br>");
document.writeln(c + "<br>");

// Answer: the output is
25 8
4 
9 27
function s(n) { return n * n; }
function c(n) { return n * n * n; }

Anonymous Functions

A function created without a name is an anonymous function, for example:
```
function(n) {
    return n * n;
}
```
An anonymous function is useless unless is assigned to a variable or passed in as an argument to another method. Try this script:
```
// Anonymous Example
var c = function(n) {
    return n * n * n;
}
document.writeln(c(5));
```

Arrow Notation for Functions

Modern JavaScript provides an alternative arrow notation for methods.
Arrow notation comes from math. Traditionally, a math function is defined like this: f(x) = x². In arrow notation, this function is defined as f : x → x².
In JavaScript, the method
```
function square(x) {
    return x * x;
}
```
can be defined as an anonymous method in arrow notation like this:
```
var square = (x) => x * x;
```
If the method has exactly one parameter, the parentheses can be omitted:
```
var square = x => x * x;
```
JavaScript uses the fat arrow ( => ) to define functions in arrow notation. Some other languages, including Java, use the thin arrow ( -> ) instead.

Practice Problems: Write these four functions in arrow notation and test them:

function square(n) {
    return n ** 2;
}
// Answer:
// Parentheses are not needed for argument list
// when there is only one argument.
var square = n => n ** 2;
var value = 5;
document.writeln(square(value));
// Output: 25

function add(n, m) {
    return n + m
}
// Answer:
var add = (n, m) => n + m;
document.writeln(add(5, 7));
// Output: 12

function sayHello( ) {
    alert("Hello!");
}
// Answer
var sayHello = ( ) => alert("Hello!");
sayHello( );
// Output: Hello!

 function sayHello(name) {
    alert(`Hello, ${name}!`;
}
// Answer:
var sayHello = name => alert(`Hello, ${name}!`);
var name = prompt("Enter a name.");
sayHello(name);
// Input: Billy
// Output: Hello, Billy.

function showStars( ) {
    return "**********";
}
// Answer:
var showStars = ( ) => "**********";
document.writeln(showStars( ));
// Output: **********

function triangleArea(base, height) {
    return base * height / 2.0;
}
// Answer:
var triangleArea = base, height) => base * height / 2.0;
document.writeln(triangleArea(3, 4));
// Output: 6

function greeter(name) {
    document.writeln(`Hello, ${name}, how are you?`);
}
// Answer:
var greeter = name => {
    document.writeln(`Hello, ${name}, how are you?`);
}
greeter("Alice");
// Output: Hello, Alice, how are you?

function init( ) {
    alert("Hello!");
}

// Answer: the body of a function with no return
// value must be enclosed in curly braces.
var init = ( ) => {
    alert("Hello!");
}
// Test it like this:
window.addEventListener("click", init)
// or, shorter
window.addEventListener("click", ( ) => alert("Hello!"));

Math Class Methods

Look up five of these Math class methods on the W3Schools site and test them:
```
abs  cbrt  ceil  cos  floor  max  min
random  round  sin  sqrt  trunc
```

Use Strict

Some JavaScript programmers use the following statement at the beginning of each function:
```
'use strict';
```
This statement causes the JavaScript interpreter to issue error and warning messages that will
- eliminate silent errors by throwing error messages instead,
- improve security and performance,
- warn about deprecated code.
In particular, 'use strict'; does not allow the declaration of unqualified global variables. Instead, declare them as properties of the window object.
Some programmers call code "sloppy code" that does not include 'use strict';
W3Schools reference that gives more details about strict mode:
https://www.w3schools.com/js/js_strict.asp