1import{s as bp,p as xt,q as sp,e as o,k as e,H as r,c as l,o as c,m as p,a as g,r as v,d as n,f as u,u as _t,i as t,n as Tp}from"./scheduler.nkQMAI2i.js";import{S as Hp,i as Lp,c as _,a as x,m as b,t as T,b as H,d as L}from"./index.0kLV5Zph.js";import{g as Mp,a as tp}from"./Icon.7kVD2M3T.js";import{M as jp,I as vn,F as Cp}from"./FaqAccordion.Nra8iH9i.js";function Pp(dn){let i,w="If you want to iterate through an array in the markup of a Svelte component, youâll need to use the <code>{#each}</code> block. As a block to unique to Svelte, itâs something youâll need to learn and understand coming from any other framework. Youâll use it a lot!",y,m,k='<a href="#faqs">Skip to FAQâs</a>',d,h,bt='<a href="#123each125-blocks---the-basics"><code>{#each}</code> Blocks - The Basics</a>',mn,B,Tt="The syntax is simple. The most expansible version of the opening <code>{#each}</code> statement follows the basic format",hn,z,fn,pp=`<code class="language-svelte"><span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">array </span><span class="token keyword">as</span> <span class="token language-javascript">item<span class="token punctuation">,</span> index </span><span class="token language-javascript"><span class="token punctuation">(</span>key<span class="token punctuation">)</span></span><span class="token punctuation">}</span></span> 2 <span class="token comment"><!-- Do something --></span> 3<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span></code>`,yn,W,Ht="Where <code>key</code> and <code>index</code> are optional (however including a <code>key</code> value is recommended if the array will be mutated).",wn,F,Lt="For a shopping list app, you can display the items in the list using the following:",_n,U,xn,op=`<code class="language-svelte"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> 4 <span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Apples'</span><span class="token punctuation">,</span> <span class="token string">'Lettuce'</span><span class="token punctuation">,</span> <span class="token string">'Milk'</span><span class="token punctuation">]</span><span class="token punctuation">;</span> 5</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> 6 7<span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">list </span><span class="token keyword">as</span> <span class="token language-javascript">item<span class="token punctuation">}</span></span></span> 8 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 9<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span></code>`,bn,D,Mt="For any developer worth their salt, itâs not exactly rocket science.",Tn,Q,Hn,O,jt="But, in the real world, many situations arenât as straightforward as the example above.",Ln,Y,Ct="This article will walk through some of the quirks and limitations of the Svelte <code>{#each}</code> block and how to resolve them. Iâll also present some Easter eggs that you might not be aware of that will level up your workflow when working with arrays in your Svelte markup.",Mn,M,Pt='<a href="#quirks-and-limitations">Quirks and Limitations</a>',jn,j,$t='<a href="#quirk-1-typescript">Quirk #1: Typescript</a>',Cn,N,Et="Svelte unfortunately doesnât allow for typescript syntax <strong>inside of the markup</strong>. Therefore, when using type assertions, or non-null assertions, the Svelte compiler say âno ð â .",Pn,J,$n,G,
9St="Lets take this example - we want to pass in some array, which contains elements of type <code>number</code>, or <code>undefined</code>.",En,K,qt="When we want to iterate over the elements in the array and skip the undefined values, we would intuitively do it this way:",Sn,V,qn,lp=`<code class="language-svelte"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> 10 <span class="token keyword">export</span> <span class="token keyword">let</span> <span class="token literal-property property">numberArray</span><span class="token operator">:</span> <span class="token punctuation">(</span>number <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> 11</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> 12 13<span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">numberArray<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">Boolean</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">)</span> </span><span class="token keyword">as</span> <span class="token language-javascript">item<span class="token punctuation">}</span></span></span> 14 <span class="token comment"><!-- â Argument of type 'number | undefined' is not assignable to parameter of type 'number'. â --></span> 15 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 16<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span></code>`,An,X,At="Given that <code>Boolean(element)</code>, or <code>element !== undefined</code> still does not protect item from not being <code>undefined</code>, When we attempt to use the Math.floor() method, the compiler spits an error that we canât use undefined values.",In,Z,It="A common fix to this is to add a typescript assertion by adding <code>item as number</code> to fix the compiler problem:",Rn,aa,Bn,cp=`<code class="language-svelte"><span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">numberArray<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">Boolean</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">)</span> </span><span class="token keyword">as</span> <span class="token language-javascript">item<span class="token punctuation">}</span></span></span> 17 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>item <span class="token keyword">as</span> number<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token comment"><!-- â Unexpected token: "as" --></span> 18<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span></code>`,zn,na,Rt="But because the markup doesnât recognize <code>as</code> as a valid token in the context of the block, the compiler again says: âNoâ.",Wn,sa,Fn,ta,Bt="How about using the <code>!</code> non-null assertion?",Un,ea,Dn,up=`<code class="language-svelte"><span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">numberArray<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">Boolean</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">)</span> </span><span class="token keyword">as</span> <span class="token language-javascript">item<span class="token punctuation">}</span></span></span> 19 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>item<span class="token operator">!</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token comment"><!-- â Unexpected token: "!" --></span> 20<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span></code>`,Qn,pa,zt="You get the picture⦠Svelte markup just canât handle typescript syntax ð.",On,oa,Wt="So if you want to assert some type inside of your block when utilizing and <code>{#each}</code> block, youâre out of luck.",Yn,C,Ft='<a href="#the-workaround">
20The Workaround</a>',Nn,la,Ut="You donât get typescript syntax in your markup, but you <em>do</em> get it in your in your <code><script></code> tags. So the best solution now is to pull the expression <strong>out of</strong> your <code>{#each}</code> block, and pull it into a <strong>new</strong> variable where you <strong>can</strong> apply the type assertions.",Jn,ca,Dt="In this example, we made this a reactive variable called <code>filteredNumArray</code>.",Gn,ua,Kn,ip=`<code class="language-svelte"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> 21 <span class="token keyword">export</span> <span class="token keyword">let</span> <span class="token literal-property property">numberArray</span><span class="token operator">:</span> <span class="token punctuation">(</span>number <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// âï¸ Create new type asserted variable here â</span> 22 <span class="token literal-property property">$</span><span class="token operator">:</span> filteredNumArray <span class="token operator">=</span> numberArray<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">Boolean</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">as</span> number<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> 23</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> 24 25<span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">filteredNumArray </span><span class="token keyword">as</span> <span class="token language-javascript">item<span class="token punctuation">}</span></span></span> 26 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 27<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span></code>`,Vn,ia,Qt="The compiler is happy, youâre (kind of) happy, but most of all, the types work. You get to carry on with only one extra (kind of pointless) variable to manage.",Xn,ka,Zn,ra,Ot='Thankfully, the Svelte development team are working to <a href="https://github.com/sveltejs/svelte/pull/9482" rel="nofollow">allow typescript syntax inside markup</a> with the upcoming release of <a href="https://sveltekit.io/blog/svelte-5" rel="nofollow">Svelte 5</a>. So if following that workaround above is not your style, youâre now able to create or upgrade current Svelte projects to the <a href="https://www.npmjs.com/package/svelte?activeTab=versions" rel="nofollow">Svelte 5 beta</a>.',as,ga,Yt="If youâre not running a mission-critical app then Iâd even recommend you do this, at least to get familiar with some of the new Svelte syntax moving forward.",ns,P,Nt='<a href="#quirk-2-non-updating-lists">Quirk 2: Non-updating Lists</a>',ss,va,Jt="If you have some exported property which is to be iterated over in your Svelte markup, but this value can change, then you may
27not see the changes reflected in your app.",ts,da,Gt="For example:",es,ma,ps,kp=`<code class="language-svelte"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> 28 <span class="token keyword">export</span> <span class="token keyword">let</span> <span class="token literal-property property">array</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> string<span class="token punctuation">;</span> age<span class="token operator">:</span> number <span class="token punctuation">}</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> 29</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> 30 31<span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">array </span><span class="token keyword">as</span> <span class="token language-javascript">item<span class="token punctuation">}</span></span></span> 32 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>item<span class="token punctuation">.</span>name<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 33<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span></code>`,os,ha,Kt="Given that the value of the array is being passed down from a parent component, the <code>{#each}</code> block will be printed when the component is mounted, however if the value changes in the parent - this wonât be reflected in the child. And when the <code>array</code> value changes, youâre left showing the stale values of the old array.",ls,$,Vt='<a href="#the-fix">The Fix</a>',cs,fa,Xt="Thereâs a super simple solution to this, and it is to <strong>wrap the <code>{#each}</code> block in a <code>{#key}</code> block</strong>.",us,ya,is,rp=`<code class="language-svelte"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> 34 <span class="token keyword">export</span> <span class="token keyword">let</span> <span class="token literal-property property">array</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> string<span class="token punctuation">;</span> age<span class="token operator">:</span> number <span class="token punctuation">}</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> 35</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> 36 37<span class="token language-javascript"><span class="token punctuation">{</span>#key array<span class="token punctuation">}</span></span> 38 <span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">array </span><span class="token keyword">as</span> <span class="token language-javascript">item<span class="token punctuation">}</span></span></span> 39 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>item<span class="token punctuation">.</span>name<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 40 <span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span> 41<span class="token language-javascript"><span class="token punctuation">{</span><span class="token operator">/</span>key<span class="token punctuation">}</span></span></code>`,ks,wa,Zt="The <code>{#key}</code> block effectively destroys the containing element and recreates it every time one of its dependencies change.",rs,_a,ae="The dependency (which is <code>array</code> in our example) can be in the form of an expression or value, like this:",gs,xa,vs,gp=`<code class="language-svelte"><span class="token language-javascript"><span class="token punctuation">{</span>
41#key dependency<span class="token punctuation">}</span></span> 42 <span class="token comment"><!-- Contents --></span> 43<span class="token language-javascript"><span class="token punctuation">{</span><span class="token operator">/</span>key<span class="token punctuation">}</span></span></code>`,ds,ba,ne="Whenever dependency changes, the contents inside will be rerendered with the most up-to-date version of the application state.",ms,E,se='<a href="#easter-eggs">Easter Eggs</a>',hs,Ta,te="If youâre looking for interesting ways to level up your workflow in Svelte, here are some less commonly known treats you can use inside your <code>{#each}</code> blocks.",fs,Ha,ys,S,ee='<a href="#trick-1-local-constants---the-123const125-tag">Trick #1: Local Constants - The <code>{@const}</code> Tag</a>',ws,La,pe="It took me a few months to start using this. I had seen it in passing and never took the 5 seconds it takes to understand it. Donât be like me, and try to understand this.",_s,Ma,oe="The local constant <code>{@const}</code> can exist inside an <code>{#each}</code> block, which creates and assigns variable that exists <strong>only</strong> inside the scope of the <code>{#each}</code> block. So now, anything can refer to the new local constant.",xs,ja,le="The <code>{@const}</code> tag within <code>{#each}</code> blocks are useful in 2 flavors:",bs,Ca,ce="<li>Improving readability</li> <li>Declaring some calculated value to apply to the values inside the block without having to do this for each instance.</li>",Ts,Pa,ue="For example, letâs improve the readability of this ugly <code>{#each}</code> block I was working with today:",Hs,$a,Ls,vp=`<code class="language-svelte"><span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>improvements<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator">!</span>auditCats<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span> </span><span class="token keyword">as</span> <span class="token language-javascript">improvement<span class="token punctuation">,</span> i<span class="token punctuation">}</span></span></span> 44 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ProgressRadial</span> 45 <span class="token attr-name">value=</span><span class="token language-javascript"><span class="token punctuation">{</span>improvements<span class="token punctuation">[</span>improvement<span class="token punctuation">]</span><span class="token punctuation">.</span>score<span class="token punctuation">}</span></span> 46 <span class="token attr-name">meter</span><span class="token attr-value"><span class="token punctuation">=</span>{improvements[improvement].score</span> <span class="token punctuation">></span></span> 0.89 47 ? 'green' 48 : improvements[improvement].score > 0.49 && improvements[improvement].score < 0.9 49 ? 'yellow' 50 : improvements[improvement].score < 0.5 51 ? 'red' 52 : 'gray'}> 53 /> 54<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span></code>`,Ms,Ea,ie="The amount of times we had to type <code>improvements[improvement].score</code> in the <code>{#each}</code> block is obnoxious and painful to read.",js,Sa,ke="So letâs create the local variable <code>score</code>:",Cs,qa,Ps,dp='<code class="language-svelte"><span class="token language-javascript"><span class="token punctuation">{</span>@<span class="token keyword">const</span>
54 score <span class="token operator">=</span> improvements<span class="token punctuation">[</span>improvement<span class="token punctuation">]</span><span class="token punctuation">.</span>score<span class="token punctuation">}</span></span></code>',$s,Aa,re="And we can pop it at the top of the <code>{#each}</code> block, and replace all instances of <code>improvements[improvement].score</code> with just <code>score</code>.",Es,Ia,Ss,mp=`<code class="language-svelte"><span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>improvements<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator">!</span>auditCats<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span> </span><span class="token keyword">as</span> <span class="token language-javascript">improvement<span class="token punctuation">,</span> i<span class="token punctuation">}</span></span></span> 55 <span class="token language-javascript"><span class="token punctuation">{</span>@<span class="token keyword">const</span> score <span class="token operator">=</span> improvements<span class="token punctuation">[</span>improvement<span class="token punctuation">]</span><span class="token punctuation">.</span>score<span class="token punctuation">}</span></span> 56 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ProgressRadial</span> 57 <span class="token attr-name">value=</span><span class="token language-javascript"><span class="token punctuation">{</span>score<span class="token punctuation">}</span></span> 58 <span class="token attr-name">meter</span><span class="token attr-value"><span class="token punctuation">=</span>{score</span> <span class="token punctuation">></span></span> 0.89 59 ? 'green' 60 : score > 0.49 && score < 0.9 61 ? 'yellow' 62 : score < 0.5 63 ? 'red' 64 : 'gray'}> 65 /> 66<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span></code>`,qs,Ra,ge="Beautiful, ainât it!",As,f,ve='<iframe src="https://giphy.com/embed/3o7aCWJavAgtBzLWrS" loading="lazy" width="100%" height="100%" style="position:absolute" frameborder="0" class="giphy-embed" allowfullscreen=""></iframe>',Ba,de='<a href="https://giphy.com/gifs/originals-bob-ross-stick-around-3o7aCWJavAgtBzLWrS">via GIPHY</a>',Is,za,me="This gets particularly useful if you wanted to do some processing to some of the nested values you wished to use inside as well",Rs,Wa,he='Letâs look at an example from the <a href="https://svelte.dev/docs/special-tags#const" rel="nofollow">official Svelte Docs</a>, with a slight amendment to better highlight the importance of the local constant:',Bs,Fa,zs,hp=`<code class="language-svelte"><span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">boxes </span><span class="token keyword">as</span> <span class="token language-javascript">box<span class="token punctuation">}</span></span></span> 67 <span class="token language-javascript"><span class="token punctuation">{</span>@<span class="token keyword">const</span> area <span class="token operator">=</span> box<span class="token punctuation">.</span>width <span class="token operator">*</span> box<span class="token punctuation">.</span>height<span class="token punctuation">}</span></span> 68 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Area: <span class="token language-javascript"><span class="token punctuation">{</span>box<span class="token punctuation">.</span>width<span class="token punctuation">}</span></span> * <span class="token language-javascript"><span class="token punctuation">{</span>box<span class="token punctuation">.</span>height<span class="token punctuation">}</span></span> = <span class="token language-javascript"><span class="token punctuation">{</span>area<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 69 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Price in Outdoor Area: $<span class="token language-javascript"><span class="token punctuation">{</span>area <span class="token operator">*</span> <span class="token number">3</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 70 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Price in Undercover Shed: $<span class="token language-javascript"><span class="token punctuation">{</span>area <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 71<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span></code>`,Ws,Ua,fe="Here we calculate the <code>area</code> of each box, and make it local constant so that we can access it in the <code>{#each}</code> block.",Fs,Da,ye="For comparison, without the <code>{@const}</code> tag:",Us,Qa,Ds,fp=`<code class="language-svelte"><span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">boxes </span><span class="token keyword">as</span> <span class="token language-javascript">box<span class="token punctuation">}</span></span></span> 72 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Area: <span class="token language-javascript"><span class="token punctuation">{</span>box<span class="token punctuation">.</span>width<span class="token punctuation">}</span></span> * <span class="token language-javascript"><span class="token punctuation">{</span>box<span class="token punctuation">.</span>height<span class="token punctuation">}</span></span> = <span class="token language-javascript"><span class="token punctuation">{</span>box<span class="token punctuation">.</span>width <span class="token operator">*</span> box<span class="token punctuation">.</span>height<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 73 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Price in Outdoor Area: $<span class="token language-javascript"><span class="token punctuation">{</span>box<span class="token punctuation">.</span>width <span class="token operator">*</span> box<span class="token punctuation">.</span>height <span class="token operator">*</span> <span class="token number">3</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 74 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Price in Undercover Shed: $<span class="token language-javascript"><span class="token punctuation">{</span>box<span class="token punctuation">.</span>width <span class="token operator">*</span> box<span class="token punctuation">.</span>height <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 75<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span></code>`,Qs,Oa,we="Donât repeat the <code>box.width * box.height</code> expression if you donât have to!",Os,q,_e='<a href="#using-multiple-local-constants">Using Multiple Local Constants</a>',Ys,Ya,xe=`You can use as many local constants as youâd like. 76This is important when iterating over fairly complex objects:`,Ns,Na,Js,yp=`<code class="language-svelte"><span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">data<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>categories </span><span class="token keyword">as</span> <span class="token language-javascript">category<span class="token punctuation">}</span></span></span> 77 <span class="token language-javascript"><span class="token punctuation">{</span>@<span class="token keyword">const</span> creator <span class="token operator">=</span> category<span class="token punctuation">.</span>data<span class="token punctuation">.</span>creator<span class="token punctuation">}</span></span> 78 <span class="token language-javascript"><span class="token punctuation">{</span>@<span class="token keyword">const</span> details <span class="token operator">=</span> category<span class="token punctuation">.</span>data<span class="token punctuation">.</span>details<span class="token punctuation">}</span></span> 79 <span class="token language-javascript"><span class="token punctuation">{</span>@<span class="token keyword">const</span> date <span class="token operator">=</span> category<span class="token punctuation">.</span>data<span class="token punctuation">.</span>date<span class="token punctuation">}</span></span> 80 <span class="token language-javascript"><span class="token punctuation">{</span>@<span class="token keyword">const</span> formattedDay <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>date<span class="token punctuation">.</span>day<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>date<span class="token punctuation">.</span>hour<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>date<span class="token punctuation">.</span>minute<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src=</span><span class="token language-javascript"><span class="token punctuation">{</span>creator<span class="token punctuation">.</span>
80imageUrl<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> 81 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>creator<span class="token punctuation">.</span>name<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 82 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>creator<span class="token punctuation">.</span>email<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 83 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>details<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 84 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>details<span class="token punctuation">.</span>description<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 85 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>formattedDay<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 86<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span></code>`,Gs,Ja,be="Here, have added local variables for the <code>
86creator</code>, <code>details</code>, and the <code>category</code>.",Ks,Ga,Vs,Ka,Te="Creating these, alleviates us from having to type a bunch of nested data inside the <code>{#each}</code> block.",Xs,Va,He="Without the <code>{@const}</code> tags inside this <code>{#each}</code> block, it would look like this:",Zs,Xa,at,wp=`<code class="language-svelte"><span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">data<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>categories </span><span class="token keyword">as</span> <span class="token language-javascript">category<span class="token punctuation">}</span></span></span> 87 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src=</span><span class="token language-javascript"><span class="token punctuation">{</span>category<span class="token punctuation">.</span>data<span class="token punctuation">.</span>creator<span class="token punctuation">.</span>imageUrl<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> 88 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>category<span class="token punctuation">.</span>data<span class="token punctuation">.</span>creator<span class="token punctuation">.</span>name<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 89 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>category<span class="token punctuation">.</span>data<span class="token punctuation">.</span>creator<span class="token punctuation">.</span>email<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 90 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>category<span class="token punctuation">.</span>data<span class="token punctuation">.</span>details<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 91 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>category<span class="token punctuation">.</span>data<span class="token punctuation">.</span>details<span class="token punctuation">.</span>description<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 92 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>category<span class="token punctuation">.</span>data<span class="token punctuation">.</span>date<span class="token punctuation">.</span>day<span class="token punctuation">}</span></span>, <span class="token language-javascript"><span class="token punctuation">{</span>category<span class="token punctuation">.</span>data<span class="token punctuation">.</span>date<span class="token punctuation">.</span>hour<span class="token punctuation">}</span></span>:<span class="token language-javascript"><span class="token punctuation">{</span>category<span class="token punctuation">.</span>data<span class="token punctuation">.</span>date<span class="token punctuation">.</span>minute<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 93<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span></code>`,nt,Za,st,an,Le="For the sake of yourself and anyone who has to read your disgusting code, use <code>{@const}</code> tags.",tt,A,Me='<a href="#trick-2-destructuring-object-arrays-inside-123each125-blocks">Trick #2: Destructuring Object Arrays Inside <code>{#each}</code> Blocks</a>',et,nn,je="When iterating over an array of objects, you can destructure the iterated element in your <code>{#each}</code> declaration.",pt,sn,Ce="For example, you wish to iterate over a block of users, where the each user is an object with the properties: <code>name</code>, <code>email</code>, and <code>imageUrl</code>:",ot,tn,Pe="â <strong>Without</strong> destructuring:",lt,en,ct,_p=`<code class="language-svelte"><span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">users </span><span class="token keyword">as</span> <span class="token language-javascript">user<span class="token punctuation">}</span></span></span> 94 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src=</span><span class="token language-javascript"><span class="token punctuation">{</span>user<span class="token punctuation">.</span>
94imageUrl<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> 95 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>user<span class="token punctuation">.</span>name<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 96 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>user<span class="token punctuation">.</span>email<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 97<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span></code>`,ut,pn,$e="âï¸ <strong>With</strong> destructuring:",it,on,kt,xp=`<code class="language-svelte"><span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">users </span><span class="token keyword">as</span> <span class="token language-javascript"><span class="token punctuation">{</span> imageUrl<span class="token punctuation">,</span> name<span class="token punctuation">,</span> email <span class="token punctuation">}</span><span class="token punctuation">}</span></span></span> 98 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src=</span><span class="token language-javascript"><span class="token punctuation">{</span>imageUrl<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> 99 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>name<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 100 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token language-javascript"><span class="token punctuation">{</span>email<span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> 101<span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span></code>`,rt,ln,Ee="Itâs just that little bit cleaner removing <code>user.prop</code> each time you wish to access a property of the <code>user</code>.",gt,I,Se='<a href="#conclusion">Conclusion</a>',vt,cn,qe="The <code>{#each}</code> block in Svelte is relatively simple. Apart from its quirks mentioned in this article, itâs a nice feature to have.",dt,un,Ae="Itâs arguably more readable than something like <code>.map</code> - which is what you find in most other Javascript frameworks.",mt,kn,Ie="It allows us to manage array element keys simply. And thereâs just not much more to be said about it.",ht,rn,Re="I hope <code>{#each}</code> of you enjoyed this article, and are able to start incorporating <code>{#each}</code> of these tips into your workflow. âï¸",ft,R,Be='<a href="#faqs">FAQâs</a>',yt,gn,wt;return Q=new vn({props:{src:"/post-images/svelte-each-blocks/excited-dog.jpg",alt:"Rocket Dog!"}}),J=new vn({props:{src:"/post-images/svelte-each-blocks/no.jpg",alt:"No, You've made the compiler unhappy!"}}),sa=new vn({props:{src:"/post-images/svelte-each-blocks/no-face.png",alt:"Once again, no!"}}),ka=new vn({props:{src:"/post-images/svelte-each-blocks/happy-compiler.jpg",alt:"Happy compiler, happy life"}}),Ha=new vn({props:{src:"/post-images/svelte-each-blocks/upgrade-button.jpg",alt:"Let's upgrade our workflow"}}),Ga=new vn({props:{src:"/post-images/svelte-each-blocks/salt-bae-each-blocks.jpg",alt:"Sprinkle some local variables in there"}}),Za=new vn({props:{src:"/post-images/svelte-each-blocks/hide-the-pain-harold.jpg",alt:"The sight of it pains me"}}),gn=new Cp({props:{faqs:[{question:"How do you iterate over an array in Svelte?",answer:"In your <script> tags you iterate over an array with .map() as you would regularly in Javascript. In your Svelte markup you can iterate over an array using {#each} blocks."},{question:"Can you use Typescript inside Svelte {#each} blocks?",answer:"Unfortunately Svelte cannot compile Typescript code inside markup. This includes operators such as non-null operators or type assertions. To get around this you can move the typings to the <script> tag."}]}}
101),{c(){i=o("p"),i.innerHTML=w,y=e(),m=o("p"),m.innerHTML=k,d=e(),h=o("h2"),h.innerHTML=bt,mn=e(),B=o("p"),B.innerHTML=Tt,hn=e(),z=o("pre"),fn=new r(!1),yn=e(),W=o("p"),W.innerHTML=Ht,wn=e(),F=o("p"),F.textContent=Lt,_n=e(),U=o("pre"),xn=new r(!1),bn=e(),D=o("p"),D.textContent=Mt,Tn=e(),_(Q.$$.fragment),Hn=e(),O=o("p"),O.textContent=jt,Ln=e(),Y=o("p"),Y.innerHTML=Ct,Mn=e(),M=o("h2"),M.innerHTML=Pt,jn=e(),j=o("h3"),j.innerHTML=$t,Cn=e(),N=o("p"),N.innerHTML=Et,Pn=e(),_(J.$$.fragment),$n=e(),G=o("p"),G.innerHTML=St,En=e(),K=o("p"),K.textContent=qt,Sn=e(),V=o("pre"),qn=new r(!1),An=e(),X=o("p"),X.innerHTML=At,In=e(),Z=o("p"),Z.innerHTML=It,Rn=e(),aa=o("pre"),Bn=new r(!1),zn=e(),na=o("p"),na.innerHTML=Rt,Wn=e(),_(sa.$$.fragment),Fn=e(),ta=o("p"),ta.innerHTML=Bt,Un=e(),ea=o("pre"),Dn=new r(!1),Qn=e(),pa=o("p"),pa.textContent=zt,On=e(),oa=o("p"),oa.innerHTML=Wt,Yn=e(),C=o("h4"),C.innerHTML=Ft,Nn=e(),la=o("p"),la.innerHTML=Ut,Jn=e(),ca=o("p"),ca.innerHTML=Dt,Gn=e(),ua=o("pre"),Kn=new r(!1),Vn=e(),ia=o("p"),ia.textContent=Qt,Xn=e(),_(ka.$$.fragment),Zn=e(),ra=o("p"),ra.innerHTML=Ot,as=e(),ga=o("p"),ga.textContent=Yt,ns=e(),P=o("h3"),P.innerHTML=Nt,ss=e(),va=o("p"),va.textContent=Jt,ts=e(),da=o("p"),da.textContent=Gt,es=e(),ma=o("pre"),ps=new r(!1),os=e(),ha=o("p"),ha.innerHTML=Kt,ls=e(),$=o("h4"),$.innerHTML=Vt,cs=e(),fa=o("p"),fa.innerHTML=Xt,us=e(),ya=o("pre"),is=new r(!1),ks=e(),wa=o("p"),wa.innerHTML=Zt,rs=e(),_a=o("p"),_a.innerHTML=ae,gs=e(),xa=o("pre"),vs=new r(!1),ds=e(),ba=o("p"),ba.textContent=ne,ms=e(),E=o("h2"),E.innerHTML=se,hs=e(),Ta=o("p"),Ta.innerHTML=te,fs=e(),_(Ha.$$.fragment),ys=e(),S=o("h3"),S.innerHTML=ee,ws=e(),La=o("p"),La.textContent=pe,_s=e(),Ma=o("p"),Ma.innerHTML=oe,xs=e(),ja=o("p"),ja.innerHTML=le,bs=e(),Ca=o("ol"),Ca.innerHTML=ce,Ts=e(),Pa=o("p"),Pa.innerHTML=ue,Hs=e(),$a=o("pre"),Ls=new r(!1),Ms=e(),Ea=o("p"),Ea.innerHTML=ie,js=e(),Sa=o("p"),Sa.innerHTML=ke,Cs=e(),qa=o("pre"),Ps=new r(!1),$s=e(),Aa=o("p"),Aa.innerHTML=re,Es=e(),Ia=o("pre"),Ss=new r(!1),qs=e(),Ra=o("p"),Ra.textContent=ge,As=e(),f=o("div"),f.innerHTML=ve,Ba=o("p"),Ba.innerHTML=de,Is=e(),za=o("p"),za.textContent=me,Rs=e(),Wa=o("p"),Wa.innerHTML=he,Bs=e(),Fa=o("pre"),zs=new r(!1),Ws=e(),Ua=o("p"),Ua.innerHTML=fe,Fs=e(),Da=o("p"),Da.innerHTML=ye,Us=e(),Qa=o("pre"),Ds=new r(!1),Qs=e(),Oa=o("p"),Oa.innerHTML=we,Os=e(),q=o("h3"),q.innerHTML=_e,Ys=e(),Ya=o("p"),Ya.textContent=xe,Ns=e(),Na=o("pre"),Js=new r(!1),Gs=e(),Ja=o("p"),Ja.innerHTML=be,Ks=e(),_(Ga.$$.fragment),Vs=e(),Ka=o("p"),Ka.innerHTML=Te,Xs=e(),Va=o("p"),Va.innerHTML=He,Zs=e(),Xa=o("pre"),at=new r(!1),nt=e(),_(Za.$$.fragment),st=e(),an=o("p"),an.innerHTML=Le,tt=e(),A=o("h3"),A.innerHTML=Me,et=e(),nn=o("p"),nn.innerHTML=je,pt=e(),sn=o("p"),sn.innerHTML=Ce,ot=e(),tn=o("p"),tn.innerHTML=Pe,lt=e(),en=o("pre"),ct=new r(!1),ut=e(),pn=o("p"),pn.innerHTML=$e,it=e(),on=o("pre"),kt=new r(!1),rt=e(),ln=o("p"),ln.innerHTML=Ee,gt=e(),I=o("h2"),I.innerHTML=Se,vt=e(),cn=o("p"),cn.innerHTML=qe,dt=e(),un=o("p"),un.innerHTML=Ae,mt=e(),kn=o("p"),kn.textContent=Ie,ht=e(),rn=o("p"),rn.innerHTML=Re,ft=e(),R=o("h2"),R.innerHTML=Be,yt=e(),_(gn.$$.fragment),this.h()},l(a){i=l(a,"P",{"data-svelte-h":!0}),c(i)!=="svelte-15i9030"&&(i.innerHTML=w),y=p(a),m=l(a,"P",{"data-svelte-h":!0}),c(m)!=="svelte-u8lrdx"&&(m.innerHTML=k),d=p(a),h=l(a,"H2",{id:!0,"data-svelte-h":!0}),c(h)!=="svelte-1hlmp04"&&(h.innerHTML=bt),mn=p(a),B=l(a,"P",{"data-svelte-h":!0}),c(B)!=="svelte-m18gnd"&&(B.innerHTML=Tt),hn=p(a),z=l(a,"PRE",{class:!0});var s=g(z);
101fn=v(s,!1),s.forEach(n),yn=p(a),W=l(a,"P",{"data-svelte-h":!0}),c(W)!=="svelte-11zx6ww"&&(W.innerHTML=Ht),wn=p(a),F=l(a,"P",{"data-svelte-h":!0}),c(F)!=="svelte-inis61"&&(F.textContent=Lt),_n=p(a),U=l(a,"PRE",{class:!0});var ze=g(U);xn=v(ze,!1),ze.forEach(n),bn=p(a),D=l(a,"P",{"data-svelte-h":!0}),c(D)!=="svelte-1l4jiib"&&(D.textContent=Mt),Tn=p(a),x(Q.$$.fragment,a),Hn=p(a),O=l(a,"P",{"data-svelte-h":!0}),c(O)!=="svelte-1sa594d"&&(O.textContent=jt),Ln=p(a),Y=l(a,"P",{"data-svelte-h":!0}),c(Y)!=="svelte-93dou"&&(Y.innerHTML=Ct),Mn=p(a),M=l(a,"H2",{id:!0,"data-svelte-h":!0}),c(M)!=="svelte-18itwqf"&&(M.innerHTML=Pt),jn=p(a),j=l(a,"H3",{id:!0,"data-svelte-h":!0}),c(j)!=="svelte-1j87ueh"&&(j.innerHTML=$t),Cn=p(a),N=l(a,"P",{"data-svelte-h":!0}),c(N)!=="svelte-gzh1u5"&&(N.innerHTML=Et),Pn=p(a),x(J.$$.fragment,a),$n=p(a),G=l(a,"P",{"data-svelte-h":!0}),c(G)!=="svelte-gtne4i"&&(G.innerHTML=St),En=p(a),K=l(a,"P",{"data-svelte-h":!0}),c(K)!=="svelte-1hrwnrn"&&(K.textContent=qt),Sn=p(a),V=l(a,"PRE",{class:!0});var We=g(V);qn=v(We,!1),We.forEach(n),An=p(a),X=l(a,"P",{"data-svelte-h":!0}),c(X)!=="svelte-1e4ziy1"&&(X.innerHTML=At),In=p(a),Z=l(a,"P",{"data-svelte-h":!0}),c(Z)!=="svelte-im8eme"&&(Z.innerHTML=It),Rn=p(a),aa=l(a,"PRE",{class:!0});var Fe=g(aa);Bn=v(Fe,!1),Fe.forEach(n),zn=p(a),na=l(a,"P",{"data-svelte-h":!0}),c(na)!=="svelte-1firmjf"&&(na.innerHTML=Rt),Wn=p(a),x(sa.$$.fragment,a),Fn=p(a),ta=l(a,"P",{"data-svelte-h":!0}),c(ta)!=="svelte-1j0k9ee"&&(ta.innerHTML=Bt),Un=p(a),ea=l(a,"PRE",{class:!0});var Ue=g(ea);Dn=v(Ue,!1),Ue.forEach(n),Qn=p(a),pa=l(a,"P",{"data-svelte-h":!0}),c(pa)!=="svelte-bl8tai"&&(pa.textContent=zt),On=p(a),oa=l(a,"P",{"data-svelte-h":!0}),c(oa)!=="svelte-14cboxl"&&(oa.innerHTML=Wt),Yn=p(a),C=l(a,"H4",{id:!0,"data-svelte-h":!0}),c(C)!=="svelte-1c46sgp"&&(C.innerHTML=Ft),Nn=p(a),la=l(a,"P",{"data-svelte-h":!0}),c(la)!=="svelte-2gxeu4"&&(la.innerHTML=Ut),Jn=p(a),ca=l(a,"P",{"data-svelte-h":!0}),c(ca)!=="svelte-12up60e"&&(ca.innerHTML=Dt),Gn=p(a),ua=l(a,"PRE",{class:!0});var De=g(ua);Kn=v(De,!1),De.forEach(n),Vn=p(a),ia=l(a,"P",{"data-svelte-h":!0}),c(ia)!=="svelte-r36kr7"&&(ia.textContent=Qt),Xn=p(a),x(ka.$$.fragment,a),Zn=p(a),ra=l(a,"P",{"data-svelte-h":!0}),c(ra)!=="svelte-1v169go"&&(ra.innerHTML=Ot),as=p(a),ga=l(a,"P",{"data-svelte-h":!0}),c(ga)!=="svelte-1dff9zk"&&(ga.textContent=Yt),ns=p(a),P=l(a,"H3",{id:!0,"data-svelte-h":!0}),c(P)!=="svelte-15zmffx"&&(P.innerHTML=Nt),ss=p(a),va=l(a,"P",{"data-svelte-h":!0}),c(va)!=="svelte-479qik"&&(va.textContent=Jt),ts=p(a),da=l(a,"P",{"data-svelte-h":!0}),c(da)!=="svelte-1gkqha7"&&(da.textContent=Gt),es=p(a),ma=l(a,"PRE",{class:!0});var Qe=g(ma);ps=v(Qe,!1),Qe.forEach(n),os=p(a),ha=l(a,"P",{"data-svelte-h":!0}),c(ha)!=="svelte-1k62xvs"&&(ha.innerHTML=Kt),ls=p(a),$=l(a,"H4",{id:!0,"data-svelte-h":!0}),c($)!=="svelte-72l5yu"&&($.innerHTML=Vt),cs=p(a),fa=l(a,"P",{"data-svelte-h":!0}),c(fa)!=="svelte-12w9ggf"&&(fa.innerHTML=Xt),us=p(a),ya=l(a,"PRE",{class:!0});var Oe=g(ya);
101is=v(Oe,!1),Oe.forEach(n),ks=p(a),wa=l(a,"P",{"data-svelte-h":!0}),c(wa)!=="svelte-1pomypl"&&(wa.innerHTML=Zt),rs=p(a),_a=l(a,"P",{"data-svelte-h":!0}),c(_a)!=="svelte-1wrwctx"&&(_a.innerHTML=ae),gs=p(a),xa=l(a,"PRE",{class:!0});var Ye=g(xa);vs=v(Ye,!1),Ye.forEach(n),ds=p(a),ba=l(a,"P",{"data-svelte-h":!0}),c(ba)!=="svelte-1h4kk0d"&&(ba.textContent=ne),ms=p(a),E=l(a,"H2",{id:!0,"data-svelte-h":!0}),c(E)!=="svelte-c1apie"&&(E.innerHTML=se),hs=p(a),Ta=l(a,"P",{"data-svelte-h":!0}),c(Ta)!=="svelte-c6tnwr"&&(Ta.innerHTML=te),fs=p(a),x(Ha.$$.fragment,a),ys=p(a),S=l(a,"H3",{id:!0,"data-svelte-h":!0}),c(S)!=="svelte-u6ih57"&&(S.innerHTML=ee),ws=p(a),La=l(a,"P",{"data-svelte-h":!0}),c(La)!=="svelte-nrref8"&&(La.textContent=pe),_s=p(a),Ma=l(a,"P",{"data-svelte-h":!0}),c(Ma)!=="svelte-11cvf6p"&&(Ma.innerHTML=oe),xs=p(a),ja=l(a,"P",{"data-svelte-h":!0}),c(ja)!=="svelte-1m8g4ot"&&(ja.innerHTML=le),bs=p(a),Ca=l(a,"OL",{"data-svelte-h":!0}),c(Ca)!=="svelte-1w88d8m"&&(Ca.innerHTML=ce),Ts=p(a),Pa=l(a,"P",{"data-svelte-h":!0}),c(Pa)!=="svelte-gmoum3"&&(Pa.innerHTML=ue),Hs=p(a),$a=l(a,"PRE",{class:!0});var Ne=g($a);Ls=v(Ne,!1),Ne.forEach(n),Ms=p(a),Ea=l(a,"P",{"data-svelte-h":!0}),c(Ea)!=="svelte-1jdgqnt"&&(Ea.innerHTML=ie),js=p(a),Sa=l(a,"P",{"data-svelte-h":!0}),c(Sa)!=="svelte-109pykm"&&(Sa.innerHTML=ke),Cs=p(a),qa=l(a,"PRE",{class:!0});var Je=g(qa);Ps=v(Je,!1),Je.forEach(n),$s=p(a),Aa=l(a,"P",{"data-svelte-h":!0}),c(Aa)!=="svelte-17tv1jc"&&(Aa.innerHTML=re),Es=p(a),Ia=l(a,"PRE",{class:!0});var Ge=g(Ia);Ss=v(Ge,!1),Ge.forEach(n),qs=p(a),Ra=l(a,"P",{"data-svelte-h":!0}),c(Ra)!=="svelte-xc4880"&&(Ra.textContent=ge),As=p(a),f=l(a,"DIV",{style:!0,"data-svelte-h":!0}),c(f)!=="svelte-14zyii3"&&(f.innerHTML=ve),Ba=l(a,"P",{"data-svelte-h":!0}),c(Ba)!=="svelte-d9xuyb"&&(Ba.innerHTML=de),Is=p(a),za=l(a,"P",{"data-svelte-h":!0}),c(za)!=="svelte-o871ns"&&(za.textContent=me),Rs=p(a),Wa=l(a,"P",{"data-svelte-h":!0}),c(Wa)!=="svelte-8jbd5m"&&(Wa.innerHTML=he),Bs=p(a),Fa=l(a,"PRE",{class:!0});var Ke=g(Fa);zs=v(Ke,!1),Ke.forEach(n),Ws=p(a),Ua=l(a,"P",{"data-svelte-h":!0}),c(Ua)!=="svelte-tg75mh"&&(Ua.innerHTML=fe),Fs=p(a),Da=l(a,"P",{"data-svelte-h":!0}),c(Da)!=="svelte-170rhmv"&&(Da.innerHTML=ye),Us=p(a),Qa=l(a,"PRE",{class:!0});var Ve=g(Qa);Ds=v(Ve,!1),Ve.forEach(n),Qs=p(a),Oa=l(a,"P",{"data-svelte-h":!0}),c(Oa)!=="svelte-18xex46"&&(Oa.innerHTML=we),Os=p(a),q=l(a,"H3",{id:!0,"data-svelte-h":!0}),c(q)!=="svelte-1qcr82k"&&(q.innerHTML=_e),Ys=p(a),Ya=l(a,"P",{"data-svelte-h":!0}),c(Ya)!=="svelte-zim9g0"&&(Ya.textContent=xe),Ns=p(a),Na=l(a,"PRE",{class:!0});var Xe=g(Na);Js=v(Xe,!1),Xe.forEach(n),Gs=p(a),Ja=l(a,"P",{"data-svelte-h":!0}),c(Ja)!=="svelte-1m7b7z1"&&(Ja.innerHTML=be),Ks=p(a),x(Ga.$$.fragment,a),Vs=p(a),Ka=l(a,"P",{"data-svelte-h":!0}),c(Ka)!=="svelte-l158p0"&&(Ka.innerHTML=Te),Xs=p(a),Va=l(a,"P",{"data-svelte-h":!0}),c(Va)!=="svelte-1snce22"&&(Va.innerHTML=He),Zs=p(a),Xa=l(a,"PRE",{class:!0});var Ze=g(Xa);at=v(Ze,!1),Ze.forEach(n),nt=p(a),x(Za.$$.fragment,a),st=p(a),an=l(a,"P",{"data-svelte-h":!0}),c(an)!=="svelte-1gztykb"&&(an.innerHTML=Le),tt=p(a),A=l(a,"H3",{id:!0,"data-svelte-h":!0}),c(A)!=="svelte-1zuw9h"&&(A.innerHTML=Me),et=p(a),nn=l(a,"P",{"data-svelte-h":!0}),c(nn)!=="svelte-mx2lex"&&(nn.innerHTML=je),pt=p(a),sn=l(a,"P",{"data-svelte-h":!0}),c(sn)!=="svelte-98k2y"&&(sn.innerHTML=Ce),ot=p(a),tn=l(a,"P",{"data-svelte-h":!0}),c(tn)!=="svelte-4gcyzi"&&(tn.innerHTML=Pe),lt=p(a),en=l(a,"PRE",{class:!0});var ap=g(en);ct=v(ap,!1),ap.forEach(n),ut=p(a),pn=l(a,"P",{"data-svelte-h":!0}),c(pn)!=="svelte-pq015r"&&(pn.innerHTML=$e),it=p(a),on=l(a,"PRE",{class:!0});var np=g(on);kt=v(np,!1),np.forEach(n),rt=p(a),ln=l(a,"P",{"data-svelte-h":!0}),c(ln)!=="svelte-g52omw"&&(ln.innerHTML=Ee),gt=p(a),I=l(a,"H2",{id:!0,"data-svelte-h":!0}),c(I)!=="svelte-kmpttn"&&(I.innerHTML=Se),vt=p(a),cn=l(a,"P",{"data-svelte-h":!0}),c(cn)!=="svelte-6qw5of"&&(cn.innerHTML=qe),dt=p(a),un=l(a,"P",{"data-svelte-h":!0}),c(un)!=="svelte-bwohrg"&&(un.innerHTML=Ae),mt=p(a),kn=l(a,"P",{"data-svelte-h":!0}),c(kn)!=="svelte-jf1och"&&(kn.textContent=Ie),ht=p(a),rn=l(a,"P",{"data-svelte-h":!0}),c(rn)!=="svelte-1912181"&&(rn.innerHTML=Re),ft=p(a),R=l(a,"H2",{id:!0,"data-svelte-h":!0}),c(R)!=="svelte-16j8f54"&&(R.innerHTML=Be),yt=p(a),x(gn.$$.fragment,a),this.h()},h(){u(h,"id","123each125-blocks---the-basics"),fn.a=null,u(z,"class","language-svelte"),xn.a=null,u(U,"class","language-svelte"),u(M,"id","quirks-and-limitations"),u(j,"id","quirk-1-typescript"),qn.a=null,u(V,"class","language-svelte"),Bn.a=null,u(aa,"class","language-svelte"),Dn.a=null,u(ea,"class","language-svelte"),u(C,"id","the-workaround"),Kn.a=null,u(ua,"class","language-svelte"),u(P,"id","quirk-2-non-updating-lists"),ps.a=null,u(ma,"class","language-svelte"),u($,"id","the-fix"),is.a=null,u(ya,"class","language-svelte"),vs.a=null,u(xa,"class","language-svelte"),u(E,"id","easter-eggs"),u(S,"id","trick-1-local-constants---the-123const125-tag"),Ls.a=null,u($a,"class","language-svelte"),Ps.a=null,u(qa,"class","language-svelte"),Ss.a=null,u(Ia,"class","language-svelte"),_t(f,"width","100%"),_t(f,"height","0"),_t(f,"padding-bottom","64%"),_t(f,"position","relative"),zs.a=null,u(Fa,"class","language-svelte"),Ds.a=null,u(Qa,"class","language-svelte"),u(q,"id","using-multiple-local-constants"),Js.a=null,u(Na,"class","language-svelte"),at.a=null,u(Xa,"class","language-svelte"),u(A,"id","trick-2-destructuring-object-arrays-inside-123each125-blocks"),ct.a=null,u(en,"class","language-svelte"),kt.a=null,u(on,"class","language-svelte"),u(I,"id","conclusion"),u(R,"id","faqs")},m(a,s){t(a,i,s),t(a,y,s),t(a,m,s),t(a,d,s),t(a,h,s),t(a,mn,s),t(a,B,s),t(a,hn,s),t(a,z,s),fn.m(pp,z),t(a,yn,s),t(a,W,s),t(a,wn,s),t(a,F,s),t(a,_n,s),t(a,U,s),xn.m(op,U),t(a,bn,s),t(a,D,s),t(a,Tn,s),b(Q,a,s),t(a,Hn,s),t(a,O,s),t(a,Ln,s),t(a,Y,s),t(a,Mn,s),t(a,M,s),t(a,jn,s),t(a,j,s),t(a,Cn,s),t(a,N,s),t(a,Pn,s),b(J,a,s),t(a,$n,s),t(a,G,s),t(a,En,s),t(a,K,s),t(a,Sn,s),t(a,V,s),qn.m(lp,V),t(a,An,s),t(a,X,s),t(a,In,s),t(a,Z,s),t(a,Rn,s),t(a,aa,s),Bn.m(cp,aa),t(a,zn,s),t(a,na,s),t(a,Wn,s),b(sa,a,s),t(a,Fn,s),t(a,ta,s),t(a,Un,s),t(a,ea,s),Dn.m(up,ea),t(a,Qn,s),t(a,pa,s),t(a,On,s),t(a,oa,s),t(a,Yn,s),t(a,C,s),t(a,Nn,s),t(a,la,s),t(a,Jn,s),t(a,ca,s),t(a,Gn,s),t(a,ua,s),Kn.m(ip,ua),t(a,Vn,s),t(a,ia,s),t(a,Xn,s),b(ka,a,s),t(a,Zn,s),t(a,ra,s),t(a,as,s),t(a,ga,s),t(a,ns,s),t(a,P,s),t(a,ss,s),t(a,va,s),t(a,ts,s),t(a,da,s),t(a,es,s),t(a,ma,s),ps.m(kp,ma),t(a,os,s),t(a,ha,s),t(a,ls,s),t(a,$,s),t(a,cs,s),t(a,fa,s),t(a,us,s),t(a,ya,s),is.m(rp,ya),t(a,ks,s),t(a,wa,s),t(a,rs,s),t(a,_a,s),t(a,gs,s),t(a,xa,s),vs.m(gp,xa),t(a,ds,s),t(a,ba,s),t(a,ms,s),t(a,E,s),t(a,hs,s),t(a,Ta,s),t(a,fs,s),b(Ha,a,s),t(a,ys,s),t(a,S,s),t(a,ws,s),t(a,La,s),t(a,_s,s),t(a,Ma,s),t(a,xs,s),t(a,ja,s),t(a,bs,s),t(a,Ca,s),t(a,Ts,s),t(a,Pa,s),t(a,Hs,s),t(a,$a,s),Ls.m(vp,$a),t(a,Ms,s),t(a,Ea,s),t(a,js,s),t(a,Sa,s),t(a,Cs,s),t(a,qa,s),Ps.m(dp,qa),t(a,$s,s),t(a,Aa,s),t(a,Es,s),t(a,Ia,s),Ss.m(mp,Ia),t(a,qs,s),t(a,Ra,s),t(a,As,s),t(a,f,s),t(a,Ba,s),t(a,Is,s),t(a,za,s),t(a,Rs,s),t(a,Wa,s),t(a,Bs,s),t(a,Fa,s),zs.m(hp,Fa),t(a,Ws,s),t(a,Ua,s),t(a,Fs,s),t(a,Da,s),t(a,Us,s),t(a,Qa,s),Ds.m(fp,Qa),t(a,Qs,s),t(a,Oa,s),t(a,Os,s),t(a,q,s),t(a,Ys,s),t(a,Ya,s),t(a,Ns,s),t(a,Na,s),Js.m(yp,Na),t(a,Gs,s),t(a,Ja,s),t(a,Ks,s),b(Ga,a,s),t(a,Vs,s),t(a,Ka,s),t(a,Xs,s),t(a,Va,s),t(a,Zs,s),t(a,Xa,s),at.m(wp,Xa),t(a,nt,s),b(Za,a,s),t(a,st,s),t(a,an,s),t(a,tt,s),t(a,A,s),t(a,et,s),t(a,nn,s),t(a,pt,s),t(a,sn,s),t(a,ot,s),t(a,tn,s),t(a,lt,s),t(a,en,s),ct.m(_p,en),t(a,ut,s),t(a,pn,s),t(a,it,s),t(a,on,s),kt.m(xp,on),t(a,rt,s),t(a,ln,s),t(a,gt,s),t(a,I,s),t(a,vt,s),t(a,cn,s),t(a,dt,s),t(a,un,s),t(a,mt,s),t(a,kn,s),t(a,ht,s),t(a,rn,s),t(a,ft,s),t(a,R,s),t(a,yt,s),b(gn,a,s),wt=!0},p:Tp,i(a){wt||(T(Q.$$.fragment,a),T(J.$$.fragment,a),T(sa.$$.fragment,a),T(ka.$$.fragment,a),T(Ha.$$.fragment,a),T(Ga.$$.fragment,a),T(Za.$$.fragment,a),T(gn.$$.fragment,a),wt=!0)},o(a){H(Q.$$.fragment,a),H(J.$$.fragment,a),H(sa.$$.fragment,a),H(ka.$$.fragment,a),H(Ha.$$.fragment,a),H(Ga.$$.fragment,a),H(Za.$$.fragment,a),H(gn.$$.fragment,a),wt=!1},d(a){a&&(n(i),n(y),n(m),n(d),n(h),n(mn),n(B),n(hn),n(z),n(yn),n(W),n(wn),n(F),n(_n),n(U),n(bn),n(D),n(Tn),n(Hn),n(O),n(Ln),n(Y),n(Mn),n(M),n(jn),n(j),n(Cn),n(N),n(Pn),n($n),n(G),n(En),n(K),n(Sn),n(V),n(An),n(X),n(In),n(Z),n(Rn),n(aa),n(zn),n(na),n(Wn),n(Fn),n(ta),n(Un),n(ea),n(Qn),n(pa),n(On),n(oa),n(Yn),n(C),n(Nn),n(la),n(Jn),n(ca),n(Gn),n(ua),n(Vn),n(ia),n(Xn),n(Zn),n(ra),n(as),n(ga),n(ns),n(P),n(ss),n(va),n(ts),n(da),n(es),n(ma),n(os),n(ha),n(ls),n($),n(cs),n(fa),n(us),n(ya),n(ks),n(wa),n(rs),n(_a),n(gs),n(xa),n(ds),n(ba),n(ms),n(E),n(hs),n(Ta),n(fs),n(ys),n(S),n(ws),n(La),n(_s),n(Ma),n(xs),n(ja),n(bs),n(Ca),n(Ts),n(Pa),n(Hs),n($a),n(Ms),n(Ea),n(js),n(Sa),n(Cs),n(qa),n($s),n(Aa),n(Es),n(Ia),n(qs),n(Ra),n(As),n(f),n(Ba),n(Is),n(za),n(Rs),n(Wa),n(Bs),n(Fa),n(Ws),n(Ua),n(Fs),n(Da),n(Us),n(Qa),n(Qs),n(Oa),n(Os),n(q),n(Ys),n(Ya),n(Ns),n(Na),n(Gs),n(Ja),n(Ks),n(Vs),n(Ka),n(Xs),n(Va),n(Zs),n(Xa),n(nt),n(st),n(an),n(tt),n(A),n(et),n(nn),n(pt),n(sn),n(ot),n(tn),n(lt),n(en),n(ut),n(pn),n(it),n(on),n(rt),n(ln),n(gt),n(I),n(vt),n(cn),n(dt),n(un),n(mt),n(kn),n(ht),n(rn),n(ft),n(R),n(yt)),L(Q,a),L(J,a),L(sa,a),L(ka,a),L(Ha,a),L(Ga,a),L(Za,a),L(gn,a)}}}function $p(dn){let i,w;const y=[dn[0],ep];let m={$$slots:{default:[Pp]},$$scope:{ctx:dn}};for(let k=0;k<y.length;k+=1)m=xt(m,y[k]);return i=new jp({props:m}),{c(){_(i.$$.fragment)},l(k){x(i.$$.fragment,k)},m(k,d){b(i,k,d),w=!0}
101,p(k,[d]){const h=d&1?Mp(y,[d&1&&tp(k[0]),d&0&&tp(ep)]):{};d&2&&(h.$$scope={dirty:d,ctx:k}),i.$set(h)},i(k){w||(T(i.$$.fragment,k),w=!0)},o(k){H(i.$$.fragment,k),w=!1},d(k){L(i,k)}}}const ep={title:"Svelte {#each} Blocks - You Should Know These Tricks",description:"The {#each} block in Svelte has a few pain-points when handling them in real applications. We walk through how to fix these limitations, and also explore some lesser-known treats in the {#each} block syntax.",datePublished:"2024-01-06T01:30:00+10:00",dateModified:"2024-01-19T02:00:00+10:00",categories:["svelte","sveltekit"],articleType:"article",skillLevel:"beginner",published:!0,author:"Jack Landon",image:"/post-images/svelte-each-blocks/happy-compiler.jpg",faqs:[{question:"How do you iterate over an array in Svelte?",answer:"In your <script> tags you iterate over an array with .map() as you would regularly in Javascript. In your Svelte markup you can iterate over an array using each blocks."},{question:"Can you use Typescript inside Svelte each blocks?",answer:"Unfortunately Svelte cannot compile Typescript code inside markup. This includes operators such as non-null operators or type assertions. To get around this you can move the typings to the <script> tag."}],headings:[{depth:2,value:"{#each} Blocks - The Basics",id:"123each125-blocks---the-basics"},{depth:2,value:"Quirks and Limitations",id:"quirks-and-limitations"},{depth:3,value:"Quirk #1: Typescript",id:"quirk-1-typescript"},{depth:4,value:"The Workaround",id:"the-workaround"},{depth:3,value:"Quirk 2: Non-updating Lists",id:"quirk-2-non-updating-lists"},{depth:4,value:"The Fix",id:"the-fix"},{depth:2,value:"Easter Eggs",id:"easter-eggs"},{depth:3,value:"Trick #1: Local Constants - The {@const} Tag",id:"trick-1-local-constants---the-123const125-tag"},{depth:3,value:"Using Multiple Local Constants",id:"using-multiple-local-constants"},{depth:3,value:"Trick #2: Destructuring Object Arrays Inside {#each} Blocks",id:"trick-2-destructuring-object-arrays-inside-123each125-blocks"},{depth:2,value:"Conclusion",id:"conclusion"},{depth:2,value:"FAQâs",id:"faqs"}]};function Ep(dn,i,w){return dn.$$set=y=>{w(0,i=xt(xt({},i),sp(y)))},i=sp(i),[i]}class Rp extends Hp{constructor(i){super(),Lp(this,i,Ep,$p,bp,{})}}export{Rp as default,ep as metadata};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.