Le funzioni

Parametri e oggetto arguments

I parametri passati alla funzione, se sono di tipo primitivo e vengono modificati all'interno della funzione, restano come all'origine fuori dalla funzione, ma se sono degli oggetti il cambiamento si riflette anche all'esterno.

var primitivo = false;
var oggetto = [1, 2, 3];

function func1(prim, obj) {
    prim = true;
    if(prim) console.log("ciao"); //"ciao"
    obj[0] = 5;
}

func1(primitivo, oggetto);

console.log(primitivo); //false 
console.log(oggetto); //[5, 2, 3]

L'oggetto arguments è un oggetto Array-like (cioè che possiede alcune caratteristiche degli array come avere una lunghezza ed essere iterabile) accessibile all'interno di una funzione contenente i valori degli argomenti passati alla funzione stessa.

function func1(param1, param2, param3, param4) {
    console.log(param1, param2, param3, param4); //1, 2, 3, 4
    console.log(arguments);  //oggetto array-like contenente tutti i parametri 1, 2, 3, 4, 5, 6, 7
    console.log(arguments.length); //7 lunghezza dei parametri passati
    console.log(func1.length); //4 lunghezza dei parametri definiti
    //se necessario si può trasformare l'oggetto array-like in un array vero e proprio
    let args1 = Array.from(arguments);
    console.log(args1); //[1, 2, 3, 4, 5, 6, 7]
    let args2 = [...arguments];
    console.log(args2); //[1, 2, 3, 4, 5, 6, 7]
}
func1(1, 2, 3, 4, 5, 6, 7);

var arrow = (param1, param2, param3, param4) => {
    console.log(arguments); //Uncaught ReferenceError: arguments is not defined
}
arrow(1, 2, 3, 4, 5, 6, 7);

Con es6 è stata introdotta la possibilità di definire dei valori di default per i parametri

//vecchio metodo
var areaDelTriangolo = function (base, altezza) {
    var base= base|| 50; //se il parametro base non viene passato vale undefined ma con l'operatore || viene valorizzato a 50
    var altezza = altezza|| 30;
}

//nuovo metodo ES6
var areaDelTriangolo = function (base = 50, altezza = 30) {
    //se i parametri non vengono passati varranno 50 e 30 
}

Sono anche stati introdotti i rest parameters, cioè una sintassi che indica un array di indefiniti argomenti. I rest parameters vanno sempre alla fine.

function func1(primo, secondo, ...altri) {
    console.log(primo); //1
    console.log(secondo); //2
    console.log(altri); //[3, 4, 5, 6, 7] è un vero array, non un oggetto array-like
  }
  
  func1(1, 2, 3, 4, 5, 6, 7);

Parola chiave return

Arrow functions

Le arrow functions presentano una serie di differenze rispetto alle normali funzioni, la più importante di esse è il modo in cui trattano la parola chiave this. Le arrow functions sono sempre anonime.

var persona = {
    nome: "Mario",
    cognome: "Rossi",
    presentati: function() {
        console.log("Ciao, sono " + this.nome); //function normale, this rappresenta l'oggetto persona
        console.log(this); //{nome: "Mario", cognome: "Rossi", presentati: ƒ, saluta: ƒ}
    },
    saluta: () => {
        console.log("Tanti saluti da " + this.nome); //arrow function, this rappresenta lo scope esterno, in questo caso la window
        console.log(this); //l'oggetto window
    }
}
persona.presentati(); //"Ciao, sono Mario"
persona.saluta(); //"Tanti saluti da undefined"
 

IIFE (Immediately Invoked FunctionExpression)

Una IIFE è una funzione che viene chiamata appena viene definita. Lo scopo per cui viene usata è quello di creare uno scope isolato dal resto del programma.

var a = 5;
(function () {
    console.log(a); //5
    var b = 10;
})();
console.log(b); // Uncaught ReferenceError: b is not defined

var c = (function () {
    return "ciao";
})(); 
console.log(c); //"ciao"

I metodi delle classi

class Uomo {
    mangiare() {
        console.log("gnam!");
    } //non mettere la virgola
    dormire() {
        console.log("zzzzzz");
    }
}

var donna = {
    mangiare() {
        console.log("gnam!");
    }, // qui ci va la virgola
    dormire() {
        console.log("gnam!");
    },
    bere: function () { // si può anche scrivere in questo modo
        console.log("glu!");
    }
};

let mario = new Uomo();
mario.dormire(); //zzzzzz
donna.bere(); //glu!