Bonus : Objet et destructuration

Publié le 9 juillet 2026

JavaScript

Code de départ

const href = window.location.href;
const bonusPages = [ '/jour-6/','/jour-8/'];
const bonusContent = [
    path + 'paix.mp3',
    path + 'pensee.mp3'
];
const bonusButton = document.querySelector('.bonus');
switch( href) {
    case rootURL + bonusPages[0]:
        bonusButton.onclick = () => {showModal('Qu\'est-ce que la paix?', bonusContent[0])}
        break;
    case rootURL + bonusPages[0] + '?anim=next':
        bonusButton.onclick = () => {showModal('Qu\'est-ce que la paix?', bonusContent[0])}
        break;
    case rootURL + bonusPages[1]:
        bonusButton.onclick = () => {showModal('Ce ne sont que des pensées', bonusContent[1])}
        break;
    case   rootURL + bonusPages[1] + '?anim=next':
        bonusButton.onclick = () => {showModal('Ce ne sont que des pensées', bonusContent[1])}
        break;
}

Solution 1 : Utiliser un objet de correspondance (recommandée)

const href = window.location.href;
const bonusPages = ['/jour-6/', '/jour-8/'];
const bonusContent = [
    path + 'paix.mp3',
    path + 'pensee.mp3'
];
const bonusButton = document.querySelector('.bonus');

// Créer un mapping page -> contenu
const pageConfig = {
    [rootURL + bonusPages[0]]: {
        title: 'Qu\'est-ce que la paix?',
        content: bonusContent[0]
    },
    [rootURL + bonusPages[0] + '?anim=next']: {
        title: 'Qu\'est-ce que la paix?',
        content: bonusContent[0]
    },
    [rootURL + bonusPages[1]]: {
        title: 'Ce ne sont que des pensées',
        content: bonusContent[1]
    },
    [rootURL + bonusPages[1] + '?anim=next']: {
        title: 'Ce ne sont que des pensées',
        content: bonusContent[1]
    }
};

const config = pageConfig[href];
if (config) {
    bonusButton.onclick = () => showModal(config.title, config.content);
}

Solution 2 : Simplifier avec une fonction helper

const href = window.location.href;
const bonusPages = ['/jour-6/', '/jour-8/'];
const bonusContent = [
    path + 'paix.mp3',
    path + 'pensee.mp3'
];
const bonusButton = document.querySelector('.bonus');

// Fonction pour vérifier si l'URL correspond
const isPage = (page) => href === rootURL + page || href === rootURL + page + '?anim=next';

if (isPage(bonusPages[0])) {
    bonusButton.onclick = () => showModal('Qu\'est-ce que la paix?', bonusContent[0]);
} else if (isPage(bonusPages[1])) {
    bonusButton.onclick = () => showModal('Ce ne sont que des pensées', bonusContent[1]);
}

Solution 3 : Utiliser une boucle (plus concise)

const href = window.location.href;
const bonusConfig = [
    { page: '/jour-6/', title: 'Qu\'est-ce que la paix?', file: 'paix.mp3' },
    { page: '/jour-8/', title: 'Ce ne sont que des pensées', file: 'pensee.mp3' }
];
const bonusButton = document.querySelector('.bonus');

const config = bonusConfig.find(({page}) => 
    href === rootURL + page || href === rootURL + page + '?anim=next'
);

if (config) {
    bonusButton.onclick = () => showModal(config.title, path + config.file);
}

Solution 4 : La plus minimaliste

const href = window.location.href;
const bonusButton = document.querySelector('.bonus');

const pages = {
    '/jour-6/': ['Qu\'est-ce que la paix?', 'paix.mp3'],
    '/jour-8/': ['Ce ne sont que des pensées', 'pensee.mp3']
};

const page = Object.keys(pages).find(p => 
    href === rootURL + p || href === rootURL + p + '?anim=next'
);

if (page) {
    const [title, file] = pages[page];
    bonusButton.onclick = () => showModal(title, path + file);
}

Je recommande la Solution 1 ou 3 car elles sont :

Lisibles et faciles à maintenir
Faciles à étendre avec de nouvelles pages
Évitent la duplication de code
Plus robustes

La syntaxe {page} est une déstructuration d’objet (object destructuring) en JavaScript.

La déstructuration, c’est quoi ?

C’est une façon d’extraire des propriétés d’un objet de manière plus concise.

Sans déstructuration (l’ancienne façon) :

const config = { page: '/jour-6/', title: 'Qu\'est-ce que la paix?', file: 'paix.mp3' };

// Sans déstructuration
const page = config.page;
const title = config.title;
const file = config.file;

Avec déstructuration :

const config = { page: '/jour-6/', title: 'Qu\'est-ce que la paix?', file: 'paix.mp3' };

// Avec déstructuration
const { page, title, file } = config;
// Maintenant on a 3 variables : page, title, file

Dans mon exemple du find :

const config = bonusConfig.find(({page}) => 
    href === rootURL + page || href === rootURL + page + '?anim=next'
);

C’est équivalent à :

const config = bonusConfig.find((element) => {
    const page = element.page;
    return href === rootURL + page || href === rootURL + page + '?anim=next';
});

Pour mieux comprendre, voici la version sans déstructuration :

const href = window.location.href;
const bonusConfig = [
    { page: '/jour-6/', title: 'Qu\'est-ce que la paix?', file: 'paix.mp3' },
    { page: '/jour-8/', title: 'Ce ne sont que des pensées', file: 'pensee.mp3' }
];
const bonusButton = document.querySelector('.bonus');

// Version SANS déstructuration (plus facile à lire pour débuter)
const config = bonusConfig.find(function(item) {
    const page = item.page;
    return href === rootURL + page || href === rootURL + page + '?anim=next';
});

if (config) {
    const title = config.title;
    const file = config.file;
    bonusButton.onclick = () => showModal(title, path + file);
}

Autre exemple simple :

// Avec déstructuration
const user = { name: 'Alice', age: 25 };
const { name, age } = user;
console.log(name); // 'Alice'
console.log(age);  // 25

En résumé : {page} dans les paramètres d’une fonction, c’est comme dire « prends l’objet qu’on te donne, et extrais-en juste la propriété page pour en faire une variable directement utilisable ».

https://www.w3schools.com/JS/js_destructuring.asp