React lifecycle and hooks

Angular project folder structure

“Change Detection”?

Change Detection means updating the view (DOM) when the data has changed.

Change Detection is done in two steps

1. Update the application model (developer);
2. Reflect the state of the model in the view (Angular).

If we take a todo application, represented by the graphic above. We have a fairly simple application that has a TodosComponent managing a list of TodoComponent. If we modify this list, by changing the value of the first item of the todos’ list (in yellow), we will have the following flow:

1. The developer is making changes to the model (like a component’s bindings);
2. Angular’s change detection kicks in to propagate the changes;
3. Change detection goes through every components in the component tree (from top to bottom) to check if the model it depends on changed;
4. If Yes, it will update the component;
5. Angular updates the component’s view (DOM).

The way Angular runs the change detection by starting from the top and continuing until it reaches the bottom, makes the system more predictable and more performant.

Angular Change Detection Strategies

Angular provides you two Change Detection Strategies, the default one and the onPush.

ChangeDetectionStrategy.Default

By default, Angular has to be conservative and will checks every time something may have changed, this is called dirty checking.

ChangeDetectionStrategy.onPush

With onPush, Angular will only depend on the component’s inputs, events, markForCheck method, or the use of the async pipe in the template, to perform a change detection mechanism and update the view.

Subjects 

In order to understand the difference between a Subject and an Observable, you need to be aware of two distinct concepts
– A data producer
– A data consumer

Example 2

Observable wrapped in a subject, causing shared execution

Angular switch map and merge map

Rx js debounce and total

diff between observable and subject

weekset and set

Angular change detection

array fill

Javascript datatype

Understanding objects - Data Property Attribute

configurable - for delete

Understanding objects - DefineProperty

Array Iteration method : Filter

Understanding Objects

Understanding Objects  - Accessor Property

Understanding Objects  - Accessor Property definedproperty Get and Set

Creating objects

Arrays Introduction

Arrays Introduction  - conversion method (toString())

Array Stack Data structure methods

Array Queue Data structure methods

Array Reordering methods : sort and callback to compare function

Array manipulation methods - Array copy using concat

Array manipulation methods - using Slice and splice

Array Iteration methods : map and foeach

Array Iteration methods: Filter

Array Iteration methods: every and some

Array reduction methods : reduce

Array reduction methods : reduce - nested array to flat array  - find unique char

Date and RegEx Objects

Prototype Inheritance

HTTP Methods

Singleton

Call, Bind, Apply

Promise in Javascript

Custom mybind 

Finding an Object's Size in JavaScript

Array Flat and Array Fill

Closure:

protected, encapsulated
access inner function thorough outer function

3 Ways to Clone Objects in JavaScript

Remove Array Duplicates in ES6

Javascript: Using reduce() to find min and max values?

const ArrayList = [1, 2, 3, 4, 3, 20, 0];
const LargestNum = ArrayList.reduce((prev, curr) => {
      return Math.max(prev, curr)
});
const MinNum = ArrayList.reduce((prev,curr)=>{
      return Math.min(pre,curr)
});
console.log(LargestNum);
console.log(MinNum);

Count number of occurrences for each char in a string

// The string
var str = "I want to count the number of occurances of each char in this string";

// A map (in JavaScript, an object) for the character=>count mappings
var counts = {};

// Misc vars
var ch, index, len, count;

// Loop through the string...
for (index = 0, len = str.length; index < len; ++index) {
    // Get this character
    ch = str.charAt(index); // Not all engines support [] on strings

    // Get the count for it, if we have one; we'll get `undefined` if we
    // don't know this character yet
    count = counts[ch];

    // If we have one, store that count plus one; if not, store one
    // We can rely on `count` being falsey if we haven't seen it before,
    // because we never store falsey numbers in the `counts` object.
    counts[ch] = count ? count + 1 : 1;
}
Shorter answer, with reduce:
let s = 'hello';
[...s].reduce((a, e) => { a[e] = a[e] ? a[e] + 1 : 1; return a }, {}); 


// {h: 1, e: 1, l: 2, o: 1} 

Factory vs Abstract factory design pattern

var mybind = function( fn, b ) {

 return fn.bind(this, b);

 };

var concat = function(a, b) { return a + " " + b;}

var good = mybind(concat, "good");

console.log(good("night"));