<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
<channel>
<title><![CDATA[The Blog by Frank Pobocek]]></title>
<description><![CDATA[Keep up with the latest news, tutorials and some other tech stories.]]></description>
<link>https://pobocek.dev</link>
<generator>RSS for Node</generator>
<lastBuildDate>Wed, 17 May 2023 12:53:56 GMT</lastBuildDate>
<atom:link href="https://pobocek.dev/blog/rss" rel="self" type="application/rss+xml"/>
<item>
<title><![CDATA[TEST [TO DELETE]]]></title>
<link>https://pobocek.dev/blog/test</link>
<guid isPermaLink="true">https://pobocek.dev/blog/test</guid>
<dc:creator><![CDATA[Frank Pobocek]]></dc:creator>
<pubDate>Tue, 14 Feb 2023 10:54:07 GMT</pubDate>
<content:encoded><p>This is test</p>
</content:encoded>
</item>
<item>
<title><![CDATA[ES2023 - New array methods (Part 1)]]></title>
<description><![CDATA[In the first part of "What's new in ES2023", we'll dive into 2 new proposals dealing with arrays, how to use them, in what situations, and also compare them with their predecessors. ]]></description>
<link>https://pobocek.dev/blog/es-2023-6-new-array-methods-part-1</link>
<guid isPermaLink="true">https://pobocek.dev/blog/es-2023-6-new-array-methods-part-1</guid>
<dc:creator><![CDATA[Frank Pobocek]]></dc:creator>
<pubDate>Wed, 17 May 2023 12:53:00 GMT</pubDate>
<content:encoded><p>In this mini series of &quot;What&#39;s new in ES2023&quot;, I&#39;m going to walk you through the finished proposals that are included in the latest draft of the 2023 specification. In the first part, we&#39;ll dive into 2 new proposals dealing with arrays, how to use them, in what situations, and also compare them with their predecessors. So lets dive into this :).</p>
<h2 id="array-find-from-last">Array find from last</h2>
<p>No more <strong>cloning</strong>, <strong>reversing</strong> and using <strong>find</strong> anymore. In <strong>ECMAScript 2023</strong> there&#39;s more cleaner and performant way to find items or indexes occurring at the end of the array. So it essentialy searches from <strong>right to left</strong> which may comes pretty handy in certain situations. </p>
<h3 id="1-findlast">1. findLast</h3>
<p>Before ES2023 you could use <code>.find()</code> that searches from left to right. So essentialy it loops through the array from start until it finds an item but for larger datasets it would took a while. Next step would be using <code>reverse()</code> method to change the order of an array and use find again. Since reverse is mutating the underlaying array, a lot of times you would need to create a copy of an array beforehand. </p>
<p>Doing copy, reverse and find seems a lot of work to just find an item. Sure there&#39;s a lodash findLast method, but isn&#39;t it cool not just to use a native method and don&#39;t have to import yet another dependency to your project? :).</p>
<p>Signature of the method <code>Array&lt;T&gt;.prototype.findLast(predicateFn) -&gt; T</code>.</p>
<pre><code> const array = new Uint8Array([5, 35, 66, 100]);
// Search from left to right
array.find(number =&gt; number === 100);
// With reverse:
[...array].reverse().find((number) =&gt; number === 100);
// ES2023
array.findLast((number) =&gt; number === 100);
</code></pre>
<p>Console output:</p>
<pre><code> Checking find(): 5
Checking find(): 35
Checking find(): 66
Checking find(): 100
Number found by find(): 100
Checking findLast(): 100
Number found by findLast(): 100
</code></pre>
<h3 id="2-findlastindex">2. findLastIndex</h3>
<p>The same principles apply to <code>.findLastIindex()</code>. Instead of an item it returns an index.</p>
<p>Signature of the method <code>Array.prototype.findLastIndex(predicateFn) -&gt; number</code>.</p>
<pre><code class="language-javascript"> const array = new Uint8Array([5, 35, 66, 100]);
// Before
array.length - 1 - [...array].reverse().findIndex((number) =&gt; number === 100);
// ES2023
array.findLastIndex((n) =&gt; n === 100)
</code></pre>
<h2 id="change-array-by-copy">Change array by copy</h2>
<p>Each one of these methods returns a copy of an array instead of mutating it, which can come very handy when dealing with immutable data espeacially immutable state updates in react for example. So no longer manually creating copy before mutating it needed, just use one of these methods :).</p>
<h3 id="3-toreversed">3. toReversed</h3>
<p>immutable equivalent of <code>reverse()</code> for reversing the order of an array.</p>
<p>Signature of the method <code>Array.prototype.toReversed() -&gt; Array</code>. </p>
<pre><code class="language-javascript"> const array = new Uint8Array([1, 2, 3]);
// Before
[...array].reverse();
// ES2023
array.toReversed();
[3, 2, 1]
</code></pre>
<h3 id="4-tosorted">4. toSorted</h3>
<p>Immutable equivalent of <code>sort()</code> for sorting and array.</p>
<p>Signature of the method <code>Array.prototype.toSorted(compareFn) -&gt; Array</code>.</p>
<pre><code class="language-javascript"> const outOfOrderArr = new Uint8Array([3, 1, 2]);
outOfOrderArr.toSorted()
[1, 2, 3]
</code></pre>
<h3 id="5-tospliced">5. toSpliced</h3>
<p>Immutable equivalent of <code>splice()</code> for removing n number of items in array determined by start index. In the code example, we removed number 6 from sequence of numbers 1..10, by removing an item at index 5. If we were to remove for example numbers 6 &amp; 7, we would just passed to a second parameter of the method <code>2</code>, which referes to number of items to delete.</p>
<p>Signature of the method <code>Array.prototype.toSpliced(start, deleteCount, ...items) -&gt; Array</code>.</p>
<pre><code class="language-javascript"> const sequence = [...Array(10).keys()].map((n) =&gt; n + 1);
sequence.toSpliced(5, 1);
[1, 2, 3, 4, 5, 7, 8, 9, 10]
</code></pre>
<h3 id="6-with">6. with</h3>
<p>This method makes me super excited, especially because it makes the life more for react developers, who often find themselves in situations where they have to update an item in immutable manner. Essentialy it updates an item in array at certain index and returns a new updated copy of that array.</p>
<p>As you can see from the next example we reduced number of lines from 2 or potentially more to just <strong>one liner</strong> by using <code>with</code> method. Isn&#39;t it awesome ?</p>
<p>Signature of the method <code>Array.prototype.with(index, value) -&gt; Array</code>.</p>
<pre><code class="language-javascript"> const correctionNeeded = [1, 1, 3];
// Before
correctionNeeded.map((num, index) =&gt; {
if(index === 1) return 2;
return num;
});
// Or
const temp = [...correctionNeeded];
temp[1] = 2;
// ES2023
correctionNeeded.with(1, 2);
[1, 2, 3]
</code></pre>
<h2 id="compatibility">Compatibility</h2>
<p>All of these methods are supported in <strong>all modern browsers</strong> except <strong>firefox</strong>, in that case you would need to use polyfill. So if you want to use these methods today, you need to install <a href="https://www.npmjs.com/package/core-js">core-js</a> and import just methods you want to use or use the stable package. </p>
<p>As for <strong>typescript</strong> users, there are no type definitions for these methods yet, but there is an open <a href="https://github.com/microsoft/TypeScript/pull/51367/files">PR</a> waiting <strong>to be merged</strong>. In the meanwhile you have to add those types by yourself. </p>
<h2 id="summary">Summary</h2>
<p>In the <strong>next part</strong> I&#39;ll show you how to use these methods in React, because some of them might be pretty helpfull :). </p>
</content:encoded>
</item>
</channel>
</rss>
