2.2. Value Types, and User Interaction

Conventional teaching teaches you stuff like:

'use strict';
console.log('hello, world');

when executeds, it results in

hello, world

This program works! It is a good program. It can, however, only do one thing, write precisely hello, world . If your name is Jane, you might like the computer to say:

hello, Jane

Better, yes, but what if you are not Jane?

In order to vary program circumstances thus making tests more versatile, it is useful to be able to get user input and to make that input available to the code. Let us change the above program to:

'use strict';
let whoeverIsLoggedIn = window.prompt('Enter first name');
console.log('hello, ' + whoeverIsLoggedIn);

with this exemplary execution:

First
Figure 2.1. Prompting User for Input
Prompting User for Input

then
hello, Niels

A few comments:

'use strict'
A so called processing option requesting the JavaScript interpreter to be strict, ie helpful in order to help you write better code.
let
keyword for declaring variables. Alternatives: var, and const
whoeverIsLoggedIn
A variable expression. A variable .
=
The assignment operator. Will take the value of the right hand side and assign it as a value to the variable expression on the left.
prompt
A JavaScript built in function that will print whatever arguments it receives, and subsequently wait for user input finished with 'enter'.
'Enter first name'
A text, string, argument. A literal value expression.
console
A JavaScript object describing the interface for communication between user and program.
log
A function of the console object. The program writes on the log to tell the user something.
'hello, ' + whoeverIsLoggedIn
The variable expression given to the log function to print. It contains the literal expression 'hello, 'concatenated to the value the user entered when prompted for a first name. The + is here used as concatenation operator, not as an addition operator.

The program is now much better. It greets whoever the user claims she is, not just world. This is the programmers way of securing that her program works with more values than one, ie it allows proper testing. On a proper web page we have more sophisticated ways of letting the users interact with our code. Later in the course we shall let JavaScript get values from HTML5 forms.

2.2.1. Numbers, with a Twist

Now let us do something similar to the above, but this time with numbers. Let us write a program that adds two numbers:

'use strict';
let a = 40;
let b = 2;
console.log('The sum is ' + (a + b));       // 42

It works. But, sorry, we want improvement for better test:

'use strict';
let a = prompt('Enter first addend');
let b = prompt('Enter second addend');
console.log('The sum is ' + (a + b));

Better? Yes, more versatile, but something went wrong. it uses concatenation? Concatenation is usually for strings, not for numbers. So we must let JavaScript know that we are processing numbers:

'use strict';
let a = Number(prompt('Enter first addend'));
let b = Number(prompt('Enter second addend'));
console.log('The sum is ' + (a + b));

We must remember that user input is almost always in the form of text, so that JavaScript must be notified in order to treat it as numbers, if that is what it is.

The Number function used above caters to integer values, eg 42, floating point numbers, eg 3.141, or 273.15, or numbers in scientific notation, eg 1.496e8, or 5e-9.

2.2.2. Strings

We have already shown strings in actions. There are now three ways of defining string. Look at these literal string values:

"This is a string (delimited by double quotes)"
'and this is also a string (delimited by single quotes)'
`and, by golly, so is this (delimited by so called backtics)`

The difference between the three is subtle. Normally strings can not span lines, ie they cannot be multiline. Exception, if you use backtics. You may, however, insert a so called newline character into you string to make it spread over several lines.

Example 2.1. String with Quotes
var s = "this quote\nrespects the way it\nhas been typed over\none long line, with manual line breaks, pretty much like <br/>";
console.log(s);

and

Example 2.2. String with Backtics
var s = `this quote
respects the way it
has been typed over
several lines, pretty much
as the html tag <pre>`;
console.log(s);

To be complete, let us try

Example 2.3. String with Apostrophes
var s = 'this quote\nrespects the way it\nhas been typed over\none long line, with manual line breaks, pretty much like <br/>';
console.log(s);

Another benefit of the backtics, it respects variables as in, this modified example from before:

'use strict';
let a = Number(prompt('Enter first addend'));
let b = Number(prompt('Enter second addend'));
console.log(`First addend: ${a}`);
console.log(`Second addend: ${b}`);
console.log(`The sum is ${a + b}`);

2.2.3. Arithmetic Operators

Operators are the characters we use to instruct the language to do arithmetic operations on numbers. There are operators to invoke string or logival operations too, but let me concentrate on the numbers for the time being. In

'use strict';
let x = 40;     // = is the operator
x = x + 1;      // = and + are operators
x++;            // ++ is an operator
console.log(x); // ?

the operators =, and + are binary because the require two operands. The ++ , increment operator is a unary operator. It works on one operand. Now look at

'use strict';
let x = 40;     // same as above
let y = -1;     // here - is unary
x = x - y;      // here - is binary
console.log(x); // ?

The behaviour of the arithmetic operators is predictable. It corresponds to regular arithmetic behaviour.

'use strict';
let a = 2;
a**10;          // 210
console.log(a); // ?

Now watch carefully

Example 2.4. Divide and Multiply 1
'use strict';
let a = 4;
a = a / 4;      // divide
console.log(a); // ?

a = 3;
a = a * 27;     // multiply
console.log(a); // ?

Did you notice the behaviour? Let me ever so slightly rephrase this experiment:

Example 2.5. Shortcut Notation Operands
'use strict';
let a = 4;
a /= 4;      // divide
console.log(a); // ?

a = 3;
a *= 27;     // multiply
console.log(a); // ?

The shortcut notations we saw in Example 2.5 are equivalent to the longhand of Example 2.4.

Operators have a precedence order. A atatement being executed left to right on the right hand side of the = is the convention in code, but there is a catch

'use strict';
let p = 5 + 4 / 2;
console.log(p);     // ?

or

'use strict';
let p = (5 + 4) / 2;
console.log(p);     // ?

'use strict';
let p = 5 + 4 / 2 ** 2;
console.log(p);     // ?

The precedence order is?

Example 2.6. Modulo
'use strict';
let cpr = 2511450007;
console.log(cpr % 2);   // ?

cpr = 702900008;
console.log(cpr % 2);   // ?

2.2.4. Booleans and Logical Operators

A boolean is a variable that takes one of only two possible values, true, or false.

As we shall abundantly see later, there is much logics in programming, and talking about true, and false we can easily see these values as answers to simple questions, such as: Is 3 larger than 4?, or is 'Beatrice' less than 'Charlotte'?. Less than in strings means lexically before. Sometimes the questions are harder because they have two, or more constituents, such as does it rain and is it friday, or is it friday or is it the eve of a holiday.

Symbol Name Degree Remarks
< Less Than Binary Numeric or lexical. Normal coercion
<= Less Than or Equal Binary do
> Greater Than Binary do
>= Greather Than or Equal Binary do
== Equals Binary Compares values
=== Identical Binary Compares values and types
! Not Unary Negates its operand
!= Not equal Binary Compares values
!== Not identical Binary Compares values and types
&& And Binary Requires both to be true
|| Not identical Binary Requires one to be true

Now, let us look at the two simple ones:

'use strict';
console.log(3 > 4);          // false
// or
let num1 = 3;
let num2 = 4;
console.log(num1 > num2);    // false

and

'use strict';
console.log('Beatrice' < 'Charlotte');   // true
// or
let name1 = 'Beatrice';
let name2 = 'Charlotte';
console.log(name1 < name2)               // true

In the two compund questions, let us assume that the individual questions have been answered and their values assigned to meaningfully named variables.

'use strict';
let rains = true;
let friday = false;
console.log(rains && friday);           // false

and

'use strict';
let isItFriday = true;
let isItEveOfHoliday = false;
console.log(isItFriday || isItEveofHoliday);    // true

Truth Tables

Sometimes in programming it makes more sense, instead of asking whether something is true, to ask whether the opposite is false. We have a logical operator for just that. An example will illustrate:

'use strict';
let rains = true;
                        // ask whether it rains
console.log(rains);     //true

                        // ask for the logical opposite
console.log(!rains);    // false
                        // !rains pronounced as 'not rains'

let rains = false;      // change the value of rains
                        // ask whether it is dry
console.log(!rains);    // true

In logics we frequently use the letter 'T' for true, and the letter 'F' for false. As is clear from the example we use some variable eg var1 to hold a truth value, !var1, not var1 has the opposite value. Not var1 is sometimes also called the negation of var1.

If var1 has the value T !var1 has the value F.

If var1 has the value F !var1 has the value T.

We could formulate this as a truth table for negation:

Table 2.2. Truth Table for Negation
Truth Table Negation
var1 !var1
T F
F T

Example 2.7. Code for Printing Truth Table for Negation
'use strict';
console.log('Truth table for negation');
console.log('var1\t!var1');
let var1 = true;
console.log(var1 + '\t' + !var1);
let var1 = false;
console.log(var1 + '\t' + !var1);

Obviously a simple condition is evaluated as either true or false. Thus truth tables are not in place here. The compound questions are a bit more complicated, and we need truth tables to visualize them. First the questions connected with an 'and', which are called conjunctions, in programming most often we use an && operator. To be true, a conjunction requires both parts to be true, otherwise it is false:

Table 2.3. Truth Table for Conjunction
Truth Table Conjunction
var1 var2 var1 && var2
T T T
T F F
F T F
F F F

Are the parts of a compund question connected with an 'or', a disjunction, where we use the || operator. A disjunction is true if one of its parts is true. It is only false if all its parts are false.

Table 2.4. Truth Table for Disjunction
Truth Table Disjunction
var1 var2 var1 || var2
T T T
T F T
F T T
F F F

null and undefined

The following bit of code defines a string, str, assigning it 'sky' as a value. Then, while printing, it searches for vowels in that string. It does not find any, and returns the answer null, a special value meaning no value.

'use strict';
let str = 'sky';
console.log(str.match(/[aeiou]/gi));

In this case null is useful, because we can check whether we got a value and therefore let our program behave accordingly.

JavaScript has another special value, undefined. Check this

'use strict';
let foo;
console.log('foo is ' + foo);

Undefined does not mean that the variable is not defined. It means that the variable exists but has not yet been assigned a value. Is that not logically the same as null? Well that could be argued, and many think that the existence of both null, and undefined is an error in JavaScript. We shall not use more time on it here, but return to it whenever relevant.