Loading...

JavaScript Type Conversion

You can name empties with null and undefined. Next skill: change a value’s kind on purpose — turn a number into text for a label, or text into a number for math. That is type conversion. This session sticks to clear helpers: String(), Number(), and Boolean() — plus one common + surprise.

What is type conversion in JavaScript?

Type conversion means turning a value from one kind into another. Prefer explicit helpers so the intent is obvious: String(42) makes "42", Number("7") makes 7, Boolean(0) makes false. If Number cannot parse the text, you get NaN. With +, a number next to a string often concatenates instead of adding — log it once so it sticks.

Conversion toolkit

📊 Type conversion for beginners

Helper / idea Example Result / note
String(...) String(42) "42" (text)
Number(...) Number("7") 7 (number)
Boolean(...) Boolean(0) false (preview of falsy)
Bad number text Number("hello") NaN — still typeof "number"
Empty → boolean Boolean("") false
+ mix 5 + "2" "52" (concat, not 7)

String() — make text

Wrap a value in String(...) when you need a label or message. Numbers, booleans, null, and undefined all become strings you can join or show.

String() conversions

javascript 
console.log(String(42));
console.log(String(true));
console.log(String(null));
console.log(String(undefined));
console.log(typeof String(42));

Number() — make a number

Use Number(...) when text should become math-ready. Digit strings convert cleanly. Non-numeric text becomes NaN.

Number() conversions

javascript 
console.log(Number("7"));
console.log(Number("3.5"));
console.log(Number(true));
console.log(Number(false));
console.log(typeof Number("7"));

When Number fails — NaN

Number("hello") is NaN (“Not a Number”). Odd detail from the numbers session: typeof NaN is still "number". Treat NaN as a failed conversion, not a usable count.

Number trap becomes NaN

javascript 
console.log(Number("hello"));
console.log(typeof Number("hello"));
console.log(Number(""));
console.log(Number(null));

Number("") and Number(null) become 0 — another beginner trap. Prefer clear digit strings when you mean a real amount.

Boolean() — yes/no from a value

Boolean(...) turns a value into true or false. Empties like 0, "", null, undefined, and NaN become false. Non-empty strings and most numbers become true. Full truthy / falsy lists come next session — here you only need the helper.

Boolean() conversions

javascript 
console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean("hi"));
console.log(Boolean(""));
console.log(Boolean(null));

The + surprise — concat vs add

If one side of + is a string, JavaScript often joins text instead of adding numbers. Convert first with Number() when you mean math.

plus can concatenate

javascript 
console.log(5 + 2);
console.log(5 + "2");
console.log(Number("5") + Number("2"));
console.log("Score: " + 10);

Show conversions on the page

Convert a few values, then write short labels with textContent.

Page labels after conversion

html 
<!DOCTYPE html>
<html>
<head>
<title>Type conversion — labels</title>
</head>
<body>
<p id="out">…</p>
<script>
let raw = "12";
let asNumber = Number(raw);
let asText = String(asNumber);
let flag = Boolean(asNumber);
document.getElementById("out").textContent =
"raw=" + raw +
" | number=" + asNumber +
" | text=" + asText +
" | flag=" + flag;
</script>
</body>
</html>

The paragraph shows the same idea in three kinds. Change raw to "0", refresh, and watch flag become false while the number is still 0.

Try it yourself

  1. Log String(99), String(false), and typeof String(99).
  2. Log Number("8") and Number("8") + 2 — expect math, not "82".
  3. Log Number("oops") and typeof of that result (NaN, still "number").
  4. Log Boolean("") and Boolean("ok").
  5. Log 3 + "4" then rewrite with Number("3") + Number("4").
  6. In the HTML demo, set raw to "0", refresh, and read the new flag.

Common mistakes

  • Assuming + always adds — a string on either side can concatenate
  • Ignoring NaN after Number("hello") and using it in math anyway
  • Thinking this session replaces truthy / falsy — Boolean() is only a preview
  • Expecting String(null) to be "" — it is the text "null"
  • Forgetting to check typeof after a conversion when results look odd

Summary

  • Type conversion: change a value’s kind on purpose
  • Prefer String(), Number(), Boolean() for clear intent
  • Bad numeric text → NaN; typeof NaN is still "number"
  • + with a string often concatenates — convert before you add
  • Next: truthy and falsy — which values act like true or false in conditions

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 14 of 16
Javascript Tutorial