Programando en JavaScript, es habitual que necesitemos saber si un arreglo está vacío o no. Para eso podemos utilizar la propiedad length

Esta propiedad establece o devuelve la cantidad de elementos en un arreglo. Por lo tanto nos permite saber si está vacío o no. Un arreglo vacío tendrá 0 elementos dentro.

Veamos algunos ejemplos.

Ejemplos de la sintaxis al utilizar .length

Const miArreglo = [‘Free’, ‘Code’, ‘Camp’];

Aquí hemos creado una variable y asignamos como valor un arreglo que contiene tres elementos.

Utilizando la propiedad length podemos comprobar esta cantidad:

miArreglo.length
Como toda propiedad en un objeto Javascript, vamos a llamarla utilizando dot notation, es decir: nombre de la variable + punto + nombre de la propiedad. 

Esto devuelve  3  porque hay tres elementos dentro del arreglo.

Ahora veamos tres alternativas a la hora de usar la propiedad length:

Ejemplo 1

Primero creamos un arreglo sin elementos:

const arr = [];

Ahora vamos a comprobar si el arreglo está vacío llamando a la propiedad length

arr.length

Esto devuelve 0 porque no hay elementos dentro de arr

Ejemplo 2

También podemos ser aún más específicos y comprobar si el valor de length es igual a cero:

if (arr.length === 0) { console.log("Está vacío!") }

Si nuestro arreglo está vacío, el mensaje se registrará en la consola. Si el arreglo contiene al menos un elemento, el código dentro del bloque condicional if no se ejecutará.

Veamos una tercer forma de utilizar la propiedad length.

Ejemplo 3

Combinando el uso de la propiedad length con el operador lógico "not" de Javascript, el símbolo !, podemos preguntar si un arreglo está vacío.

El operador ! niega la expresión que precede. Es decir que podemos utilizarlo para reemplazar el resultado de un dato booleano por su opuesto. Y por es en este caso podemos devolver true si el arreglo está vacío.

Para este ejemplo podemos a usar la consola Javascript. En Chrome podemos encontrarla en Inpsect -> Console.

Primero, vamos a crear un arreglo sin elementos:

const arr = []
// undefined

A continuación, vamos a usar el operador ! (not) junto a la propiedad length para comprobar que está vacío:

const arr = []
// undefined

!arr.length
// true

Sin usar el operador "not" arr.length devolvería 0 que en Javascript es equivalente a false. Al utilizar el operador ! lo que ocurre primero es que Javascript convierte a  0  en un valor booleano, por lo tanto 0  se convierte en su equivalente false para que luego el operador pueda transformarlo en su opuesto, es decir true.

A continuación vamos a preguntar si el arreglo está vacío, utilizando un condicional if para imprimir un mensaje con la respuesta:

const arr = []
// undefined

!arr.length
// true

if(!arr.length) {console.log("El array está vacío!")}
// El arreglo está vacío!

Ya que estamos trabajando con arreglos, veamos también cómo comprobar que un dato es en efecto del tipo arreglos.

Cómo usar el método Array.isArray()

Supongamos que recibimos un dato y esperamos que sea un arreglo, por ejemplo  ["free", "code", "camp"] pero en realidad recibimos esa misma información transformada en una cadena de texto "free, code, camp"

En este caso, el valor de length sera diferente para cada tipo de dato:

const miArreglo = [‘Free’, ‘Code’, ‘Camp’];
miArreglo.length; // 3

const myString = ‘Free, Code, Camp’;
myString.length; // 16

Este error es mas común de lo que podría parecer, por eso es una buena idea utilizar el método Array.isArray() para asegurarnos de que estamos trabajando con el tipo esperado. Este método determina si el dato que le estamos pasando es realmente un arreglo y en ese caso, devuelve true.

Vamos a agregarlo a nuestro ejemplo anterior:

const arr = []
// undefined

!arr.length
// true

if(Array.isArray(arr) && !arr.length) {console.log("Es un arreglo y está vacío!")}
// Es un arreglo y está vacío!

En resumen

En este artículo aprendimos como usar la propiedad length en JavaScript, siguiendo distintas alternativas para comprobar si un arreglo está vacío o no. Esta propiedad length devuelve el número de elementos que un arreglo contiene.

También aprendimos que es recomendable usar el método Array.isArray antes de consultar la propiedad length de un dato, para asegurarnos que es del tipo arreglo como esperamos.

Traducido del artículo de Madison Kanna - How to Check if a JavaScript Array is Empty or Not with .length