Data Types and Operators

Data Types and Operators

JavaScript has seven primitive data types and one complex type (Object). Understanding these types and how JavaScript handles type coercion is essential because JavaScript is dynamically and weakly typed — it will automatically convert between types in many situations, which can lead to surprising behavior if you are not aware of the rules. Operators in JavaScript include arithmetic, comparison, logical, and some unique ones like the nullish coalescing operator and optional chaining.

Primitive Data Types

// Number — integers and floats (64-bit IEEE 754)
let count = 42;
let price = 19.99;
let negative = -17;
let scientific = 2.5e6;     // 2,500,000
let hex = 0xFF;              // 255
let infinity = Infinity;
let notANumber = NaN;        // Result of invalid math

// String
let single = 'Hello';
let double = "World";
let backtick = `Hello, ${double}!`;  // Template literal

// Boolean
let isActive = true;
let isDeleted = false;

// null — intentional absence of value
let data = null;

// undefined — variable declared but not assigned
let result;
console.log(result);  // undefined

// BigInt — for integers larger than 2^53
let bigNum = 9007199254740991n;
let anotherBig = BigInt("123456789012345678901234567890");

// Symbol — unique identifier
let sym1 = Symbol("description");
let sym2 = Symbol("description");
console.log(sym1 === sym2);  // false — each Symbol is unique

// typeof operator
console.log(typeof 42);          // "number"
console.log(typeof "hello");     // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (known JS bug, kept for compatibility)
console.log(typeof {});           // "object"
console.log(typeof []);           // "object" (arrays are objects)

Type Coercion

// JavaScript automatically converts types (implicit coercion)
console.log("5" + 3);        // "53" (number → string, concatenation)
console.log("5" - 3);        // 2 (string → number, subtraction)
console.log("5" * "3");      // 15 (both → numbers)
console.log(true + 1);       // 2 (true → 1)
console.log(false + 1);      // 1 (false → 0)
console.log("" + 0);         // "0"
console.log(null + 1);       // 1 (null → 0)
console.log(undefined + 1);  // NaN

// == vs === (loose vs strict equality)
console.log(5 == "5");       // true (type coercion)
console.log(5 === "5");      // false (no coercion — different types)
console.log(null == undefined);   // true
console.log(null === undefined);  // false
console.log(0 == false);         // true
console.log(0 === false);        // false

// ALWAYS use === and !== to avoid coercion bugs

Operators

// Arithmetic
let a = 10, b = 3;
console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1 (remainder)
console.log(a ** b);  // 1000 (exponentiation)
console.log(++a);     // 11 (pre-increment)
console.log(b--);     // 3 then b becomes 2

// Logical operators
console.log(true && false);  // false
console.log(true || false);  // true
console.log(!true);          // false

// Short-circuit evaluation
const name = "" || "Default";      // "Default" (empty string is falsy)
const value = null ?? "Fallback";  // "Fallback" (nullish coalescing)

// Nullish coalescing (??) vs OR (||)
console.log(0 || "default");   // "default" (0 is falsy)
console.log(0 ?? "default");   // 0 (?? only checks null/undefined)
console.log("" || "default");  // "default"
console.log("" ?? "default");  // "" (?? only checks null/undefined)

// Optional chaining (?.)
const user = { address: { city: "NYC" } };
console.log(user?.address?.city);     // "NYC"
console.log(user?.phone?.number);     // undefined (no error!)
console.log(user?.getInfo?.());       // undefined (safe method call)

// Ternary operator
const status = age >= 18 ? "adult" : "minor";

// Spread operator
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];  // [1, 2, 3, 4, 5]
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };  // { a: 1, b: 2, c: 3 }

Pro tip: Always use strict equality (===) and strict inequality (!==). The loose operators (==, !=) have complex coercion rules that cause subtle bugs. Use the nullish coalescing operator (??) instead of || when you want to allow falsy values like 0 or "".

Key Takeaways

• JavaScript has 7 primitive types: Number, String, Boolean, null, undefined, BigInt, and Symbol — plus Object.
• Always use === (strict equality) instead of == to avoid type coercion surprises.
• The nullish coalescing operator (??) checks only for null/undefined, unlike || which treats 0, "", and false as falsy.
• Optional chaining (?.) safely accesses nested properties without throwing errors on null/undefined.
• Use typeof to check types, but beware that typeof null returns "object" due to a historical bug.