JavaScript es un lenguaje de programaci\u00f3n din\u00e1mico y flexible que ofrece varias herramientas para gestionar colecciones de datos. Entre estas herramientas destacan los iterables<\/strong> e iteradores<\/strong>, que permiten recorrer y manipular secuencias de elementos de manera eficiente. Comprender c\u00f3mo funcionan los iterables e iteradores es esencial para escribir c\u00f3digo limpio y efectivo en JavaScript. En este art\u00edculo, exploraremos en profundidad estos conceptos, con ejemplos pr\u00e1cticos y recomendaciones de recursos adicionales para profundizar en el tema.<\/p>\n\n\n\n Un iterable<\/strong> es un objeto que puede ser recorrido (iterado) utilizando una estructura de control como un bucle Un iterador<\/strong> es un objeto que define un m\u00e9todo Crear tus propios iterables en JavaScript es relativamente sencillo. Solo necesitas implementar el m\u00e9todo Los generadores<\/strong> son una caracter\u00edstica especial de JavaScript que facilita la creaci\u00f3n de iteradores. Un generador es una funci\u00f3n especial que puede pausar su ejecuci\u00f3n y luego reanudarla, permitiendo producir una secuencia de valores en el tiempo.<\/p>\n\n\n\n\u00bfQu\u00e9 son los Iterables?<\/h2>\n\n\n\n
for...of<\/code>. En t\u00e9rminos m\u00e1s t\u00e9cnicos, un iterable es cualquier objeto que implementa el m\u00e9todo Symbol.iterator<\/code>, el cual retorna un iterador<\/strong>. Los iterables incluyen estructuras de datos incorporadas en JavaScript como Array<\/code>, String<\/code>, Map<\/code>, Set<\/code> y m\u00e1s.<\/p>\n\n\n\nEjemplos de Iterables en JavaScript<\/h3>\n\n\n\n
\/\/ Array como iterable\nconst array = [1, 2, 3];\nfor (const value of array) {\n console.log(value); \/\/ 1, 2, 3\n}\n\n\/\/ String como iterable\nconst string = \"Hello\";\nfor (const char of string) {\n console.log(char); \/\/ H, e, l, l, o\n}<\/code><\/pre>\n\n\n\n\u00bfQu\u00e9 son los Iteradores?<\/h2>\n\n\n\n
next()<\/code>, el cual devuelve un objeto con dos propiedades: value<\/code> (el pr\u00f3ximo valor en la secuencia) y done<\/code> (un booleano que indica si la iteraci\u00f3n ha terminado). Los iteradores permiten acceder a los elementos de un iterable uno a uno, facilitando un control m\u00e1s preciso sobre el proceso de iteraci\u00f3n.<\/p>\n\n\n\nEjemplo de un Iterador en JavaScript<\/h3>\n\n\n\n
const iterable = [1, 2, 3];\nconst iterator = iterable[Symbol.iterator]();\n\nconsole.log(iterator.next()); \/\/ { value: 1, done: false }\nconsole.log(iterator.next()); \/\/ { value: 2, done: false }\nconsole.log(iterator.next()); \/\/ { value: 3, done: false }\nconsole.log(iterator.next()); \/\/ { value: undefined, done: true }<\/code><\/pre>\n\n\n\nC\u00f3mo Crear Iterables Personalizados<\/h2>\n\n\n\n
Symbol.iterator<\/code> que retorne un iterador.<\/p>\n\n\n\nEjemplo de un Iterable Personalizado<\/h3>\n\n\n\n
const customIterable = {\n [Symbol.iterator]() {\n let step = 0;\n return {\n next() {\n step++;\n if (step <= 5) {\n return { value: step, done: false };\n }\n return { value: undefined, done: true };\n }\n };\n }\n};\n\nfor (const value of customIterable) {\n console.log(value); \/\/ 1, 2, 3, 4, 5\n}<\/code><\/pre>\n\n\n\nGeneradores: Una Forma Conveniente de Crear Iteradores<\/h2>\n\n\n\n
Ejemplo de un Generador<\/h3>\n\n\n\n
function* generator() {\n yield 1;\n yield 2;\n yield 3;\n}\n\nconst gen = generator();\nconsole.log(gen.next()); \/\/ { value: 1, done: false }\nconsole.log(gen.next()); \/\/ { value: 2, done: false }\nconsole.log(gen.next()); \/\/ { value: 3, done: false }\nconsole.log(gen.next()); \/\/ { value: undefined, done: true }<\/code><\/pre>\n\n\n\nComparaci\u00f3n entre Iterables e Iteradores<\/h2>\n\n\n\n