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.
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.
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.
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.
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.
