Classic utilities

Small helpers with clear rules

A utility is a small function you can reuse in many places. Each classic utility has one job:

• deepClone copies a value and every object inside it.
• deepEqual checks whether two values hold the same data.
• curry lets you pass a function's arguments a few at a time.
• compose and pipe join small functions into one.
• memoize saves a result, so the same call doesn't do the work twice.
• once lets a function run only one time.
• flattenObject, unflatten, and get turn nested objects into paths like "user.name" and back.

Each job sounds simple. The hard part is the unusual inputs, called edge cases. Examples are an object that points to itself, the value NaN, an empty array, or a key with a dot in it. A good utility says what it does with each one.

You met the ideas behind these helpers in earlier lessons: advanced recursion, currying, composition, memoization, closures, WeakMap and WeakSet, messaging and cloning, and Object.keys, values, entries. The polyfill array methods lesson builds array helpers the same way. This lesson puts the ideas together. For each helper you will:

1. Write its rules: which inputs it accepts, and what it gives back for each one.
2. Build a simple version and watch it fail on an edge case.
3. Fix it.
4. Prove each rule with a test that runs real JavaScript.

JavaScript has several ways to copy data, and each one handles edge cases differently. The table compares four of them:

• deepClone is the helper you build in this lesson.
• structuredClone is built into browsers and Node.js.
• A JSON round trip is JSON.parse(JSON.stringify(value)). It turns the value into text, then back into a value.
• Spread is { ...value }. It copies only the top level.

Read each row as: "when I copy this kind of value, here is what each way gives me."

To deep clone a value means to copy it and every object inside it. The copy then shares nothing with the original. A first try usually handles arrays and plain objects. It has two problems:

• It never finishes when an object points back to itself. A loop like that is called a cycle.
• It turns Dates, RegExps, Maps, and Sets into plain objects, and it drops symbol keys. It also loses the object's prototype, the shared object where class methods like greet live.

So start with the rules. Each row below is one kind of input and what deepClone should do with it. Each row also becomes a test.

1function cloneJsonStyle(value) {2  if (value === null || typeof value !== "object") return value;3  if (Array.isArray(value)) return value.map(cloneJsonStyle);4  const copy = {};5  for (const key of Object.keys(value)) {6    copy[key] = cloneJsonStyle(value[key]);7  }8  return copy;9}10 11const profile = { name: "Ada" };12profile.self = profile;13console.log(cloneJsonStyle(profile));

1. Line 6 calls cloneJsonStyle again for every property. A function that calls itself like this is called recursion.
2. Line 12 makes profile.self point back to profile. That is the cycle.
3. Line 13 copies profile. That means copying profile.self, which is profile again, and so on. The calls never end, so JavaScript stops them with a RangeError.

The fix is a WeakMap called seen. A WeakMap is a Map whose keys must be objects. Before the fixed clone copies an object's properties, it writes "this original → this copy" into seen. When the same original shows up again, it gives back the copy it already made.

Step through the fixed deepClone below. The object has a class, a RegExp, a Map with a Set inside, and a cycle. Watch for the step where self finds the copy in seen.

1function deepClone(value, options = {}, seen = new WeakMap()) {Run2  if (value === null || (typeof value !== "object" && typeof value !== "function")) return value;3  if (typeof value === "function") return value;4  if (seen.has(value)) return seen.get(value);5  if (value instanceof Date) {6    const copy = new Date(value.getTime());7    seen.set(value, copy);8    return copy;9  }10  if (value instanceof RegExp) {11    const copy = new RegExp(value.source, value.flags);12    copy.lastIndex = value.lastIndex;13    seen.set(value, copy);14    return copy;15  }16  if (value instanceof Map) {17    const copy = new Map();18    seen.set(value, copy);19    for (const [key, entry] of value) {20      copy.set(deepClone(key, options, seen), deepClone(entry, options, seen));21    }22    return copy;23  }24  if (value instanceof Set) {25    const copy = new Set();26    seen.set(value, copy);27    for (const entry of value) copy.add(deepClone(entry, options, seen));28    return copy;29  }30  const copy = Array.isArray(value)31    ? new Array(value.length)32    : options.preservePrototype === false33      ? {}34      : Object.create(Object.getPrototypeOf(value));35  seen.set(value, copy);36  for (const key of Reflect.ownKeys(value)) {37    if (Array.isArray(value) && key === "length") continue;38    Object.defineProperty(copy, key, {39      value: deepClone(value[key], options, seen),40      enumerable: true,41      configurable: true,42      writable: true,43    });44  }45  return copy;46}47 48class Profile {49  constructor(name) { this.name = name; }50  greet() { return "Hi " + this.name; }51}52const original = new Profile("Ada");53original.pattern = /clone/gi;54original.pattern.lastIndex = 2;55original.visits = new Map([[{ day: "Mon" }, new Set([1, 2])]]);56original.self = original;57 58const copy = deepClone(original);59console.log(copy !== original);60console.log(copy instanceof Profile);61console.log(copy.pattern.lastIndex);62console.log([...copy.visits.values()][0].has(2));63console.log(copy.self === copy);

Now compare the four ways of copying yourself. Pick a value and see what each way gives back.

1const value = makeValue("date");2console.log("deepClone:", summarize(deepClone(value)));3try { console.log("structuredClone:", summarize(structuredClone(value))); }4catch (error) { console.log("structuredClone:", error.name); }5try { console.log("JSON:", summarize(JSON.parse(JSON.stringify(value)))); }6catch (error) { console.log("JSON:", error.name); }7console.log("spread:", summarize({ ...value }));

Before you write your own clone, check structuredClone. It copies cycles, Dates, Maps, and Sets. Write your own clone only when you need different rules. For example:

• You want to keep a class's prototype, so its methods still work on the copy.
• You want functions kept as they are, instead of an error.

const profile = { name: "Asha", joined: new Date("2024-01-01T00:00:00.000Z") };
profile.self = profile;
const copy = structuredClone(profile);
console.log(copy !== profile);
console.log(Object.prototype.toString.call(copy.joined) === "[object Date]");
console.log(copy.self === copy);

Line 1 makes a profile with a Date. Line 2 makes profile.self point back to profile. Line 3 copies everything. All three logs print true:

• Line 4: the copy is a different object from the original.
• Line 5: copy.joined is still a Date.
• Line 6: copy.self points at the copy, not at the original.

Now the second helper. deepEqual(a, b) answers one question: do a and b hold the same data? Again, start with the rules. Each row below is one case and the rule this lesson picks for it.

1function deepEqual(a, b, seen = new WeakMap()) {2  if (Object.is(a, b)) return true;3  if (a === null || b === null || typeof a !== "object" || typeof b !== "object") return false;4  const known = seen.get(a);5  if (known?.has(b)) return true;6  if (!known) seen.set(a, new WeakSet([b]));7  else known.add(b);8  if (Object.getPrototypeOf(a) !== Object.getPrototypeOf(b)) return false;9  if (a instanceof Date || b instanceof Date) return a instanceof Date && b instanceof Date && Object.is(a.getTime(), b.getTime());10  if (a instanceof RegExp || b instanceof RegExp) return a instanceof RegExp && b instanceof RegExp && a.source === b.source && a.flags === b.flags && a.lastIndex === b.lastIndex;11  if (Array.isArray(a) || Array.isArray(b)) {12    return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((item, index) => deepEqual(item, b[index], seen));13  }14  if (a instanceof Map || b instanceof Map) {15    if (!(a instanceof Map) || !(b instanceof Map) || a.size !== b.size) return false;16    const unmatched = [...b.entries()];17    return [...a.entries()].every(([key, value]) => {18      const index = unmatched.findIndex(([otherKey, otherValue]) => deepEqual(key, otherKey, seen) && deepEqual(value, otherValue, seen));19      if (index === -1) return false;20      unmatched.splice(index, 1);21      return true;22    });23  }24  if (a instanceof Set || b instanceof Set) {25    if (!(a instanceof Set) || !(b instanceof Set) || a.size !== b.size) return false;26    const unmatched = [...b.values()];27    return [...a.values()].every((value) => {28      const index = unmatched.findIndex((other) => deepEqual(value, other, seen));29      if (index === -1) return false;30      unmatched.splice(index, 1);31      return true;32    });33  }34  const aKeys = Reflect.ownKeys(a);35  const bKeys = Reflect.ownKeys(b);36  if (aKeys.length !== bKeys.length) return false;37  const bKeySet = new Set(bKeys);38  return aKeys.every((key) => bKeySet.has(key) && deepEqual(a[key], b[key], seen));39}40 41const left = { n: NaN, z: -0, list: [1, { x: 2 }] };42const right = { list: [1, { x: 2 }], z: 0, n: NaN };43console.log(deepEqual(left, right));44right.z = -0;45console.log(deepEqual(left, right));46left.self = left;47right.self = right;48console.log(deepEqual(left, right));49console.log(deepEqual(new Map([[{ id: 1 }, new Set([2])]]), new Map([[{ id: 1 }, new Set([2])]])));

A simple first try starts with a === b. That already fails for NaN, because NaN === NaN is false. So line 2 uses Object.is(a, b) instead. Object.is works like === with two differences: NaN equals NaN, and +0 and -0 are different.

The rest of the function, in plain words:

1. Lines 4 to 7 write each pair of objects being compared into seen. If the same pair shows up again, the two values are going around the same cycle, so line 5 returns true.
2. Line 8 says both objects must have the same prototype.
3. Lines 11 to 13 compare two arrays item by item, in order.
4. Lines 14 to 33 match Map entries and Set values by their data, not by which object they are.
5. Lines 34 to 38 compare plain objects: the same number of own keys, and equal values under each key.

The four logs print false, true, true, true. The first is false because left.z is -0 and right.z is 0. Line 44 sets right.z to -0, so line 45 prints true. Line 48 compares two objects that each point to themselves. Line 49 compares two Maps with equal data.

const hole = Array(1);
const missingValue = [undefined];
console.log(0 in hole);
console.log(0 in missingValue);
console.log(hole.flat().length);

An array can have a hole: an index with nothing stored at it. Line 1 makes an array of length 1 with a hole at index 0. Line 2 makes an array that really stores undefined at index 0. The logs:

• Line 3 prints false: index 0 doesn't exist in hole.
• Line 4 prints true: index 0 exists in missingValue.
• Line 5 prints 0: flat() skips holes, so nothing is left.

So a hole and undefined are different. Watch out: every on line 12 of deepEqual skips holes too, so that short version can't see the difference. The version this lesson's tests use also checks that each index exists on both sides.

Currying turns a function that takes several arguments into one you can call a few arguments at a time. The currying lesson explains why that helps. Here you build the helper with three rules:

• It runs the real function once it has enough arguments. "Enough" is fn.length, the number of parameters the function lists. This number is called the arity.
• Each call can pass one argument or several.
• A special placeholder value, __, keeps a slot open, so you can fill it later.

1const __ = Symbol("placeholder");2function curry(fn, arity = fn.length) {3  return function curried(...args) {4    const complete = args.length >= arity && args.slice(0, arity).every((arg) => arg !== __);5    if (complete) return fn.apply(this, args.slice(0, arity));6    return function collect(...more) {7      const merged = args.map((arg) => arg === __ && more.length ? more.shift() : arg).concat(more);8      return curried.apply(this, merged);9    };10  };11}12 13const format = (greeting, name, punctuation) => greeting + ", " + name + punctuation;14const greet = curry(format);15console.log(greet("Hi")("Ada")("!"));16console.log(greet("Hi", "Lin")("."));17console.log(greet(__, "Grace")("Hello")("!"));

1. Line 1 makes the placeholder. It is a Symbol, a value that never equals any other value.
2. Line 2 sets arity to fn.length, unless you pass a number yourself.
3. Line 4 checks two things: are there at least arity arguments, and is none of the first arity a placeholder?
4. If both are yes, line 5 calls the real function.
5. If not, line 6 returns a new function that waits for more arguments.
6. Line 7 puts the new arguments into the placeholder slots first. Any left over go at the end.

Line 17 shows the placeholder at work. greet(__, "Grace") leaves the greeting open. ("Hello") fills it. ("!") adds the last argument, so the line prints Hello, Grace!.

One catch: fn.length doesn't count a rest parameter like ...args, and it stops at the first parameter with a default value. For those functions, pass the arity yourself, like curry(fn, 3).

Composition joins small functions into one. The output of each function becomes the input of the next. Two helpers do this:

• pipe(a, b, c) runs a first, then b, then c. You list them in the order they run.
• compose(c, b, a) runs them in the same order, but you list them backwards, the way you would write c(b(a(x))).

1const compose = (...fns) => (input) =>2  fns.reduceRight((value, fn) => fn(value), input);3const pipe = (...fns) => (input) =>4  fns.reduce((value, fn) => fn(value), input);5const pipeAsync = (...fns) => (input) =>6  fns.reduce((promise, fn) => promise.then(fn), Promise.resolve(input));7 8const trim = (text) => text.trim();9const lower = (text) => text.toLowerCase();10const dash = (text) => text.replaceAll(" ", "-");11 12console.log(compose(dash, lower, trim)("  Utility Lesson  "));13console.log(pipe(trim, lower, dash)("  Utility Lesson  "));14pipeAsync(15  async (id) => ({ id, role: "admin" }),16  async (user) => user.role.toUpperCase(),17)(7).then(console.log);

Each helper walks the list of functions and passes a value along:

• compose, on lines 1 and 2, uses reduceRight. It walks the list from the end.
• pipe, on lines 3 and 4, uses reduce. It walks the list from the start.
• pipeAsync, on lines 5 and 6, is for functions that return Promises. It starts with Promise.resolve(input) and adds each function with .then(fn).

Lines 12 and 13 both print utility-lesson. Lines 14 to 17 print ADMIN after both async steps finish.

To memoize a function means to save its results in a cache, a store of saved answers. The next call with the same arguments gets the saved answer instead of doing the work again. Each saved answer sits under a key, a value that names that call.

A simple first try makes the key with JSON.stringify(args) and hides the cache inside. That causes problems:

• { a: 1, b: 2 } and { b: 2, a: 1 } get different keys, even though they hold the same data.
• Two different objects with the same data get the same key.
• Functions disappear from the key.
• Nobody can empty the cache, so it only grows.

The fixed memoize takes a second argument, a resolver. A resolver is a function you write that makes the key. The fixed version also shows its cache, so tests can look inside and empty it.

1function memoize(fn, resolver = (...args) => JSON.stringify(args)) {2  const cache = new Map();3  function memoized(...args) {4    const key = resolver(...args);5    if (cache.has(key)) return cache.get(key);6    const result = fn.apply(this, args);7    cache.set(key, result);8    return result;9  }10  memoized.cache = cache;11  memoized.clear = () => cache.clear();12  return memoized;13}14 15function once(fn) {16  let called = false;17  let result;18  let error;19  let threw = false;20  return function runOnce(...args) {21    if (!called) {22      called = true;23      try { result = fn.apply(this, args); }24      catch (caught) { threw = true; error = caught; throw caught; }25    }26    if (threw) throw error;27    return result;28  };29}30 31let calls = 0;32const area = memoize((w, h) => { calls++; return w * h; }, (w, h) => w + "x" + h);33console.log(area(3, 4));34console.log(area(3, 4));35console.log(calls);36area.clear();37console.log(area(3, 4));38console.log(calls);39 40const button = { label: "save", init: once(function (suffix) { return this.label + suffix; }) };41console.log(button.init("!"));42console.log(button.init("?"));

How memoize works, line by line:

1. Line 2 makes the cache, a Map.
2. Line 4 asks the resolver for the key.
3. Line 5 returns the saved answer if the key is already in the cache.
4. Otherwise, lines 6 to 8 run the function, save the result, and return it.
5. Line 10 shows the cache, and line 11 adds a clear function that empties it.

On line 32, the resolver (w, h) => w + "x" + h makes the key "3x4" for area(3, 4). Lines 33 and 34 both print 12, and line 35 prints 1: the function ran once. Line 36 empties the cache, so line 37 runs the function again, and line 38 prints 2.

once(fn) is simpler. It returns a new function, called a wrapper, that works like this:

• The first call runs fn and saves the result. Line 23 uses fn.apply(this, args), so fn gets the same this and arguments as the wrapper.
• Every later call gives back that first result, even with different arguments.

Lines 41 and 42 both print save!. The second call passes "?", but fn doesn't run again.

Two timer helpers follow the same habit. A timer runs code later, with setTimeout.

• debounce waits until the calls stop for wait milliseconds. Then it runs once, with the last arguments. A search box that waits until you stop typing works like this.
• throttle runs at most once in each wait window. If more calls come during the window, it runs once more at the end, with the last arguments.

Testing timers with real time is slow. So the example uses a fake clock: an object with its own setTimeout and a tick(ms) method that moves time forward at once.

1function createFakeClock() {2  let now = 0;3  let nextId = 1;4  const tasks = [];5  return {6    now: () => now,7    setTimeout(callback, wait) {8      const task = { id: nextId++, time: now + wait, callback, cleared: false };9      tasks.push(task);10      return task.id;11    },12    clearTimeout(id) {13      for (const task of tasks) if (task.id === id) task.cleared = true;14    },15    tick(ms) {16      const end = now + ms;17      while (true) {18        const ready = tasks.filter((task) => !task.cleared && task.time <= end).sort((a, b) => a.time - b.time)[0];19        if (!ready) break;20        ready.cleared = true;21        now = ready.time;22        ready.callback();23      }24      now = end;25    },26  };27}28 29function debounce(fn, wait, clock = { setTimeout, clearTimeout }) {30  let timeout;31  return function debounced(...args) {32    clock.clearTimeout(timeout);33    timeout = clock.setTimeout(() => fn.apply(this, args), wait);34  };35}36 37function throttle(fn, wait, clock = { now: Date.now, setTimeout, clearTimeout }) {38  let lastRun = -Infinity;39  let timeout;40  let lastArgs;41  let lastThis;42  return function throttled(...args) {43    const remaining = wait - (clock.now() - lastRun);44    lastArgs = args;45    lastThis = this;46    if (remaining <= 0) {47      if (timeout !== undefined) clock.clearTimeout(timeout);48      timeout = undefined;49      lastRun = clock.now();50      fn.apply(lastThis, lastArgs);51    } else if (timeout === undefined) {52      timeout = clock.setTimeout(() => {53        timeout = undefined;54        lastRun = clock.now();55        fn.apply(lastThis, lastArgs);56      }, remaining);57    }58  };59}60 61const log = [];62const clock = createFakeClock();63const save = debounce((value) => log.push("debounced " + value), 100, clock);64save("a");65clock.tick(50);66save("b");67clock.tick(100);68const paint = throttle((value) => log.push("throttled " + value), 100, clock);69paint("one");70clock.tick(20);71paint("two");72clock.tick(100);73console.log(log.join(" | "));

1. Line 64 calls save("a") at time 0. Line 65 moves the clock to 50.
2. Line 66 calls save("b"). debounce cancels the waiting "a" and waits 100 ms again.
3. Line 67 moves the clock to 150, so "b" runs.
4. Line 69 calls paint("one"). throttle hasn't run yet, so "one" runs right away.
5. Line 71 calls paint("two") only 20 ms later, so throttle waits. Line 72 moves the clock past the end of the window, so "two" runs.
6. Line 73 prints debounced b | throttled one | throttled two.

function memoize(fn, resolver) {
  const cache = new Map();
  return (...args) => {
    const key = resolver(...args);
    if (cache.has(key)) return cache.get(key);
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}
let calls = 0;
const lookup = memoize(() => { calls += 1; return undefined; }, () => "profile");
lookup();
lookup();
console.log(calls);

Here the resolver gives every call the same key, "profile", and the function returns undefined. Line 15 prints 1, so the function ran only once.

Why it works: cache.get(key) returns undefined in two cases. Either nothing is saved, or undefined is saved. cache.has(key) on line 5 tells the two cases apart. A resolver must also give different keys to inputs that should give different results. Otherwise one input gets another input's answer.

A few more rules you need to decide on:

• The resolver sees the arguments, not this. If a memoized method depends on its object, put that object in the key, or keep one cache per object.
• A cache that lives a long time keeps growing. Empty it with clear, or limit its size.
• If fn throws an error, this once saves the error and throws it again on every later call. Decide whether a failed first run should be allowed to try again.

To flatten an object means to turn nested data into one level of keys. Each key is a path: the names you follow to reach a value, joined with dots. For example, { user: { name: "Ada" } } becomes { "user.name": "Ada" }. unflatten does the reverse.

The walking part is plain recursion. The hard part is the rules. You need answers to these questions:

• How are array items written?
• What happens to an empty object or an empty array?
• Can unflatten build exactly the same shape again?
• What if a real key has a dot in it?

Each row below is one case and this lesson's rule for it. Each row is also a test.

Step through the code below. Watch flattenObject build each path, then watch unflatten build the object again.

1function flattenObject(value, prefix = "", output = {}) {Run2  const isObject = value !== null && typeof value === "object";3  if (!isObject) {4    if (prefix) output[prefix] = value;5    return output;6  }7  const entries = Array.isArray(value)8    ? value.map((entry, index) => [String(index), entry])9    : Object.entries(value);10  if (entries.length === 0 && prefix) {11    output[prefix] = Array.isArray(value) ? [] : {};12    return output;13  }14  for (const [key, entry] of entries) {15    const path = prefix ? prefix + "." + key : key;16    flattenObject(entry, path, output);17  }18  return output;19}20 21function unflatten(flat) {22  const root = {};23  for (const [path, value] of Object.entries(flat)) {24    const parts = path.split(".");25    let cursor = root;26    parts.forEach((part, index) => {27      const last = index === parts.length - 1;28      if (last) cursor[part] = value;29      else cursor = cursor[part] ??= /^\d+$/.test(parts[index + 1]) ? [] : {};30    });31  }32  return root;33}34 35const settings = { user: { name: "Ada" }, list: ["js", "utils"], empty: {} };36const flat = flattenObject(settings);37console.log(flat["user.name"]);38console.log(flat["list.0"]);39console.log(Array.isArray(flat.empty) ? "array" : typeof flat.empty);40console.log(JSON.stringify(unflatten(flat)) === JSON.stringify(settings));

get(obj, path, defaultValue) reads a value by its path. If a part of the path is missing, it gives back defaultValue instead of throwing an error.

1function get(obj, path, defaultValue) {2  const parts = path.replace(/\[(\w+)\]/g, ".$1").split(".").filter(Boolean);3  let cursor = obj;4  for (const part of parts) {5    if (cursor == null) return defaultValue;6    cursor = cursor[part];7  }8  return cursor === undefined ? defaultValue : cursor;9}10 11const data = { users: [{ profile: { name: "Ada" } }] };12console.log(get(data, "users[0].profile.name", "Unknown"));13console.log(get(data, "users[1].profile.name", "Unknown"));

1. Line 2 turns [0] into .0, then splits the path at the dots. So users[0].profile.name becomes the parts users, 0, profile, and name.
2. Lines 4 to 7 step into the object one part at a time.
3. Line 5 returns the default if a part on the way is null or undefined.
4. Line 8 returns the default only if the final value is undefined. Values like 0, false, and null are real values, so they come back as they are.

Line 12 prints Ada. Line 13 prints Unknown, because there is no users[1].

Path strings have one weak spot. The objects {"a.b": 1} and {"a": {"b": 1}} both have the path a.b. The path alone can't say which one you mean. There are two ways to fix this:

• Escape the dot: put a backslash before a dot that belongs to a key, like a\.b.
• Write the path as an array of parts instead of one string.

const profile = { "a.b": { name: "Asha" } };
const path = ["a.b", "name"];
const name = path.reduce((value, key) => value?.[key], profile);
console.log(name);

1. Line 1 has one key named "a.b".
2. Line 2 writes the path as an array, so "a.b" stays one part.
3. Line 3 uses reduce to step through the parts. ?. gives undefined early if a part is missing.
4. Line 4 prints Asha.

An array path needs no escape rules. That helps when keys come from users.

The full path helpers this lesson tests go a bit further:

• They escape dots and brackets inside keys.
• unflatten treats a key named __proto__ as a normal key. A plain write like obj["__proto__"] = value would change the object's prototype instead.
• An array hole comes back as a real undefined. If you must keep holes, use a different format.

Real projects don't need you to rewrite these helpers from scratch. First decide who should handle the edge cases:

• Use a built-in, like structuredClone or Object.groupBy, when it follows exactly the rules you need.
• Use a library when there are many edge cases. Lodash and Ramda are two popular libraries of helpers.
• Write your own helper when you need one narrow rule and can test it.

The table lists ready-made versions of this lesson's helpers. Read each row as: "here is where to find them, and when to pick them."

const cart = [
  { name: "tea", type: "drink" },
  { name: "rice", type: "food" },
  { name: "milk", type: "drink" },
];
const grouped = Object.groupBy(cart, (item) => item.type);
console.log(grouped.drink.map((item) => item.name).join(", "));
console.log(Object.getPrototypeOf(grouped) === null);
console.log([["tea"], ["rice"]].flat().join(", "));

1. Line 6 uses Object.groupBy. It puts the cart items into groups by their type.
2. Line 7 prints tea, milk, the names in the drink group.
3. Line 8 prints true: the result's prototype is null. So it has no inherited methods like toString. Use it only as a list of groups.
4. Line 9 uses the array method flat(), which removes one level of nested arrays. It prints tea, rice.

These built-ins replace many small helpers. But flat() works on arrays only. It can't turn an object into path keys the way flattenObject does.

Common misconceptions

• "Deep clone means copy everything." Some things can't be copied safely: functions that remember outer variables, page elements, private fields, and property settings like getters. A clone copies only what its contract lists.
• "A JSON round trip is a clone." It turns data into text and back. Dates come back as strings. Maps, Sets, functions, undefined, and symbols are lost or changed. Cycles throw an error.
• "Deep equal is obvious." Each of these needs a rule: NaN, +0 and -0, prototypes, the order of Map entries, Set values, and cycles.
• "curry can always work out the arity." fn.length doesn't count a rest parameter, and it stops at the first parameter with a default value. Let callers pass the arity when needed.
• "Path strings are always safe." A key with a dot or a bracket in it needs escaping, or an array path.

Each row below is a tempting shortcut. Read it as: "this shortcut fails when this happens, so do this instead."

Key takeaways

• A helper's name is not enough. Write down which inputs it accepts, which it doesn't, and what it does with each edge case.
• deepClone and deepEqual only work well when cycles, Dates, Maps, Sets, prototypes, and the equality rules are tested.
• curry, compose, and pipe should make calls easier to read, not more clever.
• memoize needs a resolver for its keys and a way to empty its cache. once must keep the first this, arguments, and result.
• Flattened paths need rules for arrays, empty objects and arrays, escaping, the reverse step, and default values.

Next in this module, build an event emitter turns callbacks into a small system that tells listeners when something happens. The same habit applies: write the rules, build the smallest working version, and test the edge cases.