Impara l'informatica con JavaScript parte 4, funzioni

introduzione

Supponiamo di avere un file lungo 82 righe e composto solo da una serie di istruzioni. (Spero che questo non sia vero, ma tutto è possibile). Come capiresti cosa fa il programma? Come lo modificheresti o lo useresti? Sarebbe un po 'difficile fare qualcosa con questo codice perché non esiste una struttura.  

Per risolvere questo problema, è possibile utilizzare le funzioni. Una funzione è un gruppo di istruzioni che eseguono un'attività specifica. Le funzioni ci permettono di suddividere un programma in programmi più piccoli, rendendo il nostro codice più leggibile, riutilizzabile e verificabile.

Contenuto

  • Funzioni del vuoto
  • Funzione di ritorno del valore
  • Scopo
  • parametri
  • moduli

Funzioni vuote

Questo tipo di funzione elenca i passaggi da eseguire per il programma. Considera che stiamo scrivendo un programma per registrare un utente in un sito web. Il programma potrebbe consistere dei seguenti compiti:

  • Ottieni il nome utente
  • Ottieni la password
  • Verifica se esistono nome utente e password
  • Reindirizza l'utente alla sua bacheca

Ognuno di questi passaggi potrebbe essere contenuto all'interno di una funzione di accesso. Questa è una funzione di esempio:

function greet () console.log ("Hello, World");  

Questa è la forma generale di una funzione:

function functionName () istruzione; economico; eccetera. 

Per eseguire la funzione (nota anche come chiamare la funzione, o richiamare la funzione), si scrive una dichiarazione che la chiama.

salutare(); 

Il () è dove passiamo l'input alla funzione. Quando definiamo la funzione, l'input è chiamato parametro. Quando chiamiamo la funzione, l'input sarà il valore attuale e viene chiamato l'argomento. Esempio:

function greet (name) console.log ("Hello," + name);  greet ("Alberta"); // Ciao Alberta 

Con JavaScript ES6, puoi definire le funzioni usando la sintassi delle frecce. Ecco la nostra funzione di saluto definita usando la sintassi della freccia:

let greet = () => console.log ("Hello, World");

Una funzione con un parametro:

let greet = name => console.log ("Hello," + name);

Una funzione con più di un parametro:

let greet = (fname, lname) => console.log ("Hello," + fname + "" + name); 

Una funzione con più istruzioni:

let greet = (fname, lname) => let name = fname + "" + name; console.log ("Hello," + name); 

Poiché una funzione freccia è una funzione anonima, assegniamo alla funzione un nome assegnandolo a una variabile. Le funzioni freccia possono essere utili quando il corpo della funzione ha solo un'istruzione.

Valore Funzione di ritorno

Questo tipo di funzione restituisce un valore. La funzione deve terminare con una dichiarazione di ritorno. Questo esempio restituisce la somma di due numeri.

funzione add (x, y) return x + y; 

Questa è la forma generale che definisce una funzione di ritorno del valore:

function functionName () istruzione; economico; ecc. restituisce espressione;  

Il valore di espressione è ciò che viene emesso dalla funzione. Questo tipo di funzione è utile quando è memorizzato in una variabile. 

let variableName = functionName (); 

Scopo

L'ambito di una variabile è la parte del programma in cui è possibile accedere a una variabile. Una variabile può essere locale o globale. L'ambito di una variabile locale è all'interno della funzione in cui è stato creato. Nessun codice al di fuori della funzione può accedere alle sue variabili locali. 

Inoltre, quando lo usi permettere o const per dichiarare una variabile, hanno scope di blocco. Un blocco è un insieme di istruzioni che appartengono insieme come un gruppo. Un blocco potrebbe essere semplice come avvolgere il nostro codice in parentesi graffe:

let a = 2; 

La variabile un è locale rispetto al blocco in cui si trova. Un blocco può anche essere un'istruzione loop o if. Esempio:  

lascia a = 1; if (5> 4) let a = 2;  console.log (a); // 1 

Perché la nostra istruzione della console è nello stesso ambito della nostra prima variabile un, visualizza quel valore, che è 1. Non ha accesso alle variabili all'interno del blocco if. Ora, considera questo esempio:

lascia a = 1; if (5> 4) let a = 2; console.log (a); // 2

Ora 2 verrà visualizzato perché l'ambito delle variabili a cui l'istruzione della console ha accesso è all'interno del blocco if. I parametri di una funzione sono anche variabili locali e sono accessibili solo tramite codice all'interno della funzione. Le variabili globali, d'altra parte, sono accessibili da tutte le istruzioni nel file di un programma. Esempio:

lascia a = 1; function foo () a = 2;  console.log (a); // 1 pippo (); console.log (a); // 2

In questo esempio, un è una variabile globale e abbiamo accesso ad essa all'interno della funzione foo. La prima istruzione della console mostrerà 1. Dopo aver chiamato foo, il valore di un è impostato su 2, visualizzando la seconda istruzione della console 2. 

Le variabili globali dovrebbero essere usate pochissimo, idealmente per niente. Poiché le variabili globali sono accessibili da qualsiasi parte di un programma, corrono il rischio di essere modificate in modi imprevedibili. In un ampio programma con migliaia di righe di codice, rende il programma più difficile da capire perché non si può facilmente vedere come viene utilizzata la variabile. È meglio creare e utilizzare variabili locali.

Tuttavia, se è necessario utilizzare una variabile in più punti del programma, è OK utilizzare una costante globale. Dichiarare una variabile con il const parola chiave impedisce che venga modificato, rendendolo più sicuro da usare. Devi solo preoccuparti di aggiornare il valore della costante nel posto in cui è stato dichiarato.

parametri

Ricorda che un parametro è una variabile utilizzata da una funzione per accettare i dati. Al parametro viene assegnato il valore degli argomenti di una funzione quando viene chiamata la funzione. A partire da ES6, i parametri possono anche avere valori predefiniti con il formato parameterName = Valore. In questo caso, è possibile chiamare una funzione senza argomenti e utilizzerà i valori predefiniti. Esempio:

function greet (name = "world") console.log ("Hello," + name);  greet (); //Ciao mondo

L'operatore spread / rest è nuovo per ES6 e può essere utilizzato per espandere una matrice o un oggetto in singoli valori o per raccogliere i parametri di una funzione in una matrice. Questo è un esempio di utilizzo di un parametro di riposo:

function foo (... args) console.log (args);  foo (1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

moduli

Supponiamo ora di avere un file con 1.082 linee. (Ho visto questo, e dovresti correre se incontri una cosa del genere.) Il file è organizzato in funzioni, ma è difficile vedere come si relazionano tra loro. 

Per raggruppare i comportamenti correlati, dovremmo inserire il nostro codice in moduli. Un modulo in ES6 è un file che contiene funzioni e variabili correlate. I moduli consentono di nascondere proprietà private ed esporre proprietà pubbliche che vogliamo utilizzare in altri file. Il nomefile sarebbe il nome del modulo. I moduli hanno anche il loro scopo. Per usare le variabili al di fuori dell'ambito del modulo, devono essere esportate. Le variabili che non vengono esportate saranno private e sono accessibili solo all'interno del modulo.  

Le singole proprietà possono essere esportate in questo modo:

export function foo () console.log ("Hello World");  export let bar = 82; esportazione lascia baz = [1,2,3];

In alternativa, tutte le proprietà possono essere esportate con una sola dichiarazione di esportazione:

function foo () console.log ("Hello World");  let bar = 82; let baz = [1,2,3]; export foo, bar, baz;

Per usare le variabili di un modulo, lo si importa nel file. Puoi specificare cosa vuoi importare dal modulo in questo modo:

importare foo, bar, baz da "foo"; 

Puoi anche rinominare la tua importazione:

importare foo as Foo da "foo"; Foo ();

Oppure puoi importare tutte le proprietà del modulo:

import * come myModule da "foo"; myModule.foo ();

Revisione

Le funzioni ci permettono di suddividere i nostri programmi in programmi più piccoli che possiamo facilmente gestire. Questa pratica è nota come modularizzazione. Esistono due tipi di funzioni: funzioni void e funzioni di ritorno del valore. Una funzione void esegue le istruzioni al suo interno. Una funzione di ritorno del valore ci restituisce un valore.  

Scope è la parte del programma in cui è possibile accedere a una variabile. Le variabili dichiarate all'interno di una funzione, inclusi i parametri della funzione, sono locali. I blocchi hanno anche scope e al loro interno possono essere create variabili locali. 

Le variabili non incluse in un blocco o modulo saranno globali. Se hai bisogno di una variabile globale, è accettabile avere una costante globale. Altrimenti, prova a contenere il codice sui moduli perché i moduli hanno il loro ambito. Ma ancora meglio, i moduli forniscono la struttura del codice e l'organizzazione.  

risorse

  • repl.it
  • Specifica ES6
  • Non sai JS: ES6 e oltre