javascript 20 lines · 6 steps

Three ways to zip arrays in JavaScript

A small toolkit that pairs two arrays into tuples, an object, or a padded set of pairs.

Explained by highlit
Intermediate arrays higher-order-functions pairing object-construction
1function zip(keys, values) {
2 if (keys.length !== values.length) {
3 throw new RangeError('zip expects arrays of equal length');
4 }
5 return keys.map((key, index) => [key, values[index]]);
6}
7 
8function zipToObject(keys, values) {
9 return Object.fromEntries(zip(keys, values));
10}
11 
12function zipLongest(keys, values, fill = null) {
13 const length = Math.max(keys.length, values.length);
14 return Array.from({ length }, (_, index) => [
15 index < keys.length ? keys[index] : fill,
16 index < values.length ? values[index] : fill,
17 ]);
18}
19 
20export { zip, zipToObject, zipLongest };
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Pairing arrays by index is just a map over one array reaching into the other.
  2. 2Object.fromEntries turns a list of key-value pairs directly into an object.
  3. 3Choosing to throw versus pad with a fill value is how you handle mismatched lengths.

Related explainers

javascript 
import { NextResponse } from 'next/server';
import { Redis } from '@upstash/redis';
 
const redis = Redis.fromEnv();

Sliding-window rate limiting in a Next.js route

rate-limiting redis sorted-set
Advanced 8 steps
javascript 
const MAX_FILE_SIZE = 5 * 1024 * 1024;
 
const ALLOWED_TYPES = {
  'image/jpeg': ['jpg', 'jpeg'],

Validating file uploads by content, not just claims

input-validation security magic-bytes
Intermediate 7 steps
javascript 
import { useCallback, useEffect, useState } from 'react';
 
export function useLocalStorage(key, initialValue) {
  const readValue = useCallback(() => {

How a useLocalStorage hook syncs state in React

custom hooks localstorage state persistence
Intermediate 8 steps
javascript 
import { useState } from 'react';
 
export function ReorderableList({ initialItems }) {
  const [items, setItems] = useState(initialItems);

Drag-to-reorder lists in React

drag-and-drop state-management immutable-updates
Intermediate 8 steps
javascript 
import { unstable_cache, revalidateTag } from 'next/cache'
import { db } from '@/lib/db'
 
export const getDashboardStats = unstable_cache(

Caching dashboard stats in Next.js

caching cache-invalidation tag-based-revalidation
Intermediate 8 steps
javascript 
import { Component } from 'react';
import { reportError } from './services/telemetry';
 
export class ErrorBoundary extends Component {

How a React ErrorBoundary works

error-handling lifecycle-methods render-props
Intermediate 8 steps

Share this explainer

Here's the card — post it anywhere.

Three ways to zip arrays in JavaScript — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code