Cómo imprimir los elementos de un array en JavaScript

Para imprimir elementos de un array en JavaScript, puedes escribir cada valor en una línea, mostrar el array completo o crear una cadena con formato. Usa un bucle indexado o forEach para mostrar los valores línea por línea, console.log() para inspeccionar el array y map() junto con join() para añadir números o elegir un separador. Para seleccionar valores, usa slice(); para combinar arrays, usa concat(). Los métodos pop() y shift() también devuelven valores, pero los eliminan del array original.

Usar bucles y forEach para imprimir un elemento por línea

Un bucle for indexado permite acceder directamente a cada valor y a su posición. Un bucle while puede hacer lo mismo si inicializas un índice antes del bucle y lo incrementas en cada iteración. Para realizar una acción sencilla con cada valor, forEach acepta una función callback que recibe el elemento actual y, de forma opcional, su índice. Estos métodos muestran un valor en cada llamada a console.log():

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
names.forEach((name) => console.log(name));

mehvish
tahir
aftab
martell

Elige un bucle indexado si la lógica posterior necesita el índice o si quieres controlar la iteración. forEach resulta más conciso cuando solo necesitas procesar cada elemento del array. Devuelve undefined; no crea un array transformado.

Imprimir el array completo con console.log()

Pasa el propio array a console.log() para inspeccionar todos sus elementos en una sola llamada. Esto resulta útil al depurar, pero lo que ves es la representación del array en la consola del entorno de ejecución; los navegadores y Node.js pueden mostrarlo de distintas maneras. Si otra parte del programa necesita una cadena predecible, convierte los valores con join().

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names);

[ 'mehvish', 'tahir', 'aftab', 'martell' ]

console.log() es un método de console, mientras que forEach, map y los métodos de conversión que aparecen a continuación son métodos de array. La representación de la consola no es un formato serializado para archivos ni para datos de red.

Dar formato o numerar elementos como una cadena

Usa map() para crear un array nuevo de etiquetas y, después, join() para unirlas en una sola cadena. La función callback recibe el elemento y su índice, que empieza en cero; al sumarle uno, obtienes una numeración más legible. map() no modifica el array original y join() devuelve una cadena.

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
const numberedNames = names.map((name, index) => `${index + 1}. ${name}`);
console.log(numberedNames.join(' | '));

1. mehvish | 2. tahir | 3. aftab | 4. martell

Para obtener texto separado por comas, el método toString() convierte un array en una cadena. Coloca comas entre los elementos y no permite elegir otro separador. El método join() sí permite elegirlo, por ejemplo, un espacio o una barra vertical. Ambos devuelven cadenas; por sí solos no las imprimen. Pasa el resultado a console.log() para mostrarlo. Las páginas de referencia enlazadas están en inglés.

Imprimir elementos seleccionados con slice()

Llama a slice(start, end) para crear una copia superficial de una parte del array y, después, imprime el array que devuelve. El índice inicial se incluye y el índice final se excluye, así que slice(0, 2) selecciona los dos primeros elementos. slice() no elimina valores del array original.

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names.slice(0, 2));

[ 'mehvish', 'tahir' ]

Los valores seleccionados conservan su orden original. Para consultar el método de cadenas que usa argumentos de índice similares, visita la referencia de slice(); en este caso, el objeto sobre el que se llama el método es un array. La página de referencia está en inglés.

Combinar arrays con concat()

Usa concat() para crear un array nuevo con los elementos del array original seguidos de los del array proporcionado. Puedes imprimir el resultado directamente para inspeccionarlo o llamar a join() si quieres obtener una cadena con un separador elegido. Ninguno de los dos arrays de entrada se modifica.

const fruitsArrayOne = ['apple', 'banana', 'grapes'];
const fruitsArrayTwo = ['mango', 'water-melon'];
const combined = fruitsArrayOne.concat(fruitsArrayTwo);
console.log(combined.join(', '));

apple, banana, grapes, mango, water-melon

El orden importa: en el resultado, los elementos del array situado antes de .concat() aparecen primero. El método también acepta valores individuales u otros arrays como argumentos.

Imprimir y eliminar un elemento de un extremo

Usa pop() para obtener y eliminar el último elemento, o shift() para obtener y eliminar el primero. Cada método modifica el array original y devuelve el valor eliminado, que puedes pasar a console.log(). Úsalos solo si quieres modificar el array; si debe permanecer intacto, elige slice() o lee uno de sus índices.

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
const lastName = names.pop();
console.log(lastName);
console.log(names.join(', '));

martell
mehvish, tahir, aftab

pop() y shift() son métodos de array, no operaciones de cadena. La primera llamada imprime el valor que estaba al final; la línea siguiente muestra el array restante. Para inspeccionar el primer elemento y eliminarlo, sustituye pop() por shift().