JavaScript Data Types

Strings, numbers, booleans, null, undefined, objects and arrays, plus typeof.

Lesson 5 of 56Beginner12 min read

Every value in JavaScript has a type. The type tells JavaScript what the value is and what you can do with it. You can multiply numbers, turn strings into capital letters and check whether a boolean is true, but you can't sensibly multiply two pieces of text.

Understanding types helps you predict what your code will do. Many beginner bugs, such as a total of "510" instead of 15, happen because a value has a different type from the one you expected.

The primitive data types

TypeExamplesUsed for
string"hello", 'cat', `hi`Text
number42, 3.14, -7Any number, whole or decimal
booleantrue, falseYes or no answers
undefinedundefined"Nothing has been assigned yet"
nullnull"Deliberately empty"
bigint9007199254740993nVery large whole numbers
symbolSymbol("id")Unique identifiers (advanced)

Primitives are simple, single values. You'll use strings, numbers and booleans constantly; bigint and symbol are rare in everyday web code.

Objects and arrays

Everything that isn't a primitive is an object, which is a collection of values:

JavaScript
const pet = { name: "Pixel", age: 2 };   // object
const scores = [10, 25, 8];               // array (a special kind of object)

Objects group related information under named keys, and arrays hold ordered lists. You'll learn both in detail in Objects and Arrays.

Checking a type with typeof

typeof tells you a value's type as a string:

JavaScript
typeof "hi"      // "string"
typeof 42        // "number"
typeof true      // "boolean"
typeof undefined // "undefined"
typeof {}        // "object"
typeof []        // "object"  (use Array.isArray to check for arrays)
typeof null      // "object"  (a famous old bug)

Dynamic typing and type conversion

A JavaScript variable can hold any type of value and can switch to a different type later. That's flexible, but it's also a common source of bugs, such as "5" + 1 giving "51". Convert values explicitly when you need a particular type: Number("5"), String(5) or Boolean(1).

Values typed into forms always arrive as strings, even when the visitor types a number. Converting them with Number() before doing maths avoids a lot of confusing results.

Primitive values are copied, objects are shared

Primitive values (strings, numbers, booleans, null, undefined, bigints and symbols) are copied when you assign them. After let b = a, changing b never affects a. Objects and arrays are different: the variable holds a reference, like an address. After const b = a where a is an array, both names point to the same array, so b.push(4) changes a too.

This explains many beginner bugs where a "copy" of a list unexpectedly changes the original. To make a real copy, use spread, [...a] or { ...obj }, for one level, or structuredClone(obj) for nested data, as covered in object methods.

JavaScript Data Types Syntax

Types at a glance

const text = "Hi";          // string
const count = 3;            // number
const isOpen = false;       // boolean
let nothing;                // undefined
const empty = null;         // null
const user = { id: 1 };     // object
const list = [1, 2, 3];     // array (object)

JavaScript Data Types Summary

  • Every value has a type that decides what you can do with it.
  • The main primitive types are string, number, boolean, undefined and null.
  • Objects and arrays hold collections of values.
  • typeof reports a value's type; use Array.isArray() for arrays.
  • Variables can change type, so convert values with Number() or String() when needed.

JavaScript Data Types Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Checking types with typeof

console.log(typeof "Pixel");
console.log(typeof 3.14);
console.log(typeof false);
console.log(typeof undefined);
console.log(typeof { a: 1 });
console.log(typeof [1, 2]);
console.log(Array.isArray([1, 2]));
console.log(typeof null);
ConsoleEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 1 to 4The four everyday primitives.
  2. Lines 5 to 6Objects and arrays both say "object".
  3. Line 7Array.isArray is the reliable way to detect arrays.
  4. Line 8typeof null says "object". It's a bug from 1995 that can't be fixed without breaking old websites.
Example 2

Types change how operators behave

console.log(5 + 5);
console.log("5" + 5);
console.log("5" * 2);
console.log(Number("5") + 5);
console.log(String(10) + "px");
console.log(Boolean(""), Boolean("hi"), Boolean(0), Boolean(42));
ConsoleEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1Number + number = addition.
  2. Line 2If either side is a string, + joins them: "55".
  3. Line 3* only works on numbers, so JavaScript converts "5" to 5.
  4. Line 4Convert explicitly to avoid surprises.
  5. Line 5Number to string.
  6. Line 6Empty strings and 0 are "falsy"; most other values are "truthy". More in Comparisons.

Common JavaScript Data Types Mistakes

Adding numbers from inputs

Don't
const a = "10"; // values from inputs are strings!
const b = "5";
console.log(a + b); // "105"
Do
const a = Number("10");
const b = Number("5");
console.log(a + b); // 15

Everything typed into a form field arrives as a string. Convert it before doing maths.

Checking for arrays with typeof

Don't
if (typeof items === "array") { … } // never true
Do
if (Array.isArray(items)) { … }

JavaScript Data Types in Real Projects

Types in real apps

Form values arrive as strings, API data arrives as JSON with numbers, booleans and nulls, and checkboxes give booleans. Many teams use TypeScript, which is JavaScript with type checking, to catch type mistakes before the code even runs.

JavaScript Data Types Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Complete the comments with each value's typeof result.

typeof "42"   // ""
typeof 42     // ""
typeof true   // ""
Predict the outputmedium

What does this print?

console.log("3" + 4 + 5);
console.log(3 + 4 + "5");
Multiple choicemedium

What does typeof null return?

Fix the bugmedium

The total should be 25, but it prints 1510. Fix the code so the strings are converted to numbers.

const apples = "15";
const pears = "10";
const total = apples + pears;
console.log("Total fruit:", total);
ConsoleEdit the code, then press Run or Ctrl+Enter
Checks
  • Logs "Total fruit: 25"
  • total is a number

JavaScript Data Types Quiz

3 questions to check what you learned.

  1. Which of these is a boolean?

    • "true"
    • 0
    • "no"
    • false

  2. What's the difference between undefined and null?

    • undefined means no value was assigned; null is deliberately empty
    • They're identical
    • null is a number
    • undefined is a string

  3. How do you reliably check if a value is an array?

    • typeof x === "array"
    • Array.isArray(x)
    • x.type === "array"
    • x instanceof List

JavaScript Data Types Challenge

Type detective

Log the type of each value using typeof, in this order, so the console shows:

string, number, boolean, undefined, object

Then log true using Array.isArray(colors).

const robotName = "Robo";
const battery = 87;
const isCharging = false;
let nickname;
const colors = ["silver", "blue"];
ConsoleEdit the code, then press Run or Ctrl+Enter
Checks
  • Logs the five types in order
  • Logs true for Array.isArray

Related JavaScript topics

04Variables (let, const)Store values in named boxes with let and const.07Strings & Template LiteralsText in quotes, joining strings, template literals and special characters.09Numbers & MathRounding, random numbers, converting strings and the weird 0.1 + 0.2.26ObjectsGroup related data with key and value pairs, methods and nested objects.
Esc
↑↓ to navigateEnter to open