CrackFrontendCF
Resources
Practice
CrackFrontend

Your guide to mastering frontend interviews

Resources

LibraryPracticeDonate

Company

About UsContact

Legal

Privacy PolicyTerms of Service

Built with ❀️ by Tushar Khanna

CrackFrontendCF
Resources
Practice

πŸ“‹ Deep Clone Implementation

Deep clones objects with dates, maps, sets, and circular references. Covers structuredClone, Lodash, and manual recursion approaches.

Here are the most reliable ways to perform a deep clone of an object in JavaScript. -- βœ… Structured Clone (Modern & Robust) Supports functions, dates, maps, sets, circular references, etc. βœ… Fast and standard. ❌ Not supported in older environments (e.g., Node <17, legacy browsers). -- βœ… 2. Lodash βœ… Handles most edge cases. βœ… Works in all JS environments. ❌ Requires external dependency. -- ⚠️ 3. Manual Recursion (Custom Deep Clone) For full control; avoid unless necessary. βœ… Fine-grained control. ❌ Error-prone, needs frequent updates for edge cases. -- ⚠️ 4. (Not Recommended for Complex Objects) ❌ Strips functions, , symbols, dates, regex, etc. βœ… Okay for simple objects only. -- Recommendation: Use if environment supports it. Else use from Lodash. Use manual recursion only when you need custom behavior. Let me know your runtime constraints if you want a tailored version. -- <!-quiz-start --Q1: What is a major limitation of using for deep cloning? [ ] It's too slow for small objects [x] It strips functions, undefined, symbols, dates, and regex [ ] It only works in Node.js [ ] It cannot handle nested objects Q2: What is used for? [ ] Creating shallow copies of objects [x] Creating deep clones with native browser support [ ] Cloning only primitive values [ ] Converting objects to JSON strings Q3: Why is a used in manual deep clone implementations? [ ] To improve performance [ ] To store primitive values [x] To handle circular references without memory leaks [ ] To preserve prototype chains <!-quiz-end --
JavaScriptUtilities
βž• Chained Sum (Curried Function)
medium
⏱️ Debounce Function in JavaScript
medium
πŸ“‹ Deep Clone Implementation
easy
πŸ”„ distinctUntilChanged() Polyfill
easy
πŸ“„ Document Comparison (Diff)
easy
πŸ“’ Custom EventEmitter Implementation
hard
πŸ“¦ Flatten Object Implementation
medium
🐫➑️🐍 Converting camelCase to snake_case in JavaScript (Without Regex)
easy
πŸ”„ mapLimit: Controlled Concurrency in JavaScript
medium
⚑️ Fire on Push: Dispatching Custom Events When an Array Changes in JavaScript
medium
πŸ”„ Removing Circular References from Objects
hard
πŸ“Š Sampling Function: Execute Once Every N Calls
medium
⏱️ Throttle Function in JavaScript
medium
πŸ”„ undefinedToNull Utility
medium
3 of 14
LibraryJavaScriptUtilities50 of 61

πŸ“‹ Deep Clone Implementation

jsutilseasy

Here are the most reliable ways to perform a deep clone of an object in JavaScript.


βœ… Structured Clone (Modern & Robust)

Supports functions, dates, maps, sets, circular references, etc.

const deepClone = structuredClone(original);

βœ… Fast and standard.

❌ Not supported in older environments (e.g., Node <17, legacy browsers).


βœ… 2. Lodash cloneDeep

import cloneDeep from 'lodash/cloneDeep';

const deepClone = cloneDeep(original);

βœ… Handles most edge cases.

βœ… Works in all JS environments.

❌ Requires external dependency.


⚠️ 3. Manual Recursion (Custom Deep Clone)

For full control; avoid unless necessary.

function deepClone(obj, hash = new WeakMap()) {
  if (Object(obj) !== obj || obj instanceof Function) return obj;
  if (hash.has(obj)) return hash.get(obj); // handle circular refs

  const result = Array.isArray(obj) ? [] : 
                 obj instanceof Date ? new Date(obj) :
                 obj instanceof RegExp ? new RegExp(obj.source, obj.flags) :
                 Object.create(Object.getPrototypeOf(obj));

  hash.set(obj, result);
  for (const key of Reflect.ownKeys(obj)) {
    result[key] = deepClone(obj[key], hash);
  }
  return result;
}

// or more simply:

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') return obj;

  const newObj = Array.isArray(obj) ? [] : {};
  for (const key of Object.keys(obj)) {
    newObj[key] = deepCopy(obj[key]);
  }
  return newObj;
}

βœ… Fine-grained control.

❌ Error-prone, needs frequent updates for edge cases.


⚠️ 4. JSON.parse(JSON.stringify(obj)) (Not Recommended for Complex Objects)

const deepClone = JSON.parse(JSON.stringify(original));

❌ Strips functions, undefined, symbols, dates, regex, etc.

βœ… Okay for simple objects only.


Recommendation:

  • Use structuredClone if environment supports it.
  • Else use cloneDeep from Lodash.
  • Use manual recursion only when you need custom behavior.

Let me know your runtime constraints if you want a tailored version.


Quick Quiz

Test your understanding with 3 quick questions

Q1What is a major limitation of using `JSON.parse(JSON.stringify(obj))` for deep cloning?
Q2What is `structuredClone` used for?
Q3Why is a `WeakMap` used in manual deep clone implementations?

Continue Reading

CrackFrontend

Your guide to mastering frontend interviews

Resources

LibraryPracticeDonate

Company

About UsContact

Legal

Privacy PolicyTerms of Service

Built with ❀️ by Tushar Khanna