JavaScript · Lesson 09 / 32 · English

Type Conversion

Understand the idea. Change the code. Build confidence with one focused experiment.

Detailed notesRunnable JavaScriptPractice + answer

01 / Understand

Start with the idea

Form values often arrive as strings. Convert deliberately before doing arithmetic, and check whether the conversion produced a valid number.

Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.

02 / Explore

Step-by-step lesson notes

Type Conversion in JavaScript

JavaScript can convert values from one type to another. This happens either explicitly (you do it intentionally) or implicitly (JavaScript does it automatically — called type coercion).

Explicit Conversion

JavaScript reference fragmentCODE

// To Number
Number("42");        // 42
Number("3.14");      // 3.14
Number("");          // 0
Number(" ");         // 0
Number("hello");     // NaN
Number(true);        // 1
Number(false);       // 0
Number(null);        // 0
Number(undefined);   // NaN

parseInt("42px");    // 42  — stops at first non-digit
parseFloat("3.14em"); // 3.14
parseInt("0xFF", 16); // 255 — parse hex

// To String
String(42);          // "42"
String(true);        // "true"
String(null);        // "null"
String(undefined);   // "undefined"
(255).toString(16);  // "ff" (hex)
(255).toString(2);   // "11111111" (binary)

// To Boolean
Boolean(1);          // true
Boolean(0);          // false
Boolean("hi");       // true
Boolean("");         // false

Implicit Coercion (Automatic)

JavaScript reference fragmentCODE

// String + anything = string concatenation
"5" + 3;       // "53"  ← number coerced to string
"5" + true;    // "5true"
"" + null;     // "null"

// Arithmetic operators (other than +) coerce to number
"5" - 3;       // 2    ← string coerced to number
"5" * "2";     // 10
"10" / "2";    // 5
true + true;   // 2    ← booleans coerced to 1

// Comparison coercion
"5" == 5;      // true  ← == does coercion
"5" === 5;     // false ← === does NOT coerce
null == undefined; // true (special case)
null === undefined; // false

Expression	Result	Why
`"2" + 2`	`"22"`	String + number → concatenation
`"2" - 2`	`0`	Subtraction coerces to number
`true + 1`	`2`	true coerces to 1
`false + 1`	`1`	false coerces to 0
`null + 1`	`1`	null coerces to 0
`undefined + 1`	`NaN`	undefined coerces to NaN
`[] + []`	`""`	Both coerce to empty string
`[] + {}`	`"[object Object]"`	[] → "", {} → string

Rule: Prefer explicit conversion over relying on coercion. Use === instead of == to avoid surprise type coercion in comparisons.

03 / Read & predict

A complete example

Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.

index.js · complete exampleCODE

const input = "25";
const count = Number(input);
console.log(count + 5);
console.log(Number.isNaN(Number("hello")));

Predict first. Reveal the expected result.

30
true

04 / Experiment

Make one change. See what happens.

Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.

Open editor ↗

Wait for the editor to load, then load this example and press Run.

Powered by the free OneCompiler editor. Code you run is sent to that external service. Keep personal data and secret keys out of your examples.

05 / Your turn

Put the idea to work

Practice challenge

Replace input with "8". Compare Number(input) + 5 with input + 5.

Reveal the answer and reasoning

The numeric expression is 13; string concatenation produces "85".

One mistake to avoid: Number("") is 0, so a successful numeric conversion alone does not prove that a required field was filled in.

Your learning checkpoint

Explain the example in your own words.
Complete the challenge before revealing its answer.
Describe the common mistake and how to avoid it.