Descubre qué son los JavaScript arrays y cómo usarlos

Como cualquier otro lenguaje de programación orientado al objeto, JavaScript ofrece muchas características y objetos para el desarrollo de software. En JavaScript, casi todo es un objeto, y todos incluyen sus propios paquetes de poderosos beneficios. Por ejemplo, uno de los objetos más utilizados en JavaScript es el conocido como Array.

Este artículo abordará el concepto de JavaScript array, su sintaxis, un elemento array y cómo manipular arrays en tu software. También aprenderás cómo usarlos con ejemplos prácticos y métodos array desde el punto de vista de un hipotético juego de navegador.

Comencemos.

Con esto en mente, echemos un vistazo a la sintaxis de un JavaScript array y hablemos de las diferentes partes que lo conforman.

¿Cuál es la forma correcta de escribir un JavaScript array?

Esta pregunta tiene una respuesta que es realmente un poco ambigua. El estándar es decidir conforme a tus necesidades y mantenerte consistente con tu estilo de declaración. Dicho esto, revisemos algunos métodos de arrays de Javascript.

Video de Carlos Azaustre - Aprende JavaScript

Sintaxis de JavaScript array

Existen dos maneras distintas para declarar e inicializar un JavaScript array. La primera es crear un array utilizando el constructor Array. Este método es menos común, pero es importante que conozcas cómo funciona para crear e inicializar un array.

JavaScript Array Constructor Syntax

const nombre array = nuevo Array(elemento1, elemento2, …);

En la mayoría de los casos, los desarrolladores usan este método para crear un array nuevo cuando los valores del mismo son conocidos. Un gran ejemplo de esto sería implementar este método para crear nuevas instancias de participantes en un juego. Un desarrollador podría ofrecer este constructor con una variable con todos los datos que los jugadores ingresaron.

Vale la pena resaltar que desde que se lanzó ECMAScript6 (ES6), crear arrays se hace normalmente utilizando el tipo de variable const, porque es más confiable y consistente. De hecho, no limita tu habilidad para modificar el array. JavaScript permite la omisión de la nueva palabra clave cuando se usa el constructor de array para crear nuevos arrays. Esto quiere decir que puedes declarar uno nuevo usando la siguiente sintaxis en su lugar.

En la muestra de código de arriba, debería empezar declarando una nueva variable const, seguida por el nombre que elegiste para ella. Luego, usas el constructor Array, que es una función para inicializar un nuevo array. Después, dentro del paréntesis, añades los elementos que quieres almacenar en el array, que puede ser cualquier combinación de todos los tipos de datos en JavaScript.

JavaScript Array Literal

La JavaScript Array literal luce similar al método constructor. La diferencia más significativa radica en el uso de la notación de corchetes para crear e inicializar un nuevo array con el nombre de la variable que le asignaste.

Inicialización de Array Vacío

Finalmente, la última manera de crear un array en JavaScript es inicializar un array vacío y añadir elementos en tu programa más adelante. La sintaxis para este es bastante directa, y puede que ya la hayas adivinado.

const nombre array = [ ];

Así es: es esencialmente un array literal, pero sin los elementos añadidos. Ya que tienes esta información, revisemos lo que son los elementos array y cuáles tipos son permitidos.

Elementos JavaScript Array

Los elementos array (también conocidos como artículos array) no son otra cosa que los elementos que se almacenan dentro de un array. Normalmente, son de diferentes tipos, y como resultado, pueden utilizarse para paquetes robustos de datos en estructuras complejas.

Los elementos en un array pueden ser cualquier tipo de objeto o dato que soporte JavaScript, incluyendo cadenas a números enteros y booleanas. Los JavaScript arrays también soportan colecciones de datos como elementos array, lo que significa que un array puede tener elementos que también funcionan como array (arrays de array, por así decirlo).

Ahora que conoces los tipos de datos que un array soporta, ahondemos en cómo acceder y manipular los datos. Luego conocerás algunos ejemplos de uso de arrays para un hipotético juego de navegador.

Acceder a elementos Array

Para acceder a un elemento array necesitarás usar una notación de corchete para apuntar al índice del elemento array que deseas. Esta práctica es bastante directa, pero con la advertencia de que el índice array comienza en cero, no en uno.

const jugador = [“Artemisa”, 35, “1.60”, “06:23:00”]Jugador[0]

Esta línea de código crea un array literal con cuatro valores, luego apunta al primer elemento del array, que es el nombre Artemisa.

Método length JavaScript Array 

La discrepancia del índice puede parecer algo pequeño, pero lo cierto es que causa más errores en la programación con JavaScript de lo que te imaginas. Por ejemplo, cuando haces looping (o iteraciones) con los elementos en un array, siempre tienes que considerar la longitud del array. Esto es más fácil usando el método JavaScript array llamado length (longitud), que regresa un valor del tamaño del array.

jugador.length

Si el array tiene diez elementos, la longitud del array regresará ese valor. Sin embargo, el índice máximo del array sería uno menor que eso. Así que si tuvieras que hacer un loop a través del array hasta su final usando el método length() también necesitarías sustraer uno del valor que el método regrese.

jugador.length -1

Clasificación de JavaScript Arrays

El método sort() (clasificar) se utiliza para clasificar elementos en un array. Por ejemplo, si el array es todos los números (cadenas de clima o enteros) el método sort los organizará de acuerdo con sus valores numéricos.

jugador.sort()

La página de desarrollador de Mozilla dice que: «El orden predeterminado de sort es ascendente, creado para convertir los elementos en cadenas (strings), para después comparar sus secuencias de unidades de valores de código UTF-16». Al utilizar el método sort() puede ser impredecible si se hace de forma incorrecta. Pero, en lo general, de todas formas ofrece una manera sencilla de gestionar técnicas básicas de clasificación.

Ejemplo de JavaScript Array

A continuación, verás un ejemplo de codepen que muestra cómo se pueden crear arrays, interactuar con ellos y hasta modificarlos. En ese mismo codepen también verás un ejemplo de un array looping utilizando el método length. Este codepen también es interactivo, lo que te permitirá jugar con el código y ganar más experiencia con el tema de arrays.

See the Pen JavaScript Arrays by HubSpot (@hubspot) on CodePen.

Antes de cerrar este artículo, veamos un ejemplo de JavaScript arrays y cómo puedes usarlos. El siguiente video es básico pero te ayudará a visualizar los conceptos clave detrás de JavaScripts Array.

Video de Bluuweb

Empieza a utilizar JavaScript Arrays

Has aprendido mucho sobre JavaScript arrays, cómo funcionan y cómo usarlos en tu programación. También conociste algunas consideraciones sobre ciertos comportamientos y métodos de arrays. Finalmente, ya comprendes la sintaxis de JavaScript array y has visto ejemplos de array.

Incluso has tenido la oportunidad de jugar un poco con un ejemplo real de código que cubre los temas de este artículo. Para continuar, puedes reforzar esta información practicando con diferentes usos de arrays y distintas maneras de manipular, editar y hasta mostrar información array en el navegador.