JavaScript Data Types

Every value in JavaScript has a type: it is a piece of text, a number, a true/false answer, and so on. The type decides what you can do with the value. You already saw this in the Variables lesson: 2 + 3 gives 5, but "2" + 3 gives "23", because one of those 2s is text. Knowing the types is how you predict what your code will do.

// The 8 Data Types

A JavaScript variable can hold 8 types of data. Seven of them are primitives: single, simple values. The eighth, object, is a container that groups many values together.

Here is each one in a declaration:

// String
let color = "Yellow";

// Number
let length = 16;
let weight = 7.5;

// BigInt
let huge = 1234567890123456789012345n;

// Boolean
let isOpen = true;

// Undefined
let nickname;

// Null
let winner = null;

// Symbol
const id = Symbol("id");

// Objects
const person = {firstName: "John", lastName: "Doe"};
const cars   = ["Saab", "Volvo", "BMW"];       // an array is an object
const date   = new Date("2022-03-25");           // a date is an object

You will use strings, numbers, booleans, undefined, and objects every day. BigInt, null, and symbol come up less, but you need to recognize all eight.

// The typeof Operator

To ask JavaScript what type a value is, put typeof in front of it. It answers with the type's name as a string:

console.log(typeof "John");      // text
console.log(typeof "");          // empty text is still text
console.log(typeof 314);
console.log(typeof 3.14);
console.log(typeof (3 + 4));     // works on expressions too
console.log(typeof "16");        // quotes make it a string
console.log(typeof true);

Here is what typeof reports for all eight types. Two rows do not say what you might expect:

The JS typeof lesson later covers these edge cases and how to test for arrays properly.

// Strings

A string is a series of characters like "John Doe". Strings are written inside quotes, and single or double quotes both work:

let carName1 = "Volvo XC60";    // double quotes
let carName2 = 'Volvo XC60';    // single quotes: exactly the same string

You can put quotes inside a string as long as they do not match the quotes around it:

let answer1 = "It's alright";             // single inside double
let answer2 = "He is called 'Johnny'";    // single inside double
let answer3 = 'He is called "Johnny"';    // double inside single

console.log(answer1);
console.log(answer3);

// Numbers

JavaScript has just one number type for everything: whole numbers, decimals, negatives. There is no separate "integer" type like in some other languages. Every number is stored as a decimal (a floating point number).

let x1 = 34.00;     // with decimals
let x2 = 34;        // without decimals

console.log(x1);
console.log(x2);

Both are the same value; 34.00 is just another way of writing 34.

Very large or very small numbers can be written in exponential (scientific) notation. The e means "times 10 to the power of":

let y = 123e5;     // 123 × 10⁵: move the decimal 5 places right
let z = 123e-5;    // 123 × 10⁻⁵: move the decimal 5 places left

console.log(y);
console.log(z);

// BigInt

A Number can only store whole numbers exactly up to 9007199254740991 (about 9 quadrillion). Past that, it starts rounding:

console.log(9007199254740993);     // a Number: gets rounded
console.log(9007199254740993n);    // a BigInt: exact

To make a BigInt, put an n on the end of a whole number. You can also use BigInt(), but give it the digits as a string:

let a = 1234567890123456789012345n;               // exact
let b = BigInt("1234567890123456789012345");     // exact
let c = BigInt(1234567890123456789012345);       // WRONG

console.log(c);

BigInts and Numbers cannot be mixed in math. 10n + 5n is fine, but 10n + 5 throws a TypeError. You will rarely need BigInt unless you work with very large IDs or exact large-number math.

// Booleans

A boolean can only be one of two values: true or false. Booleans are how programs make decisions, and you mostly get them from comparisons. Given let x = 5;:

let age = 16;
let canDrive = age >= 16;      // store the answer in a variable
console.log(canDrive);

Every comparison operator (==, !=, <, > and friends) gives back a boolean. Booleans get their own lesson in JS Booleans, and comparisons in JS Comparisons.

// undefined, null, and Empty

JavaScript has three different ways for something to look "empty", and they mean different things.

undefined means no value has been given yet. A variable declared without a value is undefined, and so is its type. Nobody has to write this; JavaScript fills it in automatically:

let carName;
console.log(carName);
console.log(typeof carName);

null means "empty on purpose". It is something you write, to say "there is deliberately nothing here right now":

let winner = null;     // the game has no winner yet

An empty string "" is not empty in the same way at all. It is a real string that happens to have zero characters. It has a value ("") and a type ("string"):

let car = "";
console.log(typeof car);

// Symbol

A symbol is a value that is guaranteed to be unique. Even two symbols with the same description are never equal:

const a = Symbol("id");
const b = Symbol("id");
console.log(a === b);

Symbols are used as hidden, collision-proof labels inside objects, mostly by libraries and advanced code. You will not need to create them as a beginner; just know the type exists when you see it.

// Objects

Every type so far holds one value. An object holds many, each stored under a name (a key). Objects are written in curly braces as key: value pairs:

const person = {firstName: "John", lastName: "Doe", age: 50};
console.log(person.firstName);
console.log(typeof person);

Arrays (ordered lists) and dates are special kinds of objects, which is why typeof calls them all "object":

const cars = ["Saab", "Volvo", "BMW"];
const date = new Date("2022-03-25");

console.log(typeof cars);
console.log(typeof date);

Objects, arrays, and dates each get a full section later in the course.

// Types Can Change

In some languages you must say what type a variable will hold, and it can never hold anything else. JavaScript is dynamically typed: the type belongs to the value, not the variable. The same let variable can hold a number now and a string later:

let v = 16;
console.log(typeof v);

v = "sixteen";
console.log(typeof v);

That flexibility is convenient but also a common source of bugs, because JavaScript will not stop you from mixing types. It quietly converts one to match the other, and the operator decides which way:

console.log(16 + 4);       // both numbers: adds
console.log("16" + 4);     // + with a string: joins
console.log("16" * 2);     // * only works on numbers: converts "16" to 16

// Quick Check

console.log(typeof "42");

let prize;
let winner = null;
console.log(typeof prize, typeof winner);

let lives = "3";
console.log(lives + 1);

// Try It

▶ Open Playground

1. Click Open Playground. Log typeof for one value of each of the 8 types. Which two answers surprise you?
2. Add let answer = 'It's alright'; and run it. Read the error, then fix it two different ways
3. Log 9007199254740993 and 9007199254740993n. Then log BigInt(9007199254740993) and explain why it is wrong
4. Declare let data = 10; and log typeof data. Reassign it to a string, then a boolean, then null, logging typeof each time