Le funzioni in JavaScript

In questo video parleremo delle funzioni in JavaScript. Questo vuole essere solo un video introduttivo, perchè, essendo le funzioni una parte fondamentale di questo linguaggio di programmazione, ho dedicato a loro una specifica sezione del video corso (link in descrizione).
In questo video vedremo come si definisce e si invoca una funzione, come si assegnano i parametri durante la fase di definizione e come si passano gli argomenti durante la fase di invocazione.
Ritroveremo lo scope di cui ho già parlato in un altro video (link in descrizione) e poi vedremo come utilizzare la keyword return.
Passeremo poi a parlare dei parametri di default concetto introdotto con l'ECMAScript 6 e di come far invocare altre funzioni da una funzione.
Infine, ci sarà anche un semplice esercizio/sfida da completare, per cercare di fissare i concetti appena imparati (vedremo anche come risolverlo).

Note al video: 

Durante il video suggerisco di guardare il video 9 sullo scope, ma il video è stato rinominato e quindi è il video 6 della sezione 2 (vedi link sotto).

Trascrizione: (click per espandere)
salve a tutti in questo video parlerò
delle funzioni di javascript anche
questo come il video sugli oggetti e un
video introduttivo in quanto le funzioni
dedicherò un'intera sezione del video
corso perché le funzioni sono
importantissime in javascript infatti
sono chiamate oggetti di prima classe
perché anche le funzioni derivano dal da
dall'oggetto padre comunque vedremo
tutto più avanti come si definisce una
funzione per definire una funzionale
abbiamo già visto qualche volta nei
video precedenti si usa la keyword
function poi si dà il nome della
funzione normalmente si usa un pattern
camel case e si cerca di dare un nome
che che spieghi l'azione della funzione
ad esempio che ne so
intanto scrivo un nome funzione e poi
vedremo un esempio non funzione poi si
mettono le parentesi tonde al cui
interno potrebbe potremo passare dei
valori che si chiamano parametri
parametro 1 parametro 2 per esempio poi
si aprono le parentesi graffe e si
inserisce il blocco di codice azione da
svolgere e poi si ritorna con la keyword
return si ritorna un valore punto e
virgola la dichiarazione la definizione
della funzione non va chiusa col punto e
virgola non serve questa è la sintassi
di base di una funzione allora come
parametri normalmente non è obbligatorio
usare dei parametri dipende dalla
funzione cosa deve fare
comunque come parametro io posso passare
qualsiasi tipo di valore può essere
stringa numero può essere un'altra
funzione può essere un oggetto è
normalmente questi parametri
poi verranno usati all'interno della
funzione eseguire determinati calcoli
determinati e operazioni all'interno di
una funzione e io posso invocare altre
funzioni e poi posso
non è obbligatorio posso ritornare un
valore ore un valore quindi io posso
ritornare una stringa cioè sarebbe il
risultato della mia funzione possa
ritornare una stringa un numero un
oggetto un'altra funziona e un'altra
funzione qualsiasi valore
questa è la dichiarazione della
funzione per invocare la funzione si
mette in nome della funzione e le
parentesi e punto e virgola
se la mia funzione prevede parametri
devo andare quando io invoco la funzione
devo andare a passare questi parametri
che nel momento in cui io sto invocando
la funzione prendono il nome di
argomenti quindi argomento uno è
argomento 2 per seguire lo stesso pattern
allora adesso io questa è come funziona
la sintassi di una funzione adesso
andiamo a vedere un esempio esempio per
esempio io voglio creare una funzione
che moltiplica un numero quindi
la chiamo moltiplica cerco di dare un
nome che ricorda all'azione che farà la
mia funzione e voglio che moltiplichi i
numeri a che con cui io invoco la
funzione quindi qui metto il numero 1 e
numero 2
ecco qui al suo interno cosa voglio fare
io voglio che la mia funzione
moltiplichi mio numeri quindi io posso
salvare i miei numeri
molte la chiamo qua quindi numero uno
moltiplicato numero due ecco qui
e poi voglio che mi ritorni il risultato
moltiplica ecco qua ho creato una
funzione che mi moltiplica i numeri
passati come argomento e poi mi ritorna
il risultato volendo posso scriverlo
anche in maniera un po più sintetica
posso fare direttamente così così
risparmio un po di codice e adesso se io
voglio invocare la mia funzione posso
salvare il risultato
il risultato dentro la variabile e qui
invoco la mia funzione quindi moltiplica
moltiplica e poi passò i numeri che
voglio che vengano moltiplicati quindi
posso passare il 3 e il 6 per esempio se
adesso io vado a fare la output del
risultato e troverò 18 se voglio fare
altri numeri
posso evocarla quante volte voglio la
funzione quindi qua posso metterci un 5
qua possono metterti metterci un 10 a
perché 50 possono rievocarla quante
volte voglio allora come vi dicevo
come vi ho
spiegato nel video numero nove le
funzioni
partecipano nel definire lo scope delle
variabili quindi se io una variabile
esterna esterna e la metto 5 e poi
dichiara una funzione la chiamo
visualizza non ci passo nessun parametro
e qui vado a vedere la output del della
mia variabile esterna eccolo qui poi e internamente alla
mia funzione crea un'altra variabile e
la chiamo interna e ci metto un 10 e poi
vado a vedere il suo output interno e
adesso vado a invocare la mia ho scritto
visualizza poi adesso vado a invocare la
mia funzione la invoco così come senza
passare niente perché non richiede
niente e poi provo a visualizzare le mie
variabili anche all'esterno della mia
funzione allora al momento facciamo così
ecco qua anzi queste quale commento così
ho solo quelle allora come vedete quando
io invoco la mia funzione la funzione
visualizza la il valore della variabile
esterno e o il 5 visualizza il valore
della variabile interna e o dieci fuori
dalla mia funzione io vedo il valore
della mia variabile esterna che quindi
un altro 5
se io adesso provo a vedere il valore
della variabile interna o errore perché
fuori dalla funzione il valore della
variabile interna non esiste quindi è
indefinito it is not defined
per rinfrescare il discorso sullo scope
riguardate il video 9 o funzione se
allora normalmente se qui io sto usando
una funzione che ha un ritorno ma il mio
return non è obbligatorio quindi come
in questa funzione qui se questa
funzione qui io provo a salvarla dentro
anzi faccio direttamente all'output
faccio una funzione un po più semplice
va così allora function semplice è
console log posso mettere interno ecco
qui se adesso io vado a vedere la output
cosa mi ritorna una funzione che non ha
return qua metto esterno poi io posso
vedere il valore della funzione facendo
così ecco qui allora io invoco la mia
funzione e quindi mi vedo che mi fa il printing di questa parola interno
poi nel console log io esterno e la
funzione in cui non è specificato nessun
valore come ritorno mi ritorna
indefinito quindi una funzione che non
ha specificato return come in questo
caso vale di default e ritorna
indefinito o posso invocare una funzione
da un'altra funzione
per esempio posso creare questa funzione
qui funzione prima è questa qua mi farà
un output prima funzione ecco qui poi
crea un'altra funzione funzione seconda
nella funzione seconda farò printing
della parola a seconda funzione e poi
andrò ad invocare la prima funzione così
ok adesso io esco e invoco la seconda
funzione
e questo il risultato
io invoco la seconda funzione e quindi
avrò il printing di questa frase qui
seconda funzione la mia funzione invoca
la prima funzione quindi poi io vedrò il
printing di prima funzione ecco qui
questa volta non appena venuto in mente
un'altra cosa che posso dirvi
parametri di default
se io o una funzione chiamiamola
possiamo fare moltiplica 2 moltiplica 2
e diciamo che il mio voglio passarci due
parametri parametro 1 parametro 1
parametro due però non è detto non è
detto che quando io vado ad invocare la
mia funzione la invoco sempre con due
argomenti magari la possa invocare solo
con un argomento quindi io voglio dare
un valore di default al parametro 2 e si
fa in questa maniera
5 ci metto quindi vuol dire che se io
vado ad invocare questa funzione
senza specificare un secondo argomento
automaticamente la mia funzione me
inserisce il 5 andiamo a vedere aspetta
faccio che il console log e avrò
parametro 1 moltiplicato parametro 2
ecco qui adesso io faccio un po di
esempi quindi moltiplica due allora
quindi la faccio una invocazione normale
ci passo il 4 e il 7 e c'ho 28
perfetto adesso io provo a fare una
moltiplicazione ci passo solo il 9 per
esempio 45 praticamente io passando solo
al 9 va da specificare il primo
parametro non specifico il secondo
allora javascript cosa fa ok ti metto
il 5 perché tu non me l'hai specificato
e quindi qua mi verrà moltiplicato il 9
per 5 45 questo tipo di valore di default
per il parametro è stato introdotto con
ecmascript 6
quindi se lo usate se usate questa
procedura in vecchi browser e non di
funzionerà se facciamo l'ultimo
tentativo cosa succede
scoppia tutto se io uno specifico
neanche il primo il primo parametro avrò
not a number perché io avrò moltiplicato
indefinito per cinque e quindi nota
number se io posso mettere anche un
valore di default per il primo possono
mettere 10 quindi in questo caso 50
perché non specificando niente avrà 10
per cinque bene esercizio per voi
esercizio per voi è scritto qui creare
una stringa in output con un nome di
persona passato come argomento passato
come argomento e calcolare i mesi e i
giorni che questa persona ha
vissuto basati sugli anni sul numero di
anni passato anche questo come argomento
non prendiamo in considerazione gli anni
bisestili altrimenti diventa un po
troppo complicato
conto fino a 3 poi potete mettere in
pausa e quando siete pronti
rischiacciate play 123 eccoci qui andiamo
a risolvere questo piccolo esercizio
quindi adesso vado a creare la mia
funzione calcola possiamo chiamarla
calcola mia età ok abbiamo detto che
voglio passarci il nome quindi parametro
nome è parametro età parentesi graffe
ecco qui allora cosa facciamo
facciamo che crea una variabile per i
mesi e vado a moltiplicare la mia età
per 12 perché ogni quindi la mia età
sarà in anni moltiplicata primi mesi
voglio fare lo stesso per i giorni
quindi avrò una variabile let giorni
uguale età per 365 perché ogni anno a
365 giorni perché abbiamo detto che i
bisestili non li contiamo quindi adesso
io vado a fare il printing anzi lo faccio
su questo qui tanto per cambiare
document.getelementbyid display inner
html assegnazione ecco qui andiamo a
metterci a sto giro uso in back tick
allora salve sono qui e mette il nome ed
ho abbiamo detto la mia eta' la metto in
questa maniera qui che corrisponde a tutto quindi abbiamo detto
mesi mesi o a giorni virgola ok andiamo
invocare la funzione quindi calcola la
mia età e come parametri ci passa il
nome marco per esempio è la età di 3 da
tre anni
stiamo a vedere cosa succede ecco qui
salve sono marco ed ho trentatré
dimenticato scrivere anni ed ho 33 anni ha
cancellato la c che corrisponde a 396
mesi o a 12.045 giorni
ecco qui semplicissimo possiamo fare una
maniera un po più veloci invece di
inserire di creare queste due variabili
le vado a inserire direttamente dentro
alla stringa in questa maniera qui
perché ho la possibilità di inserire
piccole espressioni come già vi dicevo
direttamente dentro qui quindi se adesso
io faccio così il risultato non cambia
come vedete io ho messo dentro
direttamente l'operazione dentro alle
pretese graffe e non cambia con questo è
tutto ci sentiamo alla prossima ciao
File del video: