โ† JS Mastery | Module 1: Getting Started Data Types: Strings, Numbers, Booleans
Module 1 ยท Lesson 05

Data Types: Strings, Numbers, Booleans

โฑ 18 min read โ— Beginner ๐Ÿ†“ Free

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

๐ŸŽฏ 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.

โ† Variables