Explicit vs Implicit Conversion

The earlier questions in this topic covered the basic types that JavaScript has and how the typeof operator reports them. This answer looks at what happens when a value of one type has to become a value of another type, and it is a good idea to understand because JavaScript does this quietly in many places.

There are two kinds of conversion. An implicit conversion happens when the engine decides on its own to change a value, usually because an operator received a type that it could not use. An explicit conversion happens because you called a function that says what it wants. The first one is the language being helpful, and the second one is you being clear.

// Implicit: the engine chooses the conversion for you.
console.log('10' * 2);        // 20
console.log('10' + 2);        // '102'
console.log(1 + null);        // 1

// Explicit: you ask for the conversion by name.
console.log(Number('10'));    // 10
console.log(String(10));      // '10'
console.log(Boolean(0));      // false
console.log(parseInt('10px', 10));   // 10

The explicit functions are the ones that you should reach for. Number converts text into a number, and it gives you a value that is not a number when the whole text is not numeric. String converts anything into text, including arrays and objects. Boolean applies the truthiness rules and gives you a real boolean. parseInt and parseFloat convert the numeric part at the start of a text value.

There are also some methods that belong to a value itself and that are worth knowing. The toFixed method on a number gives you a text value with a fixed number of decimal places. The toPrecision method gives you a text value with a given total number of important digits. The toString method takes a base, so you can turn the number 10 into base 36 or base 2.

The most useful place for explicit conversion is at the boundary of your program. A form field, a query string parameter, and a JSON payload can all give you text where you expected a number or a boolean. If you convert once, at the point where the data enters your program, then the rest of your code can rely on the types and never has to think about coercion again.

The previous answer explained the difference between the two kinds of conversion. This answer shows the exact functions for turning text into a number and a number into text, because you will use both of them many times.

Use the Number function to go from text to a number, and use the String function to go the other way. Both of them are explicit about what they do, and both of them behave in a way you can predict for the edge cases that you will meet in real code.

const text = '42';

console.log(Number(text));            // 42
console.log(Number('  12  '));         // 12 - the spaces around it are ignored
console.log(Number('12abc'));          // NaN - the whole text must be numeric
console.log(Number(''));              // 0

console.log(String(42));              // '42'
console.log((42).toString());         // '42'
console.log((42).toString(2));        // '101010' - binary
console.log((3.14159).toFixed(2));    // '3.14' - always text
console.log((255).toString(16));      // 'ff' - hexadecimal

The important difference to remember is that the two directions do not use the same rules. Converting text into a number is all or nothing. If any character in the text is not part of a number, then the result is not a number. Converting a number into text always works, and the toFixed and toPrecision methods let you choose the shape of the result.

Notice also that toFixed gives you a text value and not a number. If you need a rounded number rather than rounded text, use the round method from the Math object instead. Also remember that toFixed uses the shortest form that reads back as the same number, so it can surprise you with values such as 1.005.

For text that may contain extra characters, the parseInt and parseFloat functions read the numeric part at the start and stop at the first character that they cannot use. That is often what you want for a value like '42px', and it is often not what you want when you are checking that the input is valid. That is why Number is the safer default when you want to reject bad input.

The two earlier answers covered the conversion functions. This answer is about the place where mistakes actually happen, which is the point where text arrives from a user and you need to turn it into a number you can trust.

Validate first, and then convert. The simple approach of calling parseInt on whatever arrived will happily accept '12abc' and give you twelve, and that hides a real input error. The safe pattern is to trim the input, convert it, and check that the result is a finite number before you use it.

const raw = '42px';

console.log(Number(raw));           // NaN - the whole text must be numeric
console.log(parseInt(raw, 10));      // 42 - it stops at the first bad character
console.log(parseFloat('3.5kg'));    // 3.5

// The safe pattern: validate, then convert.
function toNumber(input) {
  const trimmed = String(input).trim();
  if (trimmed === '') {
    return 0;
  }
  const value = Number(trimmed);
  if (Number.isFinite(value)) {
    return value;
  }
  return 0;
}

console.log(toNumber('42'));      // 42
console.log(toNumber('42px'));    // 0
console.log(toNumber('  7 '));    // 7
console.log(toNumber(''));        // 0

Number.isFinite is the right test to use, rather than the older global isFinite. The global version converts its argument into a number first, so it would treat the text '12' as a number. The static method only returns true for a real finite number, so it rejects text, and it also rejects the two values that are not finite, which are infinity and not-a-number.

There are two more things to say in an interview. Always pass the base to parseInt, because the function guesses in older engines and only defaults to base ten in modern ones. Writing parseInt(value, 10) is the habit that keeps you safe. And remember that Number accepts an empty text value as zero, so if an empty field should be an error rather than a zero, check for the empty text first, exactly as the helper above does.

For a form with a numeric field, the browser can do part of this work for you with the input type and the validity API. You still have to check the value on the server, because the client is under the control of the user.