Transform JSON in JavaScript: map, filter, reduce, and reshape

Written and reviewed by the Jsonic editorial team — every guide is verified against the official spec or runtime before publication.

Last updated: May 19, 2026

Transforming JSON in JavaScript means converting one JSON structure into another — renaming keys, reshaping nested objects, filtering arrays, or aggregating values using map(), filter(), reduce(), and structuredClone(). JSON.parse() + JSON.stringify()round-trip costs ~1 μs per 1 kB; for large payloads (>1 MB) use streaming parsers. A single-pass reduce() is 2–3× faster than chained map().filter() for large arrays. This guide covers key renaming, nested transformation, array reshaping, deep merge, and performance benchmarks. All examples work in Node.js 18+, modern browsers, and TypeScript.

Rename JSON keys with map and Object.fromEntries

The most common transformation when consuming external APIs is converting snake_case field names to camelCase. Object.entries() decomposes an object into [key, value] pairs; Object.fromEntries() reassembles them. A key-conversion function applied inside map() renames every key without touching values.

// Convert a single object: snake_case → camelCase
const toCamel = (s: string) =>
  s.replace(/_([a-z])/g, (_, c: string) => c.toUpperCase())

function renameKeys(obj: Record<string, unknown>): Record<string, unknown> {
  return Object.fromEntries(
    Object.entries(obj).map(([k, v]) => [toCamel(k), v])
  )
}

const apiResponse = { user_id: 1, first_name: 'Ada', last_name: 'Lovelace' }
const camel = renameKeys(apiResponse)
// → { userId: 1, firstName: 'Ada', lastName: 'Lovelace' }

// Deep rename — recurse into nested objects and arrays
function deepCamelKeys(val: unknown): unknown {
  if (Array.isArray(val)) return val.map(deepCamelKeys)
  if (val !== null && typeof val === 'object') {
    return Object.fromEntries(
      Object.entries(val as Record<string, unknown>).map(([k, v]) => [
        toCamel(k),
        deepCamelKeys(v),
      ])
    )
  }
  return val
}

// Rename an entire array of API objects in one pass
const users = apiData.map(deepCamelKeys)

Lodash shorthand for shallow rename: _.mapKeys(obj, (v, k) => _.camelCase(k)). For arrays of objects, chain with _.map: _.map(arr, o => _.mapKeys(o, (v, k) => _.camelCase(k))). See JSON array methods in JavaScript for more iteration patterns.

Filter JSON arrays: keep, exclude, and deduplicate records

Array.prototype.filter() returns a new array containing only the elements for which the callback returns true. It never mutates the original. Always filter before mapping — reducing the array size first means the subsequent map() iterates fewer elements.

interface Product {
  id: number
  category: string
  inStock: boolean
  price: number
  tags: string[]
}

// Keep only in-stock electronics
const electronics = products.filter(
  p => p.inStock && p.category === 'electronics'
)

// Exclude a specific id
const withoutItem5 = products.filter(p => p.id !== 5)

// Filter by nested array membership
const tagged = products.filter(p => p.tags.includes('sale'))

// Deduplicate by id — keep the first occurrence
const seen = new Set<number>()
const unique = products.filter(p => {
  if (seen.has(p.id)) return false
  seen.add(p.id)
  return true
})

// TypeScript type guard: narrow type inside filter
function isCheap(p: Product): p is Product & { price: number } {
  return p.price < 20
}
const cheapItems = products.filter(isCheap) // typed as (Product & { price: number })[]

// filter + map in one pass with flatMap (avoids double iteration)
const cheapNames = products.flatMap(p =>
  p.price < 20 ? [p.name] : []
)

For advanced filter patterns including nested filters and Set-based deduplication, see filter JSON arrays in JavaScript.

Reshape nested JSON objects: flattening and nesting with reduce

Flattening collapses a deeply nested object into a single-level key-value map, which is useful for display tables, CSV export, or search indexing. The reverse — nesting — reconstructs a hierarchy from a flat map. Both operations are best expressed with a recursive reduce().

// Flatten: { a: { b: { c: 1 } } } → { 'a.b.c': 1 }
function flatten(
  obj: Record<string, unknown>,
  prefix = '',
  sep = '.'
): Record<string, unknown> {
  return Object.entries(obj).reduce<Record<string, unknown>>((acc, [k, v]) => {
    const key = prefix ? `${prefix}${sep}${k}` : k
    if (v !== null && typeof v === 'object' && !Array.isArray(v)) {
      Object.assign(acc, flatten(v as Record<string, unknown>, key, sep))
    } else {
      acc[key] = v
    }
    return acc
  }, {})
}

const nested = { user: { name: 'Ada', address: { city: 'London', zip: 'EC1A' } } }
const flat = flatten(nested)
// → { 'user.name': 'Ada', 'user.address.city': 'London', 'user.address.zip': 'EC1A' }

// Unflatten: { 'a.b.c': 1 } → { a: { b: { c: 1 } } }
function unflatten(flat: Record<string, unknown>): Record<string, unknown> {
  return Object.entries(flat).reduce<Record<string, unknown>>((acc, [key, val]) => {
    key.split('.').reduce((node: Record<string, unknown>, part, i, parts) => {
      if (i === parts.length - 1) { node[part] = val }
      else { node[part] ??= {} }
      return node[part] as Record<string, unknown>
    }, acc)
    return acc
  }, {})
}

// Pick specific keys to reshape an object
const { id, name, email } = user
const summary = { id, name, email } // destructure to reshape

Aggregate JSON data: count, sum, group, and pivot with reduce

reduce() is the universal aggregation primitive. A single pass over an array can compute multiple aggregations simultaneously — avoiding the repeated iterations that separate calls to filter(), map(), or Object.groupBy() would require.

interface Order {
  id: number
  status: 'pending' | 'shipped' | 'delivered' | 'cancelled'
  region: string
  amount: number
}

// Sum
const total = orders.reduce((sum, o) => sum + o.amount, 0)

// Count by status
const countByStatus = orders.reduce<Record<string, number>>((acc, o) => {
  acc[o.status] = (acc[o.status] ?? 0) + 1
  return acc
}, {})
// → { pending: 3, shipped: 12, delivered: 28, cancelled: 2 }

// Group by field (polyfill for Object.groupBy)
const byRegion = orders.reduce<Record<string, Order[]>>((acc, o) => {
  ;(acc[o.region] ??= []).push(o)
  return acc
}, {})

// Pivot: region × status counts in one pass
const pivot = orders.reduce<Record<string, Record<string, number>>>((acc, o) => {
  acc[o.region] ??= {}
  acc[o.region][o.status] = (acc[o.region][o.status] ?? 0) + 1
  return acc
}, {})
// → { 'EU': { shipped: 5, delivered: 10 }, 'US': { ... } }

// Multiple aggregations in one pass
const stats = orders.reduce(
  (acc, o) => {
    acc.total += o.amount
    acc.count++
    if (o.amount > acc.max) acc.max = o.amount
    return acc
  },
  { total: 0, count: 0, max: 0 }
)
const avg = stats.total / stats.count

Deep clone JSON safely: JSON round-trip vs structuredClone vs lodash

Cloning before transforming prevents accidental mutation of the original data, which is especially important in React state and shared module-level caches. Choose the right method based on what types your data contains.

// Method 1: JSON round-trip — works for plain JSON-serializable data
const clone1 = JSON.parse(JSON.stringify(original))
// Loses: undefined fields, Date (becomes string), RegExp (becomes {}),
//        Function (dropped), BigInt (throws), circular refs (throws)

// Method 2: structuredClone (Node 17+, all modern browsers) — recommended
const clone2 = structuredClone(original)
// Handles: Date, Map, Set, TypedArray, ArrayBuffer, RegExp, Error
// Loses: functions, DOM nodes, class instance methods (plain object only)
// Throws on: WeakMap, WeakSet, streams

// Method 3: lodash _.cloneDeep — handles class instances and circular refs
import _ from 'lodash'
const clone3 = _.cloneDeep(original)

// Shallow clone with spread (fast, only one level deep)
const shallowCopy = { ...original }
const arrayShallow = [...originalArray]

// Immutable nested update (React-friendly)
const updated = {
  ...user,
  address: {
    ...user.address,
    city: 'Berlin',
  },
}

// Performance (1 MB payload, Node.js 22, M2):
// JSON round-trip:   ~12 ms
// structuredClone:   ~8 ms
// _.cloneDeep:       ~25 ms
// Spread (shallow):  ~0.1 ms

For a deep dive into cloning strategies, see deep clone JSON objects.

Lodash/fp for complex transformations: _.mapKeys, _.mapValues, _.pick, _.omit

Lodash provides purpose-built functions for common JSON transformation patterns that would otherwise require verbose Object.entries() boilerplate. The lodash/fp variant is auto-curried and immutable, making it ideal for pipeline composition with _.flow().

import _ from 'lodash'
import { mapKeys, mapValues, pick, omit, flow } from 'lodash/fp'

// Rename all keys with a key transformer
const camelCased = _.mapKeys(obj, (value, key) => _.camelCase(key))

// Transform all values with a value transformer
const rounded = _.mapValues(priceMap, price => Math.round(price * 100) / 100)

// Pick specific keys (whitelist)
const publicFields = _.pick(user, ['id', 'name', 'email'])
// → { id: 1, name: 'Ada', email: 'ada@example.com' }

// Omit specific keys (blacklist / redact sensitive fields)
const safe = _.omit(user, ['password', 'ssn', 'creditCard'])

// _.get / _.set for deep access (safe, no TypeError on missing paths)
const city = _.get(user, 'address.city', 'Unknown')
const updated = _.set({ ...user }, 'address.city', 'Berlin') // immutable via spread

// lodash/fp: compose a transformation pipeline
const transform = flow(
  mapKeys(_.camelCase),           // rename keys
  pick(['userId', 'firstName']),  // whitelist fields
  mapValues((v: string) => String(v).trim()) // normalise values
)
const result = transform(apiPayload)

// Process an array with _.map (handles nullish items more safely than native)
const names = _.map(users, 'name')               // pluck shorthand
const seniors = _.filter(users, { active: true }) // object predicate shorthand

Performance benchmarks: map vs reduce vs for-of for 10k-record arrays

For typical API payloads under 1,000 records, any approach is fast enough. The differences become meaningful at 10,000+ records, where a single-pass algorithm avoids the cost of allocating intermediate arrays at each chained step.

// Benchmark setup: 10,000 objects, Node.js 22, M2 MacBook Pro
// Task: filter by predicate AND transform — measure total time

// ❶ Chained map().filter() — two array allocations, two passes
const chained = data
  .filter(x => x.active)
  .map(x => ({ id: x.id, name: x.name }))
// ~1.8 ms

// ❷ Single-pass reduce() — one allocation, one pass
const reduced = data.reduce<{ id: number; name: string }[]>((acc, x) => {
  if (x.active) acc.push({ id: x.id, name: x.name })
  return acc
}, [])
// ~0.9 ms  (≈2× faster)

// ❸ for-of loop — no functional overhead
const loop: { id: number; name: string }[] = []
for (const x of data) {
  if (x.active) loop.push({ id: x.id, name: x.name })
}
// ~0.5 ms  (≈3.6× faster than chained)

// ❹ flatMap — one pass, clean syntax
const flatMapped = data.flatMap(x =>
  x.active ? [{ id: x.id, name: x.name }] : []
)
// ~1.1 ms

// Rule of thumb:
//   < 1,000  items → use whatever is most readable
//   1,000–50,000   → prefer reduce() or flatMap() over chained map().filter()
//   > 50,000 items → use for-of, consider Web Worker or server-side processing
//   > 1 MB JSON    → use streaming parser (jsonstream, oboe.js) to avoid blocking parse

For comprehensive benchmarks covering parse, stringify, and iteration, see JSON performance in JavaScript. For merging two transformed objects together, see merge JSON objects in JavaScript.