ℹ️ Select 'Choose Exercise', or randomize 'Next Random Exercise' in selected language.

Choose Exercise:
Timer 00:00
WPM --
Score --
Acc --
Correct chars --

Deep Object Cloning

JavaScript

Goal -- WPM

Ready
Exercise Algorithm Area
1function deepClone(obj) {

2// Handle null or non-object types

3if (obj === null || typeof obj !== 'object') {

4return obj;

5}

6

7// Handle Arrays

8if (Array.isArray(obj)) {

9const clonedArray = [];

10for (let i = 0; i < obj.length; i++) {

11clonedArray[i] = deepClone(obj[i]);

12}

13return clonedArray;

14}

15

16// Handle Objects

17const clonedObj = {};

18for (const key in obj) {

19// Ensure we only copy own properties

20if (Object.prototype.hasOwnProperty.call(obj, key)) {

21clonedObj[key] = deepClone(obj[key]);

22}

23}

24return clonedObj;

25}

26

27const originalObject = {

28name: "Test",

29details: {

30age: 30,

31hobbies: ["reading", "coding"]

32},

33settings: null

34};

35

36const clonedObject = deepClone(originalObject);

37

38console.log("Original:", originalObject);

39console.log("Cloned:", clonedObject);

40

41// Verify deep copy

42clonedObject.details.age = 35;

43clonedObject.details.hobbies.push("gaming");

44

45console.log("Original after modification:", originalObject);

46console.log("Cloned after modification:", clonedObject);

47

48const emptyObj = {};

49console.log("Cloning empty object:", deepClone(emptyObj));

50

51const primitive = 123;

52console.log("Cloning primitive:", deepClone(primitive));
Algorithm description viewbox

Deep Object Cloning

Algorithm description:

This algorithm provides a function to create a deep copy of a plain JavaScript object. A deep copy means that not only the top-level object is copied, but also all nested objects and arrays are recursively copied. This is essential when you need to modify a complex data structure without affecting the original, preventing unintended side effects in your application.

Algorithm explanation:

The `deepClone` function recursively traverses the input object. It first checks for primitive types or `null`, returning them directly as they are immutable. For arrays, it iterates through each element and recursively calls `deepClone` on it, building a new array. For objects, it iterates through the object's own properties and recursively calls `deepClone` on each property's value, constructing a new object. This recursive approach ensures that all levels of nesting are copied. The `hasOwnProperty` check prevents copying inherited properties. The function handles nested objects and arrays effectively, creating independent copies of all data structures.

Pseudocode:

function deepClone(value):
  if value is null or not an object:
    return value

  if value is an array:
    create an empty array, clonedArray
    for each element in value:
      add deepClone(element) to clonedArray
    return clonedArray

  create an empty object, clonedObject
  for each key in value:
    if value has own property key:
      set clonedObject[key] to deepClone(value[key])
  return clonedObject