Is it better to use the map directive or a normal js array map?

[jdcoldsmith]

I noticed that in the Lit documentation under "Templates" -> "Lists" that they use a normal js array map in order to render an unordered list. However, there is also a map directive that accomplishes the same thing. My question is which one is better to use, and why is it better?

Lit documentation use of js map: https://lit.dev/docs/templates/lists/#repeating-templates-with-map
Lit documentation use of map directive: https://lit.dev/docs/templates/directives/#map

[AndrewJakubowicz]

The primary difference is that the map directive works with any iterable, including arrays, sets, maps, and even generators, whilst Array.prototype.map only works on arrays. So it really depends on what iterable you are mapping over.

See https://lit.dev/tutorials/working-with-lists/#2 for more info!

[jdcoldsmith]

Ahh that makes perfect sense! Thank you very much!

[jdcoldsmith]

My follow up question would be is there any performance difference between using an Array.prototype.map and the Lit map directive?

[augustjk]

Performance difference would be minimal. The Lit map directive literally is just a for...of loop.

lit/packages/lit-html/src/directives/map.ts

Lines 23 to 33 in 08d48e3

	export function* map<T>(
	items: Iterable<T> | undefined,
	f: (value: T, index: number) => unknown
	) {
	if (items !== undefined) {
	let i = 0;
	for (const value of items) {
	yield f(value, i++);
	}
	}
	}

[jdcoldsmith]

Good to know! Thanks @augustjk!