Javascript : destructuring, spread operator et param rest

Comment utiliser le Destructuring en JS

Commençons par créer un objet :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}

Nous avons créer un objet avec 3 propriétés (firstname, lastname et age).

Regardons à présent comment récupérer, dans un 1er temps, une valeur :

let firstname = user.firstname;
let lastname = user.lastname;
let age = user.age;
console.log( firstname, lastname, age);

Nous avons tout détaillé, la propriété firstname de l’objet user est stockée dans la variable firstname.

Le destructuring va nous aider à découper notre objet simplement.
Voici un exemple avec l’objet user :

const { firstname, lastname } = user;
console.log( firstname );

Nous disposons ainsi de la variable firstname avec son contenu « John ».
Et de la variable lastname avec son contenu « DOE ».
Vous devez obligatoirement indiqué const au début de votre destructuring.
Sinon ceci retournera une erreur « Uncaught SyntaxError: Unexpected token ‘=' » :

{ firstname } = user;

Si l’on souhaite partir sur une déclaration, avant d’utiliser le destructuring, il faudra l’entourer de parenthèse :

let firstname;
({ firstname } = user);
console.log( firstname );

Vous pouvez aussi ajouter de nouvelle key/value si besoin.
Ici on ajoute email :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
const { firstname, lastname, email=john.doe@tld.com } = user;
console.log( email ); // john.doe@tld.com

Vous pouvez créer une nouvelle propiété à partir d’existante :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
const { firstname, lastname, fullname=`${firstname} ${lastname}` } = user;
console.log( fullname ); // John DOE

Vous pouvez créer des alias et ainsi diminuer le risque de conflits :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
const { firstname: firstnameEmployee } = user;
console.log( firstnameEmployee ); // John

Si vous essayer d’accéder à firstname, qui n’est pas défini (car c’est firstnameEmployee qui l’est), alors vous obtiendrez l’erreur :

Uncaught ReferenceError: firstname is not defined

Vous pouvez utiliser un objet imbriqué dans un autre objet (=nested objects) :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30,
    'department': {
        'name': 'Lorem',
        'address': {
            'street': '5 av. Lorem Ipsum',
            'city': 'LA ROCHELLE',            
            'zip': 17000
        }
    }
}

const { department } = user; // récupère l'objet department
const { department: { address } } = user; // récupère l'objet address
const { department: { address: { city } } } = user; // récupère la city

Vous pouvez utiliser le destructuring dans les params d’une fonction :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
function maFonctionLorem({ firstname, lastname}) {
    console.log(`${firstname} ${lastname}`)
}
maFonctionLorem(user);

Vous pouvez utiliser le destructuring dans le retour d’une fonction :

const getLorem = () => {
    return {
        'firstname': 'John',
        'lastname': 'DOE',
        'age': 30
    };
}
const { firstname, lastname } = getLorem();
console.log( firstname, lastname );

Vous pouvez utiliser le destructuring dans une boucle « for of » :

const users = [
    {
        'firstname': 'John 01',
        'lastname': 'DOE 01',
        'age': 31
    },
    {
        'firstname': 'John 02',
        'lastname': 'DOE 02',
        'age': 32
    },
    {
        'firstname': 'John 03',
        'lastname': 'DOE 03',
        'age': 33
    }
];

for (let { firstname, lastname } of users) {
    console.log(`${firstname} ${lastname}`);
}

On peut aussi faire du destructuring avec des tableaux :

const user = ['John', 'DOE', 30];
const [firstname, lastname, age] = chevalier;
console.log( firstname, lastname, age );

Comment utiliser le spread operator en JS

Commençons par cloner un objet :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
const monClone = {...user};

NB : vous pouvez aussi utiliser object.assign pour cloner un objet.

Comment ajouter une valeur :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
const updateUser = {...user, email='john.doe@tld.com'};
// Cela ne changera pas l'objet d'origine "user" :
console.log( user ); // {firstname: "John", lastname: "DOE", age: 30}
// Cela changera le nouvel objet "udpateUser" :
console.log( updateUser ); // {firstname: "John", lastname: "DOE", age: 30, email: "john.doe@tld.com"}

Comment mettre à jour une valeur :

const user = {
'firstname': 'John',
'lastname': 'DOE',
'age': 30
}
const updateUser = {…user, age=35};
// Cela ne changera pas l'objet d'origine "user" :
console.log( user ); // {firstname: "John", lastname: "DOE", age: 30}
// Cela changera le nouvel objet "udpateUser" :
console.log( updateUser ); // {firstname: "John", lastname: "DOE", age: 35}

Comment ajouter une valeur sur un objet imbriqué dans un autre objet (=nested objects) :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30,
    'department': {
        'name': 'Lorem',
        'address': {
            'street': '5 av. Lorem Ipsum',
            'city': 'LA ROCHELLE',            
            'zip': 17000
        }
    }
}
const updateUserWithDepartment = {...user, department={'number': 17}};
console.log( updateUserWithDepartment );

Le problème est qu’on va avoir un object « department » avec uniquement la valeur indiquée (=number).
Nous on aurait aimé ajouter le « number » dans l’objet « department ».
Pour cela nous devons faire :

const updateUserWithDepartment = {...user, department={...user.department, 'number': 17}};

Il faut indiquer « manuellement » qu’on souhaite garder le contenu de « department » (=…user.department), et ajouter « number ».

Comment fusionner 2 objects en javascript :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
const department = {
    'name': 'Lorem',
    'address': {
        'street': '5 av. Lorem Ipsum',
        'city': 'LA ROCHELLE',            
        'zip': 17000
    }
}
const userWithDepartment = {...user, ...department};
console.log( userWithDepartment );

NB : attention aux key identique (ex : firstname dans 2 object différent).

On peut aussi utiliser le spread operator sur des tableaux :

const user = ['John', 'DOE', 30];
const [firstname, ...autres];
console.log( firstname, autres );

Comment utiliser le paramètre rest en JS

Repartons encore de notre exemple d’utilisateur :

const user = {
    'firstname': 'John',
    'lastname': 'DOE',
    'age': 30
}
const { age, ...rest } = user;
console.log( age, ...rest ); // age donnera l'age, et ...rest tout le reste (=firstname et lastname).

Source :

Michael

Développeur / intégrateur, travaillant en agence web depuis 2005, je viens à présent vous proposer de venir découvrir mes créations personnelles de plugins / themes pour le CMS Wordpress & Prestashop, quelques solutions en mode SAAS & un peu d'actualité web ( / Twitter).

Vous aimerez aussi...