Array length en JavaScript: ¿Para que sirve? Con ejemplos!

El array length en JavaScript es una propiedad clave para trabajar con arreglos, pero ¿qué es exactamente y para qué sirve? Te permite conocer la cantidad de elementos en un array y ajustar su tamaño fácilmente. En este artículo, aprenderás cómo usarlo, cómo funciona y explorarás ejemplos prácticos que simplificarán tus proyectos. ¡Descubre su potencial y domina su uso!

Un ARRAY en JavaScript es una estructura de datos que permite almacenar múltiples valores en una sola variable. Estos valores se almacenan en un orden específico y son accesibles mediante índices numéricos que comienzan en 0.

1 ¿Que es array length en JavaScript?

Array.length es una propiedad de los arrays en JavaScript que indica la cantidad de elementos que contiene un array. No es un método, por lo que no necesita paréntesis para ser usada.

1.1. Ejemplo básico usando length:

let frutas = ['manzana', 'banana', 'naranja'];
console.log(frutas.length); // 3Lenguaje del código: JavaScript (javascript)

En este caso:

• let frutas = ['manzana', 'banana', 'naranja'];
  • Este es el array frutas y tiene tres elementos
• console.log(frutas.length); // 3
  • Aquí usamos la propiedad length y console.log nos devuelve la cantidad de elementos, o sea, 3.

1.2. ¿Cómo funciona la propiedad length?

1. Siempre es un número entero positivo:
   • No puede ser negativo ni decimal.
2. Comienza en 0:
   • El primer elemento de un arreglo tiene el índice 0, el segundo el 1, y así sucesivamente.
3. Se actualiza automáticamente:
   • Cada vez que agregas o eliminas elementos de un arreglo, la propiedad length se ajusta automáticamente para reflejar el nuevo tamaño.
4. Puede ser modificada:
   • Aunque es común que se obtenga el valor de length para conocer el tamaño del arreglo, también puedes asignarle un nuevo valor para truncar un arreglo. Si asignas un valor menor a length, los elementos desde ese nuevo índice hasta el final se eliminarán.

2. ¿Cómo usar array length en JavaScript?

Para saber como utilizar la propiedad length en un arreglo de JavaScript es necesario conocer su sintaxis:

Descubre como crear un arreglo en JS

nombreDeTuArreglo.lengthLenguaje del código: CSS (css)

• Donde:
  • nombreDeTuArreglo: Es el nombre del arreglo sobre el cual quieres saber la cantidad de sus elementos. Por ejemplo, miArreglo, frutas, numeros, etc.
• ¿Qué significa length aquí?
  • Devuelve un número siempre: Este número representa la cantidad de elementos que hay dentro del arreglo.
  • Comienza en 0: El primer elemento de un arreglo tiene el índice 0, por lo que length siempre será uno más que el índice del último elemento.
• Recuerda:
  • Propiedad y no método: length no lleva paréntesis, ya que es una propiedad, no una función.
  • Actualización automática: Su valor se ajusta dinámicamente cuando se agregan o eliminan elementos del array.

2.1. Usando length para conocer el último índice de un array :

La propiedad length nos indica el número total de elementos que hay en un array, pero los índices comienzan desde 0. Esto significa que el índice del último elemento será siempre length - 1.

Ejemplo:

const arr = ["a", "b", "c"];
console.log(arr.length);       // Output: 3
console.log(arr[arr.length - 1]); // Output: "c"Lenguaje del código: JavaScript (javascript)

Explicación:

• El array arr tiene 3 elementos: "a", "b", y "c".
• Su length es 3, pero los índices van de 0 a 2, entonces el último índice usando length sería igual a length - 1.
• Al acceder a arr[arr.length - 1], obtenemos el último elemento porque estamos accediendo al índice más alto (2).

2.2. ¿Que pasa cuando agregamos un elemento superior al índice mayor del array?

Cuando se asigna un valor a un índice mayor al actual length - 1, JavaScript automáticamente extiende el array para incluir ese índice, rellenando los espacios intermedios con valores «vacíos» (undefined).

Ejemplo:

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

arr[5] = 6;              // Se asigna un valor en el índice 5
console.log(arr);        // Output: [1, 2, 3, <2 empty items>, 6]
console.log(arr.length); // Output: 6Lenguaje del código: JavaScript (javascript)

Explicación:

• Inicialmente, el array arr tiene 3 elementos con índices 0, 1, y 2. Su length es 3.
• Al asignar un valor al índice 5, JavaScript detecta que este índice está fuera del rango actual.
• Extiende el array para incluir el índice 5 y agrega «espacios vacíos» (undefined) en los índices 3 y 4.
• Como resultado, el nuevo length del array es 6.

3. ¿Para que sirve length array en JavaScript?

La propiedad length en arrays de JavaScript es utilizada principalmente para:

1. Determinar el tamaño de un array:
2. Reducir el tamaño de un array (truncar).
3. Expandir un array:
4. Usar length en bucles para iterar en los elementos de un array:
5. Usar length para verificar si un array esta vacío:
6. Usar length en arrays multidimensionales:

3.1. Determinar el tamaño de un array:

La principal función de length, es que te permite saber cuántos elementos contiene un array. Tal como ya explicaciomos en el punto 1.

3.2. Reducir el tamaño de un array (truncar).

Truncar un array significa reducir su tamaño eliminando los elementos que se encuentran al final. Esto se logra asignando un nuevo valor a la propiedad length que sea menor que su valor actual.

Ejemplo:

const frutas = ['manzana', 'banana', 'pera', 'uva', 'melón'];
console.log(frutas); // Imprime: ['manzana', 'banana', 'pera', 'uva', 'melón']

// Truncar el array para que solo tenga 3 elementos
frutas.length = 3;

console.log(frutas); // Imprime: ['manzana', 'banana', 'pera']Lenguaje del código: JavaScript (javascript)

Explicación:

1. Creación del array: Inicializamos un array llamado frutas con 5 elementos.
2. Impresión inicial: Mostramos el contenido original del array.
3. Truncamiento:
   • Asignamos a frutas.length el valor 3. Al hacer esto, le estamos diciendo al array que ahora solo tiene 3 elementos. Los elementos «uva» y «melón» son eliminados del array.
4. Impresión final: Volvemos a mostrar el contenido del array, pero ahora solo contiene los primeros 3 elementos.

3.2.1. ¿Qué sucede internamente al truncar un array con length??

Cuando asignamos un nuevo valor a length, JavaScript redimensiona el array internamente. Los elementos que exceden el nuevo tamaño son eliminados. Es importante notar que no se crea un nuevo array, sino que se modifica el array existente.

3.2.2. ¿Por qué es útil truncar un array?

• Eliminar elementos no deseados: Cuando ya no necesitas los últimos elementos de un array, truncarlo es una forma eficiente de eliminarlos.
• Optimizar memoria: Si estás trabajando con arrays muy grandes, truncarlos puede ayudar a liberar memoria.
• Restablecer un array: Puedes utilizar esta técnica para vaciar un array asignando length a 0.

3.2.3. Precauciones:

• Operación destructiva: Truncar un array es una operación destructiva. El array original se modifica. Si necesitas preservar el array original, crea una copia antes de truncarlo.
• Pérdida de elementos: Los elementos eliminados no pueden ser recuperados.

3.3. Expandir un array:

Expandir un array significa aumentar su tamaño para incluir más elementos. Cuando asignas un valor más grande a length, JavaScript crea nuevos índices en el array, pero estos índices inicialmente no tienen ningún valor asignado, es decir, contienen undefined.

Ejemplo:

const numeros = [10, 20, 30];
console.log(numeros); // Imprime: [10, 20, 30]

// Expandimos el array a 5 elementos
numeros.length = 5;

console.log(numeros); // Imprime: [10, 20, 30, undefined, undefined]Lenguaje del código: JavaScript (javascript)

Explicación:

1. Creación del array: Inicializamos un array llamado numeros con 3 elementos.
2. Impresión inicial: Mostramos el contenido original del array.
3. Expansión:
   • Asignamos a numeros.length el valor 5. Al hacer esto, le estamos diciendo al array que ahora tiene 5 elementos. Se crean dos nuevos índices (3 y 4) que inicialmente contienen undefined.
4. Impresión final: Volvemos a mostrar el contenido del array, pero ahora tiene 5 elementos, con los dos últimos siendo undefined.

3.3.1. ¿Qué sucede internamente al expandir un array con length?

Cuando asignas un valor mayor a length, JavaScript reserva espacio en memoria para los nuevos elementos. Sin embargo, no inicializa estos elementos con ningún valor específico, por lo que contienen undefined por defecto.

3.3.2 ¿Por qué es útil expandir un array?

• Pre-asignar espacio: Si sabes de antemano que necesitarás un array de un tamaño específico, puedes expandirlo de antemano para evitar reasignaciones posteriores.
• Agregar elementos al final: Puedes expandir el array y luego asignar valores a los nuevos índices para agregar elementos al final.

3.3.3. Precauciones:

• Rendimiento: Expandir un array repetidamente puede ser ineficiente, especialmente si el array es muy grande. En algunos casos, puede ser más eficiente utilizar métodos como push() para agregar elementos uno a uno.
• Valores por defecto: Los elementos añadidos por la expansión tienen el valor undefined. Si necesitas inicializarlos con un valor específico, debes asignarlo manualmente.

3.4. Usar length en bucles para iterar sobre los elementos de un array:

La propiedad length es fundamental cuando se trata de iterar sobre los elementos de un array utilizando bucles en JavaScript. Al conocer la longitud del array, podemos controlar cuántas veces se ejecutará el bucle, asegurándonos de recorrer todos los elementos sin exceder los límites.

¿Qué significa iterar? En el contexto de JavaScript, iterar se refiere a recorrer cada elemento de una colección, como un array, para realizar alguna operación en cada uno de ellos.

Ejemplo:

const frutas = ['manzana', 'banana', 'pera', 'uva'];

// Iterando sobre el array usando un bucle for
for (let i = 0; i < frutas.length; i++) {
  console.log(frutas[i]);
}Lenguaje del código: JavaScript (javascript)

Explicación:

1. Declaración del array: Creamos un array llamado frutas que contiene cuatro elementos.
2. Bucle for: Usamos un bucle for para iterar e imprimir cada elemento del array.
   • let i = 0: Inicializamos una variable i en 0, que servirá como índice para acceder a cada elemento del array.
   • i < frutas.length: La condición del bucle verifica si el valor de i es menor que la longitud del array. Esto garantiza que el bucle se ejecutará mientras i sea menor al número total de elementos.
   • i++: Después de cada iteración, incrementamos el valor de i en 1 para pasar al siguiente elemento del array.
3. Impresión: Dentro del bucle, utilizamos console.log(frutas[i]) para imprimir cada elemento del array. El índice i nos permite acceder a cada elemento en su posición correspondiente.
4. Resultado:

manzana
banana
pera
uva

3.4.1. ¿Qué hace este length en este ejemplo?

Este código itera sobre cada elemento del array frutas y los imprime en la consola, uno por línea. El bucle se ejecuta cuatro veces, una vez por cada elemento del array.

3.4.2. ¿Por qué es útil usar length en bucles?

• Control preciso: Nos permite recorrer exactamente todos los elementos del array sin exceder los límites.
• Flexibilidad: Podemos adaptar el bucle para realizar diferentes operaciones con cada elemento del array.
• Eficiencia: Es una forma eficiente de iterar sobre arrays, ya que evitamos tener que contar manualmente los elementos.

3.4.3. Otro ejemplo de length en un bucle: Calculando la suma de los elementos de un array

const numeros = [1, 2, 3, 4, 5];
let suma = 0;

for (let i = 0; i < numeros.length; i++) {
  suma += numeros[i];
}

console.log(suma); // Imprimirá 15Lenguaje del código: JavaScript (javascript)

En este ejemplo, utilizamos un bucle for para sumar todos los elementos del array numeros y almacenar el resultado en la variable suma.

RESUMEN: La propiedad length es una herramienta esencial para trabajar con arrays en JavaScript. Al utilizarla en bucles, podemos iterar sobre todos los elementos de un array de manera eficiente y realizar diversas operaciones.

3.5. Usar length para verificar si un array esta vacío:

La forma más común y directa de verificar si un array está vacío en JavaScript es comprobando si su propiedad length es igual a 0. Si length es 0, significa que el array no contiene ningún elemento y, por lo tanto, está vacío.

Ejemplo:

const miArray = []; // Array vacío

if (miArray.length === 0) {
  console.log("El array está vacío");
} else {
  console.log("El array tiene elementos");
}Lenguaje del código: JavaScript (javascript)

Explicación:

1. Creación del array vacío: En este ejemplo, creamos un array vacío llamado miArray utilizando los corchetes [].
2. Condición: La condición if (miArray.length === 0) verifica si la propiedad length del array miArray es igual a 0.
3. Resultado: Si la condición es verdadera (es decir, si el array está vacío), se imprime el mensaje «El array está vacío». De lo contrario, se imprime el mensaje «El array tiene elementos».

3.5.1. ¿Por qué funciona así?

• length: Esta propiedad devuelve el número de elementos en un array. Si el array está vacío, no hay elementos, por lo que length será 0.
• Comparación: Al comparar length con 0, estamos verificando si el array tiene algún elemento. Si la comparación es verdadera, podemos concluir que el array está vacío.

3.5.2. ¿Por qué es importante verificar si un array está vacío?

• Evitar errores: Antes de realizar operaciones en un array, es recomendable verificar si está vacío para evitar errores como intentar acceder a un índice que no existe.
• Control de flujo: Puedes utilizar esta comprobación para tomar decisiones en tu código, como ejecutar diferentes bloques de código dependiendo de si el array está vacío o no.
• Optimización: En algunos casos, puede ser más eficiente evitar realizar operaciones en un array vacío.

RESUMEN: Comprobar si un array está vacío utilizando la propiedad length es una práctica común y sencilla en JavaScript. Esta técnica te permite escribir código más robusto y evitar errores potenciales.

3.6. Usar length en arrays multidimensionales:

Cuando trabajamos con arrays multidimensionales en JS, la propiedad length nos indica la longitud del nivel más externo del array, es decir, la cantidad de elementos que contiene la primera dimensión. Sin embargo, es importante tener en cuenta que cada elemento de esta primera dimensión puede ser a su vez otro array, lo que da lugar a dimensiones adicionales.

Ejemplo:

const matriz = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matriz.length); // Imprime: 3Lenguaje del código: JavaScript (javascript)

Explicación:

• Creación de la matriz: Hemos creado una matriz de 3×3, donde cada elemento de la primera dimensión es otro array de 3 elementos.
• Acceso a length:
  • Al aplicar matriz.length, estamos obteniendo la longitud de la primera dimensión de la matriz, que en este caso es 3. Esto nos indica que la matriz tiene 3 filas.

3.6.1. ¿Por qué length solo nos da la longitud de la primera dimensión?

• Estructura anidada: Los arrays multidimensionales son estructuras anidadas, donde cada elemento puede ser a su vez otro array.
• Diferentes longitudes: Las filas de una matriz multidimensional pueden tener diferentes longitudes. Por ejemplo, podríamos tener una matriz donde la primera fila tenga 3 elementos, la segunda 4 y la tercera 2. En este caso, length siempre nos dará la longitud de la primera dimensión (3 en este ejemplo), pero las filas internas tendrán sus propias longitudes.

3.6.2. ¿Cómo obtener la longitud de las demás dimensiones?

Para obtener la longitud de las dimensiones internas, debemos acceder a los elementos correspondientes de la matriz y aplicar nuevamente la propiedad length.

Por ejemplo:

const matriz = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matriz[0].length); // Imprime: 3 (longitud de la primera fila)
console.log(matriz[1].length); // Imprime: 3 (longitud de la segunda fila)Lenguaje del código: JavaScript (javascript)

Aqui:

• matriz[0].length: Accede al primer subarray ([1, 2, 3]) y utiliza la propiedad .length para obtener el número de elementos en esa fila. En este caso, el resultado es 3.
• matriz[1].length: Accede al segundo subarray ([4, 5, 6]) y, de nuevo, utiliza .length para obtener la cantidad de elementos en esa fila. El resultado también es 3.
• Recuerda:
  • La propiedad .length mide cuántos elementos tiene un array.
  • En matrices, puedes usar matriz[fila].length para obtener la longitud de una fila específica.

3.6.3. ¿Cuándo es útil conocer la longitud de las dimensiones de una matriz?

• Iteración: Para recorrer todos los elementos de una matriz multidimensional, necesitamos conocer las dimensiones para establecer los límites de los bucles.
• Validación: Podemos verificar si una matriz tiene las dimensiones esperadas antes de realizar operaciones sobre ella.
• Manipulación: Al conocer las dimensiones, podemos realizar operaciones de modificación, eliminación o adición de elementos de manera más precisa.

3.6.4. Ejemplo de iteración sobre una matriz:

const matriz = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

for (let i = 0; i < matriz.length; i++) {
  for (let j = 0; j < matriz[i].length; j++) {
    console.log(matriz[i][j]);
  }
}Lenguaje del código: JavaScript (javascript)

Este código itera sobre todos los elementos de la matriz, imprimiendo cada uno en la consola.

RESUMEN:

• La propiedad length aplicada a un array multidimensional nos devuelve la longitud de la primera dimensión.
• Para obtener la longitud de las dimensiones internas, debemos acceder a los elementos correspondientes y aplicar length nuevamente.
• Es importante recordar que las dimensiones internas pueden tener diferentes longitudes.

4. Buenas prácticas usando length en arrays en JavaScript.

• Usa length para comprobar si un array está vacío
• No dependas únicamente de length en arrays dispersos
• Guarda el valor de length para bucles largos
• No modifiques directamente length a menos que tengas un propósito claro
• Itera con cuidado en arrays multidimensionales
• Combina length con métodos de array para claridad
• Documenta el uso de length en lógica compleja

4.1. Usa length para comprobar si un array está vacío

Si necesitas validar si un array tiene elementos, comprueba si su longitud es 0. Es claro, eficiente y estándar.

Ejemplo:

const items = [];

if (items.length === 0) {
  console.log("El array está vacío");
} else {
  console.log("El array tiene elementos");
}Lenguaje del código: JavaScript (javascript)

4.2. No dependas únicamente de length en arrays dispersos

length cuenta todos los índices hasta el más alto, pero no refleja si hay elementos en esos índices. Esto puede generar confusión con arrays dispersos.

Ejemplo de problema:

const sparseArray = [1, , 3]; // Espacio vacío en el índice 1
console.log(sparseArray.length); // Output: 3
console.log(sparseArray[1]);     // Output: undefinedLenguaje del código: JavaScript (javascript)

Solución:

Usa métodos como filter para validar los elementos:

const validElements = sparseArray.filter(element => element !== undefined);
console.log(validElements.length); // Output: 2Lenguaje del código: JavaScript (javascript)

4.3. Guarda el valor de length en variables para bucles largos

Si vas a usar length varias veces en un bucle, almacena su valor en una variable para evitar recalcularlo en cada iteración.

Ejemplo eficiente:

const numbers = [1, 2, 3, 4, 5];
const len = numbers.length; // Almacenar la longitud una vez

for (let i = 0; i < len; i++) {
  console.log(numbers[i]);
}Lenguaje del código: JavaScript (javascript)

4.4. No modifiques directamente length a menos que tengas un propósito claro

Cambiar el valor de length puede truncar o expandir (visto en puntos 3.2. y 3.3. respectivamente) un array, pero hazlo solo si realmente lo necesitas y entiendes las consecuencias.

4.5. Itera con cuidado en arrays multidimensionales

En arrays multidimensionales, length se refiere solo a la primera dimensión. Usa bucles anidados o métodos específicos para trabajar con las dimensiones internas.

4.6. Combina length con métodos de array para claridad

En lugar de realizar cálculos manuales, usa length junto con métodos nativos como push, splice, o slice para manejar los elementos del array de manera más segura.

Ejemplo:

const numbers = [1, 2, 3, 4, 5];

// Eliminar los últimos 2 elementos:
numbers.splice(-2, numbers.length - 3);

console.log(numbers); // Output: [1, 2, 3]Lenguaje del código: JavaScript (javascript)

4.7. Documenta el uso de length en lógica compleja

Si trabajas en proyectos colaborativos, incluye comentarios que expliquen por qué y cómo estás usando length, especialmente si el array es modificado dinámicamente.

Ejemplo de comentario claro:

// Almacenamos el valor de length porque el array se modificará dentro del bucle
const len = array.length;

for (let i = 0; i < len; i++) {
  process(array[i]);
}Lenguaje del código: PHP (php)

5. Preguntas frecuentes y resumen sobre array length en JS.