Artigos JavaScript JavaScript Concat: Concatenando arrays e strings
Guia do artigo:

Possuir maneiras de concatenação, tanto de strings quanto de arrays, é uma característica comum a qualquer linguagem de programação. Em JavaScript, isso pode ser feito por meio da função concat(), que tem como propósito unir (concatenar) objetos do tipo String ou Array e sobre a qual exploraremos nesse artigo.

Javascript Concat em strings

No caso da função Javascript concat() em uma string, ela combina o conteúdo de duas ou mais strings e tem como resultado uma nova sequência de caracteres contendo todos os valores passados como parâmetro. Essa concatenação ocorre na ordem em que os parâmetros são passados. A assinatura da função javascript concat() é a seguinte:


str.concat(string1, string2[, ..., stringN])

Quando utilizamos esse método, o primeiro parâmetro é concatenado ao valor original (objeto str a partir do qual o método é invocado). O segundo parâmetro é, então, concatenado ao resultado da operação anterior e assim por diante. Vejamos um exemplo:


var a = "Meu nome é ";
var b = "Tiago!";
var c = a.concat(b);

Nesse exemplo nós concatenamos duas strings. Perceba que o resultado da concatenação é uma nova string, não alterando a string original, como vemos na Figura 1.

Resultado da concatenação de strings
Figura 1. Resultado da concatenação de strings

Quem já trabalha com JavaScript há algum tempo sabe que há outras maneiras de concatenar strings. Uma delas é utilizando o operador +. Com essa opção, o código anterior teria o mesmo resultado se fosse escrito da seguinte forma:


var a = "Meu nome é ";
var b = "Tiago!";
var c = a + b;

A diferença, nesse caso, diz respeito à performance, pois o operador + oferece melhor desempenho.

Javascript Concat em arrays

A função Javascript concat() em um array cria um novo vetor, unindo os elementos que lhe foram passados por parâmetro. Assim como o concat() para strings, essa função não altera o array original ou os argumentos passados como parâmetro. Vejamos a sua assinatura:


array.concat(valor1, valor2, ..., valorN)

O vetor gerado conterá, inicialmente, o valor do array a partir do qual o método foi chamado, e a ele serão adicionados os elementos dos vetores passados como parâmetro, na ordem em que forem informados. O código abaixo apresenta um exemplo:


var array1 = ["d", "e", "v"];
var array2 = [1, 2, 3];
var array3 = array1.concat(array2);

Na Figura 2 temos a impressão dos três vetores: os dois originais e aquele que foi gerado pela concatenação.

Resultado da concatenação de vetores
Figura 2 . Resultado da concatenação de vetores

Concatenando arrays e objetos

Usando o concat() também é possível unir arrays e objetos. Nesse caso, a função copia a referência desses objetos para o novo array. Isso significa que o array resultante, assim como o objeto passado por parâmetro, apontam para o mesmo local. Logo, se houver alguma alteração no objeto original, a mesma irá se refletir no array final gerado pela concatenaçção. Na Listagem 1 podemos ver essa situação.

Listagem 1.Concatenação de arrays e objetos

var array1 = ["d", "e", "v"];
var object = {a:10};
var array2 = array1.concat(object);
console.log('a:'+array2[3].a);
 
object.a = 99;
console.log('a:'+array2[3].a);
 
array2[3].a = 10;
console.log('a:'+object.a);
console.log('a:'+array2[3].a);
  • Linha 3: Nessa linha, concatenamos ao array (array1) um objeto (object). Ao fazer isso, uma cópia da referência desse objeto será feita para o array resultante (array2);
  • Linhas 6: Quando mudamos o valor dessa propriedade no objeto original, podemos perceber que esse valor também foi refletido no objeto que está dentro do array.

O resultado da execução desse código pode ser visto na Figura 3.

Concatenação de vetores e objetos
Figura 3. Concatenação de vetores e objetos

Esse exemplo mostra claramente que quando trabalhamos com objetos, temos concatenações com cópias por referência e não por valor, o que resulta na alteração do valor original. Portanto, um cuidado extra, ao lidar com essa opção, é indicado.

Esse comportamento (cópia por referência), no entanto, não é o mesmo se concatenarmos um array com strings ou números. Nesse caso, as strings e os números são tratados por valor. Assim, ao unirmos a um vetor uma string ou um número, a função criará uma cópia local desses argumentos. Com isso, alterações nas variáveis originais não afetarão o vetor resultante.

A linguagem JavaScript nos fornece várias ferramentas para melhorar a legibilidade de nosso código, e, às vezes, há várias maneiras de fazer uma mesma operação. O importante, então, é sempre estarmos atentos às particularidades da linguagem e procurar utilizá-las de modo que nosso código seja limpo, eficiente e fácil de manter.

Confira também

Curso de Introdução ao JavaScript

Curso de Introdução ao JavaScript

Curso
O que é jQuery?

O que é jQuery?

Curso
O que é TypeScript?

O que é TypeScript?

Curso