concat

Como usar o concat do Javascript

Introdução

O concat é um método utilizado para fazer a junção de duas partes e após essa junção ele retorna uma nova.

Este método no Javascript pode ser utilizado para Strings ou em Arrays, o comando é igual, para os dois tipos de dados.

str.concat(string2 [, ...stringN]) //sintaxe com string
arr.concat(valor1, valor2, ..., valorN) //sintaxe com array

O método não altera nenhum dos dados passados por parâmetro, ele somente pega os valores que foram passados por parâmetro e retorna um novo valor com a união de todos os parâmetros.

Concatenar string

Um exemplo onde pode ser utilizado é para concatenar um título ao nome de uma pessoa, por exemplo um médico, que tem o nome de João, pode-se utilizar o concat para deixar Dr. João.

let titulo = "Dr. ";
let nome = "João da Silva";
let nome_completo = titulo.concat(nome);
console.log(nome_completo);

E o resultado desse código é:

concat

Em strings além desse método, é possível utilizar os Operadores de Atribuição que podem ter uma performance maior.

Concatenar array

Para fazer a junção de dados em arrays, há algumas formas, em casos onde se deseja somente juntar dois arrays distintos esse método funciona bem.

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let array3 = array1.concat(array2);
console.log(array3);
concat

O array que chama o método concat, sempre ficará primeiro na junção, caso você queira que o segundo array, fique com os dados na frente do segundo, ai precisa inverter a ordem dessa forma:

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let array3 = array2.concat(array1);
console.log(array3);
concat

Outro caso onde pode ser utilizado é para clonar os dados de um array para o outro. Essa é uma função muito útil, normalmente é utilizada nos sistemas para não mexer nos dados originais de um array, então clona para outro.

let array = ['a', 'b', 'c'];
let cloneArray = array.concat();
console.log(cloneArray);
concat

Este método também pode ser utilizado em arrays de string normalmente, ele irá fazer a junção como no array de números.

Código fonte

Além do botão, para notificações é muito comum colocar em ícones de sino.

Todo o código fonte dos exemplos mostrados estão no meu CodeSandbox

Para ver outros canais onde o posto conteúdo, meu Github e também cursos, veja os Links do Programando Soluções.

Vídeo sobre o assunto

Caso queira, gravei um vídeo explicando sobre o concat:

Conclusão

O concat é uma função que pode ser útil no dia a dia, para resolver algum determinado problema com uma lógica que precise de junção de dados, além dele, há outras formas de resolver esses problemas, mas ele pode ser uma boa alternativa. Até o próximo post 🙂

Referências

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/concat

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Expressions_and_Operators

Este conteúdo te ajudou de alguma forma?