Symbol.asyncIterator

Estoy re-leyendo algunas partes de la referencia de Javascript en la MDN y me encuentro con varias características de Javascript que para mi eran desconocidas y que son muy interesantes.

En este caso, un objeto con una propiedad tipo Symbol.asyncIterator que a la vez es un generador que puede producir (yield) un resultado, que después se usa un ciclo for await. ¡Simplemente genial!.

const delayedResponses = {
  delays: [500, 1300, 3500],

  wait(delay) {
    return new Promise((resolve) => {
      setTimeout(resolve, delay);
    });
  },

  async *[Symbol.asyncIterator]() {
    for (const delay of this.delays) {
      await this.wait(delay);
      yield `Delayed response for ${delay} milliseconds`;
    }
  },
};

(async () => {
  for await (const response of delayedResponses) {
    console.log(response);
  }
})();

// Expected output: "Delayed response for 500 milliseconds"
// Expected output: "Delayed response for 1300 milliseconds"
// Expected output: "Delayed response for 3500 milliseconds"

Estaba leyendo este excelente artículo en Frontend Masters donde se describen algunas de las nuevas características presentes en Javascript y otras más que se esperan para este año o finales del mismo, entre ellas las que más destaco son las siguientes:

Iterator.from:

const result = Iterator.from(array)
  .map(x => x * 2)
  .filter(x => x > 10)
  .take(3)
  .toArray(); // No new arrays created, computation stops after 3

Métodos en Set:

const youKnow  = new Set(["JS", "Python", "CSS", "SQL"]);
const jobNeeds  = new Set(["JS", "TypeScript", "Python"]);

// Skills the job wants that you already have
youKnow.intersection(jobNeeds); // → Set {"JS", "Python"}

// Everything combined — your full stack + job needs
youKnow.union(jobNeeds); // → Set {"JS", "Python", "CSS", "SQL", "TypeScript"}

// What the job needs that you DON'T know yet (skill gaps)
jobNeeds.difference(youKnow); // → Set {"TypeScript"}

// Skills you have that the job doesn't care about
youKnow.difference(jobNeeds); // → Set {"CSS", "SQL"}

// Skills that appear in only one set, not both
youKnow.symmetricDifference(jobNeeds); // → Set {"CSS", "SQL", "TypeScript"}

// Are all job requirements a subset of what you know?
jobNeeds.isSubsetOf(youKnow); // → false

// Do you have every skill and more?
youKnow.isSupersetOf(jobNeeds); // → false

// Do you and the job have zero overlap?
youKnow.isDisjointFrom(jobNeeds); // → false

Promise.try:

Promise.try(() => loadUser(id))
  .then(user  => render(user))
  .catch(err  => showError(err));  

Import attributes: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with

import data from "./file.json" with { type: 'json' }

import exampleStyles from "https://example.com/example_styles.css" with { type: "css" };

document.adoptedStyleSheets.push(exampleStyles);

using y await using: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/using

class FileHandle {
  constructor(path) {
    this.path = path;
    console.log(`Opened ${path}`);
  }

  async write(data) {
    // ... write data
  }

  async [Symbol.asyncDispose]() {
    await someFlushOperation();
    console.log(`Flushed and closed ${this.path}`);
  }
}

async function saveData() {
  await using file = new FileHandle("output.txt");
  await file.write("hello world");
  // file is automatically flushed + closed here, even if an error is thrown
}

Array.fromAsync: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fromAsync

function createAsyncIter() {
  let i = 0;
  return {
    [Symbol.asyncIterator]() {
      return {
        async next() {
          if (i > 2) return { done: true };
          i++;
          return { value: Promise.resolve(i), done: false };
        },
      };
    },
  };
}

Array.fromAsync(createAsyncIter()).then((array) => console.log(array));

Intl.Collator:

const words = ['äpfel', 'Zebra', 'Bär', 'Apfel', 'über'];
const collator = new Intl.Collator('de');

const sorted = words.sort(collator.compare);
console.log(sorted); // ['Apfel', 'äpfel', 'Bär', 'über', 'Zebra']

Aunque me considero un programador con experiencia y llevo más de 15 años desarrollando aplicaciones web, me sorprendió no conocer la propiedad ownerDocument.defaultView.

Básicamente, devuelve el objeto window (o null) asociado a un nodo DOM especifico.

Se puede usar para adjuntar listeners de forma segura al window correcto desde un componente que se renderiza fuera de la ventana principal (por ejemplo, usando portales).

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  const ref = useRef(null);

  useEffect(() => {
    const win = ref.current?.ownerDocument.defaultView || window;

    const toggle = (e) => {
      if (e.metaKey && e.key === "d") {
        e.preventDefault();
        setTheme((t) => (t === "dark" ? "light" : "dark"));
      }
    };

    win.addEventListener("keydown", toggle);

    return () => win.removeEventListener("keydown", toggle);
  }, []);

  return (
    <div ref={ref} className={theme}>
      {children}
    </div>
  );
}

Del mismo articulo tambien aprendí sobre useId y cache.

Referencia: https://shud.in/thoughts/build-bulletproof-react-components, gran artículo.

Desde hace mucho tiempo quería empezar a desarrollar un videojuego. Ahora que mi hijo de 7 años me pidió un juego para su próximo cumpleaños, siento que es un gran momento para comenzar.

No tengo problema en aprender un lenguaje nuevo como Python, C# o Rust, pero como desarrollador web quería empezar con mi lenguaje principal: JavaScript.

Para aprender (y ensuciarme las manos), quiero replicar el juego que hizo Drew Conley en este video: Build a Multiplayer Game with JavaScript & Firebase.

Más avances pronto…