Entendiendo Array.from() y NodeList en Javascript

La función Array.from() en JavaScript es un poderoso método que convierte objetos similares a arreglos en arreglos reales. Es particularmente útil cuando trabajamos con objetos que tienen comportamientos parecidos a arreglos, conocidos como array-like objects. Un ejemplo común de esto es cuando usamos el método querySelectorAll(), que devuelve un objeto NodeList.

¿Qué es NodeList?

NodeList es una colección de nodos, similar a un arreglo. Sin embargo, no es un verdadero arreglo, por lo que no puede usar la mayoría de los métodos de los arreglos, como map(), reduce(), forEach(), etc. En el ejemplo de la pregunta original, la función querySelectorAll('.article .title') devuelve una NodeList que contiene todos los elementos con la clase .title que son descendientes de cualquier elemento con la clase .article.

¿Por qué usamos Array.from()?

Aquí es donde entra en juego Array.from(). Este método crea una nueva instancia de Array a partir de un objeto iterable o array-like. En otras palabras, Array.from() transforma nuestro NodeList en un verdadero Array, permitiéndonos utilizar los métodos del Array, como map(), que en este caso se usa para crear un nuevo arreglo con el contenido de texto de cada título.

Por lo tanto, en el código:

let titleElements = document.querySelectorAll('.article .title');
let titles = Array.from(titleElements).map( t => t.textContent );
console.log(titles);

El uso de Array.from() es crucial porque querySelectorAll devuelve una NodeList, que no tiene el método map. Array.from(titleElements) convierte la NodeList en un Array, permitiéndonos usar .map() y generar un nuevo arreglo que contiene solo el texto de cada título.

Mejores prácticas y consejos adicionales

Si bien Array.from() es una excelente solución para trabajar con NodeList y otros objetos similares a arreglos, también puedes usar el operador de propagación (...) para lograr resultados similares en contextos en los que esté soportado:

let titles2 = [...titleElements].map( t => t.textContent );

Este código tiene el mismo resultado que el ejemplo con Array.from(). Sin embargo, ten en cuenta que estas soluciones pueden tener diferencias sutiles en términos de rendimiento y compatibilidad de navegador, por lo que siempre es una buena idea probar y decidir qué método se adapta mejor a tus necesidades específicas.