Efficient zip function in JavaScript

Mátyás Fodor — Sun, 31 Oct 2021 13:20:20 +0000

Efficient zip function in JavaScript

The Python zip function is a clever analogy of a real zipper: It allows you to iterate over multiple arrays element-wise without having to worry about indices. It is quite handy when you have to manually pair elements coming from two (or more) data sources:

>>> scoreList = [5, 3, 6, 8]
>>> playerList = ['Mary', 'John', 'Emma', 'Gavin']
>>> list(zip(scoreList, playerList))
# [(5, 'Mary'), (3, 'John'), (6, 'Emma'), (8, 'Gavin')]

Please note the list() call is needed to convert the result to a list, otherwise it returns something like

>>> zip(scoreList, playerList)
# <zip object at 0x109b19d00>

which is an object implementing the iterator interface. Why the hassle with this object? Why is it not just a list? The iterator interface allows lazy-evaluation, meaning it won't create a list, only if it's asked. This object instead allows generating elements on-demand, which can be more efficient. Let's say I want to find the first player with score 6:

for score, player in zip(scoreList, playerList):
  if score == 6:
    print(f'player {player} has score 6')
    break

In this case, the iteration stops with ((6, 'Emma')) and the last pair ((8, 'Gavin')) would never be constructed.

The implementation is quite interesting, because zip not only works with two lists, it can more than two arrays as input parameters. This can be particularly useful when trying to transpose a list of lists (a matrix). If you're not familiar with the term transpose, it simply means a list of list is simply flipped by its diagonal. The transposition of

[
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
]

>>> list(zip(*[
...  [1, 2, 3],
...  [4, 5, 6],
...  [7, 8, 9]
... ]))
[
  [1, 4, 7],
  [2, 5, 8],
  [3, 6, 9]
]

What happens if the input arrays do not have the same length? According to the Python docs it stops when the shortest input iterable is exhausted, meaning it will return as many elements as long the shortest array is:

>>> list(zip([1, 2, 3], [4, 5]))
[(1, 4), (2, 5)]

If all elements need to be returned, itertools.zip_longest should be used.

And just to spice things up the little, let me mention that as the zip function expects iterables as input, not specifically arrays. Iterables are more generic than arrays, without going too much into the details, they are objects that can be iterated over one element at the time, and they can signal if they are exhausted (iteration finished). In practice, it means that any object that can be iterated over can be used as inputs of zip: tuples, sets, dictionaries, range, or even results of other zips. Mind-blowing, right? 🤯 It is also possible to create an infinite zip. Let me use itertools.count to demonstrate it. It is very similar to range() except it has no stopping criteria, so if it is used in a for loop it keeps yielding values unless it is stopped.

>>> for a, b in zip(itertools.count(start=0, step=2), itertools.count(start=1, step=2)):
...     print(a, b)
1 2
3 4
5 6
...

I really hope I could convince you by now, how cool and versatile this Python standard library function is. Why can't we have nice things in JavaScript? Well we can, you just probably end up hunting for third-parties on npm or ready-made solutions on Stack Overflow. But is there anything more satisfying than using your home-grown utilities? You can find it out on my website.

The new URL encoder tool around the block

Mátyás Fodor — Mon, 05 Apr 2021 19:54:03 +0000

Original post: https://matyasfodor.com/projects/url-encoder

URL encoder/decoder

A few weeks ago I needed an URL encoder, and I wasn't quite satisfied with the online tools available, so I decided to build one on my own. The difference between the prior art and my project, url-encode.io is that there's no pasted data sent to the server. Plus it might be more pleasing visually. It is built with Snowpack, TypeScript, and the very best organic, home-grown CSS, supporting dark mode.

Materials & Methods

The developer experience of Snowpack is simply amazing. What differentiates Snowpack from other build tools is that it won't bundle the source during development. Why is it important? A typical build tool would re-bundle the source on every file save. This can be quite time-consuming as your project grows. It is not only directly impacting the development performance, but these little delays in the workflow are the hotbed of procrastination. Should Webpack be replaced by Snowpackin every project? Probably not. It serves a different purpose. Maintaining Webpack configuration can sometimes feel like a full-time job, but it is a time-proven developer tool. I would suggest using Snowpack whenever Webpack feels like overkill.

I chose Vercel as my hosting solution. It takes 11 seconds (!) to deploy a new version. I'm simply blown away.

What's next?

The plan is to monetize the website with ads, some of the previous similar sites do that too. Of course I don't have false dreams of getting rich with an online URL encoder tool. It's more of an experiment of how to make it from zero to one, and doing some SEO optimization. If I can cover the cost of the domain, I'm already happy. I'm still struggling to make the site eligible for Google Ads but that is a problem of tomorrow.

DEV Community: Mátyás Fodor

Efficient zip function in JavaScript

Efficient zip function in JavaScript

The new URL encoder tool around the block

URL encoder/decoder

Materials & Methods

What's next?