Lezione uso dei di funzioni javascript map, arrow function su routing dinamico

Riepilogando per punti chiave quanto abbiamo visto oggi.

Array di oggetti

In Javascript possono essere creati array di valori semplici (int, string, ..) ma anche array di oggetti complessi, come i nostri studenti del corso.

let studenti = [
  {
      name: "Simone",
      surname: "Checcoli",
      gender: 'm',
      voti: [7, 5, 8],
  },
  {
      name: "Irene",
      surname: "D'angelo",
      gender: 'f',
      voti: [
          7, 5, 8
      ]
  },
  {
      name: "Fabio",
      surname: "",
      gender: 'm',
      voti: [
          7, 5, 8
      ]
  },
  {
      name: "Nicola",
      surname: "",
      gender: 'm',
      voti: [
          7, 5, 8
      ]
  },
  {
      name: "Michele",
      surname: "",
      gender: 'm',
      voti: [
          7, 5, 8
      ]
  },
  {
      name: "Giulia",
      surname: "",
      gender: 'f',
      voti: [
          7, 5, 8
      ]
  },
];

Ogni elemento dell'array studenti sarà un oggetto con caratteriste specifiche (name, surname, gender, voti).

Arrow function

Le arrow function sono shortcut (scorciatoie) per scrivere codice più veloce e leggibile (oltre ad altre cose che non vedremo in questo corso). Hanno vari limiti (all'interno del corpo della funzione non si ha mai accesso all'oggetto this per esempio), ma le vedrete parecchie volte in codice react, quindi meglio conoscerle!

Ci sono due tipi di arrow function.

(parametro1, parametro2, ...) => (risultato di ritorno/corpo della funzione) e (parametro1, parametro2, ...) => {comandi e controlli vari; return risultato}

All'apparenza possono sembrare molto simili ma, in generale, sono molto diverse tra loro. Come vedrete nelle funzioni map, reduce e filter sottostanti, viene fatto uso delle arrow function. Inoltre, come indicato nella documentazione è una scorciatoia per evitare di scrivere la parola riservata function.

// Traditional Anonymous Function
function (a){
  return a + 100;
}

// Arrow Function Break Down

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
}

// 2. Remove the body braces and word "return" -- the return is implied.
(a) => a + 100;

// 3. Remove the argument parentheses
a => a + 100;

Funzioni Javascript analizzate

array.filter

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Nella pratica, partendo dai nostri studenti, potremmo decidere di voler filtrare solo gli studenti Maschi o Femmine in un array dedicato. La filter ci può servire per creare un array con i soli elementi che verificano una certa condizione.

const studentiMaschiArray = studenti.filter((studente) => (studente.gender === 'm'));
console.log(studentiMaschiArray, 'studentiMaschiArray FILTER');

const studentesseArray = studenti.filter((studente) => (studente.gender === 'f'));
console.log(studentesseArray, 'studentesseArray FILTER');

(studente) => (studente.gender === 'm')) è una arrow function, si potrebbe anche scrivere come

function (studente) {
   return studente.gender === 'm';
}

array.map

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Potremmo voler aggiungere alcune proprietà aggiuntive allo studente, per esempio il fullname ovvero la concatenazione di name e surname. La map serve proprio a questo scopo: alterare valori e struttura di ogni elemento del nostro array.

//Anche quì abbiamo una arrow function, la vedete?
const studentiFullnameArray = studenti.map(studente => {
    const newStudent = studente;
    newStudent.fullname = studente.name + ' ' + studente.surname
    newStudent.age = Math.floor(Math.random() * 21) + 20;
    return newStudent;
});

console.log(studentiFullnameArray, 'studentiFullnameArray MAP');

array.reduce

The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

Più complicata delle altre due a livello di applicazione, può essere usata per ciclare gli elementi di un array e confrontarli uno dopo l'altro. Può essere usato per calcoli come medie, reperimento del massimo/minimo valore di un elemento in un array, ...

Per il nostro array di studenti, potrebbe essere utilizzato per stampare in una sola stringa i nominativi degli studenti (anche se un pò forzato come esempio ...) oppure la media dei voti di tutti gli studenti.

//..e anche quì c'è una arrow function!
const stringaStudenti = '';
const elencoStudenteStringa = studenti.reduce((previousValue, studente) => previousValue + " " + studente.name, stringaStudenti);
console.log(elencoStudenteStringa, 'elencoStudenteStringa REDUCE');

simocheccoli / cappellari-corso-react