Perché React? - 4. React è "solo JavaScript"
Tags: react
Published: 2020-09-02 21:55:41

---
title: Perché React? - 4. React è "solo JavaScript"
published: true
date: 2020-09-02 08:00:00 UTC
tags: React
canonical_url: https://www.matteospreafico.com/perche-react-4-react-e-solo-javascript/
description: React non reinventa le funzionalità che sono già disponibili in JavaScript. Ad esempio, se volete creare delle liste di oggetti e mostrali in una vista, in React, basterà usare i metodi split e map di JavaScript.
series: Corso di React
---

Se già conoscete JavaScript sarà molto facile imparare React, se al contrario siete alle prime armi con JavaScript, React vi aiuterà a diventare degli sviluppatori JavaScript migliori.

## Ѐ solo JavaScript

Uno degli aspetti positivi di React è che gran parte di quello che userete, sarà normale JavaScript. Prendiamo ad esempio To make sure you're ready to move forward, please take a look at the following code:

```
const appuntamentiPersonali = [
  { appuntamento: 'Tintoria', ore: '19:00', giorno: 'martedi' },
  { appuntamento: 'Palestra', ore: '19:00', giorno: 'lunedi' },
];
const appuntamentiLavoro = [
  { appuntamento: 'Banca', ore: '11:00', giorno: 'lunedi' },
  { appuntamento: 'Cliente XYZ', ore: '9:00', giorno: 'martedi' },
];
const listaAppuntamenti = [...appuntamentiPersonali, ...appuntamentiLavoro];

const filtro = (appuntamenti) => (giorno) =>
  appuntamenti.filter((a) => {
    return a.giorno === giorno;
  });

const filtraPer = filtro(listaAppuntamenti);
const appuntamentiMartedi = filtraPer('martedi');
```
<figcaption>Esempio di codice JavaScript</figcaption>

Se questo codice non vi risulta chiaro, vi consiglio di fare un ripasso di ES6 prima di proseguire con React.

Nel corso degli ultimi anni la programmazione funzionale ha avuto un grande impatto sulla comunità e l'ecosistema JavaScript. La programmazione funzionale in JavaScript è un argomento complesso, sono stati scritti centinaia di libri in merito e siamo qui per parlare di React, quindi limitiamoci a dire che React è costruito usando molte delle tecniche di programmazione funzionale, che vedremo di volta in volta mentre approfinderemo i vari aspetti di React. Vediamo solo un paio di importanti funzioni JavaScript che sono fondamentali per quello che andremo ad approfondire: i metodi `.map()` e `.filter()` di Array.

## Il Metodo `.map()` di Array

Se non conosci il metodo JavaScript [`.map()` di Array](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/map), viene chiamato su un array esistente e restituisce un nuovo array creato a partire da cosa restituisce la funzione che gli viene passata come argomento. Vediamo un esempio:

```
const nomi = ['Matteo', 'Silvia', 'Daniele'];

const saluti = nomi.map((nome) => `Ciao ${nome}!`);
```
<figcaption>Esempio del metodo .map() di Array</figcaption>

Vediamo cosa sta succedendo. Il metodo `.map()` lavora sugli array, quindi abbiamo un array da cui partire:

```
const nomi = ['Matteo', 'Silvia', 'Daniele'];
```
<figcaption>Array di partenza</figcaption>

Quindi chiamiamo `.map()` sul array `nami` e gli passiamo una funzione come argomento:

```
nomi.map((nome) => `Ciao ${nome}!`);
```
<figcaption>Chiamata alla funzione .map() di Array</figcaption>

La funzione a freccia (arrow function) che è passata a `.map()` viene chiamata per ogni elemento nell'array `nomi`! La funzione a freccia riceve il primo nome nel array, lo salva nella variabile `nome` e la usa per costruire e restituisce una nuova stringa `Ciao ${nome}!`. Poi fa lo stesso con i restanti due nomi.

Infine `.map()` restituisce un nuovo array con i valori restituiti dalla funzione a freccia:

```
const saluti = nomi.map((nome) => `Ciao ${nome}`);
```
<figcaption>.map() restituisce un nuovo Array</figcaption>

`saluti` sarà un _nuovo_ array `["Ciao Matteo!", "Ciao Silvia!", "Ciao Daniele!"]`. Questo è un passaggio fondamentale da comprendere: **il metodo`.map()` restituisce un nuovo array, non viene modificato l'array originale.**

Per fare pratica con il metodo `.map()`, potete provare a sostituire dei cicli `for` presenti in del vostro codice preesistente con la chiamata a `.map()`.

## Il Metodo `.filter()` di Array

Il metodo JavaScript [`.filter()` di Array](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) è simile al metodo `.map()`:

- viene chiamato su un array
- accetta una funzione come argomento
- restituisce un nuovo array

La differenza è che la funzione passata a `.filter()` è usata come un test, solo gli elementi che passano il test sono inclusi nel nuovo array. Vediamo un esempio:

```
const nomi = ['Matteo', 'Silvia', 'Daniele'];

const nomiCorti = nomi.filter((nome) => nome.length <= 6);
```
<figcaption>Esempio del Metodo .filter() di Array</figcaption>

Come prima, abbiamo un array iniziale:

```
const nomi = ['Matteo', 'Silvia', 'Daniele'];
```
<figcaption>Array di partenza</figcaption>

Chiamiamo `.filter()` sull'array `nomi` e passiamo una funzione come argomento:

```
nomi.filter((nome) => nome.length <= 6);
```
<figcaption>Chiamata alla funzione .filter() di Array</figcaption>

Allo stesso modo di `.map()` la funzione a freccia passata a `.filter()` viene chiamata per ogni elemento nell'array `nomi`. Il primo elemento (`'Matteo'`) è salvato nella variabile `nome`. Poi viene eseguito il test, ovvero eseguiamo il filtro. Viene controllata la lunghezza del nome. Se è più di `6` viene escluso e non incluso nel nuovo array, se invece la lunghezza del nome è 6 o meno, ovvero `name.length <= 6` restituisce `true` allora il nome è incluso nel nuovo array.

Alla fine, proprio come `.map()` il metodo `.filter()` restituisce un nuovo array invece di modificare quello originale:

```
const nomiCorti = nomi.filter((nome) => nome.length <= 6);
```
<figcaption>.filter() restituisce un nuovo Array</figcaption>

Quindi `nomiCorti` sarà il nuovo array `['Matteo', 'Silvia']`. Da notare che contiene solo due nomi, perché `'Daniele'` ha 7 caratteri ed è stato filtrato.

Per prendere confidenza con questo metodo, potete provare a modificare del vostro codice preesistente sostituendo gli `if` con chiamate a `.filter()`.

## Usiamo `.map()` e `.filter()` insieme

Quello che rende `.map()` e `.filter()` molto potenti è che possono essere usati insieme perché entrambi restituiscono array quindi possiamo usarli a catena in modo che il nuovo array restituito da un metodo sia usato per la chiamata seguente.

```
const nomi = ['Matteo', 'Silvia', 'Daniele'];

const salutiCorti = nomi
  .filter((nome) => nome.length <= 6)
  .map((nome) => `Ciao ${nome}`);
```
<figcaption>Esempio di .map() e .filter() insieme</figcaption>

Vediamo cosa succede, l'array `nomi` è filtrato dal metodo `.filter()`, quindi un nuovo array viene restituito, ma poi `.map()` è chiamato sul nuovo array e restituisce a sua volta un nuovo array. Questo nuovo array restituito da `.map()` è quello che viene salvato in `salutiCorti`.

### `.filter()` per primo!

Solitamente vorrete eseguire i metodi in questo ordine: `.filter()` prima e dopo `.map()`. Questo perché `.map()` esegue la funzione per ogni elemento dell'array, e quindi questo è più veloce se l'array su cui viene eseguito è già filtrato.