Corecturi finale

Author: kosson

event-loop-call-stack-callback/callbacks/callback-uri.md

@@ -279,4 +279,5 @@ Dacă un callback trebuie invocat cu întârziere, definește funcția pentru a
 
 ## Referințe
 
--   [The Art of Node. An introduction to Node.js](https://github.com/maxogden/art-of-node#callbacks)
+- [The Art of Node. An introduction to Node.js](https://github.com/maxogden/art-of-node#callbacks)
+- http://callbackhell.com/

functii/functii-async.md

@@ -2,7 +2,7 @@
 
 Acest enunț a fost introdus în EcmaScript 2017 și face ca o funcție să returneze o promisiune (`Promise`). Funcțiile acestea poartă cuvântul cheie `async` în fața lui `function`. Apariția lor marchează o nouă paradigmă de lucru cu promisiunile.
 
-Înainte de apariția acestori funcții, pentru a scrie cod asyncron aveam la îndemână callback-uri și promisiuni. În mod curent, până la apariția async/await ai fi returnat un obiect `Promise` proaspăt instanțiat.
+Înainte de apariția acestor funcții, pentru a scrie cod asincron aveam la îndemână callback-uri și promisiuni. În mod curent, până la apariția async/await ai fi returnat un obiect `Promise` proaspăt instanțiat.
 
 ```javascript
 function simulare () {
@@ -29,14 +29,13 @@ sarcina().then(mesaj => console.log(mesaj));
 Să lucrăm cu un caz ceva mai util. Atunci când am discutat despre cum este executat codul JavaScript, am folosit un exemplu
 
 ```javascript
-TODO: Nu uita să ștergi cheia mea din stringul de acces la API-ul Europeana
 // înlocuiește cheia API din link numită wskey, cu una personală obținută
 // de la https://pro.europeana.eu/get-api
 // Secvența unde vei pune cheia ta este wskey=XXXXXXXXX
 // înlocuiește XXXXXXXXX cu propria cheie
 // dacă nu introduci cheia personală vei avea o eroare
 // Cross-Origin Request Blocked
-let adresa = "https://www.europeana.eu/api/v2/search.json?wskey=MH8g7b6hz&query=The%20Fraternity%20between%20Romanian%20and%20French%20Army";
+let adresa = "https://www.europeana.eu/api/v2/search.json?wskey=XXXXXXXXX&query=The%20Fraternity%20between%20Romanian%20and%20French%20Army";
 function aduMi () {
   fetch(adresa)
     .then((resursa) => resursa.json())
@@ -49,7 +48,7 @@ aduMi();
 Pentru a simplifica putem transforma funcția noastră într-una `async`.
 
 ```javascript
-let adresa = "https://www.europeana.eu/api/v2/search.json?wskey=MH8g7b6hz&query=The%20Fraternity%20between%20Romanian%20and%20French%20Army";
+let adresa = "https://www.europeana.eu/api/v2/search.json?wskey=XXXXXXXXX&query=The%20Fraternity%20between%20Romanian%20and%20French%20Army";
 async function aduMi () {
   const resursa = await fetch(adresa);
   const rezultat = await resursa.json();
@@ -62,6 +61,11 @@ aduMi().then((înregistrarea) => console.log(înregistrarea)).catch(() => consol
 
 Ceea ce permit funcțiile async/await este posibilitatea de a captura toate erorile ridicate de codul asincron, dar și cel sincron. Deci, folosirea unei structuri `try...catch` este valabilă.
 
+## Dependințe cognitive
+
+- iteratori
+- generatoare
+
 ## Referințe
 
 -   [Asynchronous Adventures in JavaScript: Async/Await](https://medium.com/dailyjs/asynchronous-adventures-in-javascript-async-await-bd2e62f37ffd)

functii/generators.md

@@ -1,6 +1,6 @@
 # Generators
 
-Generatoarele oferă posibilitatea de a parcurge o colecție de date. Este un nou tip de funcții introduse în ECMAScript 2015 care *produc* (*yield* în limba engleză) valori la cerere. Punerea unei steluțe după cuvântul cheie `function`, va semnala că avem de a face cu o funcție generator. Funcțiile săgeată nu pot fi iteratori.
+Generatoarele oferă posibilitatea de a parcurge o colecție de date. Este un nou tip de funcții introduse în ECMAScript 2015 care *produc* (*yield* în limba engleză) valori la cerere. Punerea unei steluțe după cuvântul cheie `function`, va semnala că avem de a face cu o funcție generator. O funcție generator este ceva mai specială pentru că la momentul invocării sale, nu se execută codul intern, ci este returnat un obiect iterator. Funcțiile săgeată nu pot fi iteratori.
 
 ```javascript
 function* ceva () {
@@ -17,7 +17,7 @@ x.next(); // încearcă să mai scoți un rezultat
 
 Acest nou tip de lucru cu funcțiile se bazează pe faptul că accesul la date se face cu ajutorul iteratoarelor. Atunci când execuți un generator se creează un nou obiect iterator. Standardul menționează că acest obiect nou generat poate suporta și subclase. Un obiect iterator știe cum să acceseze elementele unei colecții unul după altul până la epuizarea lor. Acest obiect are niște metode disponibile pentru a iniția evaluarea expresiilor după cuvântul cheie `yield`. După evaluare, execuția generatorului se oprește în așteptarea unui nou apel al metodei `next()`. Poți percepe un generator ca un program care se execută la cerere și în etape. Fiecare etapă marcată de `yield` are asociată o stare.
 
-Apelarea unui generator nu îl execută, ci doar este trimisă funcția în stiva apelurilor și imediat este suspendată execuția. De fapt, la apelare este returnat un obiect iterator. Obiectul iterator ține o referință către contextul de execuție al generatorului care este în call-stack. După ce au fost evaluate toate expresiile până la întâlnirea primului `yield`, contextul de execuție al generatorului va fi scos din stiva de apeluri, dar obiectul iterator care s-a creat, va ține minte acest context de execuție. Execuția metodei `next()` nu creează un nou context de execuție precum în cazul clasic, ci doar reactivează contextul de execuție al generatorului pe care-l împinge din nou în callstack. Se continuă execuția de unde a rămas începând cu expresiile de după `yield`. Codul este evaluat până la întâlnirea următorului `yield`, când execuția este suspendată din nou, nu înainte de a actualiza obiectul iterator care ține minte starea - ține viu contextul de execuție. Acest ultim aspect oferă un mare avantaj al generatoarelor pentru că rețin valorile între diferitele etape parcurse cu `next()`.
+Apelarea unui generator nu îl execută, ci doar este trimisă funcția în stiva apelurilor și imediat este suspendată execuția, fiind returnat un obiect iterator. Obiectul iterator ține o referință către contextul de execuție al generatorului care este în call-stack. După ce au fost evaluate toate expresiile până la întâlnirea primului `yield`, contextul de execuție al generatorului va fi scos din stiva de apeluri, dar obiectul iterator care s-a creat, va ține minte acest context de execuție. Execuția metodei `next()` nu creează un nou context de execuție precum în cazul clasic, ci doar reactivează contextul de execuție al generatorului pe care-l împinge din nou în callstack. Se continuă execuția de unde a rămas începând cu expresiile de după `yield`. Codul este evaluat până la întâlnirea următorului `yield`, când execuția este suspendată din nou, nu înainte de a actualiza obiectul iterator care ține minte starea - ține viu contextul de execuție. Acest ultim aspect oferă un mare avantaj al generatoarelor pentru că rețin valorile între diferitele etape parcurse cu `next()`.
 
 Dacă în execuție nu mai este întâlnit niciun `yield`, funcția generator returnează obiectul iterator, care în acest moment va avea valoarea `true` asociată cheii `done`.
 
@@ -32,9 +32,11 @@ var genob = parcurgObiect();
 genob.next();
 ```
 
+Datorită acestui comportament al generatoarelor prin care este permisă întreruperea execuției, în practică mai sunt numite și **corutine**.
+
 ## Procesare de generatoare
 
-Funcțiile generator pot procesa alte funcții generator.
+Funcțiile generator pot procesa alte funcții generator. Expresia `yield*` este folosită în cazul în care dorești să delegi execuția către un alt generator sau obiect iterator. Asigură-te că expresia care stă după `yield*` este un obiect iterabil. Generatoarele sunt obiecte iterabile pentru că implementează protocoalele `iterable` și `iterator`.
 
 ```javascript
 function* unGen () {
@@ -49,6 +51,8 @@ for (let obiRet of unGen()) {
 };
 ```
 
+Ceea ce se petrece atunci când `yield*` este aplicat unui obiect iterabil este că va face `yield` pentru toate valorile din obiectul iterabil căruia i se aplică.
+
 ## Trimiterea mesajelor
 
 Un lucru foarte interesant care privește funcțiile generator este că se pot trimite mesaje din funcție în obiectul iterator instanțiat și invers.
@@ -326,8 +330,112 @@ for(let element of parcurgDOM(elementDOM)){
 };
 ```
 
+## Corutine
+
+Corutinele sunt un model de organizare a executării funcțiilor care își întrerup execuția pentru a ceda controlul alteia. JavaScript nu are un mecanism dedicat realizării corutinelor. Cel mai apropiat fiind totuși generatoarele care prin `yield`, cedează controlul unui alt context de execuție, iar la momentul oportun își reiau execuția. Corutinele sunt un mecanism care în loc să folosească callback-urile, fac uz de *event loop*.
+
+Pentru a gestiona un generator folosind o corutină, trebuie să elaborezi o funcție *wrapper* suplimentară. Aceasta va gestiona următoarea logică necesară:
+
+- va apela generatorul și va genera obiectul generator;
+- va apela metoda `next()` pe obiectul generator ceea ce va conduce la executarea întregului cod până când `yield` apare;
+- va apela metoda `next(...)` în care vor fi trimise date către generator.
+
+```javascript
+function corutină (funcGenerator) {
+  var obiectGenerator = funcGenerator(); // instanțierea obiectului
+  obiectGenerator.next(); // execută codul generatorului până la primul yield
+  return function (dateDeTrimisÎnGenerator) {
+    obiectGenerator.next(dateDeTrimisÎnGenerator);
+  };
+};
+```
+
+Folosind acest model, funcția *wrapper* oferă mecanismul de interacțiune cu generatorul fără a mai apela metoda `next()` direct pe obiectul generator.
+
+```javascript
+var generatorGestionat = corutină (function* gen () {
+  var primaVal = yield;
+  console.log('Iese prima valoare la primul yield: ', primaVal);
+  var aDouaVal = yield;
+  console.log('Și a doua valoare: ', aDouaVal);
+});
+generatorGestionat('primo');
+generatorGestionat('secundo');
+```
+
+Ținta ar fi ca de fiecare dată când se face un `yield`, o funcție să preia efortul de calcul și să ofere un rezultat. Când corutina și-a încheiat propria execuție, apelează la un alt `yield` din generator.
+
+```javascript
+function corutine (func) {
+  var gen = func(); // creezi generatorul și ceri primul yield
+  gen.next();
+  return function oVal (valoare) {
+    gen.next(valoare); // valoare este pasat generatorului
+  };
+};
+function* gen1 () {
+  var intrare; // este valoarea care intră prin argument
+  intrare = yield;
+  console.log('primul yield: ', intrare);
+  intrare = yield;
+  console.log('al doilea yield: ', intrare);
+};
+function* gen2 () {
+  var intrare; // este valoarea care intră prin argument
+  intrare = yield;
+  console.log('primul yield din a doua corutină: ', intrare);
+  intrare = yield;
+  console.log('al doilea yield din a doua corutină: ', intrare);
+};
+var x = corutine(gen1); x('ceva'); // primul yield: ceva
+var y = corutine(gen2); y('altceva'); // primul yield din a doua corutină: altceva
+x('salve'); // al doilea yield:  salve
+y('eh'); // al doilea yield din a doua corutină:  eh
+```
+
+Corutinele pot fi folosite și în scenarii în care sunt gestionate promisiuni.
+
+```javascript
+var colectie1 = {a: 1, b: 'ceva'},
+    colectie2 = {x: 'a', y: 10};
+
+var promisiune1 = new Promise(function exec (resolve, reject) {
+  resolve(colectie1);
+});
+var promisiune2 = new Promise(function exec (resolve, reject) {
+  resolve(colectie2);
+});
+
+function corutina (functie) {
+  var generator = functie();
+  var avanseaza = function salt (date) {
+    let next = generator.next(date); /**/
+    if(!next.done){
+      next.value.then((v) => {
+        console.log(v);
+      });
+      return next.value.then(avanseaza);
+    };
+  };
+  avanseaza();
+};
+
+function* generator () {
+  let promisePool = [promisiune1, promisiune2];
+  yield Promise.all(promisePool); /**/
+};
+
+corutina(generator);
+```
+
 ## Dependințe cognitive
 
 -   funcții,
 -   iteratori
 -   `for...of`
+
+## Resurse
+
+- https://www.wptutor.io/web/js/generators-coroutines-async-javascript
+- https://x.st/javascript-coroutines/
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*

obiecte/obiecte-interne-standard/Array/introducere-array.md

@@ -302,7 +302,7 @@ Mai este un caz al folosirii constructorului în ceea ce privește crearea unui
 
 ![](operatiuniArrayuri.svg)
 
-### Array-uri „dense” prin aplicarea lui `apply()` moștenit de la `Function`.
+### Array-uri dense prin aplicarea lui `apply()` moștenit de la `Function`.
 
 Acesta este un truc pentru a genera array-uri de o dimensiune fixă, dar care, în loc de elemente vide la inițiere, va fi populat cu valori `undefined`. Se folosește `Function.prototype.apply()`, care se poate invoca direct pe `Array` pentru că și `Array`, de fapt este o funcție. Cu rol de contructor, dar o funcție fără niciun dubiu, având acces la `apply()`. Pentru aceasta, contextul va fi obiectul global (în cazul browserului este `window`) sau la `null`. Drept argumente, va fi invocat `apply()` pasându-i-se numărul de elemente dorit:
 
@@ -340,7 +340,7 @@ Array(3).fill(4); // [4, 4, 4]
 // {'0':'01', '1':'01', length: 2, ceva: 1}
 ```
 
-Ultimul caz din seria de exemple de mai sus, se poate dovedi foarte util în practică. Să presupunem că dorești să generezi un obiect prepopulat cu valori din diferite motive. Acest obiect va avea la bază, între oricare alți membri, o pereche cheie:valoare, care va fi folosit drept indicator al dimensiunii array-ului. Ceea ce se va petrece este că aplicarea lui `fill`, care este aplicat obiectului sămânță în care găsește valoarea dimensiunii viitorului array, va conduce la „umplerea” obiectului cu tot atâția noi membri câți au fost specificați de `length`. Singura limitare este că identificatorii cheilor vor fi indecșii. Valorile care vor popula cheile obiectului, pot fi expresii sau valori simple. Am optat mai sus pentru
+Ultimul caz din seria de exemple de mai sus, se poate dovedi foarte util în practică. Să presupunem că dorești să generezi un obiect prepopulat cu valori din diferite motive. Acest obiect va avea la bază, între oricare alți membri, o pereche cheie:valoare, care va fi folosit drept indicator al dimensiunii array-ului. Ceea ce se va petrece este că aplicarea lui `fill`, care este aplicat obiectului sămânță în care găsește valoarea dimensiunii viitorului array, va conduce la „umplerea” obiectului cu tot atâția noi membri câți au fost specificați de `length`. Singura limitare este că identificatorii cheilor vor fi indecșii. Valorile care vor popula cheile obiectului, pot fi expresii sau valori simple.
 
 ### Crearea unui array multidimensional
 
@@ -388,7 +388,7 @@ console.log(alta);
 
 Dacă un array are obiecte drept elemente în cazul în care am dori să facem o copie a acelui array, de fapt am face o copie la referințele către obiecte. În limba engleză vom întâlni această situație cu denumirea *shallow copy* - **copie subțire**.
 
-## Manipularea dimensiunii unui array
+## Manipularea dimensiunii
 
 ### Folosirea proprietății `length`
 
@@ -413,14 +413,15 @@ function numaraElementeReale (date) {
 numaraElementeReale(tablou); // 3
 ```
 
-### Creșterea lungimii array-ului prin introducerea valorii
+### Creșterea lungimii array-ului
 
 ```javascript
 const tablou = ['x', 'y'];
 tablou.length = 3;
-// în acest moment ceea ce s-a întâmplat este că a fost introdus un slot gol în array.
 ```
 
+În acest moment ceea ce s-a întâmplat este că a fost introdus un slot gol în array.
+
 ### Scăderea dimensiunii unui array menționând `length`
 
 Se poate face simplu prin:
@@ -435,7 +436,7 @@ console.log(tablou);  // Array [ "unu", "doi" ]
 
 ### Curățarea unui array cu resetarea sa la zero.
 
-Versatilitatea lui `length` merge mai departe oferind posibilitatea de a reseta la 0 un array.
+Versatilitatea lui `length` merge mai departe oferind posibilitatea de a reseta la `0` un array.
 
 ```javascript
 var tablou = ['unu', 'doi', 'trei', 'patru'];
@@ -446,8 +447,8 @@ console.log(tablou);  // Array [  ]
 tablou = [];
 ```
 
-Resetarea array-urilor la 0 - cele referențiate de altele. Există o variantă distructivă și una nedistructivă.
-Resetarea la 0 a array-urilor dacă se face cu `length` va avea același efect și pentru toate referințele la acel array. Cine va accesa o referință, va descoperi uimit că este 0.
+Resetarea array-urilor la `0` - cele referențiate de altele. Există o variantă distructivă și una nedistructivă.
+Resetarea la `0` a array-urilor dacă se face cu `length` va avea același efect și pentru toate referințele la acel array. Cine va accesa o referință, va descoperi uimit că este `0`.
 
 ```javascript
 var tablou = ['prima', 'a doua'];
@@ -467,7 +468,7 @@ tablou; // []
 altTablou; // Array [ "prima", "a doua", 1, 2 ]
 ```
 
-## Operațiuni cu datele din array
+## Operațiuni cu datele
 
 Dacă privești la gradul de populare, unele array-uri pot fi socotite **sparse** (în limba română: *cu goluri*), iar altele fără goluri catalogate a fi **dense**.
 

obiecte/obiecte-interne-standard/Array/metode-array/Array.from.md

@@ -55,9 +55,7 @@ function colectDivs(){
 var divuri = [...document.querySelectorAll('div')];
 ```
 
-## Nu poți aplica `slice` pe array-ul rezultat
-
-Cu `Array.from()` nu se poate face `slice()`, dar poți să indici ce sunt părțile.
+Nu poți aplica `slice` pe array-ul rezultat. Cu `Array.from()` nu se poate face `slice()`, dar poți să indici ce sunt părțile.
 
 ```javascript
 function ceEste(){

obiecte/obiecte-interne-standard/Function/introducere-function.md

@@ -77,9 +77,7 @@ Obiectul pasat ca și context de execuție este menționat între paranteze, fii
 
 ##### Mecanism de operare a funcțiilor interne ale limbajului
 
-Ține minte că și funcțiile interne (metode ale obiectelor interne), se pot bucura de avantajele folosirii lui `apply()`.
-
-**În cazul obiectului intern Math**
+Ține minte că și funcțiile interne (metode ale obiectelor interne), se pot bucura de avantajele folosirii lui `apply()`. În cazul obiectului intern Math:
 
 ```javascript
 var numere = [12, 43, 32, 3];
@@ -88,9 +86,7 @@ var max = Math.max.apply(null, numere); // 43
 var min = Math.min.apply(null, numere); // 3
 ```
 
-**În cazul obiectului intern Array**
-
-Putem crea un array „dens” (adică populat cu valori):
+În cazul obiectului intern `Array` putem crea un array *dens* (adică populat cu valori):
 
 ```javascript
 Array.apply(null, Array(5)); // Array [ undefined, undefined, undefined, undefined, undefined ]
@@ -140,9 +136,7 @@ Un alt exemplu elocvent este întâlnit la gestionarea evenimentelor atunci cân
 
 ### Function.prototype.call()
 
-Apelează o funcție în contextul unui obiect precizat între parantezele rotunde , permițând și pasarea argumentelor funcției. Setează `this` la obiectul pasat și argumentele pot fi pasate așa cum sunt.
-
-Argumentele de după specificarea lui `this` sunt pasate funcției apelată cu call.
+Apelează o funcție în contextul unui obiect precizat între parantezele rotunde, permițând și pasarea argumentelor funcției. Setează `this` la obiectul pasat și argumentele pot fi pasate așa cum sunt. Argumentele de după specificarea lui `this` sunt pasate funcției apelată cu `call()`.
 
 ```javascript
 function faCeva (arg){

obiecte/obiecte-interne-standard/Generator/introducere-generator.md

@@ -0,0 +1,12 @@
+# Generator
+
+Este un obiect intern pe care o funcție generator îl generează la momentul execuției. Obiectul implementează protocoalele `iterable` și `iterator`.
+
+```javascript
+function* gen () {
+  yield 'ceva';
+  yield 'altceva';
+};
+var obiectG = gen();
+// un obiect tip Iterator
+```