IT 238 -- Apr 22, 2026

Review Exercises

Give some examples of composite datatypes.
Answer: (a) array, (b) function, (c) any user defined object literal. The typeof operator returns object for a and c. It returns function as the datatype of for any function or method. Here is JS code to test this:

// Create an array a
var a = [4, 7, 3, 5];
// Define the function s
function s(n) {
    return n ** 2;
}
// Define object literal:
var kid = { name: "Alice", age: 11 };

// Check that typeof gives object for arrays and
// object literals.  It gives function as the datatype
// of a function 
document.writeln(typeof a);
document.writeln(typeof b);
document.writeln(typeof kid);
// Output: object function object

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 n = 34.83728;
var nRounded = n.toFixed(2);
```
Answer: both methods of rounding give the 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;

Here is the complete source code:

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Button</title>
        <script>
        function f( ) {
            var output = document.getElementById("para1");
            output.innerHTML = "Button test succeeded.";
        }
        function init( ) {
            var btn1 = document.getElementById("button1");
            // btn1.addEventListener("click", f);
            // or
            btn1.onclick = f;
        }
        // window.addEventListener("load", init);
        // or
        window.onload = init;
        </script>
    </head>
    <body>
        <h1>Test Button</h1>
        <button id="button1">Click Me to Test Button</button>
        <p id="para1" />
    </body>
</html>

Look at the solution of Review Exercise 14 from the April 20 Notes.

var vs. let

We are familiar with using the keyword var to declare and initialize variables:
```
var count = 0;
```
Another keyword that can be used to initialize variables is let:
```
let count = 0;
```
What is the difference between var and let?
Answer:
var has function scope -- variables defined with var exist in the function where they were defined.
let has block scope, where a block is delimited by curly braces { }: variables defined with let are only valid in the block where they were defined.
Software engineers recommend that the scope of a variable be as small as possible. Since the scope of variables define with let is smaller than the scope of variables defined with var, many JavaScript programmers use let whenever possible.

For example: what is the output of each of these for loops?

// for loop 1
function testScope( ) {
    for(var i = 1; i <= 5; i++) {
    }
    return i;
}
document.writeln(testScope( ));
// Output of for loop 1
6

// for loop 2
function testScope( ) {
    for(let i = 1; i <= 5; i++) {
    }
    return i;
}
document.writeln(testScope( ));
// Output of for loop 2
No output. The i in the return statement is not valid
because it is outside of the loop where it is defined.

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?