JavaScript Data Types, Primitives, Objects, typeof, toString & Type Conversion

JavaScript has exactly 8 built-in data types. They split into two families:

Here is your first look at each type in code:

// 1. String — text
let studentName = "Amara Osei";

// 2. Number — integers and decimals
let age = 17;
let gpa  = 3.85;

// 3. BigInt — very large integers
let schoolID = 9007199254740991n;

// 4. Boolean — true or false
let isEnrolled = true;

// 5. Undefined — declared but not yet assigned
let graduationDate;

// 6. Null — intentionally empty
let middleName = null;

// 7. Symbol — unique hidden identifier (advanced)
let studentToken = Symbol("token");

// 8. Object — a collection of named values
let student = {
  name: "Amara",
  age: 17,
  enrolled: true
};

We will explore each of these carefully, one at a time.

Most programming languages (like Java or C++) require you to declare the type of a variable upfront and never change it. JavaScript works differently · it is dynamically typed, which means:

• You do not state the type when creating a variable.
• JavaScript figures it out from the value you assign.
• The type of a variable can change during the program.

Micro-Demo: A variable that changes type

let info = "Hello";    // info is a String
console.log(typeof info); // "string"

info = 42;             // info is now a Number
console.log(typeof info); // "number"

info = true;           // info is now a Boolean
console.log(typeof info); // "boolean"

Expected Output:

string
number
boolean

💡 Why this matters: Dynamic typing makes JavaScript fast to write but can cause tricky bugs. A function expecting a number might silently receive a string and produce wrong results. This is why checking types with typeof (covered later) is an important habit.

🤔 Thinking Question: What do you think happens if you add a number to a string in JavaScript? For example 5 + "5"? Write your prediction before reading on. (We answer this in Section 1.8.)

What is a primitive? A primitive is a data type that holds one single, simple value. It is not a collection, not a function, and not a structure. It is just a bare value.

Primitives are immutable · once the value exists in memory, you cannot alter that specific value. You can re-assign the variable to a new value, but the old value itself does not change.

There are 7 primitive types in JavaScript.

Primitive 1: String

A string is a sequence of characters · letters, digits, spaces, punctuation, or emoji · surrounded by quotes.

Three ways to write strings

let a = "Hello";      // double quotes
let b = 'World';      // single quotes
let c = `Hello World`; // backtick (template literal)

All three create strings. The backtick version is special · it allows embedded expressions:

let name = "Amara";
let greeting = `Welcome, ${name}! Your GPA is ${3.85}.`;
console.log(greeting);
// Expected Output: Welcome, Amara! Your GPA is 3.85.

Strings contain individual characters

Think of a string as a row of labelled boxes. Each character sits in a numbered box starting from box 0:

"Amara"
  A  m  a  r  a
  0  1  2  3  4

let name = "Amara";
console.log(name[0]);    // "A"
console.log(name.length); // 5

Expected Output:

A
5

⚠️ Common Beginner Mistake · Mixing quotes

let msg = "She said 'hello'";  // ✅ fine — outer double, inner single
let msg2 = 'She said "hello"'; // ✅ fine — outer single, inner double
let msg3 = "She said "hello""; // ❌ ERROR — JavaScript gets confused

Fix mixed quotes by using template literals or escaping with \:

let msg3 = "She said \"hello\""; // ✅ escaped quotes

Primitive 2: Number

JavaScript uses one single number type for both whole numbers (integers) and decimals (floats). This is different from many other languages that have separate types.

let students    = 35;       // integer
let temperature = 36.6;     // decimal
let bankBalance = -1500.99; // negative decimal
let taxRate     = 0.075;    // small decimal

Special numeric values

JavaScript's Number type also includes three special values:

let result1 = 1 / 0;
console.log(result1);  // Infinity

let result2 = -1 / 0;
console.log(result2);  // -Infinity

let result3 = "hello" / 2;
console.log(result3);  // NaN (Not a Number)

Expected Output:

Infinity
-Infinity
NaN

💡 NaN stands for Not a Number. It appears when a mathematical operation fails · like trying to divide a word by 2. Interestingly, typeof NaN returns "number" · because NaN is a member of the Number type, just a broken one.

Number size limits

JavaScript numbers are stored using 64-bit floating point (IEEE 754). This means:

• Maximum safe integer: 9,007,199,254,740,991 (about 9 quadrillion)
• Minimum safe integer: -9,007,199,254,740,991

console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(Number.MIN_SAFE_INTEGER); // -9007199254740991

🤔 Thinking Question: What could go wrong if a banking system uses regular JavaScript Numbers to store a balance of $10 quadrillion? Think about this before moving to BigInt.

Primitive 3: BigInt

BigInt was introduced to solve the limitation above · it handles integers larger than the safe integer limit.

You create a BigInt by appending n to the number:

let bigNumber = 9007199254740991n;   // BigInt
let bigger    = bigNumber + 1000n;   // works correctly!
console.log(bigger);
// Expected Output: 9007199254741991n

⚠️ You cannot mix BigInt and regular Number

let x = 10n + 5;    // ❌ TypeError
let x = 10n + 5n;   // ✅ both BigInt
let x = Number(10n) + 5; // ✅ convert first

💡 Real-World Use: Financial systems, cryptography, and database IDs that exceed standard number limits use BigInt.

Primitive 4: Boolean

A Boolean holds exactly one of two values: true or false. It represents a yes/no, on/off, correct/incorrect decision.

let isLoggedIn   = true;
let hasPermission = false;
let isAdult      = (age >= 18);  // evaluates to true or false

Booleans power your decisions

let score = 72;
let passed = score >= 60;

if (passed) {
  console.log("You passed!");
} else {
  console.log("You need to retake the exam.");
}
// Expected Output: You passed!

Truthy and Falsy · JavaScript's boolean system

In JavaScript, every value has an implied "truth". When JavaScript evaluates a condition, it silently converts the value to a boolean:

if ("") {
  console.log("empty string is truthy");
} else {
  console.log("empty string is falsy"); // ← this runs
}

if ("hello") {
  console.log("non-empty string is truthy"); // ← this runs
}

Expected Output:

empty string is falsy
non-empty string is truthy

Primitive 5: Undefined

undefined means a variable has been declared but not yet given a value.

let graduationDate;
console.log(graduationDate); // undefined
console.log(typeof graduationDate); // "undefined"

JavaScript itself assigns undefined to newly declared variables automatically. You do not need to write it yourself most of the time.

function greet(name) {
  console.log("Hello, " + name);
}

greet(); // No argument passed
// Expected Output: Hello, undefined

💡 The name parameter receives no value, so it is undefined. The string "Hello, " + undefined produces "Hello, undefined".

⚠️ Common Beginner Mistake

let x = undefined; // ✅ valid but unusual — prefer null for intentional emptiness

Primitive 6: Null

null means intentionally empty. You assign it when you want to say: "This variable exists, but it holds nothing on purpose."

let middleName = null;    // person has no middle name — intentional
let profilePicture = null; // user hasn't uploaded one yet

The typeof null · JavaScript's famous bug

console.log(typeof null); // "object"  ← !! This is WRONG but kept for legacy reasons

⚠️ Famous Bug: typeof null returns "object" · but null is NOT an object. This is a historical mistake in JavaScript from 1995 that was never fixed because fixing it would break the web. Always remember: null is a primitive, not an object.

null vs undefined · side by side

console.log(null == undefined);  // true  (loose — type ignored)
console.log(null === undefined); // false (strict — type matters)

Primitive 7: Symbol

A Symbol is a unique, hidden identifier. Every Symbol you create is guaranteed to be different from every other Symbol · even if they have the same description.

let id1 = Symbol("id");
let id2 = Symbol("id");

console.log(id1 === id2); // false — they are always unique

💡 Real-World Use: Symbols are used to add private, non-clashing property keys to objects in large libraries and frameworks. You will encounter them more in advanced JavaScript. For now, just know they exist.

How Primitives Are Stored · Pass by Value

Primitives are stored and copied by value · when you assign a primitive to a new variable, a fresh independent copy is made.

let a = 10;
let b = a;   // b gets a COPY of 10

b = 99;      // changing b does NOT affect a

console.log(a); // 10  ← unchanged
console.log(b); // 99

Expected Output:

10
99

💡 Analogy: Think of primitives like a photocopy machine. b = a makes a photocopy. Writing on the copy does not alter the original.

What is an object type? An object is a complex data structure that can hold multiple values · organised as named key-value pairs, ordered sequences, callable functions, and more.

Almost everything in JavaScript that is not a primitive is an object.

The Plain Object

A plain object groups related data together under named keys:

let student = {
  name: "Amara",
  age: 17,
  enrolled: true,
  subjects: ["Math", "Biology", "History"]
};

console.log(student.name);       // "Amara"
console.log(student.subjects[0]); // "Math"

Expected Output:

Amara
Math

Think of a plain object as a form with labelled fields. Each field (key) holds a value of any type.

Arrays

An array is an ordered list of values. Items are accessed by their position (index), starting at 0.

let fruits = ["apple", "mango", "orange"];

console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "mango"
console.log(fruits.length); // 3

💡 Important: In JavaScript, arrays are actually a special type of object. Their indices (0, 1, 2, etc.) are just string keys under the hood. This is why typeof [] returns "object".

console.log(typeof fruits); // "object"

Functions

Functions are objects too · they are callable objects. You can store them in variables, pass them as arguments, and return them.

let greet = function(name) {
  return "Hello, " + name;
};

console.log(greet("Amara")); // "Hello, Amara"
console.log(typeof greet);   // "function"

💡 typeof returns "function" for function objects · making them easy to identify despite technically being objects.

Dates

The built-in Date object represents a point in time:

let today = new Date();
console.log(today);         // current date and time
console.log(typeof today);  // "object"

How Objects Are Stored · Pass by Reference

Unlike primitives, objects are stored and copied by reference. When you assign an object to a new variable, both variables point to the same object in memory.

let studentA = { name: "Amara", grade: "A" };
let studentB = studentA;  // studentB points to the SAME object

studentB.grade = "B";     // changing via studentB...

console.log(studentA.grade); // "B" ← studentA is ALSO changed!
console.log(studentB.grade); // "B"

Expected Output:

B
B

⚠️ Gotcha: This surprises many beginners. Both variables reference the same object. Changing one changes both.

💡 Analogy: Think of objects as a shared Google Doc. studentB = studentA gives someone else the link. Edits made by either person show up for both.

How to make a true copy of an object

// Shallow copy using spread syntax
let studentC = { ...studentA };

studentC.grade = "C";

console.log(studentA.grade); // "B" ← unchanged
console.log(studentC.grade); // "C"

What is typeof?

typeof is a built-in JavaScript operator that inspects a value and returns a string describing its type. It is your go-to tool for checking what kind of data you are working with.

typeof <value>  →  returns a string

The full typeof table

Micro-Demo

console.log(typeof "Amara");        // "string"
console.log(typeof 3.85);           // "number"
console.log(typeof true);           // "boolean"
console.log(typeof undefined);      // "undefined"
console.log(typeof null);           // "object"   ← remember: this is the bug
console.log(typeof {});             // "object"
console.log(typeof []);             // "object"
console.log(typeof function(){});   // "function"

Expected Output:

string
number
boolean
undefined
object
object
object
function

Using typeof in practice

function processScore(score) {
  if (typeof score !== "number") {
    console.log("Error: score must be a number. Got: " + typeof score);
    return;
  }
  console.log("Processing score: " + score);
}

processScore(85);       // Processing score: 85
processScore("eighty"); // Error: score must be a number. Got: string

Expected Output:

Processing score: 85
Error: score must be a number. Got: string

Detecting null correctly

Since typeof null returns "object", you need a separate check for null:

let value = null;

if (value === null) {
  console.log("Value is null");
} else if (typeof value === "object") {
  console.log("Value is a real object");
}
// Expected Output: Value is null

Detecting arrays correctly

Since typeof [] returns "object", use Array.isArray() for arrays:

let fruits = ["apple", "mango"];

console.log(typeof fruits);          // "object"
console.log(Array.isArray(fruits));  // true

typeof can be used before a variable is declared

Uniquely, typeof does not throw an error if used on an undeclared variable:

console.log(typeof undeclaredVariable); // "undefined" — no error thrown

This makes it safe for checking whether optional features exist in a browser environment.

Why convert to a string?

Many real-world tasks require turning a value into text:

• Displaying a number in a <p> tag on a webpage
• Concatenating a number into a message: "Your score is " + 95
• Sending data to an API as a JSON string
• Formatting output for a report

JavaScript provides several methods to convert values to strings.

Method 1: The Global String() Function

String() is the most reliable and universal method. It works on any value.

String(123)       // "123"
String(3.14)      // "3.14"
String(true)      // "true"
String(false)     // "false"
String(null)      // "null"
String(undefined) // "undefined"
String(NaN)       // "NaN"
String(Infinity)  // "Infinity"

let score = 95;
let message = "Your score is " + String(score) + " out of 100.";
console.log(message);
// Expected Output: Your score is 95 out of 100.

Method 2: .toString() · The Method on Values

Most JavaScript values (except null and undefined) have a .toString() method you can call directly:

let num = 255;
console.log(num.toString());    // "255"

let flag = true;
console.log(flag.toString());   // "true"

let arr = [1, 2, 3];
console.log(arr.toString());    // "1,2,3"

Expected Output:

255
true
1,2,3

⚠️ .toString() fails on null and undefined

let x = null;
x.toString(); // ❌ TypeError: Cannot read properties of null

// Use String() instead:
String(null); // ✅ "null"

.toString() with a radix (number base)

The .toString() method on numbers accepts an optional radix argument · the base of the number system to convert to:

let num = 255;
console.log(num.toString(10));  // "255"    — base 10 (decimal, default)
console.log(num.toString(16));  // "ff"     — base 16 (hexadecimal)
console.log(num.toString(2));   // "11111111" — base 2 (binary)
console.log(num.toString(8));   // "377"    — base 8 (octal)

Expected Output:

255
ff
11111111
377

💡 Real-World Use: Web developers use toString(16) to convert colour values (like 255, 128, 0 → "ff8000" for #ff8000 orange). Systems programmers use toString(2) to inspect binary representations.

Method 3: String Concatenation (Implicit Conversion)

Adding a string to another value with + silently converts the other value to a string:

let score = 95;
let output = "Score: " + score;
console.log(output); // "Score: 95"
console.log(typeof output); // "string"

⚠️ This is implicit type conversion · covered fully in Section 1.8.

Method 4: Template Literals

Template literals automatically convert values to strings inside ${}:

let score = 95;
let grade = "A";
let report = `Student scored ${score} and received grade ${grade}.`;
console.log(report);
// Expected Output: Student scored 95 and received grade A.

Method 5: Number-specific formatting methods

These return strings with specific formatting:

.toFixed(n) · Round to n decimal places

let price = 19.99999;
console.log(price.toFixed(2)); // "20.00"

let gpa = 3.8567;
console.log(gpa.toFixed(2));   // "3.86"

.toPrecision(n) · n significant digits

let value = 123.456;
console.log(value.toPrecision(5)); // "123.46"
console.log(value.toPrecision(2)); // "1.2e+2"

.toExponential(n) · Scientific notation

let distance = 149600000;
console.log(distance.toExponential(2)); // "1.50e+8"

💡 Real-World Use: .toFixed(2) is used in every e-commerce system to format prices like "$19.99". .toExponential() is used in scientific applications.

The Two Kinds of Type Conversion

Explicit Conversion

You intentionally call a function to convert a type.

Converting TO Number

Number("42")      // 42
Number("3.14")    // 3.14
Number("")        // 0
Number(" ")       // 0
Number("hello")   // NaN
Number(true)      // 1
Number(false)     // 0
Number(null)      // 0
Number(undefined) // NaN

// Real-world: reading a form input (always comes in as string)
let inputAge = "25";
let numericAge = Number(inputAge);
console.log(numericAge + 1); // 26  ← correct arithmetic

Expected Output:

26

Converting TO Number with parseInt() and parseFloat()

parseInt("42px")     // 42    ← reads digits until a non-digit
parseInt("3.99")     // 3     ← truncates decimal
parseFloat("3.99em") // 3.99  ← includes decimal
parseInt("abc")      // NaN   ← starts with non-digit

// Real-world: extracting font size from a CSS string
let fontSize = "16px";
let size = parseInt(fontSize);
console.log(size + 2); // 18

💡 Why parseInt/parseFloat over Number()? Number("16px") returns NaN. But parseInt("16px") returns 16. Use parseInt/parseFloat when your string contains units or extra characters.

Converting TO Boolean

Boolean(1)         // true
Boolean(0)         // false
Boolean("hello")   // true
Boolean("")        // false
Boolean(null)      // false
Boolean(undefined) // false
Boolean({})        // true  ← even an empty object is truthy
Boolean([])        // true  ← even an empty array is truthy

// Real-world: check if user typed anything in a search box
let searchQuery = "";
if (!Boolean(searchQuery)) {
  console.log("Please enter a search term.");
}
// Expected Output: Please enter a search term.

Implicit Conversion (Type Coercion)

JavaScript sometimes silently converts types on your behalf. This can be surprising.

The + operator · addition OR concatenation?

The + operator has a dual personality:

• If both operands are numbers → addition
• If either operand is a string → string concatenation

console.log(5 + 5);       // 10    — number + number
console.log("5" + 5);     // "55"  — string + number → concatenation
console.log(5 + "5");     // "55"  — number + string → concatenation
console.log("5" + "5");   // "55"  — string + string → concatenation

Expected Output:

10
55
55
55

⚠️ This answers the thinking question from Section 1.3. 5 + "5" gives "55", not 10. This is a very common source of bugs in JavaScript.

-, *, / · these always try to convert to Number

Unlike +, the subtraction, multiplication, and division operators have no string behaviour · they always attempt numeric conversion:

console.log("10" - 5);    // 5     ← "10" converted to 10
console.log("10" * 2);    // 20    ← "10" converted to 10
console.log("10" / 2);    // 5     ← "10" converted to 10
console.log("hello" - 5); // NaN   ← "hello" can't become a number

Expected Output:

5
20
5
NaN

Comparison operators and coercion

Loose equality == converts types before comparing. Strict equality === does not convert.

console.log(0 == false);   // true  ← 0 and false both falsy
console.log(0 === false);  // false ← different types (Number vs Boolean)

console.log("" == false);  // true  ← both falsy
console.log("" === false); // false ← different types

console.log(1 == "1");     // true  ← string "1" converted to number 1
console.log(1 === "1");    // false ← different types

💡 Best Practice: Always use === (strict equality) in your code. It avoids surprising coercion bugs and makes your intent clear.

Complete Conversion Reference Table

String to Number

To Boolean

To String

# Section 2 · Applied Exercises