Lesson 1: Global Functions and Type Conversion

Global functions are available everywhere without importing anything. Most of them convert values from one type to another, which JavaScript does a lot, sometimes automatically.

Turning text into numbers

parseInt(text, base)

Reads a whole number from the start of text and ignores what follows. Always pass the base (10) to be safe.

console.log(parseInt("42px", 10));
console.log(parseInt("3.99", 10));
console.log(parseInt("ff", 16));
console.log(parseInt("abc", 10));

Output:

42
3
255
NaN

parseFloat(text)

Reads a decimal number from the start of text.

console.log(parseFloat("3.14abc"));
console.log(parseFloat(".5"));
console.log(parseFloat("x1"));

Output:

3.14
0.5
NaN

Number(value)

Converts the whole value, so it is stricter than parseInt. Anything that is not a clean number becomes NaN.

console.log(Number("42"));
console.log(Number("42px"));
console.log(Number(""));
console.log(Number(true), Number(null), Number(undefined));
console.log(+"7" + 1);

Output:

42
NaN
0
1 0 NaN
8

Checking numbers

Number.isNaN(x) and Number.isFinite(x)

NaN (not a number) is the only value not equal to itself, so use these functions to test it.

console.log(NaN === NaN);
console.log(Number.isNaN(NaN), Number.isNaN("abc"));
console.log(isNaN("abc"));
console.log(Number.isFinite(10), Number.isFinite(Infinity));

Output:

false
true false
true
true false

Number.isInteger(x), Number.isSafeInteger(x)

Whole-number checks.

console.log(Number.isInteger(5), Number.isInteger(5.5));
console.log(Number.isSafeInteger(2 ** 53));
console.log(Number.MAX_SAFE_INTEGER);

Output:

true false
false
9007199254740991

Use the Number. versions (Number.isNaN, Number.isFinite). The old global isNaN("abc") converts first, which gives surprising answers.

Turning values into text

String(value) and value.toString()

Convert anything to text. toString fails on null and undefined; String() does not.

console.log(String(123) + "!");
console.log(String(null), String(undefined), String(true));
console.log((255).toString(16), (255).toString(2));
console.log(String([1, 2]), String({}));

Output:

123!
null undefined true
ff 11111111
1,2 [object Object]

toFixed(n), toPrecision(n)

Format a number with a fixed number of decimals (returns text).

console.log((3.14159).toFixed(2));
console.log((2.5).toFixed(0), (1.005).toFixed(2));
console.log((123.456).toPrecision(4));
console.log(Number((0.1 + 0.2).toFixed(2)));

Output:

3.14
3 1.00
123.5
0.3

toLocaleString()

Format numbers for people, with thousands separators and currency.

const n = 1234567.891;
console.log(n.toLocaleString("en-US"));
console.log(n.toLocaleString("en-US", { style: "currency", currency: "USD" }));
console.log((0.256).toLocaleString("en-US", { style: "percent" }));

Output:

1,234,567.891
$1,234,567.89
26%

Booleans and types

Boolean(value) and the double bang !!

Truthy or falsy? The falsy values are false, 0, "", null, undefined, NaN; everything else is truthy.

console.log(Boolean(0), Boolean("0"), Boolean([]), Boolean({}));
console.log(!!"hello", !!"");

Output:

false true true true
true false

typeof, Array.isArray, instanceof

What kind of value is it? Note typeof null is a famous quirk.

console.log(typeof 5, typeof "a", typeof true, typeof undefined);
console.log(typeof null, typeof [], typeof {}, typeof (() => 1));
console.log(Array.isArray([]), Array.isArray({}));
console.log([] instanceof Array, new Date() instanceof Date);

Output:

number string boolean undefined
object object object function
true false
true true

Surprising conversions

console.log("5" + 3);      // text wins with +
console.log("5" - 3);      // - converts to numbers
console.log("5" * "2");
console.log(true + 1);
console.log([] + []);
console.log(1 < 2 < 3, 3 > 2 > 1);
console.log(0 == "", 0 === "");
console.log(null == undefined, null === undefined);

Output:

53
2
10
2

true false
true false
true false

Use === and !== (no conversion) and convert deliberately with Number(), String() and Boolean().

Encoding for the web

encodeURIComponent and decodeURIComponent

Make text safe inside a URL, and undo it.

const q = "नेपाल & जॉब";
const safe = encodeURIComponent(q);
console.log(safe);
console.log(decodeURIComponent(safe));

Output:

%E0%A4%A8%E0%A5%87%E0%A4%AA%E0%A4%BE%E0%A4%B2%20%26%20%E0%A4%9C%E0%A5%89%E0%A4%AC
नेपाल & जॉब

structuredClone(value)

A true deep copy of objects, arrays, dates, maps and sets.

const a = { n: 1, list: [1, 2], d: new Date(0) };
const b = structuredClone(a);
b.list.push(3);
console.log(a.list, b.list);

Output:

[ 1, 2 ] [ 1, 2, 3 ]

Try it yourself

1. Convert the text "12.50" to a number and add 7.5.
2. Write a function that returns true only for real numbers (not NaN, not text).
3. Predict then check: [10, 9, 1].sort() (the next lessons explain it).

Next lesson: Number and Math.