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 DOEVous 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 ); // JohnSi 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 definedVous 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 :
