Array length JavaScript : tout savoir sur cette propriété

Quand j’ai commencé JavaScript en 2015, j’ai cru que .length comptait simplement les éléments d’un tableau. Onze ans plus tard, je sais que cette propriété cache des subtilités qui piègent encore des développeurs expérimentés. La propriété array length javascript ne renvoie pas toujours ce qu’on imagine, elle peut modifier un tableau, créer des slots vides, et même provoquer des bugs silencieux en production. Je vous explique tout dans ce guide, avec des exemples issus de vrais projets.

Comprendre la propriété length d’un array en JavaScript

Avant de manipuler length array javascript, il faut comprendre ce que cette propriété mesure réellement. Contrairement à ce que beaucoup pensent, .length ne compte pas les éléments présents dans le tableau. Elle retourne l’indice numérique le plus élevé + 1. Cette distinction est fondamentale.

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

fruits[10] = 'mangue';
console.log(fruits.length); // 11, pas 4 !

Dans cet exemple, le tableau ne contient que 4 éléments réels, mais .length renvoie 11 parce que l’indice le plus élevé est 10. Les indices 3 à 9 sont des « empty slots » (emplacements vides). Cette mécanique est définie dans la spécification ECMAScript officielle, section 10.4.2.

Techniquement, length est une propriété configurable et modifiable (writable) de l’objet Array. Ce n’est pas une méthode, pas un getter calculé à la volée : c’est une propriété qui se met à jour automatiquement à chaque opération qui modifie les indices du tableau. Si vous venez d’une formation JavaScript, ce point est souvent mal expliqué.

Lire la taille d’un tableau : syntaxe et exemples concrets

La syntaxe pour lire la javascript length array est la plus simple qui existe en JavaScript :

const notes = [14, 17, 12, 19, 8];
const taille = notes.length;
console.log(taille); // 5

Voici les cas d’usage les plus courants que je rencontre en production :

Vérifier si un tableau est vide

const panier = [];
if (panier.length === 0) {
  console.log('Le panier est vide');
}
// Forme raccourcie :
if (!panier.length) {
  console.log('Panier vide');
}

Quand javascript array length 0 est retourné, cela signifie qu’aucun indice numérique n’existe dans le tableau. La forme !panier.length fonctionne parce que 0 est falsy en JavaScript.

Accéder au dernier élément

const couleurs = ['rouge', 'vert', 'bleu'];
const dernier = couleurs[couleurs.length - 1]; // 'bleu'
// Depuis ES2022, on peut aussi utiliser .at() :
const dernierBis = couleurs.at(-1); // 'bleu'

Connaître le nombre d’éléments avant un push

const logs = [];
const index = logs.length; // 0
logs.push('Connexion utilisateur');
console.log(logs.length); // 1

Dans mes projets WordPress sur mesure, j’utilise souvent cette propriété pour gérer des files d’attente côté front : vérifier le nombre de requêtes AJAX en cours, limiter les appels parallèles, ou afficher un compteur en temps réel. Si vous travaillez sur des projets d’optimisation CSS et JavaScript dans WordPress, .length est partout dans le code de gestion du DOM.

Modifier la longueur d’un array : tronquer ou agrandir

Ce que beaucoup de développeurs ignorent, c’est que .length est en écriture. On peut lui assigner une valeur, et le tableau sera modifié en conséquence.

Tronquer un tableau

const villes = ['Paris', 'Lyon', 'Marseille', 'Toulouse', 'Nantes'];
villes.length = 3;
console.log(villes); // ['Paris', 'Lyon', 'Marseille']
// 'Toulouse' et 'Nantes' sont définitivement supprimés

C’est une suppression destructive et irréversible. Les éléments au-delà du nouvel indice sont perdus. Je l’utilise parfois pour limiter le nombre de résultats affichés sans créer de nouveau tableau. C’est plus rapide que .slice() quand on n’a pas besoin de conserver l’original.

Agrandir un tableau

const scores = [10, 20];
scores.length = 5;
console.log(scores); // [10, 20, empty × 3]
console.log(scores[3]); // undefined

Les emplacements créés sont des slots vides (sparse array). Ils ne contiennent pas undefined : ils n’existent tout simplement pas. La différence est subtile mais importante pour les méthodes itératives.

Vider un tableau d’un coup

const cache = ['a', 'b', 'c', 'd'];
cache.length = 0;
console.log(cache); // []
// Toutes les références au même tableau voient le changement :
const ref = cache;
cache.length = 0;
console.log(ref); // [] aussi !

C’est la méthode la plus performante pour vider un tableau en conservant la même référence. Quand on a un array length 1 et qu’on veut le vider, arr.length = 0 est plus explicite que arr.pop().

Array length JavaScript : les pièges classiques à éviter

En onze ans de freelance, j’ai croisé ces bugs des dizaines de fois chez mes clients. Voici les pièges les plus fréquents avec la propriété array length javascript.

Piège 1 : les tableaux creux (sparse arrays)

const arr = [1, 2, 3];
delete arr[1];
console.log(arr.length); // 3 (pas 2 !)
console.log(arr); // [1, empty, 3]

L’opérateur delete supprime l’élément mais ne réduit pas .length. Pour supprimer un élément et réindexer le tableau, il faut utiliser .splice().

Piège 2 : javascript array length undefined

const utilisateur = { nom: 'Thomas', age: 38 };
console.log(utilisateur.length); // undefined

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

Si .length retourne undefined, c’est que la variable n’est pas un tableau (ni une string). C’est un objet classique, null, ou un autre type. Pour vérifier qu’on a bien un tableau, il faut utiliser Array.isArray().

Piège 3 : les propriétés non numériques

const data = [10, 20, 30];
data.source = 'API';
data.timestamp = Date.now();
console.log(data.length); // 3 (les propriétés nommées sont ignorées)

La propriété .length ignore les clés non numériques. Le tableau a bien plus de données que ce que .length indique. C’est pour cette raison qu’un javascript array length 0 ne signifie pas toujours « objet vide ».

Piège 4 : le constructeur Array avec un seul argument numérique

const arr = new Array(5);
console.log(arr.length); // 5
console.log(arr[0]); // undefined (slot vide)
// Attention, ce n'est pas la même chose que :
const arr2 = [5];
console.log(arr2.length); // 1

new Array(5) crée un tableau avec 5 slots vides, pas un tableau contenant le chiffre 5. Cette confusion est une source classique de bugs. Comme le mentionne la documentation MDN sur le constructeur Array, il est préférable d’utiliser la syntaxe littérale [].

Javascript array size or length : quelle différence ?

Cette question revient constamment sur Stack Overflow, et je la retrouve régulièrement dans les revues de code que je fais pour des clients. En JavaScript natif, il n’existe pas de méthode .size() sur les tableaux. Point final.

Voici la distinction claire :

• Array.length : propriété native des tableaux, retourne l’indice max + 1
• Set.size : propriété des objets Set (ensembles), retourne le nombre d’éléments uniques
• Map.size : propriété des objets Map, retourne le nombre de paires clé-valeur
• jQuery.size() : méthode dépréciée de jQuery, équivalente à .length

// Array : utiliser .length
const arr = [1, 2, 3, 2, 1];
console.log(arr.length); // 5

// Set : utiliser .size
const unique = new Set(arr);
console.log(unique.size); // 3 (doublons supprimés)

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

// Erreur fréquente :
console.log(arr.size); // undefined !

Si vous utilisez Lodash ou d’autres bibliothèques, certaines ajoutent une méthode .size() aux collections. Mais en JavaScript pur, c’est toujours .length pour les tableaux. Pour les développeurs qui viennent de Java ou C#, c’est un point d’adaptation important à intégrer dès la formation JavaScript.

Js max array length et limites du moteur

La taille maximale théorique d’un tableau JavaScript est 2³² − 1, soit 4 294 967 295 éléments. C’est défini par la spécification ECMAScript : la propriété length doit être un entier non signé de 32 bits.

// Tester la limite :
const max = Math.pow(2, 32) - 1;
console.log(max); // 4294967295

// Dépasser la limite provoque une erreur :
try {
  const arr = [];
  arr.length = Math.pow(2, 32); // RangeError: Invalid array length
} catch (e) {
  console.log(e.message);
}

En pratique, vous atteindrez les limites de mémoire bien avant la limite théorique. Voici les ordres de grandeur réalistes :

Dans mes projets, je n’ai jamais atteint ces limites en front-end. En revanche, côté Node.js, j’ai déjà fait planter un script d’import qui chargeait 2 millions de lignes CSV en mémoire. La solution : traiter les données en streaming plutôt que de tout stocker dans un array. Si vous travaillez sur des architectures serveur, la question du cloud computing vs on-premise influence directement la mémoire disponible.

Cas pratiques : boucles, vérifications et tableaux vides

Voici les patterns que j’utilise quotidiennement avec javascript array length dans mes développements.

Boucle for classique

const produits = ['Clavier', 'Souris', 'Écran'];
for (let i = 0; i < produits.length; i++) {
  console.log(produits[i]);
}

Une optimisation historique consistait à mettre .length en cache dans une variable. En 2026, les moteurs JavaScript modernes (V8, SpiderMonkey) optimisent cet accès automatiquement. C'est devenu inutile dans 99 % des cas.

Vérifier qu'un tableau n'est pas vide avant traitement

function traiterCommandes(commandes) {
  if (!Array.isArray(commandes) || commandes.length === 0) {
    return 'Aucune commande à traiter';
  }
  // Traitement...
  return `${commandes.length} commande(s) traitée(s)`;
}

Ce pattern combine la vérification du type (Array.isArray) et du contenu (.length === 0). C'est la méthode la plus robuste pour éviter un javascript array length undefined en production.

Compter les éléments réels d'un tableau creux

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

// Compter les éléments existants :
const realCount = sparse.filter(() => true).length;
console.log(realCount); // 3

// Alternative plus explicite :
let count = 0;
for (const key in sparse) {
  if (sparse.hasOwnProperty(key) && !isNaN(key)) count++;
}
console.log(count); // 3

Gérer un tableau paginé

function paginer(tableau, taillePage) {
  const pages = [];
  for (let i = 0; i < tableau.length; i += taillePage) {
    pages.push(tableau.slice(i, i + taillePage));
  }
  return pages;
}

const articles = Array.from({ length: 47 }, (_, i) => `Article ${i + 1}`);
const pagine = paginer(articles, 10);
console.log(pagine.length); // 5 pages
console.log(pagine[4].length); // 7 articles sur la dernière page

Ce genre de logique se retrouve dans tous mes projets de Custom Post Types avec ACF quand je dois paginer des données côté JavaScript avant de les injecter dans le DOM.

Initialiser un tableau avec une longueur définie

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

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

Array.from({ length: n }) est la méthode la plus propre pour initialiser un tableau d'une taille donnée. C'est plus lisible que new Array(n).fill().map() et évite les problèmes de slots vides.

Différence entre empty array length et undefined

// Javascript empty array length
const vide = [];
console.log(vide.length); // 0 (tableau existe, mais vide)

// Variable non initialisée
let nonDefini;
console.log(nonDefini?.length); // undefined (pas un tableau)

// Null
const nul = null;
console.log(nul?.length); // undefined

L'opérateur ?. (optional chaining) évite le TypeError quand on tente d'accéder à .length sur null ou undefined. Si vous développez des sites multilingues avec des données dynamiques, cette vérification est indispensable pour éviter les crashs. J'en parle aussi dans le contexte des plugins WordPress multilingues où les tableaux de traductions peuvent être vides selon la langue.

Tableau récapitulatif des comportements de length

Voici un résumé de tout ce qu'on a vu, sous forme de tableau de référence rapide :

Ce tableau couvre la quasi-totalité des situations que je rencontre en production. En cas de doute, ouvrez la console de votre navigateur et testez directement : c'est le meilleur moyen de vérifier un comportement. Pour aller plus loin sur la sécurité de vos applications web, pensez à vérifier que vos validations côté serveur ne reposent pas uniquement sur un .length côté client. Les questions de cybersécurité commencent souvent par ce genre de détail.