Quelle est la taille d’un array en JavaScript ?

En douze ans de développement web, je peux vous assurer que la question de la taille d’un array en JavaScript revient dans quasiment tous les projets. Que l’on construise un panier e-commerce, un filtre de recherche ou un tableau de bord, on a besoin de savoir combien d’éléments contient un tableau. La réponse courte tient en un mot : .length. Mais derrière cette propriété apparemment simple se cachent des subtilités que je vais décortiquer dans ce guide complet.

Si vous travaillez régulièrement avec les boucles for en JavaScript, vous utilisez déjà .length sans forcément maîtriser tous ses comportements. Je vais vous montrer exactement comment cette propriété fonctionne, pourquoi il ne faut pas la confondre avec .size(), et comment éviter les pièges courants qui font perdre des heures de débogage.

Comprendre .length : la propriété native des arrays

La propriété .length est définie directement sur le prototype Array en JavaScript. Elle renvoie un entier positif représentant le nombre d’éléments du tableau. Contrairement à ce que beaucoup de développeurs pensent, .length ne compte pas réellement les éléments : elle renvoie la valeur de l’index le plus élevé + 1.

const fruits = ['pomme', 'banane', 'cerise'];
console.log(fruits.length); // 3

const vide = [];
console.log(vide.length); // 0

const nombres = [10, 20, 30, 40, 50];
console.log(nombres.length); // 5

C’est aussi simple que cela pour les cas classiques. La propriété est accessible en lecture instantanée, sans aucun calcul ni itération. Le moteur JavaScript maintient cette valeur à jour à chaque modification du tableau. Selon la documentation MDN sur Array.length, cette propriété est un entier non signé de 32 bits, ce qui signifie qu’elle est toujours inférieure à 2³² (soit 4 294 967 296).

Dans mes projets WordPress sur mesure, j’utilise cette propriété des dizaines de fois par jour : pour vérifier qu’une réponse API contient des résultats, pour contrôler la pagination, ou encore pour valider des formulaires côté client. C’est le réflexe de base que tout développeur JavaScript doit acquérir.

Size vs length : pourquoi la confusion existe

Si vous tapez « javascript size of array » dans un moteur de recherche, c’est probablement parce que vous avez rencontré le terme .size() quelque part. Cette confusion est compréhensible et vient de plusieurs sources.

Premièrement, jQuery proposait une méthode .size() sur ses objets jQuery, qui renvoyait le nombre d’éléments sélectionnés. Cette méthode a été dépréciée dès jQuery 1.8 au profit de .length, mais beaucoup de tutoriels anciens la mentionnent encore. Deuxièmement, les objets Map et Set en JavaScript moderne possèdent bel et bien une propriété .size (sans parenthèses). Troisièmement, d’autres langages comme Java utilisent .size() pour leurs collections, ce qui crée une confusion chez les développeurs polyglottes.

// ERREUR COURANTE : .size() n'existe pas sur un Array
const arr = [1, 2, 3];
console.log(arr.size);    // undefined
console.log(arr.size());  // TypeError: arr.size is not a function

// CORRECT : utiliser .length
console.log(arr.length);  // 3

// Map et Set utilisent .size (sans parenthèses)
const monMap = new Map([['a', 1], ['b', 2]]);
console.log(monMap.size); // 2

const monSet = new Set([1, 2, 3]);
console.log(monSet.size); // 3

Je retiens cette règle simple que je partage avec tous mes clients : Array → .length, Map/Set → .size. C’est tout. Si vous travaillez avec des arrays et la propriété length en JavaScript, gardez ce principe en tête et vous éviterez les erreurs.

Exemples pratiques pour récupérer la taille d’un array

Voyons maintenant les cas d’utilisation concrets que je rencontre le plus souvent en développement. Chaque exemple correspond à une situation réelle de projet.

Vérifier si un array est vide

const resultats = fetchResultats(); // retourne un array

if (resultats.length === 0) {
  afficherMessage('Aucun résultat trouvé.');
} else {
  afficherResultats(resultats);
}

C’est le test le plus fréquent. J’utilise length === 0 plutôt qu’une conversion booléenne implicite, car c’est plus explicite et lisible pour toute l’équipe.

Accéder au dernier élément

const historique = ['action1', 'action2', 'action3'];
const derniere = historique[historique.length - 1];
console.log(derniere); // 'action3'

// Méthode moderne avec .at()
const derniereModerne = historique.at(-1);
console.log(derniereModerne); // 'action3'

La méthode .at() est plus élégante, mais .length – 1 reste indispensable à connaître car vous le verrez dans la majorité des bases de code existantes.

Itérer avec une boucle for classique

const produits = ['clavier', 'souris', 'écran', 'casque'];

for (let i = 0; i < produits.length; i++) {
  console.log(`Produit ${i + 1} : ${produits[i]}`);
}

Quand j'optimise les performances dans des boucles critiques, je stocke parfois la longueur dans une variable locale pour éviter la lecture répétée de la propriété, même si les moteurs modernes optimisent déjà ce cas.

Compter les éléments filtrés

const commandes = [
  { id: 1, statut: 'livrée' },
  { id: 2, statut: 'en cours' },
  { id: 3, statut: 'livrée' },
  { id: 4, statut: 'annulée' }
];

const nbLivrees = commandes.filter(c => c.statut === 'livrée').length;
console.log(nbLivrees); // 2

Le chaînage .filter().length est un pattern que j'utilise constamment. Pour de grandes collections, je préfère .reduce() afin d'éviter la création d'un tableau intermédiaire :

const nbLivrees = commandes.reduce((total, c) => 
  c.statut === 'livrée' ? total + 1 : total, 0
);
console.log(nbLivrees); // 2

Modifier la taille d'un array avec .length

Une particularité souvent méconnue de JavaScript : la propriété .length est inscriptible. Cela signifie que vous pouvez la modifier pour redimensionner un tableau. C'est un comportement puissant mais potentiellement dangereux si on ne le maîtrise pas.

Tronquer un tableau

const lettres = ['a', 'b', 'c', 'd', 'e'];
lettres.length = 3;
console.log(lettres); // ['a', 'b', 'c']
// Les éléments 'd' et 'e' sont définitivement supprimés

Cette technique est plus rapide que .splice() pour tronquer un tableau car elle ne retourne pas les éléments supprimés. Je l'utilise notamment pour limiter la taille d'un historique de navigation dans les applications que je développe. Si vous utilisez régulièrement splice en JavaScript, sachez que cette alternative existe pour les cas simples de troncature.

Étendre un tableau

const nombres = [1, 2, 3];
nombres.length = 6;
console.log(nombres);        // [1, 2, 3, empty × 3]
console.log(nombres[4]);     // undefined
console.log(nombres.length); // 6

Étendre un tableau via .length crée des emplacements vides (empty slots), pas des valeurs undefined. C'est une distinction subtile mais importante que nous verrons dans la section suivante.

Vider un tableau

const panier = ['article1', 'article2', 'article3'];
panier.length = 0;
console.log(panier); // []
console.log(panier.length); // 0

Assigner 0 à .length est la méthode la plus performante pour vider un tableau tout en conservant la même référence. C'est crucial quand d'autres parties du code pointent vers ce même tableau.

Cas particuliers : sparse arrays et length trompeur

Les sparse arrays (tableaux creux) sont des tableaux où certains index n'ont pas de valeur assignée. C'est un piège classique que je vois régulièrement dans les audits de code que je réalise pour mes clients.

const sparse = [];
sparse[0] = 'premier';
sparse[100] = 'centième';
console.log(sparse.length); // 101
// Pourtant, seuls 2 éléments sont réellement stockés

Dans cet exemple, .length renvoie 101 alors que le tableau ne contient que 2 éléments. C'est parce que .length est calculé comme l'index maximum + 1, pas comme le nombre d'éléments effectivement présents.

Pour compter les éléments réellement définis d'un sparse array, je recommande cette approche :

const sparse = [];
sparse[0] = 'premier';
sparse[100] = 'centième';

// Compter les éléments réels
const nbReel = Object.keys(sparse).length;
console.log(nbReel); // 2

// Ou avec filter
const nbDefinis = sparse.filter(() => true).length;
console.log(nbDefinis); // 2

Autre cas particulier qui mérite attention : le constructeur Array avec un seul argument numérique :

const arr = new Array(5);
console.log(arr.length); // 5
console.log(arr[0]);     // undefined (empty slot)

// Différent de :
const arr2 = [5];
console.log(arr2.length); // 1
console.log(arr2[0]);     // 5

Pour créer un tableau pré-dimensionné avec des valeurs par défaut, utilisez Array.from() ou Array(n).fill() selon la spécification ECMAScript officielle :

// Créer un tableau de 5 zéros
const zeros = Array(5).fill(0);
console.log(zeros); // [0, 0, 0, 0, 0]

// Créer un tableau avec des valeurs calculées
const indices = Array.from({ length: 5 }, (_, i) => i);
console.log(indices); // [0, 1, 2, 3, 4]

Obtenir la taille d'un objet, d'un Map ou d'un Set

La question de la taille ne se limite pas aux arrays. En développement, on manipule souvent des objets, des Map et des Set. Chaque structure a sa propre méthode, et les confondre est source de bugs silencieux.

Taille d'un objet classique

const utilisateur = {
  nom: 'Morel',
  prenom: 'Nathan',
  ville: 'Saint-Étienne'
};

// Object.keys() retourne un array des clés
console.log(Object.keys(utilisateur).length); // 3

// Pour inclure les propriétés non-énumérables
console.log(Object.getOwnPropertyNames(utilisateur).length); // 3

Les objets JavaScript n'ont pas de propriété .length ni .size. Il faut impérativement passer par Object.keys() pour obtenir le nombre de propriétés. C'est une différence fondamentale avec les arrays.

Taille d'un Map

const config = new Map();
config.set('theme', 'dark');
config.set('lang', 'fr');
config.set('debug', false);

console.log(config.size); // 3
// Attention : .size sans parenthèses, c'est une propriété

Taille d'un Set

const tags = new Set(['javascript', 'web', 'dev', 'javascript']);
console.log(tags.size); // 3 (les doublons sont éliminés)

Le Set est d'ailleurs une technique très pratique pour compter les valeurs uniques d'un array :

const donnees = [1, 2, 2, 3, 3, 3, 4];
const nbUniques = new Set(donnees).size;
console.log(nbUniques); // 4

Tableau comparatif des méthodes selon le type de données

Pour que vous ayez une vue d'ensemble claire, voici un récapitulatif de toutes les façons d'obtenir la taille d'une collection en JavaScript :

Ce tableau couvre la grande majorité des cas que vous rencontrerez en développement. Je vous recommande de le garder sous la main, surtout quand vous travaillez avec des structures de données variées dans un même projet. Comprendre ces fondamentaux est aussi important que maîtriser les bases du HTML, CSS et JavaScript.

Bonnes pratiques et performances

Après plus d'une décennie à développer des sites et applications web, voici les bonnes pratiques que j'applique systématiquement concernant la taille des arrays.

Cache de .length dans les boucles intensives

// Boucle standard (suffisant dans 99% des cas)
for (let i = 0; i < tableau.length; i++) { /* ... */ }

// Boucle optimisée (utile pour des millions d'itérations)
for (let i = 0, len = tableau.length; i < len; i++) { /* ... */ }

En pratique, les moteurs JavaScript modernes comme V8 (Chrome, Node.js) optimisent déjà l'accès à .length. Cette optimisation manuelle n'est pertinente que dans des boucles traitant de très grands volumes de données. Pour les itérations classiques, un simple for en JavaScript standard suffit amplement.

Préférer les méthodes fonctionnelles

// Plutôt que de gérer manuellement l'index
let compteur = 0;
for (let i = 0; i < arr.length; i++) {
  if (arr[i] > 10) compteur++;
}

// Préférer cette approche plus lisible
const compteur = arr.filter(x => x > 10).length;

La lisibilité prime sur la micro-optimisation dans la majorité des projets web. Un code clair se maintient mieux et génère moins de bugs.

Vérification défensive avant d'accéder à .length

function traiterDonnees(donnees) {
  // Vérifier que c'est bien un array
  if (!Array.isArray(donnees)) {
    return 0;
  }
  return donnees.length;
}

// Avec l'optional chaining (ES2020)
const taille = donnees?.length ?? 0;

L'optional chaining combiné au nullish coalescing (??) est devenu mon outil préféré pour gérer les cas où une variable pourrait être null ou undefined. C'est plus concis et plus sûr qu'une vérification if/else traditionnelle. Comme le précise la référence W3Schools sur la propriété length, cette propriété retourne undefined si elle est appelée sur une valeur qui n'est pas un tableau.

Gestion des chaînes de caractères et des espaces blancs

Un cas que je rencontre souvent dans les formulaires concerne la validation de champs texte. Ne confondez pas la longueur d'un string avec celle d'un array, même si les deux utilisent .length. Si vous devez nettoyer des chaînes avant de les traiter, pensez à utiliser trimEnd en JavaScript pour retirer les espaces superflus en fin de chaîne avant de vérifier la longueur.

const saisie = '  hello  ';
console.log(saisie.length);           // 9 (avec les espaces)
console.log(saisie.trim().length);    // 5 (sans les espaces)
console.log(saisie.trimEnd().length); // 7 (espaces de fin retirés)

Quand utiliser .length pour la logique conditionnelle

const notifications = getNotifications();

// Coercion implicite : 0 est falsy, tout nombre > 0 est truthy
if (notifications.length) {
  afficherBadge(notifications.length);
}

// Plus explicite et recommandé en équipe
if (notifications.length > 0) {
  afficherBadge(notifications.length);
}

Les deux syntaxes fonctionnent. En solo, j'utilise la version courte. En équipe ou sur un projet client, je privilégie la comparaison explicite > 0 pour que le code soit compréhensible par tous les niveaux.

Performance : .length vs alternatives

Un point que mes clients en développement PHP natif me posent souvent : est-ce que .length est performant comparé à d'autres approches ? La réponse est oui. La propriété .length est une simple lecture de propriété, elle s'exécute en O(1), c'est-à-dire en temps constant, quelle que soit la taille du tableau. C'est largement plus rapide que de parcourir le tableau pour compter les éléments.

// O(1) - instantané
const taille = monTableau.length;

// O(n) - parcourt tout le tableau (inutile pour un simple comptage)
let taille = 0;
monTableau.forEach(() => taille++);