El iterador de matriz es como una colección en vivo; si la matriz cambia durante la iteración, los siguientes elementos devueltos por el iterador reflejarán el cambio. Como puede ver en el enlace anterior, funciona incrementando un índice que comienza desde 0 hasta que se alcanza la longitud de la matriz.

 for (let skill of skills) {

es, en esta situación, casi equivalente a

 for (let i = 0; i < skills.length; i++) { const skill = skills[i]

El iterador de matriz no devuelve una cantidad estática de elementos determinados cuando se llama inicialmente al iterador; el siguiente elemento a devolver se determina sobre la marcha en cada iteración. Entonces, si .pop un elemento de la matriz dentro de una iteración, habrá una iteración menos en general que si no lo hubiera extraído, a menos que ya esté al final de la matriz.

Si hay 6 elementos en la matriz, como los hay aquí, aparecerá 3 veces y habrá 3 iteraciones menos que la cantidad de elementos, lo que da como resultado un total de 3 iteraciones y 3 elementos eliminados.

Si convirtió la matriz en una que no cambió al iterar sobre ella, .pop funcionaría. (Esto no es una recomendación, hay mejores formas de vaciar una matriz, solo como ilustración, para aclarar lo que está sucediendo).

 let skills = ["HTML", "CSS", "Javascript", "SASS", "Bootstrap", "Tailwind"]; for (let skill of [...skills]) { skills.pop(); } console.log(skills); // empty

Esto funciona porque [...skills] crea una matriz separada cuyos elementos no se eliminan cuando se llama a skills.pop .