Two Values Meet an Operator: The Picture

Bob's first judged problem asks for the sum of two numbers. He pastes the starter, reads the two numbers, adds them and submits. The sample input is 5 2, and his program prints 52. The judge says Wrong Answer, and Bob says the judge is broken. The judge is fine. This lesson follows the engine, step by step, to the 52.

Bob's 52

Here is Bob's program. It is the fixed starter from Module 1, lesson 05, with three lines of his own where the comment was.

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

const a = next();
const b = next();
out.push(a + b);

console.log(out.join("\n"));

52

That output is for the input 5 2. The starter cuts the input into tokens, pieces of text between spaces. next() hands back the next token exactly as it was typed, so a is the string "5", not the number 5. Module 1 said it plainly: everything read from input is text until you convert it.

So a + b is "5" + "2", and + on two strings joins them. The fix is one word per line. nextInt() is Number(next()): it reads the token and converts it to a number.

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

const a = nextInt();
const b = nextInt();
out.push(a + b);

console.log(out.join("\n"));

7

So the same + gave 52 for two strings and 7 for two numbers. What an operator does depends on the types of its two values, and the rest of this lesson is the rule for each case.

What coercion is

An operator is a symbol that takes values and makes a new value: +, -, ===. The values it takes are its operands. Every operator expects operands of certain types. - subtracts numbers, so it wants two numbers.

Give - a string, and JavaScript does not stop with an error. It converts the string to a number first, then subtracts. A conversion the engine makes on its own, so that an operator can work, is called coercion (also "implicit conversion"). A conversion you write yourself, such as Number("5"), is an explicit conversion.

Watch the engine do it. The table below takes seven pairs of operands, one at a time, and shows each step the engine takes before the answer appears.

Every row is real. Run them and you get exactly these values and types.

console.log("5" + 2, typeof ("5" + 2));
console.log("5" - 2, typeof ("5" - 2));
console.log("5" * "2", typeof ("5" * "2"));
console.log(5 + true, typeof (5 + true));
console.log("a" * 1, typeof ("a" * 1));
console.log(1 == "1", 1 === "1");

52 string
3 number
10 number
6 number
NaN number
true false

So coercion is not random. It is the engine following a rule for each operator, and the rules are short.

The + rule, and the rule for the others

+ has two jobs: it adds numbers and it joins strings. Joining text is called concatenation. Because of its two jobs, + has its own rule.

• The + rule. If either operand is a string, the other one becomes a string too, and + joins them. Otherwise both become numbers, and + adds.
• The rule for the others. -, *, /, % and ** have one job each, arithmetic. They always convert both operands to numbers.

Non-strings follow the number rule. true becomes 1 and false becomes 0. null becomes 0, and undefined becomes NaN.

console.log(10 - "4");
console.log("10" / "4");
console.log("2" ** 3);
console.log(true + 1);
console.log(null + 1);
console.log(undefined + 1);
console.log("Tk " + 250);

6
2.5
8
2
1
NaN
Tk 250

Only the last line had a string beside +, so only the last line joined text. So when you see +, look for a string on either side first. If there is none, it is addition.

Each operator family has its own lesson 02 section. Here they are on one card, so you know the whole set before you meet each one.

arithmetic   a + b   a - b   a * b   a / b   a % b   a ** b
comparison   a === b   a !== b   a < b   a > b   a <= b   a >= b   (and a == b, a != b)
logical      a && b   a || b   !a   a ?? b
assignment   x = v   x += v   x -= v   x *= v   x /= v   ...

Converting on purpose: Number, String, Boolean

Coercion happens behind your back. A program you can trust converts on purpose, with three built-in converters. Each one takes a value of any type and gives back one type.

console.log(Number("42"), Number("3.5"), Number("12px"), Number(""));
console.log(String(42), String(true), String(null));
console.log(Boolean(1), Boolean(0), Boolean("hi"), Boolean(""));

42 3.5 NaN 0
42 true null
true false true false

Number(x) reads the whole string as a number, spaces at either end allowed. If any other character gets in the way, as in "12px", the answer is NaN. Note Number(""): an empty string becomes 0, not NaN. Lesson 03 shows the converters that read only the front of a string.

String(x) writes the value as text, the same text console.log prints. Boolean(x) answers one question: does this value count as true?

A value that counts as false is falsy. Every other value is truthy. The falsy list is short enough to learn by heart: six values, plus two other forms of zero.

Everything else is truthy, including some values that look empty. "0" and " " are strings with one character, so they are truthy. Lesson 03 prints the whole list, surprises included.

So Number, String and Boolean each say exactly which type you will get back. That is what makes them better than leaving it to the operator.

NaN, the number that is not a number

NaN stands for "Not a Number". It is what you get when a conversion to a number fails, or when arithmetic has no numeric answer, such as 0 / 0. Its type is still "number", because it is a special value of the number type.

NaN spreads. Any arithmetic with NaN in it gives NaN, so one bad value turns a whole sum into NaN. And it has one more odd property, which Zara found by testing it first.

const price = Number("abc");
console.log(price);
console.log(typeof price);
console.log(price === NaN);
console.log(NaN === NaN);
console.log(Number.isNaN(price));

NaN
number
false
false
true

NaN is not equal to anything, not even to itself. So x === NaN is false for every x, and it can never find a NaN. The test that works is Number.isNaN(x). So when a conversion might fail, check its result with Number.isNaN, never with ===.

=== checks the type and the value; == converts first

JavaScript has two equality operators. === is strict equality. It answers true only when both operands have the same type and the same value, and it never converts anything.

== is loose equality. When the types differ, it converts one or both operands first, as the widget showed for 1 == "1", and then compares. Its conversions follow a longer rule with some famous surprises.

console.log(7 === 7, 7 === "7");
console.log(7 == 7, 7 == "7");
console.log(0 == "", 0 === "");
console.log(null == undefined, null === undefined);

true false
true true
true false
true false

This track writes === and !== by default, and so do most teams. == has one place where it is the clearer choice, and lesson 04 shows exactly where. So compare with ===, and convert first on purpose if the types might differ.

console.log(4 + 4, typeof (4 + 4));
console.log("4" + 4, typeof ("4" + 4));
console.log("4" - 4, typeof ("4" - 4));
console.log("4" * "4", typeof ("4" * "4"));
console.log(4 / "four", typeof (4 / "four"));

8 number
44 string
0 number
16 number
NaN number

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

const PIN = 4721;
const guess = next();
out.push("as typed:  " + (guess === PIN));
out.push("converted: " + (Number(guess) === PIN));

console.log(out.join("\n"));

as typed:  false
converted: true

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

const n = nextInt();
let sum = 0;
let good = 0;
for (let i = 0; i < n; i++) {
  const reading = nextInt();
  if (!Number.isNaN(reading)) {
    sum += reading;
    good += 1;
  }
}
out.push("good readings: " + good + " of " + n);
out.push("average: " + sum / good);

console.log(out.join("\n"));

good readings: 3 of 5
average: 21.333333333333332

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

out.push(next() + next());

console.log(out.join("\n"));

52

const typed = "10";
console.log(typed === 10);
console.log(Number(typed) === 10);

false
true

const value = Number("twelve");
console.log(value === NaN);
console.log(Number.isNaN(value));

false
true

const field = "";
console.log(Number(field));
console.log(Number.isNaN(Number(field)));

0
false

console.log("3" + 4 + 5);
console.log(3 + 4 + "5");

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

Next, lesson 02 takes every operator one at a time, including the logical ones that return a value you might not expect.