
## Why Map and not good old object?!


Like objects Maps are storing key-value pairs and in this sense, are quite alike, BUT in objects the keys must be string, integer(internally converted to string) or Symbol. On the other hand, keys in Map can be any value: functions, objects, abstract data structure and any primitive.

## Order
Maps keeps the entry insertion order, keys in objects are ordered now, but this was not always the case, and still is not a great idea to trust the order 100%.

## Size
Map has 'size' property, for object we need to do it manually.

## Iteration
Map has  _**[iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)**_ objects must use Object.entries, Object.keys or Object.values.

```javascript
const map = new Map();

map.set('fistKey', 'foo');
map.set('secondKey', 'bar');
const fnKey = () => {};
map.set(fnKey, 'i am a function key');

map.get('fistKey'); //foo
map.get(fnKey); //'i am a function key'

map.size; //3

for (const [k, v] of map) {
  console.log(k, v);
}
/*
fistKey foo
secondKey bar 
function fnKey()  i am a function key
*/


```

Map is very straightforward easy to use data structure, with well implemted and self explanatory methods, and some extra cool stuff like iterable and size prop!


small_15.jpg

thumbnail_15.jpg

15.jpg

Data structure - Map

## What is Observer Pattern? 
It offers subscription  model, where functions (objects) get notified, when the event occurs, This promotes loose coupling, because the subscribers does not have direct knowledge of each other.

Example:
```javascript
const observer = () => {
    let subscribers = [];
    return {
        subscribe: (fn) => subscribers.push(fn),
        unsubscribe: (fn) => (subscribers = subscribers.filter((subscriber) => subscriber !== fn)),
        notify: () => subscribers.forEach((subscriber) => subscriber()),
    };
};

const ob = observer();

const notifyMe = () => console.log('Notified me');

ob.subscribe(notifyMe);

ob.notify();
```
## What if your functions need aditional params ? Just bind them!

```javascript
const observer = () => {
    let subscribers = [];
    return {
        subscribe: (fn) => subscribers.push(fn),
        unsubscribe: (fn) => (subscribers = subscribers.filter((subscriber) => subscriber !== fn)),
        notify: () => subscribers.forEach((subscriber) => subscriber()),
    };
};

const ob = observer();

const notifyMe = (name) => 'Hello ' + name;

ob.subscribe(notifyMe.bind(this, 'Pijo')); //bind what we need before subscribing

ob.notify();
```

Observer pattern is a powerful and clean approach for all tasks - from basic to very complex ones. It has many applications like handling state or DOM events, basically everything you can think of, that has some kind of event and something that needs to know about it.

small_14.png

thumbnail_14.png

14.png

Observer pattern

# why typescript ? 

Most people including me asks this question -  do i really need TS ?!


If you buidling a simple Todo app, the short answer is No!


If the app is a little more complex, my personal opinion is: typescript is King!

The follow up question is "WHY?!"

## The long answer

It helps you think of some situations where your code will break.

Simple example: 
```typescript
const elem = document.getElementByid('id');
const value = elem.value

//for javascript its completly normal code, but not for TS
//problm 1: elem is maybe null 
//problem 2: property value does not exist on all HTML elements 

const elem = document.getElementById('id') as HTMLInputElement | null;
if (elem) {
    const value = elem.value;
}
//Now we know what we can expect fom "elem" and how we can handle different scenarios
```
## Better autocomplete

Using interfaces and types gives you batter understanding of what type of complex objects you work with, while you easily avoid property misspelling

```typescript
interface Person {
    firstName: string;
    lastName: string;
    city: string;
}
const personOne = {
firstName: 'Hristo',
lastName:  'Manov',
city:            'Sliven'
  } as Person

personOne.town 
//Property 'town' does not exist on type 'Person'.ts(2339)
//Tip when you type personOne. and pres ctrl/command + space in VSC gives you all properties available for this object.
```
## Generics 
What is generics ?! They give you ability to create reusable functions, classes and code components, that work with multiple types instead of one.

```typescript
const person = {
    firstName: 'Hristo',
    lastName: 'Manov',
    city: 'Sliven',
};

const cat = {
  name: 'Pijo',
  breed: 'mixed',
  age: '3 months'
}
function getProperty<T, K extends keyof T>(obj: T, key: K) { 
    return obj[key];
}

//what keyof does is to create union type of all public properties names 
//simple union type = type SimpleUnionType = 'firstName' | 'lastName' | 'city';
//so why we dont use simple union type - beacuse as this way the function will work only for person and not for cat 
//using generic type gives the ability to work for both


getProperty(person, 'town'); //Argument of type '"town"' is not assignable to parameter of type '"firstName" | "lastName" | "city"'.
getProperty(person, 'city'); // OK

getProperty(cat, 'town'); // Argument of type '"town"' is not assignable to parameter of type '"name" | "breed" | "age"'.
getProperty(cat, 'name'); // Ok

```

## Final words 
Typescript is very powerfull tool for creating robust and flexible applications, its a good tradeof for the little extra code we need to write.

large_13.png

medium_13.png

small_13.png

thumbnail_13.png

13.png

Why typescript 

The Intersection Observer API is a very neat and clean way to handle stuff only after is shown on the screen. It can be used for lazy loading of images of handle same animation after the element is in the view port.

Lazy loading:
```javascript
const imgs = document.querySelectorAll("img");

const imgObserver = new IntersectionObserver(
    (entries, observer) => {
        entries.map(entry => {
            if (entry.isIntersecting) { 
                const dataSrc = entry.target.dataset.src; 
                if (dataSrc) {
                    entry.target.src = dataSrc;//set src from dataset
                if (dataSrc) {
                }
                observer.unobserve(entry.target); //after we are done we no longer need to observe it.
            }
        });
    },
    { rootMargin: "0px", threshold: 0 }
);
imgs.forEach(img => imgObserver.observe(img));

```
Animation:

```javascript
const img = document.querySelector("img")

const callback = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add(".animation")
    }else {
       entry.target.classList.remove(".animation")
    }
  })
}

const myObserver = new IntersectionObserver(callback, {})

myObserver.observe(img)

```
In this example, we don't use unobserve, so the every time element goes in viewport will trigger the animation. 

Intersection Observer API simpifies all tasks which includes position ralative to viewport, no need of caluculations.