## Concepts
1. Abstraction
2. Encapsulation
3. Inheritance
4. Polymorphism

### Abstraction
Абстракция позволяет нам сосредоточиться на том, **что** объект делает, а не на том, **как** он это делает.

#### В Typescript реализованы **абстрактные классы** ключевым словом `abstract`. 
От абстрактного класса нельзя создать экземпляр.
Пример с _Revuud_ абстрактного класса - User, в том время как класс - Talent, Admin.

Цель - не дублируем код 

[link to abstract class example](#abstract-class-example)

### Encapsulation
Это разделение интерфейсов на внутренний и внешний - приватные и публичные свойства/методы. 

Цель - ограничить внешних пользователей от изменений внутреннего интерфейса, чтобы ничего не сломали внутри извне.

Есть конвенция называть приватные свойства начиная с `_`
На уровне языка реализуется символом `#`: 
```js
class Person {
 #_privateField: 'value'
 #_privateMethod () {}
}
new Person()._privateField// undefined
```

### Inheritance
Наследование классов – это способ расширения одного класса другим классом.

Цель - не дублировать код и экономить память, расширять уже существующий функционал.

### Polymorphism
Это способность вызывать один и тот же метод для разных объектов, и при этом каждый объект реагирует по-своему.
Чтобы это произошло полиморфизм использует наследование.

### Example demonstrating all 4 concepts 
```typescript
abstract class User {
 abstract firstName: string;
 abstract lastName: string;
 abstract sendInvite(): void; //! 1. abstraction principle (no concrete implementation, only declaration)

 get fullName () { // non-abstract method with logic 
 return this.firstName + this.lastName; // that's difference with interface, that you can write logic here
 };

}

new User(); // Error, can't create instance from abstract class

class Admin extends User { //! 3. inheritance principle (extending concrecte class from abstract)
 firstName;
 lastName;
 
 constructor(firstName: string, lastName: string) {
 super()
 this.firstName = firstName;
 this.lastName = lastName;
 }

 get fullName (){ //! 4. polymorphysm principle (overwrite parent fullName getter, so it works differently now)
 return this.firstName + ' last name is NDA for admins'
 }
 sendInvite() { //! 4. polymorphysm principle (implementing abstract method differently in 2 children classes)
 const author = this.fullName 
 alert({type: 'admin', author}) //fake send function
 }
}

class Talent extends User { //! 3. inheritance principle (extending concrecte class from abstract)
 firstName;
 lastName;

 #age: number; //2. encapsulation (private field)

 constructor(firstName: string, lastName: string, age: number) {
 super()
 this.firstName = firstName;
 this.lastName = lastName;

 this.#age = age;
 }
 sendInvite() { //! 4. polymorphysm principle (implementing abstract method differently in 2 children classes
 const author = super.fullName //! 3. inheritance, call the parent-class getter
 alert({type: 'talent', author}) //fake send function
 }
}

const john = new Talent('John', 'Smith', 30);
//! 2. encapsulation (private field is not available from outside of the Talent class)
john.#age // undefined 
```

## OOP in Javascript

### Common:
**Function-constructor** - `new Promise()`это отдельный вид функции
1. имя должно начинаться с большой буквы,
2. **должна вызываться при помощи оператора "new"**.
3. такой вызов **создаёт пустой this**

**Function-constructor (class)** - Определяет характеристики объекта. Класс это шаблон по которому в дальнейшем создаются объекты (экземпляры).

**Объект** - Экземпляр класса создается с помощью функции оператора new - new constructor (arguments)

### Class and instance creation:
```javascript
function Car(model, year) { // class
 // constructor
 this.model = model;
 this.year = year;
}

// same in ES6+
class Car {
 constructor(model, year) {
 this.model = model;
 this.year = year;
 }
}

// call function-constructor (class)
let laguna = new Car("laguna", 2002) // {model: "laguna", year: 2002}
```

### Prototype inheritance

#### Prototype
**prototype** - это объект, содержащий поля,
которые будут переданы экземпляру-наследнику `Array.prototype.map === [].map` 
и экземплярам дочерних классов `Object.prototype.hasOwnProperty === [].hasOwnProperty`
1. !!! есть только у классов и function
2. !!! нет у стрелочных функций

#### `__proto__` link
1. !!! это свойство-ссылка на prototype родительского класса/функции-конструктора
2. !!!есть у любых типов данных кроме `null` & `undefined`
```javascript
let array = []; // under the hood - new Array()
array.__proto__ === Array.prototype
```
3. boxing transforms primitives to objects
```javascript
let age = 30; // under the hood - new Number(30)
age.__proto__ === Number.prototype
// boxing transforms age from 30 to
// { [[Prototype]]: Number, [[PrimitiveValue]]: 30 }
```
4. Движок, если не смог найти искомое свойство у объекта,
он через ссылку `__proto__` последует искать его в prototype родителя,
от которого был создан и далее в родителя родителя, пока не достигнет объекта-родителя Object, который имеет прототип равный `null`
```javascript
Child.hasOwnProperty()
Child.prototype.__proto__ === Parent.prototype 
Parent.prototype.__proto__ === Object.prototype // .hasOwnProperty sits here, in protortype of Object
Object.__proto__ === null
```
5. ! Не нужно путать ссылку `__proto__` у прототипа и самого класса (функции)
```javascript
Child.bind()
Child.__proto__ === Parent.prototype
Parent.__proto__ === Function.prototype // .bind sits here, in prototype of Function
```

![Scheme of prototype inheritance in JS](prototypes-diagram.png)

#### super
keyword вызывающее конструктор суперкласса (родительского) или его методы
```javascript
super([arguments]); // вызов родительского конструктора.
super.functionOnParent([arguments]);
```

### Getter & Setter:

У объекта помимо свойств и методов, есть **свойства-аксеcсоры** - `get` и `set`.
>По своей сути **это функции**, которые используются **для присвоения и получения значения**,
но во внешнем коде они **выглядят как обычные** свойства объекта.

```js
let user = {
 name: "John",
 surname: "Smith",
 get fullName() {
 return `${this.name} ${this.surname}`;
 }, //getter example
 set fullName(value) {
 [this.name, this.surname] = value.split(" ");
 }, //setter example
};

// getter usage
alert(user.fullName); // John Smith

// setter usage
user.fullName = "Alice Cooper";
alert(user.name); // Alice
alert(user.surname); // Cooper
```

### Context:
**THIS** - слово this ссылается на текущий контекст,
>**это ссылка на объект в котором выполняется функция**
>
>позволяет вам работать со свойствами/методами класса

global scope:
**no use strict** - this === `window`(Web) or `global` (Node.js)
**use strict** - `this == undefined`;

1. Контекст(this) для стрелочных функци определяется **в момент их создания**.
 ```js
 const helloArrow = () => console.log('hello', this) // создана в глоб. области
 Car.sayHello = helloArrow;
 Car.sayHello() // выведет класс Window, т.к. была создана в глобальной области и **замкнулась** на класс Window
 ```
2. Контекст(this) для `function(){}` определяется в **момент их вызова** и равен объекту перед точкой.\
 ```js
 function helloFunc () { console.log('hello', this )}
 Car.sayHello = helloFunc; // (статический метод, присвоен классу)
 Car.sayHello() // выведет конструктор класса Car (класс перед точкой)
 laguna.sayHello = hello
 ```

#### Переопределение контекста, а также методы класса Function:

**bind** - let новаяФункция = стараяФункция.bind(новыйКонтекст, остальные Аргументы нужные старойФункции) **передает новый контекст(но не вызывает функцию!)**

**call** - тоже самое, только **сразу же вызывает** функцию

**apply** - тоже самое, но **остальные аргументы в массиве** -- стараяФункция.bind(новыйКонтекст, [остальные Аргументы, нужные старойФункции])

!!!**Нельзя перепресвоить** контекст для новойФункции **повторно**! повторно вызвав один из методов


### Chaining
Нужно **просто возвращать** `this` в каждом методе и сохранять в другое поле результат
Можно реализовать и в функции, и в объекте, и в классе
>Удобно когда нужно сделать множество последовательных операций (с одной сущностью).
```js
const main = {
 data: {
 i: 0,
 },
 initiate: function (num = 0) {
 this.data.i = num;
 return this;
 },
 add: function (num) {
 this.data.i += num;
 return this;
 },
 subtract: function (num) {
 this.data.i -= num;
 return this;
 },
 multiple: function (num) {
 this.data.i *= num;
 return this;
 },
 divide: function (num) {
 this.data.i /= num;
 return this;
 },
 print: function () {
 return this.data.i;
 },
};
const value = main.initiate(10).add(6).subtract(4).divide(3).multiple(2).print(); //8
```

Object Oriented Programming and OOP in Javascript

## Common
### Complex types of data
#### Map - ассоциативный массив / словарь
>Это объект, где ключом может помимо строки быть любой тип данных
 
Пример оптимизации Мапом 
```js
// было
const getAssets = async () => [ //pseudo-GET req
 {symbol: 'APPL', price: 100},
 {symbol: 'GOOG', price: 50},
 {symbol: 'MSFT', price: 25}
]
const resp = await getAssets()
// iterates every time in Biseness Logic Layer
resp.find(asset => asset.symbol === 'MSFT')
// стало
const transformAssetsArrayToMap = async () => {
 const respArray = await getAssets()
 const respMap = new Map()
 // iterates 1 time in Data Acess Layer
 respArray.forEach(asset => {
 const {symbol, ...rest} = asset
 respMap.set(symbol, {...rest});
 });
 return respMap
}
const resp = await transformAssetsArrayToMap()
// instant in BLL
resp.get('MSFT') 
```
#### Set - массив, только с уникальными значениями
Можно отфильтровать дубликаты с массива
`const uniqArr = [...new Set(arr)];`
#### WeakMap - словарь со слабыми ссылками
Нужен для того, чтобы помочь **garbage collector** удалить неиспользуемые объекты
т.к. в Map они хранятся даже когда все ссылки в коде на них были перезаписаны
>Ключом могут быть только объекты.
>Не поддерживает методы, которыми можно взять все ключи сразу _(keys(), values(), entries()
> т.к. мы не знаем в какой момент происходит удаление объектов сборщиком мусора)_

Напр. Map
```js
let john = { name: "John" };

let map = new Map();
map.set(john, "...");

john = null; // overwrite the reference

// объект john сохранён внутри объекта `Map`
// и будет занимать место в памяти, хотя уже не используется в коде,
// и доступен только через map.keys()
```
Same code with WeakMap:
```js
let john = { name: "John" };

let weakMap = new WeakMap();
weakMap.set(john, "...");

john = null; // перезаписываем ссылку на объект

// объект john !будет удалён из памяти сборщиком!
```
[memoization example with WeakMap](#weakmap-cache)
#### WeakSet
Тоже самое, только Set-подобная структура
> тоже ключи только объекты и тоже удаляет из памяти
> неиспользуемые в иных местах объекты

### Hoisting - поднятие
Декларация __функции и var__ поднимается в начало кода со значением `undefined`

**do hoist**:
1. `function declaration(){}`
2. `var`

**don't hoist**:
1. `let functionExpression = () => {}`
2. `let functionExpression = function (){}`
3. `let/const`

It's correct code;
```js
a = 1;
var a; // compilator will hoist this line upper
```

### Boxing/Unboxing 
 
Вызывая `.length` у строки, движок js **оборачивает** примитив `"str"` в `new String("str")` 
и у этого объекта вызывает поле `.length`, 
после чего **удаляет** объект, чтобы мы не могли присвоить ему своих полей. 

## Objects

### Object creating:
```javascript
//inherite user object as prototype
const admin = Object.create(user)
let admin = { __proto__: user }
let admin = new Object({ __proto__: user })
```
### Object copying:
#### Reference copying
```js
let admin = user;
( {} === {} ) // false, objects are never equal, only references
```
#### Shallow copying
1. Object.assign
```js
let user = {
 name: "John",
 age: 30
};
let anotherObject = { role: 'admin' }

let shallowClone = Object.assign({}, user, anotherObject);
```
2. Spread operator
```js
let shallowClone = {...user, ...anotherObject};
```
#### Deep copying
1. JSON.parse(JSON.stringify(originalObj))
```js
const originalObj = { a: 1, b: { c: 2 } };
const clone = JSON.parse(JSON.stringify(originalObj))
```
> - !!! JSON format doesn't support methods, so you can't copy methods in such way.
> - It's also expensive in computational costs
2. Recursive copying implementation
3. `lodash.deepClone`
4. `window.structuredClonse` (modern browsers only)
> - !!! structuredClone can't copy methods

## Functions
### Замыкание closure
Когда функция запоминает своё лексическое окружение в скрытом свойстве `[[Environment]]`

Напр. дочерняя функция запомнит параметр родительской функции



```js
const maxLengthCreator = (maxLength) => {
 return (value) => {
 return value.length > maxLength ? `Max length is ${maxLength} symbols` : undefined
 }
};
const max10 = maxLengthCreator(10); //max10 функция замкнула значение maxLength == 10
max10('This is string more than 10 letters')
````

### Псевдомассив `arguments`
* даже если мы объявили функцию без аргументов, мы всё равно можем передать в неё параметры, 
они попадут в специальный псевдомассив(нет методов массива) и к ним можно будет обратиться по индексам –

* В `use strict` arguments ведет себя по другому, с пересваиванием параметров
* У стрелочных нету псевдомассива arguments
### Современная замена - …rest оператор
`function(first, second, …restArgs){}` – остальные аргументы сложаться в настоящий массив

![spread, rest, destructuring operators](3-dots-syntax.png)



## Asynchrony

### Event loop

#### Ответ на заучить:
1. Компилятор в колл стеке выполняет синхронный код 
 - И регистрирует асинхронные задачи в одной из очередей 
 - И попутно при необходимости выполняя web API (**!!! Напр.** 10 сек таймера или обработчик события будет висеть и его ждать)
2. Колл стек свободен - Далее выполняются асинхронные задачи
 - начиная с очереди микрозадач, выполняются ВСЕ **микрозадачи** в очереди
 - начиная с **самой старой**
 - ТУТ РЕРЕНДЕР
3. Колл стек и очередь микро свободна - Далее выполняется ОДНА самая старая макрозадача
 - после этого цикл повторяется


#### Theory:
1. **Call Stack** - Это синхронный код. 
 - **стэк, стопка** - выполняются **сначала новые**

2. **Callback (Microtask) queue** - После освобождения стека в очереди выполняются микрозадачи
 - микрозадачи могут возвращать другие микрозадачи, создавая **очередь** микрозадач - chain of `.then` & `.catch`)
 - **очередь** - выполняются **сначала старые**
 - помимо промисов есть `queueMicrotask`(Web) & `process.nextTick`(Node)

3. **Macro(task) queue** - После освобождения стека и очереди микрозадач, event loop проверяет наличие макрозадач.
Самая старая макрозадача помещается в стек, выполняется и затем выполняются **все** новые микрозадачи, добавленные в очередь. Далее выполняется следующая макрозадача и т.д.
 - Это Web APIs (fetch, setTimeout, слушатели событий).

![event-loop.png](event-loop.png)

 
#### Common cases:

Regular: `Sync code > Async code (micro - high prio) > Browser API code (macro - low prio)`

Macro in Micro (SetTimeout in Promise): `sync code > setTimeout > .then`
```javascript
const promise = new Promise((resolve, reject) => {
 console.log(1);
 setTimeout(() => {
 console.log("timerStart");
 resolve("success");
 console.log("timerEnd");
 }, 0);
 console.log(2);
});

promise.then((res) => {
 console.log(res);
});
```

Micro in Macro (Promise in SetTimeout): `sync code > micro > macro`
```javascript
const timer1 = setTimeout(() => {
 console.log('timer1');
 const promise1 = Promise.resolve().then(() => {
 console.log('promise1');
 });
}, 0);

const timer2 = setTimeout(() => {
 console.log('timer2');
}, 0);
```

#### Example:

<https://www.jsv9000.app>

```javascript
function logA() { console.log('A'); }
function logB() { console.log('B'); }
function logC() { console.log('C'); }
function logD() { console.log('D'); }
function logE() { console.log('E'); }

function timeoutWithPromise() { Promise.resolve().then(logE); }

setTimeout(timeoutWithPromise, 0); // 5
logA(); // 1
setTimeout(logB, 5000); // 6
Promise.resolve().then(logC).then(logA); // 3 - 4
logD(); // 2
```

**Step 1.** **Evaluate Script**

Synchronously execute the script as though it were a function body. Run until the Call Stack is empty.

1. logA > console.log(A) // call stack
2. logB // task queue
3. logC // microtask queue
4. logD > console.log(D) // call stack

**Step 2. Run all Microtasks**

Select the oldest Microtask from the Microtask Queue. Run it until the Call Stack is empty. Repeat until the Microtask Queue is empty.

5. logC// from micro to call stack > > console.log(C) // call stack
6. logA // microtask queue (.then chain)
7. logA// from micro to call stack > > console.log(A) // call stack

**Step 3. Rerender**

Rerender the UI (This step only applies to browsers, not NodeJS).

**Step 4. Run a Task**

Select the oldest Task from the Task Queue. Run it until the Call Stack is empty.

8. timeoutWithPromise // call stack

**Step 2. Run all Microtasks**

9. log E // microtask queue
10. log E // from micro to call stack >> > console.log(E) // call stack
11. log F // microtask queue
12 log F // from micro to call stack >> console.log(F) // call stack

**Step 3. Rerender**

**Step 4. Run a Task**

13. logB > console.log(B) // call stack

### Promise

**Создание** - конструктор new Promise с аргументом в виде cb, в которую передаются аргументами передаются функции resolve & reject.

```javascript
const myPromise = new Promise ( (resolve, reject) => { } )
```

**Cостояние** - pending | fulfilled | rejected. Хранится в скрытом свойстве экземпляра `[[PromiseState]]`

**Подписка** - у экземпляра есть функции then, catch, finally для подписки на изменения состояния промиса

**Результат** - хранится в скрытом свойстве экземпляра `[[PromiseResult]]`. Передаётся в функции подписки:

`.then(data => { })`

`.catch(error => { })`

#### Статические методы:

**all**:
- возвращает другой promise, который зарезолвится когда ЗАРЕЗОЛВЯТСЯ ВСЕ промисы из его массива.
- если хотя бы один из [] rejected, то promise из all тоже rejected
- .then all сидит массив результатов всех промисов

**race**:
- отработает, когда первый promise из массива выполнится

**allSettled**:
- возвращает promise, который зарезолвится, когда все промисы из его массива уйдут из состояния pending (попадем в then, даже если некоторые зареджектятся)

#### Chains:
каждый then и catch возвращают новый промис. Catch как и then может вернуть fulfilled или rejected промис. 

`.then(data => Promise.reject() ).then().then()` - 2 и 3 промисы не будут испольнены

`.then(data => Promise.resolve() ).catch().then()` - catch не будет исполнен

`.then(data => Promise.reject() ).catch().then()` - все функции-подписчики будут исполнены

## Browser Javascript

### Terms

`removeEventListener("click", название функции)` -- нам нужно назвать функцию внутри, если мы хотим удалить

`event.target` - элемент, на котором событие возникло изначально

`event.currentTarget` - элемент, на котором обработчик события был назначен

**Фазы события: Погружение -- Цель - Всплытие**

### Всплытие (bubbling) 

Когда кликаем на button внутри div, событие сработает сначала в button потом в div потом в body

Остановить можно `event.stopPropagation` в `addEventListener`

`event.stopImmediatePropagation` останавливает всплытие даже на соседние элементы (в одном родителе)

### Погружение (immersion)
```js
element.addEventListener ( "click", e => { 
 e.preventDefault()
}, {capture: true}
)
```
3-ий аргумент опциональный(либо просто true). Полезно, **если нужно выполнить событие сначала на родительском элементе**

### Делегирование событий(event delegation):
**Пример:**
допустим у нас 800к комментов и на каждый придется вешать свой обработчик события для лайка/дизлайка.

Вместо этого используется прием делегирования -
вешаем обработчик на родителя элементов и с помощью `if (event.target.tagName)` указываем где именно должен произойти клик, таким образом мы сэкономили кучу памяти.

## FP - Functional Programming
### КАРРИРОВАНИЕ (carrying)
 
[Example from closure](#closure):
```js
 maxLengthCreator(10)('This is string from some input')
 ```
Это трансформация функций таким образом, чтобы они принимали аргументы не как `fun(a, b, c)`, а как `fun(a)(b)(c)`.
 ```js
const sum = (n) => b => b + n
sum(1)(2) // 3
```
>sum is a HOF (High order function)
> 
>similar conception exists in React - HOC (High order component)

## Popular tasks
### Мемоизация (кэширование)
```javascript
const add = (a, b) => a + b
 
// HOF-мемоизатор
function memoize(func) {
 const cache = {}
 return function(...args) {
 // Формируем уникальный ключ для комбинации аргументов
 let keyForThisCall = JSON.stringify(args)
 if (cache[keyForThisCall]) { // Если результат уже в памяти
 return cache[keyForThisCall] // возвращаем его
 } else {
 const result = func(args[0], args[1]) // Иначе считаем
 cache[keyForThisCall] = result // и сохраняем в память
 return result
 }
 }
}

const memoizedAdd = memoize(add)

console.log(memoizedAdd(2, 3)); // Складываем 2 и 3, результат 5
console.log(memoizedAdd(2, 3)); // Берем из памяти 2,3, результат 5
```

### Advanced, мемоизация с WeakMap/WeakSet 
```js
const difficultCalculationsWithObject = (obj) => {
 return {...obj}
};
// HOF-мемоизатор
function memoize(func) {
 const cache = new WeakMap();
 return function(...args) {
 // Уникальным ключом будет ссылка на объект переданный в аргументах
 const keyForThisCall = args[0];
 if (cache.has(keyForThisCall)) {
 const cachedResult = cache.get(keyForThisCall) // Если результат уже в памяти
 return cachedResult // возвращаем его
 } else {
 let result = func(keyForThisCall); // Иначе считаем
 cache.set(keyForThisCall, result); // и сохраняем в память
 return result;
 }
 }
}

const memoizedFunc = memoize(difficultCalculationsWithObject);

let obj1 = { a: 1, b: 2 };

console.log(memoizedFunc(obj1)); // calculates 1st call
console.log(memoizedFunc(obj1)); // takes from cache 2nd
obj1 = {} // overwrite the reference
// позже { a: 1, b: 2 } будет удалён из WeakMap cache и из памяти
```

JavaScript

## Type VS Interface
**Type** может быть примитивом, union и tuple (кортеж), нельзя изменить после создания

```typescript
// primitive
type Name = string;

// union
type PartialPoint = PartialPointX | PartialPointY;

// tuple
type Data = [number, string];
```

**Interface** только объектом, его **повторные декларации объединяются** ([declaration merging](#declaration-merging))

### Extension & Intersection
#### Intersection
```typescript
type Shape = { color: string }
type Circle = Shape & {role: string}
```

#### Extension
Тоже самое, только синтаксис ближе к ООП
```typescript
interface Shape { 
 color: string;
}
interface Circle extends Shape { 
 radius: number;
}
```

### Implements
В implements можно вставить как type так и interface
```typescript
interface Point {
 x: number;
 y: number;
}
class SomePoint implements Point {
 x = 1;
 y = 2;
}

//same
type Point2 = {
 x: number;
 y: number;
};

class SomePoint2 implements Point2 {
 x = 1;
 y = 2;
}
```

### Declaration merging 
>Повторные декларации interface объединяются

В отличие от **type, он не может** быть изменён после создания
```typescript
// These two declarations become:
// interface Point { x: number; y: number; }
interface Point { x: number; }
interface Point { y: number; }

const point: Point = { x: 1, y: 2 };
```

## Abstract classes
Это смесь interface и class: мы задаём абстрактные свойства и методы, которые должны быть реализованы
в классе наследнике, как и в интерфейс,

НО в этой конструкции также позволено писать и общую для детей логику.
[link to OOP article](OOP#abstract-class)

## Generic type
Это динамическая <тип-переменная>, что-то вроде параметра функции,
который можно использовать в декларации типов, повышая его реюзабельность
```typescript
type ListResponse<T> = {
 count: number;
 next: string;
 previous: string;
 results: T[];
};
```

## Type Guards

1. `typeof` & `instanceof` operators:
```typescript
function fn(param: number | string | Date) {
 if (typeof param === 'string') {
 param.slice()
 } else if (param instanceof Date) {
 param.getTime()
 }
}
```
2. Predicate `is`:
Помогает TS-у лучше определять тип значения, которое проверяется функциями наподобие - isString, isUser
```typescript
const isAxiosError = (error: unknown | AxiosError): error is AxiosError => {
 return axios.isAxiosError(error);
}
```
3. `in` operator:
checks if field exists in object
```typescript
"house" in { name: "test", house: { parts: "roof" } }; // => true
"house" in { name: "test" }; // => false
```

## Utility Types
Это что-то вроде встроенных 'функций' для манипулирования типами
Напр. Partial, Pick, Omit, ReturnType, ReadOnly<PropsType> и т.д.

TypeScript

# React
## React vs Vanilla JS:

* React code is more readable (JSX = JS + HTML in 1 file)
* Components
* JS is imperative (буквально даёшь пошаговые инструкции)
* React is declarative (описываешь что именно ты делаешь)
```javascript
// Imperative
const element = document.createElement('p');
element.appendText = 'example';
element.className = 'styles';
element.addEventListener('click', function(){} );
// Declarative
example
```

## Virtual DOM
* Виртуальный DOM представляет собой упрощенные Javascript объекты по сравнению с настоящим DOM.
## Reconciliation
* Это процесс сверки старой и новой версий (снэпшота) Virtual DOM после изменения данных (например, массива, на основе которого отображаются элементы списка)
* На основе этой сверки, React производит точечные изменения в реальном DOM.
* В результате, пользователь видит обновление только измененного элемента списка, а не перерисовку всех элементов одновременно.

## Basic hooks
### useState
* it's a local state
* сравнивает предыдущее состоянии с новым и при необходимости вызывает ререндер той части UI которая от него зависит (в отличии от обычной переменной, которую мы вывели бы в JSX и изменили в event listener функции)
* correct approach to change state `setState(prev => prev + 1)`
* `useState(compute())` you can pass function to initial state param, if you need to compute initial value once, not on every render
### useRef
* можно юзать как useState, **изменение которого не вызывает rerender**
* можно как ссылку на dom element
### useContext
* Нужен для избежания **“props drilling”**, когда мы вынуждены пробрасывать стейт через пропсы каждого уровня, даже там где этот стейт не нужен
* TODO: React context vs state manager libs (Redux vs Zustand vs React-Query vs React Context)
### useCallback 
1. используется в дополнение к [React.memo](#React.memo) для функций передаваемых в дочернюю компоненту,
чтобы сохранить между ререндарами родителя ту же ссылку

### useMemo 
use cases:
1. аналогично useCallback, в дополнение к [React.memo](#React.memo) но для объектов, массивов и т.д.
2. когда одно из состояний сложно вычисляется, а мы меняем другое состояние, при этом при ререндере пересчитывается сложное 1-ое
```javascript
 function formatData() {
 return data.map(item => {
 // difficult calculations (formatting, sorting, filtering)
 })
 }
 const formattedData = useMemo(formatData, [data])
```


## Optimisation
### `key` attribute
* Нужен для оптимизации обновления списка элементов, созданного с помощью метода `map`. 
* Если мы добавляем новый элемент в начало или середину массива,
React с использованием `key` сможет корректно сопоставить существующие элементы и обновить **только изменённые**,
избегая полной перерисовки всех элементов.

### React.lazy
* Нужен, когда хотим чтобы компонента не попадала в начальный бандл (собранный вебпаком файл из всех файлов проекта)
* Начальная загрузка будет быстрее (бандл меньше), но юзер будет ждать, когда воспользуется компонентом в lazy
* Такую компоненту нужно оборачивать в React.Suspect и в fallback указывать loader (бандл поделили на чанки)

### child components rerender optimization
* Без использования PureComponent / shouldComponentUpdate / React.memo, **компоненты перерисовываются каждый раз,
когда их родитель перерисовывается, независимо от того, изменились ли их пропсы или нет**.
```javascript
// UserName will rerender every time when button clicked
<>
 <button onClick={() => setState(prev => prev + 1)}>Add</button>
 <UserName name="John Doe" />
</>
```
#### PureComponent
* when we extend from `PureComponent`, it compares new and old props & state, preventing rerender if they are the same
#### shouldComponentUpdate(nextProps, nextState)
* does the same, but in this lifecycle method we can implement a **custom comparison logic** of props & state
#### HOC React.memo
* does the same, but for func components and only for props
* prevents rerender when props are the same
```javascript
// won't rerender when parent rerenders, only when props.name is changed
const UserName = React.memo((props) => {
 return <div>{props.name}</div>
});
```
* !!! React.memo / PureComponent умеет делает **только поверхностную сверку** (примитивы и ссылки)
* Когда в пропс передан не примитивный тип данных, в дополнение к React.memo,
такие данные нужно их обернуть в [useMemo](#useMemo) / [useCallback](#useCallback)
* Использование этих хуков сохраняет ссылки на функции и объекты между рендерами, что предотвращает ненужные перерисовки компонентов
```javascript
const user = useMemo(() => ({ name: "John Doe" }), []);
const handleClick = useCallback(() => setState(prev => prev + 1), []);
return (
 <>
 <UserName user={user} />
 <button onClick={handleClick}>Add</button>
 </>
)
```


## Advanced hooks
### useLayoutEffect
* Когда нужно сделать изменение стилей напрямую DOM дереве (ref.current.style.border = “1px solid black”)
* и хотим чтобы они применились **до рендера - синхронно, а не после рендера - асинхронно, как в обычном useEffect**

### useImperativeHandle
* Когда нужно из родительской компоненты например очистить поля привязанные к локальному стейту дочерней
* Через ссылку в переданную из родителя через `forwardRef` в дочернуюю expose-ятся методы, в которых происходят действия доступные только в дочерней,
а в родительской мы можем вызвать эти методы через ссылку


### useTransition
* Используем когда есть сложный ререндеринг влияет на отзывчивость страницы. 
* С помощью него можно приоритизировать состояние которое влияет на отзывчивость (текст инпут, переключение между табами, таймлайн инпут ).
* И понизить приоритетность изменения блокирующего состояния (результат пользовательского действия: рендеринг результатов фильтрация списка по инпуту, переключение контента в табе )
```javascript
const [input, setInput] = useState('')
const [list, setList] = useState([])
const [isPending, startTransition] = useTransition();

function handleChange (e) {
	setInput(e.target.value) // setting priority state like usually
	startTransition(() => {
 const filteredValue = data.filter(item => item) // some difficult filtering calculations
 setList(filteredValue) // setting less priority state in startTransition
	})
}
```

# React-connected important libs

## React-router-dom V6
TODO: Через роутер можно фетчить дату

## Redux
* redux хранит state объектов в едином store
* чтобы изменить state нужно отправить action, action попадает в reducer, reducer описывает как state будет изменен
* изменения только с помощью ЧИСТОЙ функции reducer - иммутабельные, копируем и подменяем
* ACTION - plain object { type, payload }
* методы dispatch(action), getState(), subscribe(listener) принадлежит store (store.dispatch)
* mstp селектит нужный для компоненты стейт и отслеживает изменения в выбранных свойствах
* FLOW - call dispatch(action) -> reducer(current state, action) -> returns new state instance

## Redux-toolkit
* Не используем ActionCreators,
* используем ThunkCreator.fulfilled/rejected успешные/неуспешные случаи выполнения санок
* настраиваем санки не на диспатч нужного AC, а на return нужных данных/rejectedWithValue(error)

## Redux-thunk
* Middleware for the Redux, that allows to dispatch async actions (thunks)

Hi, I'm Michael!

Featured Posts

Object Oriented Programming and OOP in Javascript

JavaScript

TypeScript

React.js