📘 Lesson · Lesson 13
Type Conversion
Type Conversion
Why Conversion Matters
let input = "25"; // a STRING (as all form input is!)
console.log(input + 5); // "255" ← concatenation, NOT addition!
console.log(Number(input) + 5); // 30 ← correctType conversion means turning a value of one type into another — usually a string into a number, or vice versa. This is not an academic topic; it's one of the most practical skills in JavaScript. Here's why: every value a user types into a form arrives as a STRING, even when it looks like a number. If you try to do maths with it directly, you get bizarre results. Knowing how to convert deliberately — and how JavaScript sometimes converts behind your back — eliminates a huge class of beginner bugs.
Converting to Number
Number("25"); // 25 clean conversion
Number("25.5"); // 25.5 handles decimals
Number(""); // 0 empty string becomes 0!
Number("hello"); // NaN can't convert → Not a Number
parseInt("25px"); // 25 stops at the first non-digit
parseFloat("3.9kg"); // 3.9 keeps the decimal
parseInt("abc"); // NaNThree tools convert text to numbers.
Number() is the strict one: it converts the WHOLE string or fails with NaN. parseInt() is more forgiving — it reads digits from the start and STOPS at the first non-digit, so "25px" becomes 25 (perfect for reading CSS values). parseFloat() does the same but keeps decimals. Two quirks to remember: Number("") gives 0 (an empty string becomes zero, which can hide bugs), and anything unconvertible gives NaN. Use Number() for clean numeric input, parseInt() when there's trailing text.Converting to String
String(25); // "25"
String(true); // "true"
String(null); // "null"
(25).toString(); // "25" the method form
25 + ""; // "25" the sneaky shortcut
let price = 9.5;
price.toFixed(2); // "9.50" number → formatted stringConverting TO a string is simpler and rarely fails.
String(value) works on anything, including null and undefined. The .toString() method does the same for most values. You'll also see the shortcut value + "" — adding an empty string forces conversion, though it's a bit cryptic. And recall toFixed(2) from the numbers chapter: it turns a number into a nicely formatted string with fixed decimal places, which is exactly what you want when displaying prices.Implicit Coercion — when JavaScript converts for you
console.log("5" * 2); // 10 string → number automatically
console.log("10" / "2"); // 5 both converted
console.log("5" - 2); // 3 minus converts too
console.log(true + 1); // 2 true becomes 1
console.log("5" + 2); // "52" ← but PLUS concatenates!JavaScript often converts types automatically — this is called "implicit coercion," and it's both convenient and dangerous. With
-, *, /, and %, JavaScript sees you clearly want maths, so it converts strings to numbers for you: "5" * 2 gives 10. Booleans convert too (true becomes 1, false becomes 0). But there's one glaring exception that catches everyone: the + operator. Because + also means "join strings," it prefers concatenation whenever a string is involved.The + Operator Trap — the classic bug
let a = "5", b = 2;
console.log(a + b); // "52" ← concatenation (a string!)
console.log(a - b); // 3 ← subtraction (a number!)
// The fix: convert explicitly BEFORE the maths
console.log(Number(a) + b); // 7 ✓ correct
// Real-world: a form input is ALWAYS a string
let qty = document.getElementById("qty").value; // "3"
let total = Number(qty) * 50; // ✓ 150Everything about
+ is inconsistent with the other operators — and this single fact causes a huge share of beginner bugs. "5" - 2 is 3 (a number), but "5" + 2 is "52" (a string). Why? Because + has a second job: joining strings. When either side is a string, it concatenates rather than adds. The permanent fix: always convert form input explicitly with Number() before doing maths. Make this a reflex — whenever a value comes from a form, an input, or a URL, wrap it in Number(). That habit will save you hours of confusion when you reach the DOM chapters.Exam Corner
Q: What type does form input always arrive as? A string — even if it looks like a number.
Q: Difference between Number() and parseInt()? Number() converts the whole string or gives NaN; parseInt() reads digits until a non-digit and stops.
Q: What is "5" + 2 and why? "52" — the + operator concatenates when a string is involved.
Q: What is "5" - 2? 3 — minus has no string meaning, so JavaScript converts to numbers.
Q: How do you correctly add a form value to a number? Convert first:
Q: Difference between Number() and parseInt()? Number() converts the whole string or gives NaN; parseInt() reads digits until a non-digit and stops.
Q: What is "5" + 2 and why? "52" — the + operator concatenates when a string is involved.
Q: What is "5" - 2? 3 — minus has no string meaning, so JavaScript converts to numbers.
Q: How do you correctly add a form value to a number? Convert first:
Number(input) + 5.
Conversion क्यों ज़रूरी
let input = "25"; // STRING (jaisa saara form input hota hai!)
console.log(input + 5); // "255" ← concatenation, JOD NAHI!
console.log(Number(input) + 5); // 30 ← sahiType conversion मतलब एक type की value को दूसरे में बदलना — आमतौर पर string को number में, या उल्टा. यह academic विषय नहीं; यह JavaScript के सबसे व्यावहारिक skills में से एक है. क्यों: user form में जो भी value type करे वह STRING के रूप में आती है, भले ही number जैसी दिखे. अगर आप सीधे उससे गणित करें, अजीब नतीजे मिलते हैं. जानबूझकर बदलना जानना — और JavaScript कभी-कभी आपकी पीठ पीछे कैसे बदलता है — beginner bugs की बड़ी श्रेणी मिटा देता है.
Number में बदलना
Number("25"); // 25 saaf conversion
Number("25.5"); // 25.5 decimals sambhalta
Number(""); // 0 khali string 0 ban jati hai!
Number("hello"); // NaN badal nahi sakta → Not a Number
parseInt("25px"); // 25 pehle non-digit par rukta
parseFloat("3.9kg"); // 3.9 decimal rakhta
parseInt("abc"); // NaNतीन tools text को numbers में बदलते हैं.
Number() सख्त वाला है: यह POORI string बदलता है या NaN के साथ fail होता है. parseInt() ज़्यादा उदार — यह शुरू से digits पढ़ता है और पहले non-digit पर RUK जाता है, तो "25px" 25 बनता है (CSS values पढ़ने को perfect). parseFloat() वही करता है पर decimals रखता है. दो quirks याद रखिए: Number("") 0 देता है (खाली string शून्य बनती है, जो bugs छुपा सकता है), और जो कुछ बदला न जा सके NaN देता है. साफ numeric input के लिए Number(), पीछे text हो तो parseInt() use कीजिए.String में बदलना
String(25); // "25"
String(true); // "true"
String(null); // "null"
(25).toString(); // "25" method roop
25 + ""; // "25" chalak shortcut
let price = 9.5;
price.toFixed(2); // "9.50" number → formatted stringString में बदलना सरल है और शायद ही fail होता है.
String(value) हर चीज़ पर चलता है, null और undefined पर भी. .toString() method ज़्यादातर values के लिए वही करता है. आप shortcut value + "" भी देखेंगे — खाली string जोड़ना conversion मजबूर करता है, हालांकि थोड़ा रहस्यमय है. और numbers chapter से toFixed(2) याद कीजिए: यह number को fixed decimal places वाली सुंदर formatted string में बदलता है, जो prices दिखाते समय ठीक वही है जो आप चाहते हैं.Implicit Coercion — जब JavaScript खुद बदलता है
console.log("5" * 2); // 10 string → number apne aap
console.log("10" / "2"); // 5 dono badle
console.log("5" - 2); // 3 minus bhi badalta
console.log(true + 1); // 2 true 1 ban jata hai
console.log("5" + 2); // "52" ← par PLUS concatenate karta!JavaScript अक्सर types अपने आप बदलता है — इसे "implicit coercion" कहते हैं, और यह सुविधाजनक तथा खतरनाक दोनों है.
-, *, /, और % के साथ, JavaScript देखता है आप साफ तौर पर गणित चाहते हैं, तो वह strings को numbers में बदल देता है: "5" * 2 10 देता है. Booleans भी बदलते हैं (true 1 बनता है, false 0). पर एक स्पष्ट अपवाद है जो सबको फंसाता है: + operator. क्योंकि + का मतलब "strings जोड़ना" भी है, जब भी string शामिल हो यह concatenation पसंद करता है.+ Operator का जाल — classic bug
let a = "5", b = 2;
console.log(a + b); // "52" ← concatenation (string!)
console.log(a - b); // 3 ← subtraction (number!)
// Hal: ganit se PEHLE saaf-saaf badlo
console.log(Number(a) + b); // 7 ✓ sahi
// Asli duniya: form input HAMESHA string hai
let qty = document.getElementById("qty").value; // "3"
let total = Number(qty) * 50; // ✓ 150+ के बारे में सब कुछ बाकी operators से असंगत है — और यह एक तथ्य beginner bugs का बड़ा हिस्सा पैदा करता है. "5" - 2 3 है (number), पर "5" + 2 "52" है (string). क्यों? क्योंकि + का दूसरा काम है: strings जोड़ना. जब कोई भी पक्ष string हो, यह जोड़ने के बजाय concatenate करता है. स्थायी हल: गणित करने से पहले form input को हमेशा Number() से साफ-साफ बदलिए. इसे reflex बनाइए — जब भी कोई value form, input, या URL से आए, उसे Number() में लपेटिए. वह आदत DOM chapters पर पहुंचते समय आपके घंटों की उलझन बचाएगी.Exam Corner
Q: Form input हमेशा किस type के रूप में आता है? String — भले ही number जैसा दिखे.
Q: Number() और parseInt() में अंतर? Number() पूरी string बदलता है या NaN देता; parseInt() non-digit तक digits पढ़कर रुकता है.
Q: "5" + 2 क्या है और क्यों? "52" — string शामिल होने पर + operator concatenate करता है.
Q: "5" - 2 क्या है? 3 — minus का कोई string अर्थ नहीं, तो JavaScript numbers में बदलता है.
Q: Form value को number में सही तरीके से कैसे जोड़ते हैं? पहले बदलिए:
Q: Number() और parseInt() में अंतर? Number() पूरी string बदलता है या NaN देता; parseInt() non-digit तक digits पढ़कर रुकता है.
Q: "5" + 2 क्या है और क्यों? "52" — string शामिल होने पर + operator concatenate करता है.
Q: "5" - 2 क्या है? 3 — minus का कोई string अर्थ नहीं, तो JavaScript numbers में बदलता है.
Q: Form value को number में सही तरीके से कैसे जोड़ते हैं? पहले बदलिए:
Number(input) + 5.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.