Affectations déstructurées

ASSIGNATION DES VARIABLES PROVENANT D’UN OBJET OU TABLEAU EN REPOSANT SUR LEUR STRUCTURE.

CRÉATION D’OBJET

Avec ES6, il y a un nouveau raccourci pour créer un objet: Si la propriété de l’objet à créer a le même nom que la variable utilisée comme valeur pour l’attribut.

function setItem(){
    const id = 1;
    const name = "yolo";
    return {
        id:id,
        name:name
    }
}

Ceci peut s’écrire plus simplement comme cela


function setItem(){
    const id = 1;
    const name = "yolo";
    return { id , name }
}

DESTRUCTURING: AFFECTATIONS DE?STRUCTURE?ES, DÉCOMPOSÉES

L’affectation à partir d’objet ou de tableau à été aussi grandement simplifié.

    const yolo = {
        foo: 1,
        bar: 2
    }
    // EN ES5
    var foo = yolo.foo;
    var bar = yolo.bar;

    // EN ES6, cela a été simplifié partir

    const { foo, bar } = yolo;

Si la variable à affecter n’a pas le même nom que la clé de l’objet à lire, cela peut être pertubant au début car la clé est la proprité à lire dans l’objet et la valeur est la variable à affecter, mais on se rend vite compte que c’est assez efficace.


    const yolo = {
        foo: 1,
        bar: 2
    }
    // EN ES5
    var myfoo = yolo.foo;
    var mybar = yolo.bar;

    // EN ES6, cela a été simplifié partir
    const { foo: myFoo, bar: myBar } = yolo;

Mais ce qui est pratique ca marche aussi avec les objets imbriqués.
Attention cependant, car si la valeur de premier niveau n’existe pas une erreur sera retournée si on essaye d’accéder à la proprité de second niveau dont le premier niveau n’existe pas (pour éviter de lever une erreur on peut affecter des valeurs par défaut).


    const yolo = {
        foo: 1,
        bar: { supa : 2}
    }

    // devient

    const { foo, bar: { supa} } = yolo;

ou avec les tableaux.


    const [ ux, ui, front, back ] = [ 1,2,3,4];

    // pour ignorer un élément il suffit de ne rien placer entre les virgules

    const [ ux, , front, back] = [1,2,3,4]

On peut directement utiliser le destructing dans une décalaration de fonction


    function getItemPosition(){
        const item= { name: 'yolo'};
        const position = 2;

        return { item, position};
    }

    const position, pony = getItemPosition();