How to Fix "TypeError" in JavaScript (Every Common Type)

A TypeError is thrown when an operation is performed on a value of the wrong type — calling something that is not a function, reassigning a constant, iterating a value that is not iterable, or reading a property of null. Below are the four you will hit most, each with its cause and fix.

"x is not a function"

You called something that is not callable — usually a typo, a method that does not exist on that type, or a value that is undefined because of a wrong import.

// ❌ typo in the method name
[1, 2, 3].puhs(4);
// ✅
[1, 2, 3].push(4);

// ❌ objects have no .map
const obj = { a: 1 };
obj.map(x => x);
// ✅ map over the values
Object.values(obj).map(x => x);

// ❌ default import from a module that only has named exports
import utils from "./utils.js";
utils.format();
// ✅ named import
import { format } from "./utils.js";
format();

Still stuck? console.log(typeof x.y) — if it is not "function", check the spelling, whether the method exists on that value's type, and that your import style (default vs named) matches the module.

"Cannot read properties of null (reading 'x')"

Same family as the undefined error, but the value is null — an *intentional* empty. Most often a failed DOM lookup, or a script that ran before the element existed.

// ❌ selector matched nothing -> null
document.querySelector(".btn").addEventListener("click", fn);

// ✅ guard, and run after the element exists
const btn = document.querySelector(".btn");
btn?.addEventListener("click", fn);

"Assignment to constant variable"

You reassigned a const. The binding is fixed — use let if the variable needs to change.

// ❌
const count = 1;
count = 2;
// ✅
let count = 1;
count = 2;

// ❌ i++ reassigns a const each iteration
for (const i = 0; i < 3; i++) {}
// ✅
for (let i = 0; i < 3; i++) {}

"x is not iterable"

You used for...of, spread, or array destructuring on something that is not iterable — a plain object, null, undefined, or a number.

// ❌ plain objects are not iterable
const obj = { a: 1, b: 2 };
for (const v of obj) {}
// ✅ iterate the values
for (const v of Object.values(obj)) {}

// ❌ async data still undefined
let items;
for (const it of items) {}
// ✅ await it, and guard with ?? []
const data = await getItems();
for (const it of (data ?? [])) {}

Arrays, strings, Map, Set and NodeList are iterable; plain objects are not — reach for Object.keys(), Object.values() or Object.entries().

Quick diagnostic checklist

1. "is not a function": console.log(typeof x) and check the method name and import style.
2. "Cannot read properties of null": log the left-hand value; for the DOM, confirm the selector matches and the script runs after the element exists.
3. "Assignment to constant variable": change const to let, or distinguish reassignment (throws) from mutation (allowed).
4. "is not iterable": confirm the value is an array/string/Map/Set — for objects use Object.values(); guard async sources with ?? [].

Reproduce any of these in XCODX Studio and the live console tells you exactly which value has the wrong type — fix it and re-run in the same tab, no setup.