Array el método join() y el método concat() en JavaScript

El método join() une todos los elementos de una matriz (o un objeto similar a una matriz) en una cadena y devuelve esta cadena mientras que el método concat() se usa para unir dos o más arrays. Este método no cambia los arrays existentes, sino que devuelve un nuevo array.

Join()

El método join concatena todos los elementos del vector en un único string.

array.join([separator])

Parámetros

separador Opcional Es una cadena usada para separar cada uno de los elementos del arreglo. El separador es convertido a una cadena si es necesario. Si este se omite, los elementos del arreglo son separados con una coma (","). Si el separador es una cadena vacía todos los elementos son unidos sin ningún carácter entre ellos.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

document.write(miVar1);
document.write("<br><br><br>");
document.write(miVar2);
document.write("<br><br><br>");
document.write(miVar3);
document.write("<br><br><br>");
document.write(miVar4);
</script>
</body>
</html>

Ver ejemplo anterior

El resultado en pantalla es:

Viento,Lluvia,Fuego

Viento- Lluvia- Fuego

Viento + Lluvia + Fuego

VientoLluviaFuego

El método join concatena todos los elementos del vector en un único string.

Al método join le pasamos como parámetro el o los caracteres de separación que debe agregar entre los elementos dentro del string que se genera.

Veamos un ejemplo del funcionamiento del método join:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var vec=[10,20,30,40,50];
var cadena=vec.join('-');
document.write(cadena);
</script>

</body>
</html>

Ver ejemplo anterior

El resultado en pantalla es:

10-20-30-40-50

Como podemos observar el string cadena almacena todos los elementos del vector separados por el caracter "-".

Podemos disponer más de un caracter de separación:

var vec=[10,20,30,40,50];
var cadena=vec.join('---');
document.write(cadena); //10---20---30---40---50

Podemos llamar al método join inclusive sin parámetros, en dicho caso se agrega por defecto el caracter de la coma:

var vec=[10,20,30,40,50];
var cadena=vec.join();
document.write(cadena); //10,20,30,40,50

Concat()

El método concat() se usa para unir dos o más arrays. Este método no cambia los arrays existentes, sino que devuelve un nuevo array.

El método concat crea un nuevo array que consta de los elementos del objeto que lo llama, seguido, en orden de ingreso, por los elementos de cada parámetro (en caso de que el parámetro sea un array), o el parámetro mismo (en caso de que no sea un array). No se aplica de forma recursiva a parámetros con arreglos anidados.

El método concat no altera this el array original, ni ninguno de los que fueron ingresados como parámetros, sino que devuelve una copia superficial que contiene copias de los mismos elementos de los arrays originales combinados. Los elementos de los arrays originales son copiados en el nuevo array de la siguiente manera:

Referencias a Objetos (no el objeto real): concat copia las referencias de objetos en el nuevo array. Ambos, el array original y el nuevo refieren al mismo objeto. Es decir, si un objeto referenciado es modificado, los cambios serán visibles tanto en el array nuevo como en el antiguo.
Tipo de de datos como cadenas, números y boleanos (no objetos String, Number o Boolean objects): concat copia los valores de los strings y numeros en el nuevo array.

Sintaxis

var nuevo_array = viejo_array.concat(valor1[, valor2[, ...[, valorN]]])

El método concat crea un nuevo vector con los datos del objeto original y los datos que le enviamos como parámetro.

Veamos con un ejemplo los resultados que obtenemos con el método concat:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var vec=[10,20,30,40];
var vecnuevo=vec.concat(1,2,3);
document.write('Vector origen<br>');
document.write(vec.join()+'<br>');
document.write('Vector generado<br>');
document.write(vecnuevo.join()+'<br>');
</script>

</body>
</html>

Ver ejemplo anterior

Por pantalla tenemos el siguiente resultado:

Vector origen 10,20,30,40
Vector generado
10,20,30,40,1,2,3

El vector llamado vec almacena 4 componentes. Luego el vector que retorna el método concat es [10,20,30,40,1,2,3], el vector "vec" no se modifica al llamar al método concat. Como podemos observar los elementos que le pasamos como parámetro se almacenan al final del vector generado.

Otra variante es que podemos pasar como parámetros al metodo concat otros vectores:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var vec1=[10,20,30,40];
var vec2=[100,200,300,400];
var vecsuma=vec1.concat(vec2);
document.write('Primer vector:');
document.write(vec1.join()+'<br>');
document.write('Segundo vector:');
document.write(vec2.join()+'<br>');
document.write('vectores concatenados:');
document.write(vecsuma.join()+'<br>');
</script>

</body>
</html>

Ver ejemplo anterior

En pantalla tenemos como resultado:

Primer vector:10,20,30,40
Segundo vector:100,200,300,400
vectores concatenados:10,20,30,40,100,200,300,400

En este segundo problema tenemos dos vectores llamados vec1 y vec2. Llamamos al método concat a través del objeto vec1 y le pasamos como parámetro el vec2. El resultado es otro vector que se almacena la referencia en la variable vecsuma.

Luego mostramos los elementos de los vectores ayudándonos con la llamada del método join para generar un string con todos los elementos del vector separados por coma.