Ah, Microfrontends! The talk of the town, the shiny new Invisibility Cloak in the world of frontend development. Everyone's buzzing about them, just like Fred and George Weasley with their latest prank contraption. But hold on a minute, not everyone's rushing to implement this architectural marvel. Why? Well, because just like Harry facing a three-headed dog guarding the Philosopher's Stone, there are challenges to overcome.

In this article, we'll delve into the world of Microfrontends, exploring both the glittering Galleons (benefits) and the pesky Dementors (challenges) that come with them. So, grab your Butterbeer (or a strong cup of coffee, whichever helps you focus), and let's see if Microfrontends are the magic potion your project needs.

![death eaters](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyfh0q6t0c6qz0hwypvf.gif)

##Benefits: A Sorting Hat for Your Frontend Needs

Imagine a world where Ron Weasley isn't stuck with a broken wand his entire first year. That's the beauty of Microfrontends! They allow you to develop your frontend as independent, reusable modules, just like wands crafted by Ollivander himself. 
Each module, be it the "Product Listing" or the "Shopping Cart," can be built and maintained by different teams, much like different Houses at Hogwarts specialize in different areas of magic.

This modular approach offers several benefits:
* **Independent Development:** Different teams can work on their modules without affecting each other, just like Potions class wouldn't disrupt Defense Against the Dark Arts (unless Snape is the professor, of course).
* **Faster Development & Deployment:** Smaller modules are easier to manage, test, and deploy, allowing you to release features quicker than a Snitch zipping across the Quidditch pitch.
* **Scalability & Maintainability:** Need to add a new feature like a "Floo Network Integration"? No problem! Just develop a new module and integrate it seamlessly, much like adding a new ingredient to your Polyjuice Potion recipe.

##Challenges: When Grindylows Lurk in the Code
Now, Microfrontends aren't all sunshine and rainbows (though a Patronus Charm can definitely help!). There are challenges to consider, just like Harry facing He-Who-Must-Not-Be-Named:

- Complexity: Coordinating multiple teams and codebases can be tricky, requiring a well-defined communication strategy (think Dumbledore's Order of the Phoenix).
- Integration Overhead: Making sure all the modules work together seamlessly can be complex, requiring additional effort just like setting up the intricate Weasley Wizard Wheezes shop.
- Debugging: Tracking down issues across multiple modules can feel like navigating the treacherous Department of Mysteries.

##So, Do You Need a Microfrontends Potion?

The decision to use Microfrontends depends on your project's needs. 
If you're building a simple single-page application like Tom Riddle's diary (creepy!), a monolithic approach might suffice. But for large, complex applications like Flourish and Blotts, Microfrontends can offer significant advantages.

Ultimately, the choice is yours, brave developer. Just remember, with great power (and modularity) comes great responsibility (and potential headaches).  
But fear not,  like Hermione Granger facing any challenge, with careful planning and the right approach, Microfrontends can be the magic ingredient your project needs to truly shine!

##Amazing resources
- https://micro-frontends.org/
- https://semaphoreci.com/blog/microfrontends
- https://single-spa.js.org/docs/microfrontends-concept/
- https://sharvishi9118.medium.com/cross-micro-frontend-communication-techniques-a10fedc11c59

Ah, Microfrontends! The talk of the town, the shiny new Invisibility Cloak in the world of frontend...

Microfrontends and the challenges involved

Mahesh Pratap


##Introduction
As a JavaScript developer, effective problem-solving techniques are crucial for overcoming challenges and writing efficient code. In this article, we'll explore a range of tailored problem-solving techniques for JavaScript. 
Whether you're a beginner or an experienced developer, these techniques are not only valuable for your day-to-day coding but also highly beneficial for interviews and technical assessments. Let's dive in and discover the strategies that will elevate your JavaScript problem-solving game.

---

## 1. Frequency counter

The frequency counter technique is a powerful approach to solving problems that involve analysing the frequency of elements in an array. One common scenario is when we need to determine how many times each element appears in the given array. To illustrate this technique, let's consider some problems and their solutions.

**Problem 1: Checking Frequency of Elements**
Write a function `checkFrequency` to check frequency of each element in an array;

**Solution:**
```js
const checkFrequency = (nums) => {
  const frequencyMap = {};
  nums.forEach((num) => {
    frequencyMap[num] = frequencyMap[num] + 1 || 1;
  });
  return frequencyMap;
}

const result = checkFrequency([1, 2, 2, 1, 3, 4, 3, 4, 1]);
console.log(result); // {1: 3, 2: 2, 3: 2, 4: 2}
```

**Problem 2: Matching Squares**
Write a function called `squared` which accepts two arrays. The function should return `true` if every value in the array have it's corresponding value squared in the second array. The frequency of the numbers should be same.

**Solution:**

```js
const squared = (array1, array2) => {
  if(array1.length !== array2.length) return false;
  
  const array1Frequency = {};
  const array2Frequency = {};
  
  array2.forEach((num) => {
    array2Frequency[num] = array2Frequency[num] + 1 || 1;
  });
  
  array1.forEach((num) => {
    array1Frequency[num] = array1Frequency[num] + 1 || 1;
  });
  
  return array1.every((num) => {
    return array2Frequency[num*num] === array1Frequency[num];
  });
};

const result = squared([2, 3, 4, 2], [9, 16, 4]);
console.log(result); // false
```

---

## 2. Mulitple pointers

The multiple pointers technique is a valuable approach for solving problems that involve searching, comparing, or traversing elements in an array. By utilizing two or more pointers that move in different directions or at different speeds, we can narrow down the search space and find solutions with improved time complexity.
Let's examine a specific problem and its solution to understand how this technique can be applied in JavaScript.

**Problem 1: Finding Pair with Zero Sum** 
Write a function `sumZero` to find the pair of numbers in a given array whose sum is zero.

**Solution:**
```js
const sumZero = (nums) => {
  let left = 0, right = nums.length - 1;
  
  while(left < right) {
    const sum = nums[left] + nums[right];
    if(sum === 0) {
      return [nums[left], nums[right]];
    } else if(sum > 0) {
      right--;
    } else {
      left++;
    }
  } 
}

const result = sumZero([-3, -2, -1, 0, 1, 2, 3, 10]);
console.log(result); // [-3, 3]
```

**Problem 2: Counting Unique Numbers**
Write a function to return the number of unique numbers present in a sorted array of numbers.

**Solution:**

```js
const uniqueNumbers = (nums) => {
  if(!nums.length) return 0;
 
  let left = 0, right = 1;
  let count = 1;
  
  while(right < nums.length) {
    if(nums[left] === nums[right]) {
      right++;
    } else if(nums[left] !== nums[right]) {
      count++;
      left = right;
      right++;
    }
  }
  
  return count;
};

const result = uniqueNumbers([1, 2, 2, 3, 3, 3, 4, 4, 5]);
console.log(result); // 5
```

---


## 3. Sliding Window

The sliding window technique is a powerful strategy used for solving problems that involve finding a subset or subarray within a larger array.
By maintaining a dynamic window and sliding it across the array, we can efficiently compute sums, averages, or other metrics for subarrays of fixed lengths.

**Problem 1: Finding Largest Sum of Consecutive Numbers**
Write a function which accepts an array of integers and a number `n`. The function should calculate the largest sum of `n` consecutive numbers.

**Solution:**

```js
const getLargestSum = (arr, num) => {
  if(arr.length < num) return null;
  
  let largestSum = arr.slice(0, num).reduce((a, b) => a+b);
  let lastWindowSum = largestSum;
  
  for(let i = 0; i < arr.length - num+1; i++) {
    lastWindowSum = lastWindowSum - arr[i] + arr[i+num];
    
    if(largestSum < lastWindowSum) {
      largestSum = lastWindowSum;
    }
  }
  return largestSum;
};


const result = getLargestSum([1, 2, 1, 0, 0, 3, 2], 3);
console.log(result); // 5
```

---

## Conclusion

In this article, we covered three powerful strategies: **the frequency counter**, **multiple pointers**, and **sliding window** techniques. These techniques provide valuable tools to tackle a wide range of problems efficiently and effectively.

By mastering these problem-solving techniques in JavaScript, you'll be equipped with versatile approaches to address complex programming challenges. As you encounter different problems, these techniques will serve as valuable tools to analyze, break down, and devise efficient solutions.

Please note that the solutions provided in this article represent one approach to implementing the techniques. If you have alternative or more effective methods for solving any of the problems discussed, I encourage you to share them in the comment section below.

---

## Additional Resources
1. [Udemy Course](https://www.udemy.com/share/101X5s3@7fpGHg_XVkdPgFUqBUKKobi-obMvy6Ark5qx8rgi-J2aMc1ku0atgAdOrOa4xITV/)
2. [Multiple Pointers Problems](https://leetcode.com/tag/two-pointers/)
3. [Sliding Window Problems](https://leetcode.com/tag/sliding-window/)


Introduction   As a JavaScript developer, effective problem-solving techniques are crucial...

Scope in JavaScript - Behind The Scenes

One of the most confusing mechanisms in JavaScript is `this` keyword. Even a seasoned developer can get bewildered sometimes. So, let’s see if it's really that complicated!

**`this` is a special keyword that’s automatically defined in the scope of every function**. But how JavaScript engines decide what value should it assign to `this`.

##Default Binding
In default binding, `this` refers to the global object. Any plain undecorated function call will invoke default binding if the scope in which `this` is used is not using `strict mode`. Consider:

```js
function foo() {
  console.log(this.a);
}

var a = 2;

foo(); // 2
```
Variables declared in global scope as `var a = 2`, `function foo() {…}` are synonymous with global-object properties of the same name. **They are not copies of each other, they are each other**. In this snippet `foo()` is called with a plain, undecorated function reference. Hence, the default binding applies here i.e., global object.

If `strict mode` is in effect, the global object is not eligible for the default binding, so the `this` is instead set to `undefined`.

```js
function foo() {
  "use strict";
  console.log(this.a);
}

var a = 2;

foo(); // TypeError: 'this' is 'undefined'
```
Although overall `this` binding rules are entirely based on the call-site, the global object is only eligible for the default binding if the contents of `foo()` are not running in `strict mode`. The `strict mode` state of the call-site of `foo()` is irrelevant.

##Implicit Binding
Implicit binding is invoked if the call-site has a context object. Now, what’s a context object! 
Consider:

```js
function foo() {
  console.log(this.a);
}

var obj = {
  a: 2,
  foo: foo
};

obj.foo(); // 2
```
Here the call-site uses the `obj` context to reference the function, so we can say `obj` 'owns' or 'contains' the function reference at the time function is called. Now consider this:

```js
function foo() {
  console.log(this.a);
}

var obj = {
  a: 12,
  foo: foo
};

var obj1 = {
  a: 2,
  obj: obj
};

obj1.obj.foo(); // 12
```
This may look confusing but only the last level of an object property reference chain matters to the call-site. So `this` in `foo()` refers to obj for the above function call.

###Gotchas
Consider the following code:
```js
function foo() {
  console.log(this.a);
}

var obj = {
  a: 2,
  foo: foo
}

var bar = obj.foo;

var a = 'Oops, global';

bar(); // 'Oops, global'
```

Even though `bar` appears to be a reference to `obj.foo`, in fact, it’s really just another reference to `foo` itself. Moreover, the call-site is what matters, and the call-site is `bar()`, which is a plain, undecorated call, and thus the default binding applies.

There is one more way to lose implicit binding i.e. when we are using callbacks. You don’t know how your passed function is being called in the callback. *Trust issues* 😐️

###Are default and implicit binding the same?
Consider the following code:

```js
function foo() {
  console.log(this.a);
}

var a = 2;

window.foo(); // 2
```
As discussed earlier variables declared in the global scope are synonymous with global-object properties of the same name. We can refer to these variables as `window.a`, `window.foo` respectively.

So whenever we are using plain, undecorated functions calls that means its context object is window and hence we get `window` as `this` in those cases.

##Explicit Binding
Now let’s take the controls into our hands 😎️.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/40jcm4g487maqz8uimji.gif)

Functions have some utilities available to them (via their `[[Prototype]]`), which can be useful for this task. Specifically `bind(…)`, `call(…)`, and `apply(…)` methods.

###call(), apply() & bind()
* We can specify what we want our `this` to be, using these functions.
* One common thing about these functions is, it takes the first parameter - an object which is assigned as `this` on function invocation.
* `call()` & `apply()` invokes the function immediately while `bind()` just returns a new function.

```js
function foo() {
  console.log(this.a);
}

var obj = {
  a: 2
};

foo.call(obj); // 2
foo.apply(obj); // 2

var bar = foo.bind(obj);

bar(); // 2
```
These are very useful functions in JavaScript and can’t be covered in this post so we’ll talk about these functions in-depth in another article.

##new Binding
When a function is invoked with `new` in front of it, the following things happen:
* A brand new object is created out of thin air.
* The newly constructed object is set as the `this` binding for that function call.

```js
function foo(a) {
  this.a = a;
}

var bar = new foo(2);

console.log(bar.a); // 2 
```
The `new foo(2)` will return `{a:2}` in the above snippet.

There are few other things that happen too, but that is out of scope for this topic.

##Conclusion
Once you know the call-site of a function, 4 rules can be applied to the call-site, in this order of precedence to determine `this` binding:
* Called with `new`? Use the newly constructed object.
* Called with `call()`, `apply()`, `bind()` ? Use the specified object.
* Called with context object owning the call? Use that context object.
* Default: `undefined` in `strict mode`, global object otherwise.

For a more in-depth understanding of `this` I highly recommend reading **this & OBJECT PROTOTYPES** of **YOU DON’T KNOW JS** series by **Kyle Simpson**.

One of the most confusing mechanisms in JavaScript is this keyword. Even a seasoned developer can get...

Understanding 'this'

It's been a while since ES6 introduced the destructuring assignment, which is now supported in all [major browsers](https://caniuse.com/mdn-javascript_operators_destructuring). It can be used in any valid assignment operation i.e., variable assignment, function parameter assignment, etc. Let's get a basic overview of what destructing is first.

The syntax before the introduction of destructuring was too verbose for assigning values of an array or object to individual variables.

```js
const array = [1, 2, 3];
const obj = { x: 4, y: 5, z: 6 };

const a = array[0], b = array[1], c = array[2];
const x = obj.x, y = obj.y, z = obj.z

console.log(a, b, c); // 1 2 3
console.log(x, y, z); // 4 5 6
```
That's how we used to do in the pre-destructuring era. Now let's do it the ES6 way.
```js
const array = [1, 2, 3];
const obj = { x: 4, y: 5, z: 6 };

const [ a, b, c ] = array;
const { x, y, z } = obj; 

console.log(a, b, c); // 1 2 3
console.log(x, y, z); // 4 5 6
```

Way better. Having a basic idea, let's dig deeper.

---

##Object property assignment pattern
Let's dig into that `const { x, y, z } = obj` syntax from the previous snippet. It's actually shorthand for `const { x: x, y: y, z: z } = obj`. If the property name being matched is the same as the variable you want to declare you can shorten the syntax. Here we leave `x:` part of `{ x: x, .. }`.

Usually, assignment operations follow `target=source` or `target: source` pattern but in the destructuring assignment, `source: target` pattern is followed. Consider:

```js
const obj = { x: 4, y: 5, z: 6 };
const { x: X, y: Y, z: Z } = obj;

console.log(X, Y, Z); // 4, 5, 6
```

Here variables named `X, Y, Z` are declared and the values of `obj.x, obj.y, obj.z` is being assigned to them respectively. Hence, if the property name being matched is the same as the variable, you can use the shorthand. JS engine will do our work for us while we keep our code clean.

##Assign later
As mentioned earlier destructuring can be used in any valid assignment operation. This means you don't always need to use destructuring operation while declaring variables. For already declared variable destructuring only does assignments, exactly as we have seen with other variable assignments. Consider:

```js
let a, b, c, x, y, z;

[a, b, c] = [1, 2, 3];
({x, y, z} = { x: 4, y: 5, z: 6 });

console.log(a, b, c, x, y, z); // 1 2 3 4 5 6
```

We need to wrap the whole assignment expression in `()` for object destructuring, otherwise `{ .. }` on the LHS will be treated as a block statement instead of an object.

The assignment expressions don't need to be just variable identifiers. Anything that's a valid assignment expression is allowed. For example:

```js
// Object assignment
const obj = {};
const computedProp = 'z';

[obj.a, obj.b, obj.c] = [1, 2, 3];
({ x: obj.x, y: obj.y, [computedProp]: obj[computedProp] } = { x: 4, y: 5, z: 6 });

console.log(obj.a, obj.b, obj.c); // 1 2 3
console.log(obj.x, obj.y, obj.z); // 4 5 6
```

```js
// Array assignment
let array = [];

({ x: array[0], y: array[1], z: array[2]  } = { x: 4, y: 5, z: 6 });

console.log(array); // [4, 5, 6]
```

Remember that traditional "swap two variables without temp variable" question, now we have a new solution for that:

```js
let x = 10, y = 20;

[y, x] = [x, y];

console.log(x, y); // 20 10
```

##Repeated Assignments
The object destructuring form allows a source property to be listed multiple times. For example:

```js
const { a: X, a: Y } = { a: 1 };

console.log(X, Y); // 1 1
```

This is not possible in array destructuring, obviously 😒️.

##Chaining
The return value of any destructuring assignment expression is the source object/array. Let's see what that means:

```js
let a, b, c, x, y, z;

console.log({x, y, z } = { x: 4, y: 5, z: 6 }); // { x: 4, y: 5, z: 6 }
console.log([a, b, c] = [1, 2, 3]); // [1, 2, 3]
```

By carrying the object value through as the completion, you can chain destructuring assignment expressions together:

```js
let a, b, c, x, y, z;

[a, b] = [c] = [1, 2, 3];
( {x} = {y,z} = {x: 4, y: 5, z: 6} );

console.log(a, b, c); // 1 2 1
console.log(x, y, z); // 4 5 6
```


`[a, b] = [c] = [1, 2, 3]` & `( {x} = {y,z} = {x: 4, y: 5, z: 6} )` is evaluated right to left (i.e., return value of `[c] = [1, 2, 3]` is assigned to `[a, b]` similarly, the return value of `{y,z} = {x: 4, y: 5, z: 6}` is assigned to `{x}`.

##Optional Assignment
You don't have to assign all the values that are present in the source object/array in the destructuring assignment. For example:

```js
const [,,c] = [1, 2, 3];
const { y } = { x: 4, y: 5, z: 6 };

console.log(c, y); // 3 5 
```

You can skip the values that are not required in the current scope.

###Gathering
You can use the [rest syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) in a destructuring assignment to gather values in a single variable. For example:

```js
const [a, ...b] = [1, 2, 3];
const { x, ...y } = { x: 4, y: 5, z: 6 };

console.log(a, b); // 1 [2, 3]
console.log(x, y); // 4 { y: 5, z: 6 }
```

It behaves similarly to the [Functions Rest Parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters).

##Default Value Assignment
You can provide a default value for an assignment in both object and array destructuring assignments. For example:

```js
const { w = 7, x = 8, y, z } = { x: 4, y: 5, z: 6 };
const [ a = 9, b, c, d = 10 ] = [1, 2, 3];

console.log(w, x, y, z); // 7 4 5 6
console.log(a, b, c, d); // 1 2 3 10
```

Default values will be applied for missing values in the source array/object. It is similar to the [Default function parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters).

You can combine the default variable assignment with alternative assignment expression syntax. For example:

```js
const { w: WW = 10, x, y, z } = { x: 4, y: 5, z: 6 };

console.log(WW, x, y, z); // 10 4 5 6
```

##Nested Destructuring
If the values you're destructuring have nested objects or arrays, you can destructure those values too:

```js
const array = [ 1, [2, 3, 4], 5 ];

const obj = { 
  x: {
    y: {
      z: 6
    }   
  }
}

const [ a, [ b, c, d ], e ] = array;

const { 
  x: { 
    y: { 
      z: w 
    } 
  } 
} = obj;

console.log(a, b, c, d, e); // 1 2 3 4 5
consoel.log(x); // {y: {z: 6}}
console.log(y) // {z: 6}
console.log(w); // 6
```

##Destructuring Parameters
All the above rules apply while destructuring function parameters too, as behind the scene the arguments are being assigned to parameters. For example:

```js
function baz([x, y]) {
  console.log(x, y);
}

baz([1, 2]); // 1 2
baz([1]); // 1 undefined
baz([, 2]); // undefined 2
```
---

Source
[1]: [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS): ES6 & Beyond By [Kyle Simpson](https://me.getify.com/)

It's been a while since ES6 introduced the destructuring assignment, which is now supported in all ma...

Tech Blogs

Microfrontends and the challenges involved

Top 3 Patterns to Master JavaScript Problem-Solving

Scope in JavaScript - Behind The Scenes

Understanding 'this'

You may not know destructuring yet

For more please visit