Course: JavaScript Beginner

Lesson 3: Data Types in JavaScript

Level

Beginner

Estimated Reading Time

10–15 minutes

Goal

By the end of this lesson, the learner will be able to:

• Name the seven primary JavaScript data types and describe what each represents
• Choose the appropriate data type for a given piece of information
• Use typeof to inspect what type a value is at runtime

Frontend Development Context

When you write JavaScript, every value has a type. A user's name is a different kind of thing than a product's price, which is different again from a checkbox's checked state. Understanding data types helps you write code that handles values correctly — because JavaScript behaves very differently depending on whether it thinks it is working with a number, a string, or something else entirely.

Bugs caused by unexpected data types are extremely common in frontend development. A form input returns a string even if the user typed a number. An API response might include null where you expected a string. Knowing what types exist and how JavaScript treats them is a foundational skill that prevents these bugs before they happen.

Explanation

JavaScript has seven primitive data types: string, number, boolean, null, undefined, bigint, and symbol. There is also one non-primitive type: object (which includes arrays, plain objects, and functions). At the beginner level, the most important types to understand are string, number, boolean, null, undefined, array, and object.

A string is any sequence of characters enclosed in quotes — single, double, or backtick. Strings represent text: names, messages, URLs, labels. A number represents numeric values including integers and decimals. JavaScript does not distinguish between integers and floats — both are simply number. A boolean is either true or false, and it is used to represent yes/no, on/off, or any binary state.

null is a value that explicitly represents "nothing" or "empty". It is intentionally set by the programmer. undefined means a value has not been assigned yet — it is what JavaScript puts in a variable that was declared but never given a value. Both represent absence, but for different reasons, and that distinction matters.

An array is an ordered list of values, written with square brackets: [1, 2, 3]. Arrays can hold any type of value, including other arrays and objects. An object is an unordered collection of key-value pairs, written with curly braces: { name: "Alice", age: 30 }. Objects are used to group related data together into a single named structure.

JavaScript is dynamically typed, meaning variables do not have a fixed type. A variable that holds a string today can hold a number tomorrow. This flexibility is powerful but can also cause bugs if you are not careful about what type a value actually is at a given point in your code.

Code Example

This example shows each major data type being used to represent information about a user profile:

const username = "alice_dev";        // string
const followerCount = 1024;          // number
const isPremiumMember = true;        // boolean
const lastLoginDate = null;          // null — not logged in yet
let sessionToken;                    // undefined — not assigned yet

const skills = ["HTML", "CSS", "JavaScript"]; // array

const profile = {                    // object
  username: username,
  followers: followerCount,
  premium: isPremiumMember
};

console.log(typeof username);        // "string"
console.log(typeof followerCount);   // "number"
console.log(typeof isPremiumMember); // "boolean"
console.log(typeof skills);          // "object" (arrays are objects in JS)

Code Explanation

Each variable in this example is chosen to naturally fit a specific data type. username is a string because names are text. followerCount is a number because it represents a numeric quantity you might do math with. isPremiumMember is a boolean because it represents a binary yes/no state that will be used in conditions.

lastLoginDate is explicitly set to null to signal "we know there is no login date yet" — this is an intentional empty value. sessionToken is declared with let but given no value, so it is undefined — a variable that exists but has not been assigned anything.

The skills array holds an ordered list of strings. Arrays are useful whenever you have multiple values of the same kind that belong together. The profile object groups different pieces of information about the same entity — the user — into one structured value using key-value pairs.

The typeof calls at the end show how you can inspect a value's type at runtime. One important gotcha is visible here: typeof skills returns "object" even though skills is an array. This is a well-known JavaScript quirk — arrays are technically objects. To check if something is an array, use Array.isArray(skills) instead.

Pattern Highlights

✅ Positive Pattern: Choose data types that match the nature of the data — strings for text, numbers for quantities, booleans for states, objects for grouped data, arrays for ordered lists.

⚠️ Neutral Note: typeof null returns "object" — this is a historical bug in JavaScript that was never fixed. Always check for null explicitly with === null rather than relying on typeof.

❌ Negative Pattern: Storing a number as a string (e.g., "42") because it came from a form input and then trying to do arithmetic on it will produce unexpected results — "42" + 1 gives "421", not 43.

Common Mistakes

Mistake 1: Doing arithmetic on strings from form inputs

Form inputs always return strings, even when the user types a number. Adding a string and a number uses string concatenation, not arithmetic.

const input = document.querySelector("#age").value; // returns "25" (string)
const nextYear = input + 1; // "251" — string concatenation, not addition!

Convert the input to a number first using Number(input) or parseInt(input, 10) before doing math with it.

Mistake 2: Confusing null and undefined

Both represent "no value" but for different reasons. Treating them as interchangeable leads to fragile code.

let userEmail;              // undefined — not set yet
const deletedRecord = null; // null — deliberately empty

if (userEmail == null) {
  // This catches both null AND undefined due to loose equality
  // which can hide bugs if you only expected one of them
}

Use strict equality (===) and check for each explicitly. Know when you set something to null intentionally versus when a variable is simply uninitialized.

Mistake 3: Using typeof to check for arrays

typeof returns "object" for arrays, which makes it useless for distinguishing arrays from plain objects.

const tags = ["javascript", "css"];
console.log(typeof tags); // "object" — not "array"

if (typeof tags === "array") { // always false — this never works
  console.log("It is an array");
}

Use Array.isArray(tags) to reliably check whether a value is an array.

Quick Recap

• JavaScript's main data types are string, number, boolean, null, undefined, array, and object
• null is an intentional empty value; undefined means a variable has not been assigned yet
• Arrays hold ordered lists; objects hold key-value pairs for grouped data
• Use typeof to inspect types at runtime, but know its quirks — typeof null is "object" and typeof [] is also "object"