javascript 26 lines · 6 steps

Flattening nested objects into dotted paths

A recursive walk turns deeply nested objects and arrays into a flat map of dotted-and-bracketed key paths.

Explained by highlit
Intermediate recursion object-traversal accumulator key-paths
1function flatten(obj, prefix = '', result = {}) {
2 for (const [key, value] of Object.entries(obj)) {
3 const path = prefix ? `${prefix}.${key}` : key;
4 
5 if (Array.isArray(value)) {
6 value.forEach((item, index) => {
7 const indexed = `${path}[${index}]`;
8 if (item !== null && typeof item === 'object') {
9 flatten(item, indexed, result);
10 } else {
11 result[indexed] = item;
12 }
13 });
14 } else if (value !== null && typeof value === 'object') {
15 if (Object.keys(value).length === 0) {
16 result[path] = value;
17 } else {
18 flatten(value, path, result);
19 }
20 } else {
21 result[path] = value;
22 }
23 }
24 
25 return result;
26}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Passing an accumulator and a prefix through recursion lets you build compound keys without merging partial results.
  2. 2Distinguishing arrays, objects, and primitives is what makes a traversal handle real-world nested data correctly.
  3. 3Empty containers need explicit handling, or recursion silently drops them from the output.

Related explainers

javascript 
function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;
 

Building a recursive descent calculator

parsing recursion operator-precedence
Intermediate 8 steps
javascript 
import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks
Advanced 10 steps
javascript 
import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);

Delaying a loading spinner with a React hook

custom-hooks debouncing cleanup
Intermediate 8 steps
javascript 
const SWIPE_THRESHOLD = 80;
const MAX_TRANSLATE = 120;
 
export function attachSwipeToDismiss(element, onDismiss) {

Building a swipe-to-dismiss gesture in JS

touch-events gesture-detection dom-manipulation
Intermediate 10 steps
javascript 
const { pool } = require('./db');
 
function withTransaction() {
  return async (req, res, next) => {

A per-request transaction middleware in Express

middleware database-transactions connection-pooling
Advanced 7 steps
javascript 
function collapseConsecutiveLogs(lines, { keyFn = (l) => l.message } = {}) {
  const groups = [];
 
  for (const line of lines) {

Collapsing consecutive log lines in JavaScript

grouping run-length-encoding data-transformation
Intermediate 7 steps

Share this explainer

Here's the card — post it anywhere.

Flattening nested objects into dotted paths — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code