Comment fusionner deux objets en JavaScript : 5 meilleures méthodes

Introduction : pourquoi la fusion d'objets est un casse-tête pour chaque développeur JavaScript

Imaginez : vous travaillez sur une application et vous devez fusionner des données provenant de deux sources différentes. Par exemple, vous avez une configuration utilisateur de base issue de la base de données et des paramètres provenant du frontend. Comment les assembler sans douleur ni souffrance ? C'est précisément cette question — « How can I merge properties of two JavaScript objects? » — qui a rassemblé des milliers de vues sur Stack Overflow. Et ce n'est pas pour rien : la fusion d'objets en JavaScript recèle de nombreux pièges.

Dans cet article, nous allons passer en revue toutes les méthodes populaires de fusion d'objets en JS : du classique Object.assign() au moderne opérateur spread. Vous apprendrez à copier en profondeur les structures imbriquées, à éviter la mutation des données sources et à choisir la méthode adaptée à votre tâche. C'est parti !

Le problème : que signifie « fusionner les propriétés de deux objets » ?

Lorsque nous parlons de « merge objects JavaScript », nous entendons la création d'un nouvel objet contenant toutes les propriétés des objets sources. Si des clés identiques sont rencontrées, la valeur du deuxième objet « écrase » celle du premier.

Supposons que nous ayons deux objets :

const user = {  name: 'Анна',  age: 28,  city: 'Москва'};

const updates = {  age: 29,  job: 'Разработчик'};

Après la fusion d'objets JS, nous souhaitons obtenir :

{  name: 'Анна',  age: 29,       // valeur mise à jour  city: 'Москва',  job: 'Разработчик'  // nouvelle propriété}

Cela semble simple. Mais le diable se cache dans les détails : objets imbriqués, tableaux, mutation de l'original et performances.

Méthode 1 : Object.assign() — le bon vieux classique

La méthode Object.assign() est la plus ancienne et la plus éprouvée pour fusionner des objets en JavaScript. Elle copie les propriétés propres et énumérables d'un ou plusieurs objets sources vers un objet cible.

Syntaxe

Object.assign(target, ...sources)

Important : le premier argument est l'objet cible, qui sera modifié. Tous les arguments suivants sont les sources des propriétés.

Exemple de fusion

const user = { name: 'Анна', age: 28 };const updates = { age: 29, job: 'Разработчик' };

const merged = Object.assign({}, user, updates);console.log(merged);// { name: 'Анна', age: 29, job: 'Разработчик' }

Remarquez : nous passons un objet vide {} comme cible. Cela garantit que les objets sources ne sont pas mutés — le clonage d'objets JS est effectué correctement.

Piège : la copie superficielle

Object.assign() effectue uniquement une copie superficielle (shallow copy). Si vous avez des objets imbriqués, ils seront copiés par référence :

const obj1 = { data: { value: 10 } };const obj2 = { info: 'test' };

const merged = Object.assign({}, obj1, obj2);merged.data.value = 999;console.log(obj1.data.value); // 999 — mutation de l'objet source !

Pour une fusion profonde, d'autres approches sont nécessaires, dont nous parlerons plus bas.

Méthode 2 : L'opérateur Spread — l'élégance d'ES6

Avec l'arrivée d'ES6, l'opérateur spread JavaScript (les trois points ...) est devenu la méthode la plus populaire pour fusionner les propriétés d'objets. Il est concis, lisible et ne nécessite pas d'appel de méthode.

Syntaxe

const merged = { ...obj1, ...obj2 };

Exemple

const defaults = { theme: 'light', lang: 'ru', showSidebar: true };const userPrefs = { theme: 'dark', fontSize: 16 };

const settings = { ...defaults, ...userPrefs };console.log(settings);// { theme: 'dark', lang: 'ru', showSidebar: true, font