DEV Community: VivekSinh Rajput

structuredClone() how to use it???

VivekSinh Rajput — Tue, 18 Feb 2025 18:54:04 +0000

🧠 Understanding `structuredClone()` in JavaScript

The structuredClone() method provides a reliable way to create deep copies of objects, arrays, and complex data structures in JavaScript. It's designed to handle a wide range of data types, including Map, Set, Date, RegExp, and more, which older methods like JSON.parse(JSON.stringify()) struggle with.

Let's break down its usage, mechanics, pros, cons, and internals in depth.

⚙️ What is `structuredClone()`?

structuredClone() is a built-in JavaScript function introduced to make deep copying easier and more reliable.
It recursively copies all properties of an object or array, including nested structures.
Unlike JSON.parse(JSON.stringify()), it supports modern JavaScript objects like Map, Set, Date, ArrayBuffer, etc.

📜 Syntax:

const deepCopy = structuredClone(value);

Parameters:

value: The value you want to deep copy.
(Optional) transferList: An array of objects to transfer ownership (like ArrayBuffer).

Return: A deeply cloned version of the input value.

🔍 How `structuredClone()` Works

When you call structuredClone(), JavaScript:

Traverses the object recursively.
Copies primitive values directly.
Allocates new memory for complex types like Object, Array, Map, etc.
Skips functions (they aren't cloneable).
Uses structured cloning algorithm, originally defined for web workers.

🛠️ Practical Examples

1️⃣ Deep Copy an Array

const arr = [1, 2, [3, 4], { a: 5 }];
const deepCopy = structuredClone(arr);

// Modify the copy
deepCopy[2][0] = 999;
deepCopy[3].a = 888;

console.log(arr);      // [1, 2, [3, 4], { a: 5 }] -> Original unchanged
console.log(deepCopy); // [1, 2, [999, 4], { a: 888 }]

2️⃣ Deep Copy an Object

const obj = { x: 1, y: { z: 2 }, arr: [1, 2, 3] };
const deepCopy = structuredClone(obj);

deepCopy.y.z = 999;
deepCopy.arr[0] = 100;

console.log(obj);       // { x: 1, y: { z: 2 }, arr: [1, 2, 3] } -> Original intact
console.log(deepCopy);  // { x: 1, y: { z: 999 }, arr: [100, 2, 3] }

3️⃣ Works with Complex Types

const complexObj = {
  map: new Map([['key', 'value']]),
  set: new Set([1, 2, 3]),
  date: new Date(),
  regex: /abc/i
};

const deepCopy = structuredClone(complexObj);

console.log(deepCopy.map.get('key')); // 'value'
console.log(deepCopy.set.has(2));     // true
console.log(deepCopy.date instanceof Date); // true
console.log(deepCopy.regex.test('abc'));    // true

4️⃣ Fails on Functions

const objWithFunc = {
  greet: () => console.log('Hello'),
  x: 1
};

try {
  const copy = structuredClone(objWithFunc);
} catch (error) {
  console.error(error.message); // Function objects are not supported
}

🛠️ Behind the Scenes

structuredClone() implements the structured cloning algorithm, which:

Serializes the value into a cloneable format.
Deserializes it into a new memory location.
Recursively processes nested structures.

🧠 Key Mechanisms

Primitive types: Copied by value.
Objects/arrays: Recursively cloned.
Special objects: Map, Set, Date, ArrayBuffer, etc., are supported.
Unsupported: Functions, DOM nodes, and certain special objects.

⚔️ Pros and Cons of `structuredClone()`

✅ Advantages (Pros)

True Deep Copy:
- Recursively copies nested structures.
Supports Complex Types:
- Works with Map, Set, Date, RegExp, ArrayBuffer, and other modern data types.
Cleaner Syntax:
- One-liner structuredClone(obj) for deep copying.
Safer than JSON-based cloning:
- Preserves Date, RegExp, Map, Set, and other objects correctly.

❌ Disadvantages (Cons)

No Function Cloning:
- Functions, closures, and class instances aren't supported.
Performance Overhead:
- Slower than shallow copies due to recursive traversal.
Browser Compatibility:
- Supported in modern browsers but not in older Node.js versions.
Circular References:
- While supported, it adds extra complexity to the operation.

🆚 Comparison with Other Methods

Feature	structuredClone()	JSON.parse(JSON.stringify())	Lodash.cloneDeep()
Deep Copy	✅ Yes	✅ Yes	✅ Yes
Functions Supported	❌ No	❌ No	✅ Yes
Handles Circular References	✅ Yes	❌ No	✅ Yes
Supports Dates	✅ Yes	❌ No	✅ Yes
Supports RegExp	✅ Yes	❌ No	✅ Yes
Supports Map/Set	✅ Yes	❌ No	✅ Yes
Performance	⚡ Fast	⚡ Faster (for simple objects)	🐢 Slower
Browser Support	🌐 Modern Only	🌐 Universal	🌐 Requires Dependency

🧪 Performance Insights

While structuredClone() is efficient, it is slower than shallow copying methods like the spread operator.

🛠️ Benchmark Test

const obj = { a: 1, b: { c: [1, 2, 3] } };

// Shallow Copy
console.time('Shallow Copy');
const shallow = { ...obj };
console.timeEnd('Shallow Copy');

// Deep Copy with JSON
console.time('JSON Clone');
const jsonClone = JSON.parse(JSON.stringify(obj));
console.timeEnd('JSON Clone');

// Deep Copy with structuredClone
console.time('structuredClone');
const deepClone = structuredClone(obj);
console.timeEnd('structuredClone');

Expected Output (Approx.):

Shallow Copy: ~0.1 ms
JSON Clone: ~0.3 ms
structuredClone: ~0.5 ms

Explanation:

Shallow copy: Just copies references.
JSON clone: Serializes and deserializes.
structuredClone: Performs more complex logic to handle various types.

⚠️ Edge Cases and Limitations

Functions:

Functions are not cloneable. Attempting to clone them results in a DataCloneError.
DOM Elements:

structuredClone() doesn't support cloning DOM nodes like HTMLElement or Window.
Prototypes Lost:

Custom prototypes are not preserved, resulting in Object prototypes.
Symbol Properties:

Symbols as object properties are ignored.

🛠️ Alternative Custom Deep Copy (Manual)

For educational purposes, here's a manual deep clone implementation:

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

  if (Array.isArray(obj)) {
    return obj.map(deepClone);
  }

  if (obj instanceof Map) {
    return new Map([...obj.entries()].map(([key, value]) => [deepClone(key), deepClone(value)]));
  }

  if (obj instanceof Set) {
    return new Set([...obj].map(deepClone));
  }

  if (obj instanceof Date) {
    return new Date(obj);
  }

  if (obj instanceof RegExp) {
    return new RegExp(obj.source, obj.flags);
  }

  const clonedObj = {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clonedObj[key] = deepClone(obj[key]);
    }
  }
  return clonedObj;
}

Usage:

const obj = { a: 1, b: { c: 2 }, d: new Date(), e: new Set([1, 2, 3]) };
const deepCopied = deepClone(obj);
console.log(deepCopied);

🚀 Conclusion

structuredClone() is a powerful, modern, and reliable way to create deep copies of arrays and objects without the quirks and limitations of JSON-based approaches. While it doesn't support functions or classes, it remains an ideal solution for most data structures.

When performance isn't critical and compatibility is guaranteed, structuredClone() should be your go-to method for deep cloning in JavaScript. ✅

what is shallow copy and deep copy in TS...

VivekSinh Rajput — Tue, 18 Feb 2025 18:42:52 +0000

Deep Copy vs Shallow Copy in JavaScript

In JavaScript, when you copy an object or array, you might either perform a shallow copy or a deep copy. Understanding the difference is crucial, especially when dealing with complex data structures.

Memory and References Basics

JavaScript objects and arrays are reference types. When you assign an object or array to a variable, you're assigning a reference to its memory location, not the actual data.

Primitive types (e.g., string, number, boolean) are stored by value.
Non-primitive types (e.g., object, array, function) are stored by reference.

Shallow Copy

A shallow copy duplicates the top-level properties but references any nested objects or arrays. Changes to the nested objects in the copy affect the original.

How It Works

Copies only the first level of the object/array.
Nested objects/arrays share the same reference.

Pitfall

When you modify a nested object in the copy, it also modifies the original object because they share the same memory reference.

Examples

1. Shallow Copy with Arrays

const arr = [1, 2, [3, 4]];

const shallowCopy = arr.slice(); // or [...arr]

shallowCopy[0] = 100;
console.log(arr); // [1, 2, [3, 4]] -> top-level unaffected

shallowCopy[2][0] = 999;
console.log(arr); // [1, 2, [999, 4]] -> nested array modified

2. Shallow Copy with Objects

const obj = { a: 1, b: { c: 2 } };

const shallowCopy = { ...obj };

shallowCopy.a = 100;
console.log(obj); // { a: 1, b: { c: 2 } } -> top-level unaffected

shallowCopy.b.c = 999;
console.log(obj); // { a: 1, b: { c: 999 } } -> nested object modified

Key Takeaway

Top-level properties are copied by value.
Nested structures are copied by reference.

Shallow Copy Methods

Arrays: Array.prototype.slice(), spread operator ([...arr]).
Objects: Object.assign(), spread operator ({...obj}).

Deep Copy

A deep copy creates a new object or array with completely independent copies of the original structure, including all nested levels.

How It Works

Recursively copies all levels of an object or array.
Nested objects/arrays get independent copies.

Safe from Mutation

Changes in the copied object or array do not affect the original.

Examples

1. Deep Copy with `structuredClone()`

const arr = [1, 2, [3, 4]];

const deepCopy = structuredClone(arr);
deepCopy[2][0] = 999;

console.log(arr); // [1, 2, [3, 4]] -> original remains intact
console.log(deepCopy); // [1, 2, [999, 4]]

2. Deep Copy with `JSON.parse(JSON.stringify())`

const obj = { a: 1, b: { c: 2 } };

const deepCopy = JSON.parse(JSON.stringify(obj));
deepCopy.b.c = 999;

console.log(obj); // { a: 1, b: { c: 2 } } -> original intact
console.log(deepCopy); // { a: 1, b: { c: 999 } }

Limitations of `JSON.parse(JSON.stringify())`

Loses functions and undefined values.
Doesn't handle Date, RegExp, Map, Set, BigInt, or Symbol.

Key Differences

Aspect	Shallow Copy	Deep Copy
Copy Depth	Only the first level	All nested levels
Nested Changes	Affect the original object	Do not affect original
Performance	Faster for small objects	Slower due to recursion
Complexity	Simple and native methods	Complex with recursion
Methods	`spread`, `slice`, `Object.assign`	`structuredClone`, `JSON.parse(JSON.stringify())`

When to Use What?

Shallow Copy:
- When you need to copy simple objects with no nested structure.
- When performance is more critical than integrity of nested data.
Deep Copy:
- When working with complex nested objects.
- When the copied object needs complete independence.

In-Depth Mechanics

Shallow Copy Mechanics

Create a new object/array.
Copy primitive values by value.
Copy objects/arrays by reference.

Example:

const obj = { x: 1, y: { z: 2 } };
const shallow = { ...obj };

Memory layout:

shallow.x: New primitive copy.
shallow.y: Same reference as obj.y.

Deep Copy Mechanics

Recursively iterate through each property.
Copy primitive values by value.
Recursively copy objects/arrays by creating new instances.

Example:

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (Array.isArray(obj)) return obj.map(deepClone);

  const newObj = {};
  for (let key in obj) {
    newObj[key] = deepClone(obj[key]);
  }
  return newObj;
}

Memory layout:

Every level is independently copied.

Performance Consideration

Deep copies take more time and resources compared to shallow copies due to the recursive nature of traversing nested structures.

Benchmark:

console.time('shallow');
const shallowCopy = [...Array(100000).keys()];
console.timeEnd('shallow');

console.time('deep');
const deepCopy = JSON.parse(JSON.stringify(Array(100000).fill({ x: 1 })));
console.timeEnd('deep');

Conclusion

Shallow Copy: Efficient but risky with nested objects.
Deep Copy: Safe but more resource-intensive.

For modern applications, structuredClone() is recommended for deep copies, as it avoids many limitations of JSON.parse(JSON.stringify()).

Array method in TS often used in developement...

VivekSinh Rajput — Tue, 18 Feb 2025 18:22:09 +0000

Here are some commonly used array methods in TypeScript for web development, with examples and explanations:

1. `map()`

Purpose: Creates a new array with the results of calling a provided function on every element in this array.
Use case: Transforming data, like converting an array of numbers to strings.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

2. `filter()`

Purpose: Creates a new array with all elements that pass the test implemented by the provided function.
Use case: Filtering out unwanted elements, like selecting only even numbers.

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

3. `reduce()`

Purpose: Reduces the array to a single value by executing a provided function for each value of the array from left-to-right.
Use case: Summing up values, flattening nested arrays, or any accumulation operation.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10

4. `forEach()`

Purpose: Executes a provided function once for each array element.
Use case: When you need to perform side effects for each element, like logging or DOM manipulation.

const fruits = ['apple', 'banana', 'orange'];
fruits.forEach(fruit => console.log(fruit));
// Output:
// apple
// banana
// orange

5. `find()`

Purpose: Returns the value of the first element in the array that satisfies the provided testing function.
Use case: Finding a specific element in an array, like finding a user by ID.

const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
const user = users.find(user => user.id === 2);
console.log(user?.name); // "Bob"

6. `some()`

Purpose: Tests whether at least one element in the array passes the test implemented by the provided function.
Use case: Checking if any item meets a condition, like if there's at least one active user.

const users = [{active: true}, {active: false}, {active: true}];
const hasActiveUser = users.some(user => user.active);
console.log(hasActiveUser); // true

7. `every()`

Purpose: Tests whether all elements in the array pass the test implemented by the provided function.
Use case: Validating that all elements meet a criterion, like all users being of legal age.

const ages = [21, 25, 28];
const allAdults = ages.every(age => age >= 18);
console.log(allAdults); // true

8. `concat()`

Purpose: Merges two or more arrays into a new array.
Use case: Combining lists from different sources, like merging two arrays of items.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const combined = array1.concat(array2);
console.log(combined); // ['a', 'b', 'c', 'd', 'e', 'f']

9. `slice()`

Purpose: Returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).
Use case: Extracting a subset of data without modifying the original array.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2, 4)); // ['camel', 'duck']

10. `includes()`

Purpose: Determines whether an array includes a certain value among its entries, returning true or false as appropriate.
Use case: Checking if an array contains a specific value, like checking for membership.

const pets = ['cat', 'dog', 'fish'];
console.log(pets.includes('dog')); // true
console.log(pets.includes('bird')); // false

11. `sort()`

Purpose: Sorts the elements of an array in place and returns the reference to the same array, now sorted.
Use case: Ordering lists, like sorting users by name or age.

const names = ['Bob', 'Alice', 'Charlie'];
names.sort();
console.log(names); // ['Alice', 'Bob', 'Charlie']

These methods are fundamental for manipulating and querying data in arrays, which are central to many programming tasks in web development. TypeScript enhances these methods with type safety, which can prevent common errors by catching type mismatches at compile-time.

String methods in TS often used in developement...

VivekSinh Rajput — Tue, 18 Feb 2025 18:06:26 +0000

Here's a rundown of commonly used string methods in TypeScript for web development, along with examples that address real-world problems:

1. `trim()`

Purpose: Remove whitespace from both ends of a string.
Use case: Cleaning up user input, especially from text fields.

let userInput = "   Some text with spaces   ";
let cleanedInput = userInput.trim();
console.log(cleanedInput); // "Some text with spaces"

2. `toLowerCase()` and `toUpperCase()`

Purpose: Convert string case.
Use case: Normalizing text for comparison (case-insensitive search), making text uniform for UI consistency.

let userName = "John Doe";
let searchQuery = "john";
if (userName.toLowerCase() === searchQuery.toLowerCase()) {
    console.log("User found!");
}

3. `split()`

Purpose: Split a string into an array of substrings based on a separator.
Use case: Parsing CSV data, URL parameters, or any delimited data.

// Parsing a CSV string
let csvData = "name,age,city\nJohn,30,New York";
let rows = csvData.split("\n");
let headers = rows[0].split(",");
console.log(headers); // ['name', 'age', 'city']

4. `join()` (used in conjunction with `split()`)

Purpose: Combine array elements into a string.
Use case: Creating strings from array data, like forming a URL from parameters.

let urlParams = ["user=John", "age=30"];
let queryString = urlParams.join("&");
console.log(queryString); // "user=John&age=30"

5. `replace()`

Purpose: Replace occurrences of a substring with another string.
Use case: Formatting text, sanitizing user input, or applying simple templating.

// Simple text templating
let template = "Hello, {name}!";
let result = template.replace("{name}", "Alice");
console.log(result); // "Hello, Alice!"

6. `includes()`

Purpose: Check if a string contains another string.
Use case: Validation, search functionality.

let email = "test@example.com";
if (email.includes("@")) {
    console.log("Valid email format");
}

7. `startsWith()` and `endsWith()`

Purpose: Check if a string begins or ends with specified characters.
Use case: Filename validation, checking URL paths, or implementing simple routing logic.

let path = "/api/v1/users";
if (path.startsWith("/api")) {
    console.log("This is an API endpoint");
}

let fileName = "report.pdf";
if (fileName.endsWith(".pdf")) {
    console.log("PDF file detected");
}

8. `substring()` or `slice()`

Purpose: Extract parts of a string.
Use case: Extracting specific parts of strings like dates, times, or parsing identifiers.

let dateString = "2023-01-01T12:00:00Z";
let datePart = dateString.substring(0, 10);  // "2023-01-01"
console.log(datePart);

9. `indexOf()` or `lastIndexOf()`

Purpose: Find the position of the first (or last) occurrence of a specified value in a string.
Use case: Locating markers within strings for parsing or processing.

let sentence = "The quick brown fox jumps over the lazy dog";
let firstThe = sentence.indexOf("the");  // 0
let lastThe = sentence.lastIndexOf("the");  // 36
console.log(firstThe, lastThe);

10. `match()` with RegEx

Purpose: Search for a match between a regular expression and a string.
Use case: Complex string pattern matching or validation like email, phone number validations.

let text = "My email is example@email.com";
let emailRegex = /\S+@\S+\.\S+/;
let emailMatch = text.match(emailRegex);
console.log(emailMatch ? emailMatch[0] : "No email found"); // "example@email.com"

These methods are foundational in handling text manipulation, which is ubiquitous in web development for tasks ranging from simple text formatting to complex data parsing. Remember, TypeScript adds type safety to these operations, which can help catch errors at compile-time rather than runtime.

Microservices in Nest js....

VivekSinh Rajput — Tue, 18 Feb 2025 17:51:30 +0000

Here's a comprehensive example of a microservices architecture using NestJS where two applications (appA and appB) run on HTTP servers and communicate via microservices using both ClientProxy for requests and MessagePattern for handling responses. This setup will demonstrate how each app can both send and handle messages:

Project Structure

Create a new directory for your project, then:

mkdir nestjs-microservices-example
cd nestjs-microservices-example

# Create appA
nest new appA
cd appA
npm install @nestjs/microservices

# Create appB
cd ../
nest new appB
cd appB
npm install @nestjs/microservices

AppA Configuration

`appA/src/main.ts`:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { Transport } from '@nestjs/microservices';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // Set up microservice for appA
  app.connectMicroservice({
    transport: Transport.TCP,
    options: {
      host: 'localhost',
      port: 8888,
    },
  });

  await app.startAllMicroservices();
  await app.listen(3000);
}
bootstrap();

`appA/src/app.module.ts`:

import { Module } from '@nestjs/common';
import { ClientsModule, Transport } from '@nestjs/microservices';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    ClientsModule.register([
      {
        name: 'APP_B_SERVICE',
        transport: Transport.TCP,
        options: {
          host: 'localhost',
          port: 8889,
        },
      },
    ]),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

`appA/src/app.controller.ts`:

import { Controller, Get, Inject } from '@nestjs/common';
import { ClientProxy } from '@nestjs/microservices';
import { MessagePattern } from '@nestjs/microservices';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(
    private readonly appService: AppService,
    @Inject('APP_B_SERVICE') private readonly appBClient: ClientProxy,
  ) {}

  @Get()
  async getHello() {
    return this.appBClient.send<string>({ cmd: 'hello' }, 'AppA');
  }

  @MessagePattern({ cmd: 'reply' })
  replyToAppB(data: string): string {
    return `AppA received: ${data}`;
  }
}

`appA/src/app.service.ts`:

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello World from AppA!';
  }
}

AppB Configuration

`appB/src/main.ts`:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { Transport } from '@nestjs/microservices';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // Set up microservice for appB
  app.connectMicroservice({
    transport: Transport.TCP,
    options: {
      host: 'localhost',
      port: 8889,
    },
  });

  await app.startAllMicroservices();
  await app.listen(3001);
}
bootstrap();

`appB/src/app.module.ts`:

import { Module } from '@nestjs/common';
import { ClientsModule, Transport } from '@nestjs/microservices';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    ClientsModule.register([
      {
        name: 'APP_A_SERVICE',
        transport: Transport.TCP,
        options: {
          host: 'localhost',
          port: 8888,
        },
      },
    ]),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

`appB/src/app.controller.ts`:

import { Controller, Get, Inject } from '@nestjs/common';
import { ClientProxy } from '@nestjs/microservices';
import { MessagePattern } from '@nestjs/microservices';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(
    private readonly appService: AppService,
    @Inject('APP_A_SERVICE') private readonly appAClient: ClientProxy,
  ) {}

  @Get()
  async getHello() {
    // AppB sends a request to AppA
    return this.appAClient.send<string>({ cmd: 'reply' }, 'Hello from AppB');
  }

  @MessagePattern({ cmd: 'hello' })
  replyToAppA(data: string): string {
    return `AppB received: ${data}`;
  }
}

`appB/src/app.service.ts`:

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello World from AppB!';
  }
}

Running the Applications

Start AppA:

   cd appA
   npm run start:dev

Start AppB:

   cd ../appB
   npm run start:dev

Now, both applications are running:

AppA is listening on port 3000 for HTTP requests and on TCP port 8888 for microservices communication.
AppB is listening on port 3001 for HTTP requests and on TCP port 8889 for microservices communication.
Visiting localhost:3000 will trigger AppA to send a message to AppB (hello command) and return AppB's response.
Visiting localhost:3001 will trigger AppB to send a message to AppA (reply command) and return AppA's response.

This setup demonstrates a complete cycle of microservices communication where both apps can act as clients and servers for each other. Remember, this example assumes both services are on the same machine for simplicity; in a production environment, you'd configure networking appropriately for inter-service communication.

DEV Community: VivekSinh Rajput

structuredClone() how to use it???

🧠 Understanding structuredClone() in JavaScript

⚙️ What is structuredClone()?

📜 Syntax:

🔍 How structuredClone() Works

🛠️ Practical Examples

1️⃣ Deep Copy an Array

2️⃣ Deep Copy an Object

3️⃣ Works with Complex Types

4️⃣ Fails on Functions

🛠️ Behind the Scenes

🧠 Key Mechanisms

⚔️ Pros and Cons of structuredClone()

✅ Advantages (Pros)

❌ Disadvantages (Cons)

🆚 Comparison with Other Methods

🧪 Performance Insights

🛠️ Benchmark Test

⚠️ Edge Cases and Limitations

🛠️ Alternative Custom Deep Copy (Manual)

🚀 Conclusion

what is shallow copy and deep copy in TS...

Deep Copy vs Shallow Copy in JavaScript

Memory and References Basics

Shallow Copy

How It Works

Pitfall

Examples

1. Shallow Copy with Arrays

2. Shallow Copy with Objects

Key Takeaway

Shallow Copy Methods

Deep Copy

How It Works

Safe from Mutation

Examples

1. Deep Copy with structuredClone()

2. Deep Copy with JSON.parse(JSON.stringify())

Limitations of JSON.parse(JSON.stringify())

Key Differences

When to Use What?

In-Depth Mechanics

Shallow Copy Mechanics

Deep Copy Mechanics

Performance Consideration

Conclusion

Array method in TS often used in developement...

1. map()

2. filter()

3. reduce()

4. forEach()

5. find()

6. some()

7. every()

8. concat()

9. slice()

10. includes()

11. sort()

String methods in TS often used in developement...

1. trim()

2. toLowerCase() and toUpperCase()

3. split()

4. join() (used in conjunction with split())

5. replace()

6. includes()

7. startsWith() and endsWith()

8. substring() or slice()

9. indexOf() or lastIndexOf()

10. match() with RegEx

Microservices in Nest js....

Project Structure

AppA Configuration

appA/src/main.ts:

appA/src/app.module.ts:

appA/src/app.controller.ts:

appA/src/app.service.ts:

AppB Configuration

appB/src/main.ts:

appB/src/app.module.ts:

🧠 Understanding `structuredClone()` in JavaScript

⚙️ What is `structuredClone()`?

🔍 How `structuredClone()` Works

⚔️ Pros and Cons of `structuredClone()`

1. Deep Copy with `structuredClone()`

2. Deep Copy with `JSON.parse(JSON.stringify())`

Limitations of `JSON.parse(JSON.stringify())`

1. `map()`

2. `filter()`

3. `reduce()`

4. `forEach()`

5. `find()`

6. `some()`

7. `every()`

8. `concat()`

9. `slice()`

10. `includes()`

11. `sort()`

1. `trim()`

2. `toLowerCase()` and `toUpperCase()`

3. `split()`

4. `join()` (used in conjunction with `split()`)

5. `replace()`

6. `includes()`

7. `startsWith()` and `endsWith()`

8. `substring()` or `slice()`

9. `indexOf()` or `lastIndexOf()`

10. `match()` with RegEx

`appA/src/main.ts`:

`appA/src/app.module.ts`:

`appA/src/app.controller.ts`:

`appA/src/app.service.ts`:

`appB/src/main.ts`:

`appB/src/app.module.ts`:

`appB/src/app.controller.ts`:

`appB/src/app.service.ts`: