Merge pull request #103 from pertrai1/gfe-12242025

GFE Deep Clone Problem

Author: pertrai1

README.md

@@ -7,7 +7,7 @@ A comprehensive collection of coding challenges from multiple platforms for lear
 | Platform                         | Focus Area                   | Problems Solved |
 | -------------------------------- | ---------------------------- | --------------- |
 | [LeetCode](#-leetcode)           | Data Structures & Algorithms | 166             |
-| [GreatFrontEnd](#-greatfrontend) | Frontend Engineering         | 7               |
+| [GreatFrontEnd](#-greatfrontend) | Frontend Engineering         | 8               |
 
 ## 🎯 Platforms
 
@@ -43,7 +43,7 @@ A comprehensive collection of coding challenges from multiple platforms for lear
 
 **Progress**:
 
-- GFE 75: 4/75 problems
+- GFE 75: 5/75 problems
 - Blind 75: 3/75 problems
 
 **Quick Links**:

greatfrontend/README.md

@@ -8,13 +8,6 @@ Solutions to GreatFrontEnd coding challenges, focusing on frontend engineering,
 - **[GFE 75/](./gfe-75/)** - GreatFrontEnd's curated GFE 75 collection
 - **javascript/** - JavaScript-specific challenges (coming soon)
 
-## 📊 Progress
-
-- **Blind 75**: 3/75 completed
-- **GFE 75**: 4/75 completed
-
-Both collections are organized by category for easier pattern recognition and learning.
-
 ## 🔗 Resources
 
 - [GreatFrontEnd Platform](https://www.greatfrontend.com/)

greatfrontend/gfe-75/README.md

@@ -4,33 +4,34 @@ The GFE 75 is GreatFrontEnd's curated collection of 75 essential frontend coding
 
 ## 📊 Progress Tracker
 
-### Status: 4 / 75 problems completed
+### Status: 5 / 75 problems completed
 
 ## ✅ Completed Problems
 
-### JavaScript Utilities (2/20)
+### JavaScript Utilities
 
 - [Debounce](./javascript-utilities/debounce/) - Medium
 - [Flatten](./javascript-utilities/flatten/) - Medium
 - [Throttle](./javascript-utilities/throttle/) - Medium
+- [Deep Clone](./javascript-utilities/deep-clone/) - Medium
 
-### DOM Manipulation (0/15)
+### DOM Manipulation
 
 No problems completed yet
 
-### Async Programming (1/12)
+### Async Programming
 
 - [Promise.all](./async-programming/promise-all/) - Medium
 
-### Components (0/10)
+### Components
 
 No problems completed yet
 
-### Data Structures (0/10)
+### Data Structures
 
 No problems completed yet
 
-### Algorithms (0/8)
+### Algorithms
 
 No problems completed yet
 

greatfrontend/gfe-75/javascript-utilities/README.md

@@ -9,13 +9,13 @@ Essential JavaScript utility functions that are commonly asked in frontend inter
 - [Debounce](./debounce/) - Medium
 - [Flatten](./flatten/) - Medium
 - [Throttle](./throttle/) - Medium
+- [Deep Clone](./deep-clone/) - Medium
 
 ### To Do 📝
 
 - **Memoize** - Medium - Cache function results
 - **Curry** - Medium - Transform multi-argument function
 - **Partial** - Medium - Pre-fill function arguments
-- **Deep Clone** - Medium - Clone nested objects/arrays
 - **Deep Equal** - Medium - Compare nested objects
 - **Get** - Easy - Access nested object properties safely
 - **Set** - Medium - Set nested object properties

greatfrontend/gfe-75/javascript-utilities/deep-clone/README.md

@@ -0,0 +1,25 @@
+# Deep Clone
+
+The term "deep clone" is not formally defined in JavaScript's language specification, but is generally well understood in the community. A deep clone makes a copy of JavaScript value, leading to a completely new value that has no references pointing back to the properties in the original object (if it's an object). Any changes made to the deep-copied object will not affect the original object.
+
+Implement a deepClone function that performs a deep clone operation on JavaScript objects. You can assume the input only contains JSON-serializable values (`null`, `boolean`, `number`, `string`, `Array`, `Object`) and will not contain any other objects like `Date`, `Regex`, `Map` or `Set`.
+
+## Examples
+
+```JavaScript
+const obj1 = { user: { role: 'admin' } };
+const clonedObj1 = deepClone(obj1);
+
+clonedObj1.user.role = 'guest'; // Change the cloned user's role to 'guest'.
+clonedObj1.user.role; // 'guest'
+obj1.user.role; // Should still be 'admin'.
+
+const obj2 = { foo: [{ bar: 'baz' }] };
+const clonedObj2 = deepClone(obj2);
+
+obj2.foo[0].bar = 'bax'; // Modify the original object.
+obj2.foo[0].bar; // 'bax'
+clonedObj2.foo[0].bar; // Should still be 'baz'.
+```
+
+GFE Url: [https://www.greatfrontend.com/interviews/study/gfe75/questions/javascript/deep-clone](https://www.greatfrontend.com/interviews/study/gfe75/questions/javascript/deep-clone)

greatfrontend/gfe-75/javascript-utilities/deep-clone/deep-clone.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+import { deepClone } from './deep-clone';
+
+describe('deepClone', () => {
+  it('primitive values', () => {
+    expect(deepClone('foo')).toEqual('foo');
+    expect(deepClone(123)).toEqual(123);
+  });
+
+  it('objects', () => {
+    const obj = { role: 'foo' };
+    const clonedObj = deepClone(obj);
+    clonedObj.role = 'bar';
+    expect(obj).toEqual({ role: 'foo' });
+  });
+
+  it('nested objects', () => {
+    const obj = { user: { role: 'admin', id: '123' } };
+    const clonedObj = deepClone(obj);
+    clonedObj.user.role = 'bar';
+    expect(obj).toEqual({ user: { role: 'admin', id: '123' } });
+  });
+});

greatfrontend/gfe-75/javascript-utilities/deep-clone/deep-clone.ts

@@ -0,0 +1,11 @@
+export function deepClone<T>(value: T): T {
+  if (typeof value !== 'object' || value === null) {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    return value.map((val) => deepClone(val)) as T;
+  }
+  return Object.fromEntries(
+    Object.entries(value).map(([key, val]) => [key, deepClone(val)])
+  ) as T;
+}