Type Conversion in JavaScript

JavaScript is a dynamically typed language — a variable's data type is determined at runtime, not at declaration. This means JavaScript will often perform type conversion, both automatically (implicit) and manually (explicit). Understanding type conversion is very important for avoiding hard-to-detect bugs, especially when processing input from campus forms.

Implicit vs Explicit Conversion

Implicit Conversion (Type Coercion)

JavaScript automatically converts data types when mixed-type operations are performed.

// String + Number → String (concatenation)
const result1 = "Student " + 5;
console.log(result1); // "Student 5"

// Number + Number → Number
const result2 = 10 + 20;
console.log(result2); // 30

// String - Number → Number
const result3 = "100" - 10;
console.log(result3); // 90

// String * Number → Number
const result4 = "5" * 3;
console.log(result4); // 15

// Boolean + Number
console.log(true + 1);   // 2
console.log(false + 1);  // 1

// Strings in comparisons
console.log("10" > 5);    // true (string "10" is converted to number 10)
console.log("abc" > 5);   // false (NaN; every comparison with NaN is false)

Explicit Conversion (Manual)

We intentionally convert data types using conversion functions.

// To Number
const num1 = Number("123");       // 123
const num2 = Number("12.5");      // 12.5
const num3 = Number("abc");       // NaN
const num4 = Number(true);        // 1
const num5 = Number(false);       // 0
const num6 = Number(null);        // 0
const num7 = Number(undefined);   // NaN

// To String
const str1 = String(123);         // "123"
const str2 = String(true);        // "true"
const str3 = String(null);        // "null"
const str4 = String(undefined);   // "undefined"

// To Boolean
const bool1 = Boolean(0);         // false
const bool2 = Boolean("");        // false
const bool3 = Boolean(null);      // false
const bool4 = Boolean(undefined); // false
const bool5 = Boolean(NaN);       // false
const bool6 = Boolean("0");       // true  (non-empty string!)
const bool7 = Boolean([]);        // true  (arrays are always true!)

Code Example: String Conversion

// parseInt — string to integer
console.log(parseInt("42"));         // 42
console.log(parseInt("42.5px"));     // 42 (takes only the integer part)
console.log(parseInt("abc42"));      // NaN (starts with non-digits)
console.log(parseInt("1010", 2));    // 10 (binary base)
console.log(parseInt("ff", 16));     // 255 (hexadecimal base)

// parseFloat — string to float
console.log(parseFloat("3.14"));       // 3.14
console.log(parseFloat("3.14px"));     // 3.14
console.log(parseFloat("100"));        // 100

// Important difference between parseInt and Number
console.log(parseInt(""));      // NaN
console.log(Number(""));        // 0

console.log(parseInt(" "));     // NaN
console.log(Number(" "));       // 0

console.log(parseInt("08"));    // 8 (base-8 in old IE)
console.log(Number("08"));      // 8

Truthy and Falsy Values

Every value in JavaScript can be evaluated as true or false in a boolean context.

// === FALSY VALUES (only these 8) ===
console.log(Boolean(false));         // false
console.log(Boolean(0));             // false
console.log(Boolean(-0));            // false
console.log(Boolean(0n));            // false (BigInt zero)
console.log(Boolean(""));            // false (empty string)
console.log(Boolean(""));           // false
console.log(Boolean(null));          // false
console.log(Boolean(undefined));     // false
console.log(Boolean(NaN));           // false

// === ALL OTHER VALUES = TRUTHY ===
console.log(Boolean(1));             // true
console.log(Boolean(-1));            // true
console.log(Boolean("0"));           // true (non-empty string!)
console.log(Boolean([]));            // true (arrays!)
console.log(Boolean({}));           // true (objects!)
console.log(Boolean("false"));       // true (non-empty string!)
console.log(Boolean("null"));        // true (non-empty string!)

Common Truthy/Falsy Traps

// A trap for beginners
const inputStudent = "";

if (inputStudent) {
  console.log("Input valid");
} else {
  console.log("Input is empty"); // ← this one runs!
}

// An empty array is truthy!
const attendanceList = [];
if (attendanceList) {
  console.log("Someone is present"); // ← this one runs! (even though the array is empty)
}

// The correct way to check an array
if (attendanceList && attendanceList.length > 0) {
  console.log("Someone is present");
} else {
  console.log("No one is present yet");
}

Code Explanation

When does + become addition vs concatenation?
- If either operand is a string → concatenation: "5" + 3 → "53"
- Other operators (-, *, /) always coerce to number: "5" - 3 → 2

Everyday Case Studies

1. Converting Form Input for Calculations

// Simulated data from a form input (always strings)
const formInput = {
  name: "John Smith",
  midTermGrade: "85.5",
  finalGrade: "90",
  attendance: "12",
  passed: "true"
};

// ❌ Without conversion — wrong result
const wrongAverage = (formInput.midTermGrade + formInput.finalGrade) / 2;
console.log(wrongAverage); // NaN or concatenation!

// ✅ With correct conversion
const midTermGrade = parseFloat(formInput.midTermGrade);
const finalGrade = parseFloat(formInput.finalGrade);
const attendance = parseInt(formInput.attendance, 10);

const averageCorrect = (midTermGrade + finalGrade) / 2;
console.log(`Average: ${averageCorrect}`); // "Average: 87.75"

const attendancePercent = (attendance / 16) * 100;
console.log(`Attendance: ${attendancePercent.toFixed(1)}%`); // "75.0%"

// Converting a boolean from a string
const passed = formInput.passed === "true";
console.log(` passed: `);

2. Validating Score Input

function validateInputGrade(input) {
  // Convert to number
  const grade = Number(input);

  // Check whether it is valid
  if (isNaN(grade)) {
    return { valid: false, message: "Input must be a number" };
  }

  if (grade < 0 || grade > 100) {
    return { valid: false, message: "Grade must be between 0-100" };
  }

  if (!Number.isInteger(grade)) {
    return { valid: false, message: "Grade must be an integer" };
  }

  return { valid: true, grade, message: "OK" };
}

// Usage
console.log(validateInputGrade("85"));    // { valid: true, grade: 85, message: "OK" }
console.log(validateInputGrade("abc"));   // { valid: false, message: "Input must be a number" }
console.log(validateInputGrade("150"));   // { valid: false, message: "Grade must be between 0-100" }
console.log(validateInputGrade("85.5"));  // { valid: false, message: "Grade must be an integer" }

3. Parsing Simple CSV Data

const csvData = "2023001,John,3.75,true\n2023002,Amy,3.90,true\n2023003,Mike,2.80,false";

function parseCSV(csv) {
  const lines = csv.split("\n");
  const result = [];

  for (const line of lines) {
    const cells = line.split(",");
    result.push({
      studentId: cells[0],                           // stays a string
      name: cells[1],                          // stays a string
      gpa: parseFloat(cells[2]),               // convert to number
      active: cells[3].trim() === "true"        // convert to boolean
    });
  }

  return result;
}

const dataStudent = parseCSV(csvData);
dataStudent.forEach(student => {
  const status = student.active ? "Active" : "Leave";
  console.log(`${student.name} (StudentID: ${student.studentId}) - GPA: ${student.gpa} [${status}]`);
});

Conclusion

• Implicit conversion happens automatically in JavaScript during mixed-type operations — a frequent source of bugs.
• Explicit conversion is safer: manually use Number(), parseInt(), parseFloat(), String(), and Boolean().
• Truthy/Falsy: only false, 0, "", null, undefined, NaN, and 0n are falsy. An empty array [] and an empty object {} remain truthy!
• Tip: use === (strict equality) to avoid implicit conversion in comparisons.
• Form input is always a string — always convert before numeric calculations.