JavaScript's Type System
JavaScript has 8 data types, divided into two categories: primitive types and objects. Primitives are immutable values. Objects are collections of properties. Understanding types is fundamental because JavaScript's dynamic typing means a variable can hold any type at any time.
// The 7 primitive types:
let str = "Hello"; // string
let num = 42; // number
let bigNum = 9007199254740991n; // bigint
let bool = true; // boolean
let undef; // undefined
let nothing = null; // null
let sym = Symbol("id"); // symbol
// Plus the object type (everything else):
let obj = { name: "Alice" }; // object
let arr = [1, 2, 3]; // object (arrays are objects)
let fn = function() {}; // object (functions are objects)
// Check types with typeof:
console.log(typeof "hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" โ famous JS bug! null is a primitive
console.log(typeof {}); // "object"
console.log(typeof []); // "object" (not "array"!)
console.log(typeof function(){}); // "function"
Strings
Strings hold text. JavaScript has three ways to create strings, and template literals (backticks) are the most powerful:
// Three ways to create strings
let single = 'Single quotes';
let double = "Double quotes";
let template = `Template literal`;
// Template literals support expressions
let name = "World";
let greeting = `Hello, ${name}!`;
let math = `2 + 2 = ${2 + 2}`;
// Multiline strings (only with template literals)
let multiline = `Line one
Line two
Line three`;
// Essential string methods
let str = "JavaScript is awesome";
console.log(str.length); // 22
console.log(str.toUpperCase()); // JAVASCRIPT IS AWESOME
console.log(str.toLowerCase()); // javascript is awesome
console.log(str.includes("awesome")); // true
console.log(str.startsWith("Java")); // true
console.log(str.indexOf("is")); // 11
console.log(str.slice(0, 10)); // JavaScript
console.log(str.replace("awesome", "powerful")); // JavaScript is powerful
console.log(" trim me ".trim()); // "trim me"
console.log("a,b,c".split(",")); // ["a", "b", "c"]
console.log("ha".repeat(3)); // hahaha
Numbers
JavaScript has a single number type for both integers and decimals. It uses 64-bit floating-point (IEEE 754), which has some precision quirks you need to know about:
// All of these are "number" type
let integer = 42;
let float = 3.14;
let negative = -100;
let scientific = 1.5e6; // 1,500,000
// Special number values
console.log(Infinity); // Infinity
console.log(-Infinity); // -Infinity
console.log(NaN); // NaN (Not a Number)
// The famous floating point issue:
console.log(0.1 + 0.2); // 0.30000000000000004 โ not 0.3!
// Fix: round to desired precision
console.log((0.1 + 0.2).toFixed(2)); // "0.30"
console.log(Math.round((0.1 + 0.2) * 100) / 100); // 0.3
// Number methods
console.log(Number.isInteger(42)); // true
console.log(Number.isInteger(3.14)); // false
console.log(Number.isNaN(NaN)); // true
console.log(isNaN("hello")); // true (coerces first)
console.log(parseInt("42px")); // 42
console.log(parseFloat("3.14em")); // 3.14
console.log((1234567).toLocaleString()); // "1,234,567"
// Math object
console.log(Math.round(4.6)); // 5
console.log(Math.floor(4.9)); // 4
console.log(Math.ceil(4.1)); // 5
console.log(Math.abs(-7)); // 7
console.log(Math.max(1,2,3)); // 3
console.log(Math.min(1,2,3)); // 1
console.log(Math.pow(2, 10)); // 1024
console.log(Math.sqrt(144)); // 12
console.log(Math.random()); // random 0-1
Booleans, null & undefined
// Boolean โ true or false
let isActive = true;
let isDeleted = false;
// Truthy and falsy โ every value is either truthy or falsy in boolean context
// FALSY values (only these 6):
false, 0, "", null, undefined, NaN
// EVERYTHING ELSE is truthy:
true, 1, "hello", [], {}, -1, Infinity
// Testing truthiness:
if ("") console.log("truthy"); // doesn't run โ empty string is falsy
if ("hello") console.log("truthy"); // runs โ non-empty string is truthy
if (0) console.log("truthy"); // doesn't run โ 0 is falsy
if ([]) console.log("truthy"); // runs โ empty array is truthy!
// null vs undefined
let declared; // undefined โ declared but not assigned
let explicit = null; // null โ intentionally empty
console.log(declared); // undefined
console.log(explicit); // null
console.log(declared == null); // true (loose equality)
console.log(declared === null); // false (strict equality)
// Checking for both:
function process(value) {
if (value == null) { // catches both null and undefined
return "no value";
}
return value;
}
Type Conversion
// Explicit conversion
Number("42"); // 42
Number("3.14"); // 3.14
Number(""); // 0
Number("hello"); // NaN
Number(true); // 1
Number(false); // 0
Number(null); // 0
String(42); // "42"
String(true); // "true"
String(null); // "null"
String(undefined); // "undefined"
Boolean(1); // true
Boolean(0); // false
Boolean("hello"); // true
Boolean(""); // false
// Implicit coercion (happens automatically โ can be tricky!)
"5" + 3; // "53" (string concatenation, not addition!)
"5" - 3; // 2 (numeric subtraction โ minus doesn't concatenate)
"5" * 2; // 10
true + 1; // 2
false + 1; // 1
null + 1; // 1
// This is why strict equality (===) matters:
5 == "5"; // true (coerces types first)
5 === "5"; // false (no coercion โ different types)
0 == false; // true (coerces)
0 === false; // false (different types)
โก Key Takeaways
- 7 primitive types: string, number, bigint, boolean, undefined, null, symbol
- Use
typeofto check types โ buttypeof null === "object"is a known bug - Floating point math has precision issues โ use
.toFixed()for display - 6 falsy values: false, 0, "", null, undefined, NaN โ everything else is truthy
- Always use
===(strict equality) to avoid implicit type coercion bugs - Template literals (backticks) are the most powerful way to create strings
๐ฏ Practice Exercises
EXERCISE 1
Create a variable for each data type and log it with its typeof result. Note which ones surprise you.
EXERCISE 2
Write a function that takes any value and returns "truthy" or "falsy". Test it with at least 10 different values.
EXERCISE 3 โ CHALLENGE
Build a "type checker" function that returns more accurate types than typeof: it should return "null", "array", "object", "function", or the typeof result for primitives.