JavaScript Academy · Lección

Symbols conocidos

Personalice el comportamiento con Symbol.iterator y otros Symbols.

Symbols conocidos es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

Símbolos conocidos

Los símbolos conocidos son símbolos integrados almacenados en el objeto Symbol. Permiten personalizar el comportamiento de los objetos con funcionalidades del lenguaje, como la iteración y la conversión.

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

Symbol.iterator

Symbol.iterator define cómo se itera un objeto mediante un bucle for-of y el operador spread. Los arrays y las cadenas integrados ya lo proporcionan.

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

Cómo hacer iterable un objeto

Para que cualquier objeto pueda usarse en un bucle for-of, añádale un método Symbol.iterator que devuelva un iterador con un método next.

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

Iteración con spread

Como Symbol.iterator también controla la expansión, un iterable personalizado puede expandirse dentro de un 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 permite que un objeto controle cómo se convierte en un valor primitivo en contextos numéricos, de cadena o predeterminados.

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

El argumento hint

El controlador de conversión recibe un hint de number, string o default, lo que permite devolver un valor adecuado para cada situación.

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

Symbol.toStringTag

Symbol.toStringTag personaliza el texto que toString predeterminado muestra para un objeto, algo útil para las etiquetas de tipos personalizados.

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

Symbol.hasInstance

Symbol.hasInstance permite que una clase u objeto personalice el comportamiento del operador instanceof.

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

Los elementos integrados también los usan

Los arrays, mapas, conjuntos y cadenas implementan Symbol.iterator; por eso funcionan perfectamente con for-of y spread.

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

Por qué son importantes

Los símbolos conocidos son puntos de extensión: permiten que sus objetos se integren de forma natural con las operaciones integradas del lenguaje, en lugar de recibir un tratamiento especial.

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

Cómo descubrirlos

El objeto Symbol los expone como propiedades estáticas. Puede hacer referencia a ellos como Symbol.iterator y Symbol.toPrimitive siempre que lo necesite.

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

Comprobación rápida

Compruebe sus conocimientos sobre los símbolos conocidos.

Resumen

Resumen: Los símbolos conocidos personalizan el comportamiento del lenguaje.

Symbol.iterator controla for-of y spread
Symbol.toPrimitive controla las conversiones mediante un hint
Symbol.toStringTag etiqueta los objetos
Symbol.hasInstance personaliza instanceof

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

Preguntas frecuentes

¿La lección «Symbols conocidos» es gratis?

Sí — el texto completo de «Symbols conocidos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Symbols conocidos»?

Personalice el comportamiento con Symbol.iterator y otros Symbols. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Symbols conocidos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy