Tutti i tipi di funzione in JavaScript
Posted by vanni on Friday, 30 March 2018
In questo video vedremo nel dettaglio cosa è una funzione per JavaScript.
Innanzitutto vedremo che le funzioni sono a loro volta un oggetto, dette oggetti di prima classe, e poi parleremo di tutte le diverse sintassi con cui si può scrivere una funzione in JavaScript.
Parleremo quindi di:
- funzione dichiarativa (function declaration), che è anche la più comune e si identifica con un nome e la parola chiave "function"
- funzione espressione (function expression), in cui il nome non è obbligatorio ma necessita della parola chiave "function"
- funzione arrow (arrow function), nuova sintassi introdotta dall'ECMAScript 6 in cui non serve né il nome né la parola chiave "function"
- funzione costruttore (function constructor), usata molto raramente e che utilizza l'oggetto built-in "Function"
- metodo di un oggetto, quando una proprietà di un'oggetto è una funzione prende il nome di metodo
- funzione IIFE (Immediately Invoked Function Expression), che ultimamente viene usata meno dopo che l'ES6 ha introdotto i nuovi tipi di variabile e i moduli
- funzione asincrona (async function), nuovo tipo di funzione introdotta con l'ECMAScript 8 (la vedremo nel video sez8/4)
- generatore (generator), funzione molto particolare introdotta con l'ECMAScript 6 (la vedremo nel video sez8/7)
Trascrizione: (click per espandere)
salve a tutti in questo video vi
mostrerò tutte le maniere in cui che
possono essere usate per creare una
funzione in javascript
ho già parlato genericamente delle
funzioni di javascript nel video
dentro la sezione del corso base di
javascript quindi vi consiglio di vedere
quello prima di questo e cominciamo con
questo allora le intanto le funzioni vi
avevo già detto sono considerate oggetti
di prima classe quindi se io ho una
funzione ad esempio la chiamo function
prima ecco qui e vado a vedere il suo
tipo con l'operatore typeof javascript
mi dice che è un tipo funzione però se
vado a vedere da dove deriva quindi
prima instanceof object mi dice è vero
quindi vuol dire che una funzione è
un'istanza dell'oggetto globale object
quindi le funzioni sono oggetti come si
crea una funzione allora fino adesso io
ho sempre fatto vedere il metodo che si
chiama function declaration che è il
metodo che in cui si usa la keyword
function un nome della funzione nome
funzione parentesi tonda e che possono
accettare dei parametri parentesi graffe
che racchiudono il blocco di codice
della funzione per invocare questa
funzione si deve scrivere il nome della
funzione e le parentesi tonde in questa
maniera io creo la funzione e poi la
invoco ecco un'altra maniera per creare
una funzione creare una function
expression io creo una variabile la
chiamo variabile e le assegna una
funzione in questo caso non serve usare
e dare un nome alla funzione perché per
richiamare questa funzione verrà usato
il nome della variabile quindi si
possono mettere direttamente le
parentesi tonde che possono accettare
parametri e poi parentesi graffe
in cui c'è il blocco di codice della
funzione se io voglio andare invocare
questo tipo di funzione
uso il nome della variabile con le
parentesi tonde
se avessi dovuto passare degli argomenti
li avrà essere direttamente qui ecco qui
non ho sbagliato aveva scritto male
arrow function le arrow function sono
state introdotte con l'ecma script 6 e
vi faccio vedere la sintassi parentesi
tonde segno di uguale segno di maggiore
e poi parentesi graffe nelle
parentesi tonde come sempre va inserito
eventuali parametri e nelle parentesi
graffe c'è il blocco di codice che può
essere inserito non c'è un nome che
identifica la funzione e spesso questo
tipo di sintassi per creare una funzione
viene usata per le call back perché
appunto a una sintassi molto compatta e
sintetica adesso la commento perché
altrimenti mi dà errore messa così male
vedremo nel prossimo nel prossimo video
metodo è una funzione può essere un
metodo di un oggetto vi ho già detto che
quando abbiamo un oggetto possiamo
chiamo oggetto e ogni oggetto ha le sue
proprietà quindi possiamo assegnare una
proprietà a possiamo segnare una
funzione una proprietà quando assegniamo
una funzione a una proprietà questa
questa proprietà assume il nome di
metodo quindi io posso fare così anche
in questo caso è dare un nome alla
funzione non è obbligatorio perché poi
verrà identificata dal nome della
proprietà
ed ecco qui questa maniera ma qui in
questa maniera io ho creato un oggetto
che ha un metodo chiamato prop
quando io voglio andare invocare questa
funzione o meglio questo questo metodo
uso
oggetto il nome dell'oggetto il nome
della del metodo e le parentesi tonde
ecco qui constructor costruttore è
quando io voglio vado a costruire creare
una funzione usando l'oggetto built in
di javascript function
vi faccio vedere un esempio let esempio
lo chiamo esempio keyword new
oggetto built in function e dentro ci
metto il blocco di codice console log
per esempio
ciao mondo e ce l'ho qui eccolo qui
sconsiglio vivamente di usare questa
maniera per creare funzioni praticamente
ormai non viene quasi più usato è tutti
gli altri metodi sono molto più
affidabili diciamo no magari non
affidabili comunque sono molto più
immediati e facili da capire quindi lo
commento
e poi c'è IIFE è una function
expression che invocabile immediatamente
come si crea questa questo tipo di
funzione parentesi tonde keyword
function parentesi tonda e che possono e
poi parentesi graffe che hanno il blocco
di codice posso mettere dentro console
log
ciao mondo e poi si mettono a dopo la
parentesi tonda che chiude tutto il
corpo della mia funzione si mette
un'altra coppia di parentesi tonde che
in cui si possono passare eventuali
parametri se adesso io vado a salvare
come vedete io qui ho visto o la
visualizzato ciao mondo e non sto in
nessuna maniera invocando questa
funzione perché questa funzione si auto
invoca quando javascript e le raggiunge
questa funzione
la auto invoca immediatamente quindi
non devo fare come negli altri casi in
cui io espressamente invoco la funzione
o il metodo ma automaticamente invocata
ecco qui con questo è tutto ci sentiamo
la prossima ciao
mostrerò tutte le maniere in cui che
possono essere usate per creare una
funzione in javascript
ho già parlato genericamente delle
funzioni di javascript nel video
dentro la sezione del corso base di
javascript quindi vi consiglio di vedere
quello prima di questo e cominciamo con
questo allora le intanto le funzioni vi
avevo già detto sono considerate oggetti
di prima classe quindi se io ho una
funzione ad esempio la chiamo function
prima ecco qui e vado a vedere il suo
tipo con l'operatore typeof javascript
mi dice che è un tipo funzione però se
vado a vedere da dove deriva quindi
prima instanceof object mi dice è vero
quindi vuol dire che una funzione è
un'istanza dell'oggetto globale object
quindi le funzioni sono oggetti come si
crea una funzione allora fino adesso io
ho sempre fatto vedere il metodo che si
chiama function declaration che è il
metodo che in cui si usa la keyword
function un nome della funzione nome
funzione parentesi tonda e che possono
accettare dei parametri parentesi graffe
che racchiudono il blocco di codice
della funzione per invocare questa
funzione si deve scrivere il nome della
funzione e le parentesi tonde in questa
maniera io creo la funzione e poi la
invoco ecco un'altra maniera per creare
una funzione creare una function
expression io creo una variabile la
chiamo variabile e le assegna una
funzione in questo caso non serve usare
e dare un nome alla funzione perché per
richiamare questa funzione verrà usato
il nome della variabile quindi si
possono mettere direttamente le
parentesi tonde che possono accettare
parametri e poi parentesi graffe
in cui c'è il blocco di codice della
funzione se io voglio andare invocare
questo tipo di funzione
uso il nome della variabile con le
parentesi tonde
se avessi dovuto passare degli argomenti
li avrà essere direttamente qui ecco qui
non ho sbagliato aveva scritto male
arrow function le arrow function sono
state introdotte con l'ecma script 6 e
vi faccio vedere la sintassi parentesi
tonde segno di uguale segno di maggiore
e poi parentesi graffe nelle
parentesi tonde come sempre va inserito
eventuali parametri e nelle parentesi
graffe c'è il blocco di codice che può
essere inserito non c'è un nome che
identifica la funzione e spesso questo
tipo di sintassi per creare una funzione
viene usata per le call back perché
appunto a una sintassi molto compatta e
sintetica adesso la commento perché
altrimenti mi dà errore messa così male
vedremo nel prossimo nel prossimo video
metodo è una funzione può essere un
metodo di un oggetto vi ho già detto che
quando abbiamo un oggetto possiamo
chiamo oggetto e ogni oggetto ha le sue
proprietà quindi possiamo assegnare una
proprietà a possiamo segnare una
funzione una proprietà quando assegniamo
una funzione a una proprietà questa
questa proprietà assume il nome di
metodo quindi io posso fare così anche
in questo caso è dare un nome alla
funzione non è obbligatorio perché poi
verrà identificata dal nome della
proprietà
ed ecco qui questa maniera ma qui in
questa maniera io ho creato un oggetto
che ha un metodo chiamato prop
quando io voglio andare invocare questa
funzione o meglio questo questo metodo
uso
oggetto il nome dell'oggetto il nome
della del metodo e le parentesi tonde
ecco qui constructor costruttore è
quando io voglio vado a costruire creare
una funzione usando l'oggetto built in
di javascript function
vi faccio vedere un esempio let esempio
lo chiamo esempio keyword new
oggetto built in function e dentro ci
metto il blocco di codice console log
per esempio
ciao mondo e ce l'ho qui eccolo qui
sconsiglio vivamente di usare questa
maniera per creare funzioni praticamente
ormai non viene quasi più usato è tutti
gli altri metodi sono molto più
affidabili diciamo no magari non
affidabili comunque sono molto più
immediati e facili da capire quindi lo
commento
e poi c'è IIFE è una function
expression che invocabile immediatamente
come si crea questa questo tipo di
funzione parentesi tonde keyword
function parentesi tonda e che possono e
poi parentesi graffe che hanno il blocco
di codice posso mettere dentro console
log
ciao mondo e poi si mettono a dopo la
parentesi tonda che chiude tutto il
corpo della mia funzione si mette
un'altra coppia di parentesi tonde che
in cui si possono passare eventuali
parametri se adesso io vado a salvare
come vedete io qui ho visto o la
visualizzato ciao mondo e non sto in
nessuna maniera invocando questa
funzione perché questa funzione si auto
invoca quando javascript e le raggiunge
questa funzione
la auto invoca immediatamente quindi
non devo fare come negli altri casi in
cui io espressamente invoco la funzione
o il metodo ma automaticamente invocata
ecco qui con questo è tutto ci sentiamo
la prossima ciao
Link correlati:
Video che introduce alle funzioni in Javascript
Video che parla delle funzioni asincrone in Javascript
File del video: