C
JavaScript list
Previous4 / 21Next
JavaScript/Basics/Lesson 04

Data Types — *7 Fundamentals*

45 min·theory
This chapter
3/5

Data Types — *7 Fundamentals*

🎯 After reading this lesson

After finishing this lesson, you will be able to confidently handle the following 3 things.

  • ▸✅ The 7 primitives (string·number·bigint·boolean·null·undefined·symbol)
  • ▸✅ Reference types and the difference between == vs ===
  • ▸✅ The IEEE 754 trap in Number (0.1 + 0.2 ≠ 0.3)

Keep the learning objectives as a checklist, and close the lesson once you can answer all of them.

Data Types in JS

The Core in One Line

JavaScript data types are divided into 7 Primitive types and 1 Object type. Because it is dynamically typed, no type declaration is needed when defining a variable — types are inferred from the value.

The 7 Primitives

javascript
// 1. number — no distinction between integers and floats
const age = 28;
const pi = 3.14;
const inf = Infinity;
const nan = NaN;        // Not a Number

// 2. bigint — very large integers (beyond number limits)
const huge = 9007199254740993n;    // trailing n

// 3. string — all 3 quote styles are fine
const s1 = "hello";
const s2 = 'world';
const s3 = `Hello, ${s1}!`;          // template literal (variable interpolation)

// 4. boolean
const isActive = true;

// 5. undefined — declared only (no value)
let x;
console.log(x);          // undefined

// 6. null — intentionally empty
const empty = null;

// 7. symbol — unique identifier (rarely used)
const id = Symbol('id');

Object — Everything Else

javascript
const obj  = { name: "Hong" };
const arr  = [1, 2, 3];
const fn   = () => "hi";
const date = new Date();
const regex = /\d+/;

Arrays, functions, dates, and regular expressions are all objects internally. That is why method calls are possible (arr.map(), s.toUpperCase(), etc.).

undefined vs null

Two that are commonly confused:

  • ▸undefined — assigned automatically (when only declared, or when a function argument is missing)
  • ▸null — assigned intentionally by the developer (to signal the absence of a value)
javascript
let x;              // undefined
const y = null;     // null

console.log(x == null);   // true (both mean "empty")
console.log(x === null);  // false (strict comparison treats them differently)

Type Checking

javascript
const fn = () => {};

console.log(typeof 42);          // 'number'
console.log(typeof 'hi');        // 'string'
console.log(typeof true);        // 'boolean'
console.log(typeof undefined);   // 'undefined'
console.log(typeof null);        // 'object'   ← ⚠️ legacy bug, unfixable
console.log(typeof {});          // 'object'
console.log(typeof []);          // 'object'   ← arrays are objects too
console.log(typeof fn);          // 'function'

// 🔍 Checking for arrays — typeof can't distinguish them → use a dedicated method
console.log(Array.isArray([]));       // true
console.log(Array.isArray({}));       // false
console.log(Array.isArray('hi'));     // false

typeof null === 'object' is a famous JS bug. It cannot be fixed due to backwards compatibility. Null checks must be handled separately.

Type Coercion — Implicit vs Explicit

javascript
// ⚠️ Implicit coercion (dangerous) — JS changes types on its own
console.log("5" + 1);     // "51"   ← + prioritizes string concatenation → 1 becomes "1"
console.log("5" - 1);     //   4    ← - is numeric only → "5" becomes 5
console.log("abc" - 1);   //  NaN   ← "abc" can't be converted to a number → NaN

// ✅ Explicit coercion (safe) — the developer converts intentionally
console.log(Number("5"));      // 5      ← string → number
console.log(String(5));        // "5"    ← number → string
console.log(Boolean(0));       // false  ← 0 is falsy
console.log(Boolean(""));      // false  ← empty string is falsy
console.log(Boolean(null));    // false  ← null is also falsy
console.log(Boolean("hi"));    // true   ← non-empty string is truthy

Implicit coercion produces unexpected results. Always prefer explicit coercion.

Summary

  • ▸7 primitives (number·bigint·string·boolean·undefined·null·symbol)
  • ▸1 object type (includes arrays, functions, dates, etc.)
  • ▸typeof null === 'object' is a bug (memorize this)
  • ▸Coercion: implicit — no; explicit — yes

⚡ Try It Yourself — typeof · Array.isArray

Check each of the 7 types using typeof, and also verify the well-known traps with null and arrays.
✏️ JS 코드
📟 Console output
▶ Press the Run button
⚠️ Runs in a browser sandbox — only console.log() is supported; alert/fetch are not.

🤖 Try Asking AI Like This

Knowing the concepts from this lesson lets you give AI specific instructions. Instead of a vague 'fix this,' you make vocabulary-backed requests — that is where token savings begin.

  • ▸'Add appropriate TypeScript type annotations to this variable'
  • ▸'Unify this mixed use of === and == to === and make the intent explicit'
  • ▸'Add an unknown type and a type guard to the JSON.parse result in this code'

Why This Reduces Tokens

Without the concepts, even after receiving an AI response you still have to ask 'What does that mean?' again. That follow-up question is what eats up tokens. Learn the concept once and the conversation ends in a single exchange.

Read this first: Variables (var, let, const)
Up next: Control Flow — if · for · while · switch
PreviousListNext
Data Types - JavaScript