JavaScript Academy · Lesson

Well-Known Symbols

Customize behavior with Symbol.iterator and others.

Lesson 4 of 413 steps

Well-Known Symbols is a free JavaScript Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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])

Free to start

Learn JavaScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 59
Lessons: 200

Start learning free View the full course

Frequently Asked Questions

Is the “Well-Known Symbols” lesson free?

Yes — any 3 lessons of the JavaScript Academy learning path, including “Well-Known Symbols”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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