Categorie
Javascript Programmazione

{JS} Le funzioni

Una funzione è un insieme di istruzioni racchiuse in un blocco di codice, che può essere contraddistinto da un nome, può accettare argomenti o parametri di ingresso e restituire valori.

Attribuire un nome ad una funzione servirà come riferimento per richiamare ed eseguire la stessa, in qualunque punto del programma. Esistono però anche funzioni anonime.

Una funzione JavaScript è in realtà un oggetto, più precisamente quello che tecnicamente è definito oggetto di prima classe (first class object),
cioè un’entità che può essere dinamicamente creata, distrutta, passata ad una funzione, assegnata ad una variabile, restituita come valore.

A differenza degli altri oggetti basati su Object, una funzione ha come oggetto base Function.

Definire una funzione JavaScript

Prima di poter essere richiamata una funzione deve essere definita ovvero creata.

function nomeDellaFunzione(argomenti) {
// Blocco di istruzioni
}

Con la parola chiave function segnaliamo all’engine Javascript che stiamo dichiarando una funzione;
nomeDellaFunzione è il nome che abbiamo attribuito alla nostra funzione, utile per richiamarla;
argomenti E’ una lista opzionale di variabili , che dovranno essere separate da virgole, che verranno utilizzate all’interno del corpo della funzione, ovvero nel blocco delle istruzioni.

Note: Una volta dichiarata, una funzione non viene eseguita subito. Stiamo semplicemente dicendo all’engine JavaScript che al blocco di codice indicato viene assegnato un nome.

Proprietà di function first class object

Una funzione è basata sull’oggetto base Function.
In quanto oggetto, pertanto, una funzione ha proprietà e metodi e può essere utilizzata come un qualsiasi altro oggetto.

.namerivela il nome della funzione
.lengthrivela il numero di parametri/argomenti richiesti
var somma = function Sum(x, y) {
	return x + y;
};
var nomeFunzione = somma.name;
var numeroArgFunzione = somma.length;
document.write("Il nome della funzione associata alla variabile somma è" + nomeFunzione);
document.write(" <br> mentre i parametri richiesti sono" + numeroArgFunzione);

L’oggetto First-Class Function prevede anche dei metodi che esamineremo più avanti.

Funzione anonima/labda

In programmazione informatica, una funzione anonima o funzione lambda (ed anche funzione letterale) è una funzione definita, senza essere legata ad un identificatore. Una funzione anonima è direttamente eseguita in quanto non necessita di invocazione.

function(){
document.write("Ciao");
}

La funzione sarà quindi eseguita non appena il parser HTML leggerà il codice; non necessita quindi di invocazione.

var somma = function(x, y) {
	return x + y;
};

In questo esempio abbiamo creato una funzione “function”, senza assegnargli un nome e l’abbiamo associata ad una variabile “somma”.
Normalmente, nella definizione classica di una funzione specifichiamo un nome per poter accedere ad essa.
Nel caso in cui una funzione viene assegnata ad una variabile, invece, l’utilità del nome viene meno, dal momento che possiamo accedere ad essa tramite la variabile.

var risultato = somma(10,10);

Possiamo invocare una funzione associata ad una variabile accostando semplicemente al nome della variabile le parentesi tonde con gli eventuali parametri.

return

L’istuzione return ci prermette di terminare e restituire un valore finale al codice presente nella funzione.
Una funzione può eseguire delle istruzione e ci che esegue, all’interno del suo blocco di codice rimane racchiuso in esso.
L’effetto dell’esecuzione di return è la terminazione della funzione e la restituzione di un valore. Quindi possiamo utilizzare l’istruzione più volte all’interno del corpo della funzione.

Invocare una funzione Javascript

Dichiarata una funzione essa rimane li pronta per essere utilizzata ma sin tanto che non sarà invocata essa rimarrà inutilizzata.

nomeDellaFunzione(valori);

nomeDellaFunzione è il nome della funzione;
valori è una lista opzionale di espressioni separata da virgole.

Gli eventuali valori inseriti nella chiamata di una funzione sono passati/assegnati ai corrispondenti argomenti della definizione della funzione.

function nuovaFunzione(x,y,z){
let a = x + y + z;
return a;
}

risultatoFunzione = nuovaFunzione(1,4,5);
Note: ad invocare di fatto una funzione è la presenta delle due parentesi tonde "()", con o senza argomenti; qualora avessimo la necessità di passare la funzione come parametro (senza che venga eseguita) o di associare ad una nuova variabile una funzione già esistente potremo ometterle:

var superNuovaFunzione = nuovaFunzione;

Argomenti/Parametri

Gli argomenti sono una lista opzionale di variabili separati da virgole che verranno utilizzate all’interno del corpo della funzione.

Parametri opzionali

Come abbiamo visto, JavaScript è un linguaggio molto flessibile. A proposito degli argomenti di una funzione, non è obbligatorio passarli tutti in una chiamata di funzione.

Prendiamo la seguente funzione come esempio:

function sommaNumeri(x, y) {
var z = x + y;
return z;
}

richiamiamo la funzione in vari modi:

let totale= sommaNumeri(11);
let totale2= sommaNumeri();
let totale3= sommaNumeri(11, 5, 7, 9);

Le tre chiamate della funzione “sommaNumeri” potrebbero sembrare apparentemente errate ma in realità:
nel primo caso specifichiamo un solo argomento, il che assegna automaticamente al secondo argomento mancante il valore undefined restituendo come somma il valore NaN;
lo stesso ragionamento vale per il secondo caso, dove non passiamo alcun argomento;
nel terzo caso, invece, passiamo più argomenti di quelli previsti nella definizione della funzione. JavaScript ignorerà gli argomenti in più restituendo lo stesso risultato di somma(11, 5)

Argomenti con valori di default

Con l’avvento di ECMAScript 6 vengono introdotti altri elementi che arricchiscono la flessibilità della gestione degli argomenti di una funzione.
In particolare viene introdotta la possibilità di specificare dei valori di default:

function sommaNumeri(x = 0, y = 0) {
let z = x + y;
return z;
}

In questo modo se al momento della chiamata non viene passato un argomento, ad esso viene assegnato il valore di default specificato, invece del valore undefined.

totale = sommaNumeri();

Quindi, ad esempio, la chiamata sommaNumeri() senza argomenti restituirà il valore 0 anzichè NaN.

Numero argomenti indefinito

L’array arguments

Javascript mette a disposizione un array predefinito: L’array arguments.
Questo array ci consente di creare funzioni con un numero di parametri non definito.

function sommaNumeri() {
let z = arguments[0] + arguments[1];
return z;
}

La precedente funzione ci permetterà di sommare due valori, non definiti nella dichiarazione di funzione, tra loro.

totale = sommaNumeri(5,10);

Il richiamo della funzione ci restituirà valore 15 seppur gli argomenti non sono stati definiti nella dichiarazione della funzione.

function sommaNumeri() {
var z = 0;
var i;
for (i in arguments) {
z = z + arguments[i];
}
return z;
}

In quest’altro esempio sfruttando l’array predefinito arguments e la istruzione for-in potremo far elaborare un numero indefiniti di valori alla nostra funzione

totale = sommaNumeri(10,5,20);
totale2 = sommaNumeri(1,2,3,4,5,10,20,30,50);

Argomenti fissi con argomenti indefiniti

rest parameter

Altra novità introdotta con la nuova versione dello standard è la possibilità di specificare il cosiddetto rest parameter. Si tratta di una notazione speciale per indicare un elenco indefinito di argomenti aggiuntivi.

Quando abbiamo la necessità di passare ad una funzione un/dei parametri fissi, e tutti gli altri aggiuntivi di numero indefinito possiamo utilizzare la notazione speciale rest parameter.

fuction nomeFunzione(parametroFisso, ...tuttiglialtriaggiuntivi){
istruzioni
}

Definiamo una funzione che implementa diverse operazioni aritmetiche dove il primo argomento definisce l’operazione da eseguire mentre “gli argomenti a seguire” i valori su cui effettuare l’operazione

function operazioneMatematica(x, ...y) {
let z = 0;

switch (x) {
case "somma":
for (i in y) {
z = z + y[i];
}
break;

case "moltiplica":
for (i in y) {
z = z * y[i];
}
break;

case "dividi":
z = y[0]/y[1];
break;

default:
z = NaN;
break;
}

return z;
}

La notazione dell’argomento preceduto dai puntini (…) cattura l’elenco degli argomenti successivi al primo e lo rende disponibile all’interno della funzione sotto forma di array.
L’approccio è simile all’array predefinito arguments, ma mentre questo cattura tutti gli argomenti della funzione, il rest parameter cattura soltanto gli argomenti in più rispetto a quelli specificati singolarmente.

Nello script precedente:
La prima e la seconda chiamata otterranno rispettivamente la somma ed il prodotto dei valori passati dal secondo argomento in poi, mentre la terza chiamata otterrà la divisione del secondo e terzo argomento, ignorando gli altri.

In buona sostanza è come se si indicasse di generare un array simil-arguments a partire dall’indicatore ; cosi facendo si accettano tutti i valori successivi e sarà possibile eventualmente selezionarli tramite l’indice del array che sarà generato.

Invocazione di una funzione con valori contenuti in un array

spread operator

La stessa notazione del rest parameter può essere utilizzata nelle chiamate a funzioni che prevedono diversi argomenti. In questo caso si parla di spread operator, cioè di un operatore che sparge i valori contenuti in un array sugli argomenti di una funzione.

var addendi = [8, 23, 19, 72, 3, 39];
somma(...addendi);

ed è equivalente a:

somma(8, 23, 19, 72, 3, 39);

L’operatore spread è una sintassi utile e veloce anche per aggiungere elementi agli array, combinare (concatenare) array o oggetti e distribuire un array negli argomenti di una funzione

let gruppoDiValori= [8, 23, 19, 72, 3, 39];
somma(...gruppoDiValori);

let ulterioreGruppoValori = [5, 10, 25, 35, 45, 60];
somma(...gruppoDiValori, ...ulterioreGruppoValori );

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *