# Types and Converting Between Them

Tell numbers, strings and booleans apart with typeof, turn text into numbers and back with Number() and String(), and know why '5' + 3 is '53' and where NaN comes from.

Apprentice · JavaScript · Updated November 1, 2026

## After this lesson you can

- Tell numbers, strings and booleans apart, and check a value's type with typeof
- Convert between text and numbers with Number() and String(), and explain results like NaN and '5' + 3

## Key takeaways

- Every value has a type. typeof tells you which one, as a string such as 'number', 'string' or 'boolean'.
- When either side of + is a string, + joins instead of adding, so '5' + 3 is '53'.
- Text a person types, into a form or a prompt, always reaches your code as a string, even when it's digits.
- Number('2') turns text into the number 2, and String(4.75) turns a number into the text '4.75'.
- Number() gives NaN, "not a number", for text that isn't a number, and any math with NaN gives NaN.

A customer orders 2 lattes and 1 extra shot on a coffee shop's website, and the cart says *21 items*. It's a real kind of bug, and it happens because the 2 and the 1 the customer typed arrived as text, not as numbers. Once you can tell the kinds of value apart and convert between them, you can find bugs like this in seconds, and stop them before a customer sees them.

## Every value has a type

You've met three kinds of value in this chapter: numbers (`4.75`), strings (`'latte'`) and booleans (`true`). The kind of value is its **type**. Textbooks call these simple, single values **primitive values**, or primitive types.

**`typeof`**, read "type of", tells you a value's type. It answers with a string:

```javascript
const lattePrice = 4.75;
const drink = 'latte';
const isOpen = true;
const typedPrice = '4.75';

console.log(typeof lattePrice);
console.log(typeof drink);
console.log(typeof isOpen);
console.log(typeof typedPrice);
```

```text
number
string
boolean
string
```

The last line is the one to remember: `'4.75'` has digits in it, but the quotes make it a string. In JavaScript the *value* has the type, not the variable, so a `let` variable can hold a number now and a string later. `typeof` looks at whatever it holds right then.

## Why '5' + 3 is '53'

`+` has two jobs: between numbers it adds, and between strings it joins. When one side is a string and the other a number, JavaScript can't do both, so it turns the number into text and joins. `-`, `*` and `/` only do math, so they go the other way and turn the text into a number:

```javascript
console.log(5 + 3);
console.log('5' + 3);
console.log('5' - 3);
console.log('5' * 3);
```

```text
8
53
2
15
```

JavaScript changing a value's type on its own like this is called **type coercion**, read "co-ER-shun", or implicit conversion. It's why the rule of thumb is: don't let JavaScript guess. Convert the value yourself, and you always know what you'll get.

## Text a person types is always a string

Whatever a person types, into a box on a web page or a prompt in a terminal program, reaches your code as a string, even when it's only digits. You'll read form boxes in Module 4; for now, a string in quotes stands in for what the customer typed:

```javascript
const typedQuantity = '2';
const typedExtraShots = '1';
const lattePrice = 4.75;

console.log(typedQuantity * lattePrice);
console.log(typedQuantity + typedExtraShots);
```

```text
9.5
21
```

The first line works by luck: `*` turned `'2'` into 2. The second is the bug: 2 drinks plus 1 extra shot came out as `21`, because `+` joined two strings.

## Converting with Number() and String()

**`Number(...)`** turns text into a number, and **`String(...)`** turns a value into text. Converting on purpose like this is called **type conversion**:

```javascript
const typedQuantity = '2';
const typedExtraShots = '1';

const quantity = Number(typedQuantity);
const extraShots = Number(typedExtraShots);

console.log(quantity + extraShots);
console.log(typeof quantity);
console.log(String(1042).length);
```

```text
3
number
4
```

Convert once, as soon as the text arrives, and store the number in a well-named variable. From then on, every `+` adds. `String(1042).length` is a handy trick too: a number has no length, but its text does, so it says how many digits an order number has.

**Try it.** In your practice folder, make a file named `typed.js`. Pretend a customer typed `'3'` in the muffin box and `'1'` in the cookie box. Add the two with `+` and print how many items that makes, then convert both with `Number()` and print it again. Use `typeof` to check each value.

## NaN: not a number

What happens when the customer types `two` instead of `2`? `Number('two')` can't make a number from that, so it gives **`NaN`**, read "not a number" (or "nan"). NaN spreads: any math with NaN gives NaN, so one bad box can turn a whole receipt into NaN.

```javascript
const quantity = Number('two');

console.log(quantity);
console.log(quantity * 4.75);
console.log(typeof quantity);
console.log(Number.isNaN(quantity));
console.log(Number(' 3 '));
```

```text
NaN
NaN
number
true
3
```

Two surprises here. `typeof NaN` is `'number'`: NaN is JavaScript's way of saying "a number that went wrong". And `Number(' 3 ')` is 3: spaces at the ends are ignored. (An empty box is a third surprise: `Number('')` is 0, not NaN.) To test for NaN, use `Number.isNaN(value)`, which answers `true` or `false`; in the next chapter you'll use that answer to show the customer a helpful message instead of a broken total.

**Try it.** In `typed.js`, print `Number('4.75')`, `Number('$4.75')`, `Number('12 lattes')` and `Number('1,000')`. Predict each one first. Which ones surprise you?

## Check yourself

2 questions to try on the lesson page.

## So what

Most confusing bugs in beginners' JavaScript, and plenty in professionals', come from a value being a different type than the code expected. Check with `typeof`, convert typed text with `Number()` as soon as it arrives, and watch for NaN.

## Key terms

- [typeof Operator](https://www.ask-codey.com/glossary/typeof-operator)
- [Type Coercion](https://www.ask-codey.com/glossary/type-coercion)
- [NaN](https://www.ask-codey.com/glossary/nan)
- [Primitive Value](https://www.ask-codey.com/glossary/primitive-value)
- [JavaScript Data Types](https://www.ask-codey.com/glossary/javascript-data-types)

## Cheat sheets

- [Types and Converting Between Them](https://www.ask-codey.com/cheat-sheets/javascript-types-and-converting-cheat-sheet)

## Related

- [Numbers and Math](https://www.ask-codey.com/lessons/javascript-numbers-and-math)
- [Strings and Template Literals](https://www.ask-codey.com/lessons/javascript-strings-and-template-literals)
- [Booleans and Comparisons](https://www.ask-codey.com/lessons/javascript-booleans-and-comparisons)

Source: https://www.ask-codey.com/lessons/javascript-types-and-converting