Trascrizione: (click per espandere)

salve a tutti questo e' un video speciale
dedicato a tutti i sottoscrittori del
canale tutorial javascript perché
abbiamo raggiunto i mille iscritti
quindi grazie è un video che parla di
tips and tricks che un programmatore può
usare quindi suggerimenti e trucchetti
che possono essere usati in javascript
per scrivere codice in maniera un po' più
compatta
ricordo sempre che è bene cercare di
scrivere codice compatto ma allo stesso
tempo leggibile quindi dovete sempre
cercare il corretto bilanciamento tra
questi due fattori altrimenti se il
codice poi risulta difficile della
essere perché scritto in maniera
troppo sintetica non e' considerato un
buon codice nei video precedenti vi ho già
fatto vedere diversi trucchetti per
scrivere codice in maniera compatta
andiamo a vederne qualcun altro
allora prima di tutto parliamo della
console questo trucchetto non è
specifico per scrivere codice compatto
ma è solo un aiuto che il programmatore
ha per risparmiare un po' di tempo
vi faccio un esempio state leggendo
qualcosa su una pagina web e avete
bisogno di fare un'operazione al volo
allora cosa dovete fare dovete aprire o
la calcolatrice del computer o la
un'altra pagina del browser e aprirvi
una calcolatrice online non è necessario
basta solo che apriate voi la vostra
console della pagina in cui siete qui
sono nella pagina di google
giusto per farvi vedere che può essere
fatto in qualsiasi pagina e nella vostra
console potete tranquillamente scrivere
l'operazione che vi serve e come
vedete la vostra console vi fa la
calcolatrice potete fare divisioni e
moltiplicazioni somme qualsiasi
operazione la vostra console è pronta
a eseguirla
potete anche scrivere codice javascript
direttamente nella console per esempio
se vi ricordate l'oggetto Date
voglio il timestamp di adesso eccolo
questo e' il timestamp di adesso potete
che ne so potete scrivere
direttamente funzioni nella vostra
console allora per esempio qui c'è la
funzione somma che mi ritorna x più
y e poi vado a invocare questa funzione
quindi somma facciamo 3 e 6 come vedete
io qui ho 9 poi ancora somma e mi metto
30 e 56
come vedete non serve neanche che vada
ad aprirmi il mio editor di testo se
devo eseguire piccole operazioni fare
piccoli script di codice posso fare
direttamente nella mia console e non ho
bisogno di aprire l'editor
scrivere la pagina html poi aprirla col
mio browser posso fare tutto
direttamente nella mia console e questo
ci può salvare preziosi minuti se siamo
di fretta eccetera
adesso andiamo a vedere qualche
trucchetto proprio quando si scrive il
codice abbiamo già parlato nei vari
video precedenti degli operatori OR e
dell'operatore AND abbiamo detto che
eseguono delle espressioni e ritornano
un valore booleano che può essere vero o
falso
quello che non ho detto è che possono
essere usati per assegnare valori alle
variabili
andiamo a vedere un esempio
con l'operatore OR quindi lo chiamo la
variabile or allora l'operatore OR
ritorna il primo valore vero che
incontra se non incontra valori veri
ritorna l'ultimo valore falso cosa
vuol dire
diciamo che io ho un numero che è 3 e
poi metto l'operatore OR e metto un
altro numero che 5
noi abbiamo detto che
l'unico numero che in booleano ha valore
falso è lo zero tutti gli altri numeri
hanno valore vero quindi l'operatore OR
ripeto ritorna il primo valore vero
che incontra se non incontra valori veri
ritorna l'ultimo valore falso allora
qui quando javascript comincia eseguire
questa espressione con l'operatore OR
il primo valore vero che incontra il 3
il 3 ha valore vero quindi lo ritorna e
e va a popolare la variabile or con
il valore 3 andiamo a vedere la console
e qui ho tre
se avesse avuto un valore falso quindi 0
l'operatore OR va controllarmi la
seconda parte dell'espressione 5 è un
valore vero si è quindi mi ritorna 5 e
come vedete qui ho 5
ho anche detto che l'operatore OR se
non incontra valori veri mi ritorna
l'ultimo valore a falso se qui avessi
avuto false quindi il falso mi avrebbe
ritornato falso e come vedete qui ho
falso stessa cosa se avessi avuto una
stringa vuota che in booleano ha valore
falso e qui mi ritrovo una stringa
vuota posso avere anche più operatori OR concatenati quindi mettiamo
false e poi ci mettiamo NaN e
alla fine ci mette una stringa piena con
la scritta valore allora abbiamo detto 0
in booleano è falso stringa vuota in
booleano è falso falso e' falso NaN booleano è falso
una stringa che ha del testo dentro ha un
valore vero quindi mi viene ritornata è
vera
questo questa stringa ha valore verrà
immagazzinata dentro la mia variabile
or andiamo a vedere eccola qui valore
quando usare OR in questa maniera
capita spesso più di quello che si possa
pensare che si lavori con valori che non
si sa
se ci sono oppure no e allora e nel caso
in cui non ci sia un valore
magari io voglio dare un valore di
default
facciamo un esempio io c'ho un'array e
vado a popolare un'altra
variabile la chiamo valore e voglio dire
se il mio array ha almeno un elemento
dentro ritorna l'elemento il primo
elemento del mio array se altrimenti
ritorna la stringa no valori
e dopo vado a fare il printing
della mia variabile val
allora se il mio array ha
valori dentro ritorna il primo valore e
salvalo dentro questa variabile se
il mio array non ha valore dentro
ritorno alla stringa no valori allora
adesso io ho una un'array vuoto quindi mi
ritroverò la stringa no valori se il mio
array avesse avuto dentro dei valori non
c'entra cosa è la mia variabile val
sarebbe stata popolata col primo
elemento del mio array vediamo
eccolo operatore AND
l'operatore AND lavora un po' come
l'operatore OR però l'operatore AND mi
ritorna il primo valore falso che
incontra se tutti i valori sono veri mi
ritorna l'ultimo valore vero
ricapitoliamo l'operatore OR mi ritorna
il primo valore vero che incontra se
tutti sono falsi mi ritorna all'ultimo
falso l'operatore AND mi ritorna il
primo valore falso che incontra se sono
tutti veri mi ritorna l'ultimo vero
andiamo a vedere
e allora questo qui è AND allora io c'ho
un 5 e poi uso AND
scusate e poi qua io c'ho un 67 poi
metto ancora AND poi ancora un 100
andiamo a fare il printing di AND allora
dico ancora l'operatore AND mi ritorna
il primo valore falso che incontra se
sono tutti i veri mi ritorno l'ultimo
valore vero quindi il mio AND qui
avrà valore cento
andiamo a vedere cento perché è l'ultimo
valore vero che incontra se io avessi
avuto un valore falso
mi ritorna il primo valore falso che
incontra e quindi mi troverei lo zero
qui perché questo è falso ritorno al
falso quando usare l'operatore AND in
questa maniera
secondo me ci sono un po' meno casi
rispetto all'operatore OR in questa
maniera però posso dire che se
lavorerete con framework come React
questo tipo di sintassi viene
molto usata per decidere se visualizzare
o no un componente e mi fermo qui
non vado più in profondità su come
React funziona
vi faccio un esempio con un IF adesso e
poi vediamo come si può fare la stessa
cosa con gli operatori Or e AND
concatenati
allora diciamo che se teniamo questo
array qui anzi lo ricopio e mettiamo qua e
allora se diciamo sei mio
array ha degli elementi
dentro e quindi la proprietà length sarà
maggiore di zero posso anche scrivere in
maniera un po' più corta visto che
se la proprietà length è zero quindi
se io non ho valori questo qua length mi
ritorna 0 che abbiamo detto che ha
valore falso quindi non serve neanche
mettere così quindi se io non ho
elementi questo sarà zero e quindi sarà
falso se io elementi questo sarà un
numero diverso da zero e quindi sarà
vero
allora sei io ho elementi dentro il mio
array e diciamo che il primo
elemento del mio array facciamo il
primo elemento del mio array è maggiore
di 10
facciamo che anzi facciamo così dice
ho variabile valore la chiamo e metto
una stringa vuota allora
assegno alla mia variabile valore
primo elemento maggiore di 10 altrimenti
la mia variabile valore avrà valore
no elementi oppure elemento minore di 10
e poi vado a visualizzare il
valore della mia variabile elemento
val ecco qua allora qui ci mette un
numero mettiamo che ci metto 12 allora
io mi troverò primo elemento maggiore di
10 perché io col mio array so che questo
qua o si ciò ha un valore in prima
posizione e poi vado a controllare il valore in prima posizione è
maggiore di 10 bene allora mi inserisci
questo testo qui se avessi avuto 8 mi
troverei
no elemento oppure elemento minore di 10
se non avessi avuto nessun elemento mi
ritroverei ancora no elemento oppure
minore di 10 andiamo a vedere come
compattare tutto questo IF/ELSE in una
riga di codice
anzi facciamo così
e prendiamo il primo adesso vi spiego
tutto
ecco qui andiamo a vedere se funziona
allora mettiamo dentro un 12 e 5 devo
commentare qui allora il primo elemento
maggiore di 10 funziona esattamente come
prima se adesso io ci metto 8 no elemento
oppure elemento minore di 10 se io non
ho elementi no è elemento oppure minore
cosa ho fatto qui allora qui ho una
serie di una concatenazione di valori
AND e come abbiamo detto il valore AND
ritorna il primo valore falso che trova
allora quando io avevo 12 la proprietà
length del mio array qui sarebbe stato 1
quindi un valore vero quindi passa allo
step successivo che è il primo
elemento del mio array è maggiore di 10
si quindi anche questo qua è vero quindi
passo al terzo step che è una stringa
che solo perché ha del testo dentro
automaticamente è vera poi io trovo un
operatore OR l'operatore OR
dice che mi ritorna il primo valore
vero che trovo tutto questo blocco qui è
vero si è quindi mi ritorna tutto sto
blocco che
è una serie di operatori AND e
l'operatore AND mi ritorna l'ultimo
valore vero che trova che è questo qui è
quindi la mia variabile val alla fine
avrà questo valore qui aspetta che salvo
ok primo elemento maggiore di 10
rispiego io ho un operatore
OR qui con un primo blocco di codice e
un secondo blocco di codice l'operatore
OR dice che mi ritorna il primo valore
vero che trova quindi andiamo a
controllare il primo il primo blocco se
è vero qui ho una concatenazione di AND
AND dice che mi ritorno l'ultimo valore vero se sono tutti veri
oppure il primo valore falso qui ho un
12 dentro al mio array quindi la
proprietà length me ritornerà 1 che ha
un valore vero passo al secondo step il
primo elemento è maggiore di 10 si
quindi passa il terzo step terzo step è
una stringa che solo perché ha del testo
dentro ha valore vero quindi mi ritorna
questo valore qui se avessi avuto 8 abbiamo detto che OR
mi ritorna il primo valore vero che
trova quindi andiamo ancora a
controllare il primo pezzo del mio OR e il
primo pezzo del mio OR è una
concatenazione dei valori AND array
length è uno perché ho un elemento
quindi questo è vero il primo elemento è
maggiore di 10 no quindi questo è falso
quindi il mio blocco di AND mi ritornerà
qualcosa che è falso
allora perché sono dentro a un OR passo al
controllo del blocco successivo
che è una stringa che solo perché
ha del testo dentro automaticamente mi
viene ritornata e quindi vado a popolare
il mio valore val con questa stringa e
stessa cosa funziona per un'array che non
ha elementi è ancora così so che non è
molto facile da capire all'inizio però
se voi cominciate con piccole
concatenazioni di OR e poi piccole
concatenazioni di AND poi cominciate
a metterle insieme vedrete che con la
pratica vi verrà molto più facile usare
questo tipo di concatenazioni andiamo a
vedere un ciclo IF
scusate uno statement IF che si scrive
con una sola riga di codice
allora di solito io ho IF dentro le
parentesi tonde ci metto è un'espressione
che può essere 3 maggiore di 2 e poi
ho le mie parentesi graffe poi faccio un
printing di qualcosa o ci metto del
codice che adesso è metto
vero in questo caso andiamo a vedere
vero perché 3 maggiore di 2 nel caso
in cui io ho solo un IF
e non ho bisogno dell'else e questo IF
ha una sola riga di codice al suo interno
posso scrivere tutto in una riga sola
senza dover mettere le parentesi graffe
in questa maniera qui andiamo a vedere
come vedete il risultato non cambia
quindi se devo usare solo IF non
else e il mio IF avrà solo una riga
di codice posso fare tutto in una riga e
senza mettere le parentesi graffe
arrow function
abbiamo già visto le arrow
function ma vi faccio vedere alcuni
piccoli trucchetti per quando si
scrivono arrow function allora
andiamo a vedere un arrow function
classica allora io qui ho le mie
parentesi tonde mettiamo che ciò che
accettano 2 parametri arrow function
parentesi graffe poi qui ci metto punto
e virgola e poi facciamo che ritorna
x più
y ritorno a una somma e poi andiamo a
usare questa questa funzione
per vedere il suo output facciamo che
3 e 5 quindi io dovrei trovarmi 8 eccolo
qui mi trovo 8 e la mia classi arrow
function niente di speciale
però io posso scrivere tutto questo in
una sola riga di codice
andiamo a vedere
ecco qui andiamo a vedere e come vedete
il risultato non cambia allora se la mia
arrow function ha una sola riga di codice
all'interno delle parentesi graffe io
posso scrivere tutto sono una riga senza
mettere le parentesi graffe e senza
specificare cosa mi ritorna la
funzione quindi non serve che metta la
keyword return qui infatti come vedete
già atom non me la colora come al solito
perché dice cosa stai scrivendo non
serve perché è implicito che quello che
metto in questa riga viene ritornato
dalla funzione quindi ricapitolando la
arrow functions se devo scriverla con
una sola riga di codice posso scrivere
senza parentesi graffe e automaticamente
non serve che specifichi cosa ritorna
perché è implicito che vado a ritornare
come in questo caso x più y altro
trucchetto della arrow function è se l'arrow
function non accetta parametri
mettiamo che in questo caso mi ritorno
100 eccolo qui cento io devo mettere
le parentesi tonde se ha un
parametro le parentesi tonde non sono
più obbligatorie e qui metto 20 e come
vedete mi funziona
e io qui ho messo la mia arrow function
accetta un
un parametro e non ho
specificato e non ho scritto le
parentesi se accetta più di un argomento
devo rimettere le parentesi come avete
visto prima è qui e qui metto y
e qui 10 e come vedete 200
allora ricapitolando se non ha argomenti
devo mettere le parentesi tonde se ha un
argomento le parentesi tonde non servono
se a più di un argomento allora devo
ammettere le parentesi tonde
non chiedetemi perché hanno fatto in
questa maniera però funziona così
la arrow function siccome l'ho già detto
che spesso viene usata e anche avete
visto negli altri video che viene spesso
viene usata come callback se si riesce a
scriverla in una riga sola fa comodo
perché così si risparmia
spazio e il codice risulta più
leggibile andiamo a vedere l'ultimo
trucchetto allora diciamo che io ho una
array e lo chiamò array due questa volta
che ha tanti valori al suo interno
uno due tre poi ci metto un altro 2 poi
ci mettono altro 1 poi ci mette un 5 poi
ci metto 4 poi ci metto un 3 ancora poi
ci metto sei e diciamo che io voglio che
questo array
voglio avere questa array che accetta
tutti sti valori però voglio alla fine
filtrare tutti i suoi valori per avere
solo i valori unici quindi voglio non
voglio due 1 al suo interno voglio un solo uno voglio un solo due
voglio un solo tre voglio solo 4
voglio solo 5 vogliono solo 6
allora prima dell'ECMAScript 6
bisognava scrivere una piccola funzione
da passare al metodo filter abbiamo
già visto il metodo filter
nel video dedicato all'approfondimento
sulla array quindi bisognava passare una
funzione che filtrasse
questo array
adesso non serve più perché l'ECMAScript 6 ha introdotto il nuovo oggetto
built-in Set
andiamo a vedere come si può usare il
Set in questo caso allora io
vado anzi facciamo
facciamo così new Set
abbiamo già visto un video
dedicato all'oggetto Set all'oggetto Map
e dentro ci passò array due e poi come
adesso io vado a creare un oggetto Set
passando questi valori qui noi sappiamo
che l'oggetto Set non accetta
valori doppi e quindi automaticamente il
mio Set avrà una serie di numeri al suo
interno però senza valori doppi però
questo Set qui non è più il mio array
quindi io devo andare a riconvertire il
mio array lo chiamò a array 3 e sempre con
l'ECMAScript 6 posso usare
il metodo from dell'oggetto array
abbiamo già visto usarlo in altri video
quindi io dentro ci passo 7 quindi io
vado a convertire il mio oggetto Set in
un'array e vado a popolare questa
variabile a array 3 e adesso andiamo a
vedere alla fine cosa succede array 3 e
come vedete il mio array finale ha gli
stessi valori che aveva il mio array
iniziale però senza i doppi
ecco qua andiamo a vedere come si può
fare tutta questa cosa con una riga di
codice
allora io metto array 2 uguale
array from(), dentro array from() new Set e
ci metto a array 2 quindi quello che avete
visto fare prima la creazione del
nuovo array dell'oggetto Set e poi la
conversione dell'oggetto Set in un array lo
faccio tutto in questa riga qua e vado a
vedere l'output finale e come vedete
non cambia ho sempre il
mio array che quindi in questo
caso è proprio la stessa variabile con i
valori senza duplicati
con questo è tutto spero di essere stato
il più chiaro possibile grazie ancora ci
sentiamo la prossima ciao