JavaScript Academy · Lesson

Well-Known Symbols

Customize behavior with Symbol.iterator and others.

Well-Known Symbols is a free JavaScript Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Well-Known Symbols

Well-known symbols are built-in symbols stored on the Symbol object. They let you customize how objects behave with language features like iteration and conversion.

console.log(typeof Symbol.iterator)
console.log(typeof Symbol.toPrimitive)

Symbol.iterator

Symbol.iterator defines how an object is iterated by a for-of loop and the spread operator. Built-in arrays and strings already provide it.

const arr = [10, 20]
const it = arr[Symbol.iterator]()
console.log(it.next().value)

Making an Object Iterable

You add a Symbol.iterator method that returns an iterator with a next method to make any object usable in a for-of loop.

const range = {
  from: 1,
  to: 3,
  [Symbol.iterator]() {
    let cur = this.from
    const last = this.to
    return {
      next() {
        return cur <= last ? { value: cur++, done: false } : { value: undefined, done: true }
      }
    }
  }
}
for (const n of range) {
  console.log(n)
}

Iterating With Spread

Because Symbol.iterator drives spreading too, a custom iterable can be expanded into an array.

const nums = {
  [Symbol.iterator]() {
    let i = 0
    return { next() { return i < 3 ? { value: i++, done: false } : { value: undefined, done: true } } }
  }
}
console.log([...nums])

Symbol.toPrimitive

Symbol.toPrimitive lets an object control how it converts to a primitive in numeric, string, or default contexts.

const money = {
  amount: 50,
  [Symbol.toPrimitive](hint) {
    if (hint === "number") return this.amount
    return "$" + this.amount
  }
}
console.log(+money)
console.log(money + "")

The Hint Argument

The conversion handler receives a hint of number, string, or default, letting you return a suitable value for each situation.

const obj = {
  [Symbol.toPrimitive](hint) {
    return hint
  }
}
console.log(+obj)
console.log(obj + "")
console.log(String(obj))

Symbol.toStringTag

Symbol.toStringTag customizes the text that the default toString reports for an object, useful for custom type labels.

const widget = {
  [Symbol.toStringTag]: "Widget"
}
console.log(Object.prototype.toString.call(widget))

Symbol.hasInstance

Symbol.hasInstance lets a class or object customize the behavior of the instanceof operator.

class Even {
  static [Symbol.hasInstance](num) {
    return num % 2 === 0
  }
}
console.log(4 instanceof Even)
console.log(3 instanceof Even)

Built-Ins Use Them Too

Arrays, maps, sets, and strings all implement Symbol.iterator, which is why they work seamlessly with for-of and spread.

const set = new Set([1, 2, 3])
console.log([...set])

Why They Matter

Well-known symbols are extension points: they let your objects integrate naturally with built-in language operations rather than being special-cased.

const list = {
  items: ["a", "b"],
  [Symbol.iterator]() {
    return this.items[Symbol.iterator]()
  }
}
for (const x of list) {
  console.log(x)
}

Discovering Them

The Symbol object exposes these as static properties. You can reference them like Symbol.iterator and Symbol.toPrimitive wherever needed.

console.log(typeof Symbol.iterator)
console.log(typeof Symbol.toStringTag)
console.log(typeof Symbol.hasInstance)

Quick Check

Test your well-known symbol knowledge.

Recap

Recap: Well-known symbols customize language behavior.

Symbol.iterator drives for-of and spread
Symbol.toPrimitive controls conversions via a hint
Symbol.toStringTag labels objects
Symbol.hasInstance customizes instanceof

const r = { [Symbol.iterator]() { let i = 0; return { next() { return i < 2 ? { value: i++, done: false } : { value: 0, done: true } } } } }
console.log([...r])

Frequently asked questions

Is the “Well-Known Symbols” lesson free?

Yes — the full text of “Well-Known Symbols” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Well-Known Symbols”?

Customize behavior with Symbol.iterator and others. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Well-Known Symbols” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy