Défault / rest / spread

VALEURS PAR DÉFAUT

En javascript il est possible d’appeler une function avec un nombre d’arguments variables.

  • si on passe plus d’arguments que déclaré par la fonction, les arguments supplémentaires sont ignorées. On peut toutefois les utiliser en utilisant la variable « arguments ».
  • si on passe moins d’arguments que déclaré par la fonction, les arguments manquant auront comme valeur undefined

Dans le cas où la fonction n’appelle pas toujours tous les arguments, pour ne pas lever d’erreur on doit vérifier soit même que les arguments attendu sont présent sinon on leur affecte une valeur par défaut. On faisait donc quelque chose comme cela:


// ES5
function yolo( name, city){
    name = name || 'John';
    city = city || 'Paris';
    
    // ... on fait plein de truc avec name et city puis 
    
    return foo;
}

// ES5 ou encore

function yolo(name, city){
    if( typeof name === 'undefined' name = 'John');
    if( typeof city === 'undefined' city = 'Paris');
    
    // ... on fait plein de truc avec name et city puis 
    
    return foo;
}

ES6 nous permet maintenant de définir des valeurs par défaut


// ES6
function yolo( name = 'John', city='Paris'){
    
    // ... on fait plein de truc sympathique avec name et city puis     
    return foo;
}

Cela marche bien jusque la valeur attendu soit égale à une chaine vide  » ou égale à 0, en ES5 0 ou  » étaient considérés comme undefined et était donc remplacé par la valeur par défaut. Maintenant 0 et  » sont des valeurs valide et ne seront donc pas remplacés par les valeurs par défaut.

La valeur par défaut peut être une fonction ou d’autres arguments de la fonction, d’autres variables


// ES6
function yolo( name = getdefaultName(), city = getCity(name) ){
    
    // ... on fait plein de truc sympathique avec name et city puis     
    return foo;
}

Attention: dans le cas de l’utilisation d’autres paramètre de la fonction l’ordre est important.


// ES6 : ici 
function yolo( name = getdefaultName(city), city = 'Paris' ){

    // ATTENTION ici name sera = undefined car city n'et pas encore connu    

}

Les valeurs par défaut existe aussi pour les affectations d’objet (vu dans Destructuring: affectations de?structure?es, décomposées)


// ES5

var foo = yolo.foo;
var bar = (yolo.bar === 'undefined' ? 'Paris' : yolo.bar ;

// ES6
const { foo, bar = 'Paris' } = yolo;

Dans notre cas si yolo.bar n’existe pas, bar aura comme valeur ‘Paris’.

LES PARAMÈTRES REST

Pour déclarer un nombre variable de paramètres dans une fonction, en es5 on pouvait utiliser la variable « arguments » qui permettait qui permettait de récupérer les arguments de la fonction.


// ES5
function yolo( items ){
    for(var i = 0; i < arguments.length ; i++) {
        console.log( arguments[i] );
    }
}

// même si on a accès au length de arguments, celui ci n'est pas une fonction

On peut maintenant utiliser l’opérateur rest qui nous permet de récupérer un véritable array contrairement à arguments: pour l’utiliser il faut ajouter le préfixe … au dernier argument de la fonction.


// ES6
function yolo( ...items ){
    for( let item of items) {
        console.log(item);
    }
}
//...items est ici un tableau sur lequel on peut itérer

Le rest operator peut aussi fonctionner avec des affectations de?structure?es :


const { foo, bar, zoo, ...boo } = yolo;

Cas d’utilisation : Un classement de course : place 1,2 et 3 les autres sont ceux qui ne sont pas des vainqueurs.

L’OPÉRATEUR SPREAD

C’est l’exact opposé de l’opérateur rest, c’est l’opérateur de décomposition: il permet de développer un objet itérable comme un array en argument d’une fonction.
Contrairement au rest operator, il peut être mélangé aux arguments d’une fonction.


/*
    Éviter l'utilisation de .apply()
*/
// ES5
var price = [23, 56, 12, 85];
var minPrice = Math.min.apply(Math, price); // 12

// ES6
const price =[23,56,12,85];
const minPrice = Math.min(...price); // 12

/*
    Concaténer plusieurs valeurs
*/
// ES5
var yolo = ["foo", "bar"];
var oklm = ["zoo", "boo"].concat(yolo) // ["zoo", "boo", "foo", "bar"]

//ES6
const yolo = ["foo", "bar"]
const oklm = ["zoo", "boo", ...yolo] // ["zoo", "boo", "foo", "bar"]

/*
    Destructurer un array
*/

// ES5
var items = ["foo", "bar","zoo", "boo"];
var first = items[0];
var loosers = items.slice(1) // ["bar","zoo", "boo"];

//ES6
const items = ["foo", "bar","zoo", "boo"];
const [first, ...loosers] = items; 
// first = "foo" 
// loosers = ["bar","zoo", "boo"]
/*
    itérer sur un élement du décomposition
*/
const allDiv = [...document.querySelectorAll('div')];