Length d’un array JavaScript : tout savoir sur la propriété

Depuis plus de 12 ans que je développe des sites et des applications web, je peux affirmer que la propriété .length est sans doute la fonctionnalité JavaScript que j’utilise le plus au quotidien. Que ce soit pour valider un formulaire, parcourir une liste de produits ou vérifier qu’un panier n’est pas vide, length in javascript array intervient dans pratiquement chaque projet. Pourtant, derrière cette propriété apparemment simple se cachent des comportements subtils que beaucoup de développeurs ignorent. Je vous propose un tour complet de la question, avec des exemples concrets tirés de ma pratique professionnelle.

Comprendre la propriété .length en JavaScript

La propriété .length d’un tableau JavaScript retourne un entier non signé de 32 bits. Contrairement à ce que l’on pourrait croire, elle ne compte pas réellement le nombre d’éléments présents dans le tableau. Sa valeur correspond à l’indice numérique le plus élevé du tableau + 1. Dans la majorité des cas, le résultat est identique, mais cette distinction devient cruciale lorsqu’on travaille avec des tableaux creux (sparse arrays).

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

// Tableau creux : l'indice le plus élevé est 99
const sparse = [];
sparse[99] = 'dernier';
console.log(sparse.length); // 100 (et non 1 !)

Ce comportement est défini par la spécification ECMAScript officielle. En pratique, cette propriété est dynamique : elle se met à jour automatiquement à chaque ajout ou suppression d’élément via les méthodes standard. C’est aussi une propriété en lecture et écriture, ce qui ouvre la porte à des manipulations puissantes que je détaille plus bas.

Un point fondamental : .length est une propriété, pas une méthode. On y accède sans parenthèses. Écrire monTableau.length() provoquera une erreur TypeError: monTableau.length is not a function. C’est une confusion fréquente chez les développeurs venant de langages comme Python où l’on utilise len().

Syntaxe et utilisation basique de .length

L’utilisation la plus courante de .length consiste à obtenir le nombre d’éléments d’un tableau. Voici les cas de figure que je rencontre le plus souvent dans mes projets WordPress et mes développements sur mesure.

Récupérer le nombre d’éléments

const panier = ['t-shirt', 'pantalon', 'chaussettes'];
const nbArticles = panier.length;
console.log(nbArticles); // 3

Accéder au dernier élément

Puisque les indices commencent à 0, le dernier élément se trouve toujours à l’indice .length – 1. C’est un pattern que j’utilise quotidiennement.

const couleurs = ['rouge', 'vert', 'bleu'];
const derniere = couleurs[couleurs.length - 1];
console.log(derniere); // 'bleu'

Depuis ES2022, la méthode .at(-1) offre une alternative plus lisible, mais .length – 1 reste le standard dans les bases de code existantes et dans les environnements qui ne supportent pas encore at().

Vérifier si un tableau est vide

const resultats = [];

if (resultats.length === 0) {
  console.log('Aucun résultat trouvé');
}

// Ou plus concis :
if (!resultats.length) {
  console.log('Tableau vide');
}

Cette vérification est indispensable avant de traiter des données issues d’une API ou d’un formulaire. J’intègre systématiquement ce contrôle dans mes développements pour éviter les erreurs d’exécution sur des tableaux vides.

Ajouter un élément à la fin

const liste = ['a', 'b', 'c'];
liste[liste.length] = 'd';
console.log(liste); // ['a', 'b', 'c', 'd']

Bien que .push() soit plus courant, cette technique montre bien que .length pointe toujours vers la prochaine position disponible. En pratique, je recommande .push() pour sa lisibilité, mais il est utile de comprendre le mécanisme sous-jacent.

Modifier .length pour tronquer ou étendre un tableau

L’une des particularités les plus méconnues de .length est qu’on peut lui assigner directement une valeur. Cela modifie le tableau en conséquence, ce qui peut être extrêmement utile ou dangereux selon le contexte.

Tronquer un tableau

Réduire .length supprime tous les éléments dont l’indice est supérieur ou égal à la nouvelle valeur. C’est l’une des manières les plus performantes de vider ou raccourcir un tableau.

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

// Vider complètement un tableau :
nombres.length = 0;
console.log(nombres); // []

Cette technique est plus performante que tableau = [] lorsqu’on souhaite conserver la même référence en mémoire. C’est un détail qui compte quand plusieurs variables ou fonctions pointent vers le même tableau. J’utilise régulièrement .length = 0 dans les composants qui gèrent des états partagés.

Étendre un tableau

Augmenter .length crée des emplacements vides (slots) sans valeur définie. Le tableau devient alors un tableau creux.

const data = [1, 2, 3];
data.length = 6;
console.log(data); // [1, 2, 3, <3 empty items>]
console.log(data[4]); // undefined

Attention : ces emplacements vides ne sont pas équivalents à undefined. Les méthodes comme .forEach() ou .map() les ignorent, tandis qu’une boucle for classique les parcourt. C’est une source de bugs subtils que je vois régulièrement en code review.

.length vs .size() : quelle différence en JavaScript ?

Une question qui revient très souvent : faut-il utiliser .length ou .size() pour un tableau JavaScript ? La réponse est sans ambiguïté : les tableaux JavaScript n’ont pas de méthode .size(). Appeler monArray.size() provoquera une erreur.

La confusion vient souvent d’autres langages ou d’autres structures de données :

• En Java, les ArrayList utilisent .size() et les tableaux natifs utilisent .length (sans parenthèses). Le comportement est similaire, mais la syntaxe diffère.
• En JavaScript, les Map et les Set utilisent la propriété .size (sans parenthèses non plus). C’est un choix de design du langage pour distinguer ces collections des tableaux.
• En Python, on utilise la fonction globale len(), qui n’existe pas en JavaScript natif.

// Tableau → .length
const arr = [1, 2, 3];
console.log(arr.length); // 3

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

// Map → .size
const maMap = new Map([['a', 1], ['b', 2]]);
console.log(maMap.size); // 2

En résumé : pour un Array, c’est toujours .length. Pour un Set ou une Map, c’est .size. Il n’existe aucune fonction len() native en JavaScript. Si vous voyez len() dans du code JavaScript, il s’agit d’une fonction personnalisée définie par le développeur, pas d’une fonctionnalité du langage.

Utiliser .length dans les boucles et itérations

Le cas d’utilisation le plus fréquent de .length en contexte professionnel reste l’itération. Je l’utilise dans pratiquement chaque projet, que ce soit pour afficher une liste de résultats, transformer des données ou valider des entrées.

Boucle for classique

const produits = ['Widget A', 'Widget B', 'Widget C'];

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

Cette boucle for est le pattern fondamental. Notez bien l'utilisation de < (strictement inférieur) et non <= : puisque les indices commencent à 0, le dernier indice valide est .length - 1.

Optimisation : mettre .length en cache

Dans les boucles à haute fréquence, certains développeurs stockent .length dans une variable pour éviter de recalculer la propriété à chaque itération.

const donnees = new Array(100000).fill(0);

// Version avec cache
for (let i = 0, len = donnees.length; i < len; i++) {
  // traitement
}

En pratique, les moteurs JavaScript modernes (V8, SpiderMonkey) optimisent déjà l'accès à .length. Le gain de performance est négligeable dans la plupart des cas. Je ne recommande cette technique que pour des tableaux de plusieurs centaines de milliers d'éléments avec un traitement intensif.

Itération inversée

const items = ['premier', 'deuxième', 'troisième'];

for (let i = items.length - 1; i >= 0; i--) {
  console.log(items[i]);
}
// 'troisième', 'deuxième', 'premier'

L'itération inversée est particulièrement utile lorsqu'on supprime des éléments pendant le parcours avec splice. En parcourant de la fin vers le début, les indices des éléments restants ne sont pas décalés, ce qui évite de sauter des éléments.

Vérifier la longueur avant d'itérer

function afficherResultats(resultats) {
  if (resultats.length > 0) {
    resultats.forEach((r) => console.log(r));
  } else {
    console.log('Aucun résultat');
  }
}

Ce pattern de vérification length greater than 0 est un réflexe à adopter systématiquement. Il évite des comportements inattendus et améliore l'expérience utilisateur en affichant un message pertinent au lieu d'un contenu vide.

Les pièges courants : length undefined, 0 et tableaux creux

Au fil de mes années de développement, j'ai identifié plusieurs sources de confusion récurrentes autour de .length. Voici les pièges les plus fréquents et comment les éviter.

Length undefined

Obtenir undefined en accédant à .length signifie presque toujours que la variable n'est pas un tableau. C'est un problème de type, pas un bug de la propriété.

let data;
console.log(data?.length); // undefined (data n'est pas défini)

const obj = { nom: 'test' };
console.log(obj.length); // undefined (un objet n'a pas de .length)

// Solution : vérifier le type
if (Array.isArray(data) && data.length > 0) {
  // traitement sûr
}

L'opérateur de chaînage optionnel (?.) est devenu mon outil préféré pour gérer ces cas. Il retourne undefined au lieu de lancer une erreur si la variable est null ou undefined.

Length qui vaut 0 de manière inattendue

Un JavaScript array length 0 alors qu'on s'attend à des données provient généralement de l'un de ces scénarios :

• Données asynchrones : on lit .length avant que la promesse ou le callback ait rempli le tableau
• Mauvaise portée (scope) : on travaille sur une copie locale au lieu de la référence originale
• Confusion entre objet et tableau : les données sont un objet {} déguisé en tableau

// Piège classique avec l'asynchrone
const resultats = [];

fetch('/api/donnees')
  .then(r => r.json())
  .then(data => resultats.push(...data));

console.log(resultats.length); // 0 ! Le fetch n'est pas terminé

Tableaux creux et .length trompeur

const creux = [1, , , 4];
console.log(creux.length); // 4

// Mais combien d'éléments réels ?
const reels = creux.filter(el => el !== undefined);
console.log(reels.length); // 2

Pour compter uniquement les éléments réellement définis, il faut filtrer le tableau. La propriété .length ne fait pas cette distinction, conformément à la documentation MDN sur Array.length.

Length sur les objets, les chaînes et les collections

La propriété .length n'est pas exclusive aux tableaux. Comprendre son comportement sur d'autres types de données permet d'éviter des confusions et d'écrire du code plus robuste.

Les chaînes de caractères (strings)

Les strings possèdent aussi une propriété .length, mais elle compte les unités de code UTF-16, pas les caractères perçus. C'est une subtilité importante pour le traitement de texte avec des émojis ou des caractères spéciaux, un sujet que j'aborde dans mon article sur trimEnd en JavaScript.

const texte = 'Bonjour';
console.log(texte.length); // 7

const emoji = '👨‍👩‍👧‍👦';
console.log(emoji.length); // 11 (pas 1 !)

Les objets classiques

Les objets JavaScript ({}) n'ont pas de propriété .length native. Pour obtenir le nombre de clés, il faut utiliser Object.keys().

const config = { theme: 'dark', lang: 'fr', debug: false };

console.log(config.length); // undefined
console.log(Object.keys(config).length); // 3

NodeList et HTMLCollection

Lorsqu'on manipule le DOM dans un contexte WordPress ou dans un développement front-end, querySelectorAll() retourne un NodeList qui possède une propriété .length. Attention, ce n'est pas un vrai tableau : il faut le convertir si l'on veut utiliser des méthodes comme splice ou .map().

const boutons = document.querySelectorAll('.btn');
console.log(boutons.length); // nombre de boutons trouvés

// Convertir en vrai tableau pour utiliser les méthodes Array
const tableauBoutons = Array.from(boutons);

Les fonctions

Peu de développeurs le savent, mais les fonctions JavaScript ont aussi une propriété .length. Elle retourne le nombre de paramètres attendus (déclarés dans la signature).

function exemple(a, b, c) {}
console.log(exemple.length); // 3

const fleche = (x, y) => x + y;
console.log(fleche.length); // 2

Bonnes pratiques et performances avec .length

Après des années de pratique, voici les recommandations que je partage systématiquement avec les développeurs qui travaillent avec moi ou qui suivent mes tutoriels.

Toujours valider avant d'accéder à .length

function traiter(donnees) {
  if (!Array.isArray(donnees)) {
    throw new TypeError('Un tableau est attendu');
  }
  
  if (donnees.length === 0) {
    return 'Aucune donnée';
  }
  
  // Traitement sûr ici
  return donnees.map(d => d.toUpperCase());
}

Privilégier les méthodes fonctionnelles

Pour le code moderne, les méthodes .forEach(), .map(), .filter() et .reduce() sont plus lisibles qu'une boucle for avec .length. Elles gèrent automatiquement les bornes et les indices.

// Moins lisible
const resultats = [];
for (let i = 0; i < donnees.length; i++) {
  if (donnees[i].actif) {
    resultats.push(donnees[i].nom);
  }
}

// Plus lisible et plus sûr
const resultats = donnees
  .filter(d => d.actif)
  .map(d => d.nom);

Éviter de créer des tableaux creux

Les tableaux creux posent des problèmes de performance (les moteurs JavaScript les optimisent moins bien) et de lisibilité. Si vous avez besoin d'un tableau pré-rempli, utilisez .fill().

// À éviter
const mauvais = new Array(100); // tableau creux de length 100

// Préférable
const bon = new Array(100).fill(0); // tableau dense de 100 zéros
const mieux = Array.from({ length: 100 }, (_, i) => i); // [0, 1, 2, ..., 99]

La taille maximale d'un tableau

La valeur maximale de .length est 2³² − 1, soit 4 294 967 295. Tenter de créer un tableau plus grand lance une RangeError. En pratique, la limite réelle dépend de la mémoire disponible. Sur la plupart des navigateurs et des environnements Node.js, on atteint les limites mémoire bien avant la limite théorique de JS max array length.

try {
  const trop = new Array(4294967296); // 2^32
} catch (e) {
  console.log(e.message); // 'Invalid array length'
}

Tableau comparatif : .length selon les types de données

Pour synthétiser les différences de comportement de .length et des alternatives selon le type de données, voici un tableau récapitulatif que je garde toujours sous la main.

Ce tableau montre clairement que .length n'a pas le même sens selon le contexte. La version modifiable des tableaux est une exception, pas la règle. Pour les Set et Map, n'oubliez pas d'utiliser .size au lieu de .length.

En Java, la situation est différente : les tableaux natifs utilisent .length (propriété), tandis que les collections comme ArrayList utilisent .size() (méthode avec parenthèses). Cette distinction Array length Java vs JavaScript est une source fréquente de confusion chez les développeurs qui naviguent entre les deux langages.