Comprendre les méthodes .at() et .with() en JavaScript

JavaScript évolue constamment et propose de nouvelles méthodes pour rendre notre code plus lisible et plus efficace.

Parmi ces ajouts récents, .at() et .with() sont deux méthodes qui peuvent simplifier certaines opérations sur les tableaux et les chaînes de caractères.

.at() #

La méthode .at() permet d’accéder à un élément précis d’un tableau à partir de son index. Elle renvoie la valeur de l’élément situé à l’index indiqué. Voici un exemple :

const colors = ['red', 'green', 'blue'];
const element = colors.at(1);
console.log(element); // Sortie : 'green'

Accéder au dernier élément d’un tableau est une opération courante.

array[array.length - 1]; // L’ancienne méthode
array.at(-1); // Plus simple et plus intuitif avec .at()

Ce que j’apprécie le plus avec la méthode .at(), c’est qu’elle améliore nettement la lisibilité. Comparons .slice(), .length et .at() pour effectuer la même opération.

const animals = ["panda", "zebra", "penguin"];

// avec slice()
const animal = animals.slice(-2, -1); // 'zebra'

// avec la propriété length
const animal = animals[animals.length - 2]; // 'zebra'

// avec at()
const animal = animals.at(-2); // 'zebra'

.with() #

La méthode .with() permet de remplacer un élément précis d’un tableau par une nouvelle valeur. Elle renvoie un nouveau tableau contenant l’élément modifié. Voici un exemple :

const colors = ['red', 'green', 'blue'];
const modifiedColors = colors.with(0, 'yellow');
console.log(modifiedColors); // Sortie : ['yellow', 'green', 'blue']

Comme vous pouvez vous en douter, .with() ne modifie pas le tableau d’origine : elle renvoie un nouveau tableau contenant l’élément modifié.

Elle permet de remplacer certains usages de .map(), par exemple :

const users = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Bob' }
];
// Remplacer le nom d’un utilisateur précis
function getUpdatedUsers(index, name) {
    return users.map((user, i) => ({
        ...user,
        name: i === index ? name : user.name
    }));
}
// Version avec .with()
function getUpdatedUsersWithWith(index, name) {
    return users.with(index, { ...users[index], name });
}

Conclusion #

Les méthodes .at() et .with() sont des ajouts bienvenus à JavaScript : elles rendent les opérations sur les tableaux et les chaînes plus lisibles et plus intuitives. Grâce à ces nouvelles fonctionnalités, vous pouvez écrire un code plus concis et expressif tout en préservant l’immutabilité lorsque c’est nécessaire !