DEV Community

Cover image for concat arrays in javascript
Shubham Tiwari
Shubham Tiwari

Posted on • Updated on

concat arrays in javascript

#javascript #tutorial #webdev #beginners

Hello guys today i will show you how to use inbuilt concat array method in javascript.

What is concat method?

Concat is used to merge two or more arrays and it always returns a new array instead of modifying the original arrays.

Example - 1 

const array1 = [1,2,3,4,5,6];
const array2 = ["A","B","C","D"];

const array1ToArray2 = array1.concat(array2)
const array2ToArray1 = array2.concat(array1)

console.log(array1ToArray2)
console.log(array2ToArray1)
Enter fullscreen mode Exit fullscreen mode

Output - 

[
  1, 2,   3,   4,   5,
  6, 'A', 'B', 'C', 'D'
]
[
  'A', 'B', 'C', 'D', 1,
  2,   3,   4,   5,   6
]
Enter fullscreen mode Exit fullscreen mode
  • As you can see we have merged two arrays, one in which we have merged array1 to array2 and second in which we have merged array2 in array1.

Example 2 - 

const array1 = [1,2,3,4,5,6];
const array2d = [[1,2],[3,4],[[5,6],[7,8]]];

const array1To2dArray = array1.concat(array2d)

console.log(array1To2dArray);
Enter fullscreen mode Exit fullscreen mode

Output - 

[ 1, 2, 3, 4, 5, 6, [ 1, 2 ], [ 3, 4 ], [ [ 5, 6 ], [ 7, 8 ] ] ]
Enter fullscreen mode Exit fullscreen mode
  • We have merged array1 with a 2-d array.

Example 3 - 

const array1 = [1,2,3,4,5,6];

const separateConcatening = array1.concat(7,8,9,"E","F",true,false,null,undefined,
[10,11,"G","H"],{name:"shubham",age:21},12.967)

console.log(separateConcatening)
Enter fullscreen mode Exit fullscreen mode

Output- 

[1,2,3,4,5,6,7,8,9,'E','F',true,false,null,undefined,
  10,11,'G','H',{ name: 'shubham', age: 21 },12.967
]
Enter fullscreen mode Exit fullscreen mode
  • Here we have concated array1 with seprate items of different data type like strings, numbers float, boolean,null,undefined,array,object.

Example - 4 

const array1 = [1,2,3,4,5,6];
const array2 = ["A","B","C","D"];
const array2d = [[1,2],[3,4],[[5,6],[7,8]]];

const concatArray = (...args) => {
  return args.flat(Infinity)
}

console.log(concatArray([1,2,3,4],[5,6,7,8],array1,array2,array2d))
Enter fullscreen mode Exit fullscreen mode

Output - 

[
  1,   2,   3, 4, 5, 6, 7,   8,
  1,   2,   3, 4, 5, 6, 'A', 'B',
  'C', 'D', 1, 2, 3, 4, 5,   6,
  7,   8
]
Enter fullscreen mode Exit fullscreen mode
  • We have created an arrow function which accepts an argument as rest parameter so that we can pass any number of arrays to it.
  • Then using the array flat() method we have flatten the those array which are 2-dimensional and the returned result will be a 1-d array.

Example - 5 

const array1 = [1,2,3,4,5,6];

const array1ToArray1 = array1.concat(array1)

console.log(array1ToArray1)
Enter fullscreen mode Exit fullscreen mode

Output - 

[
  1, 2, 3, 4, 5,
  6, 1, 2, 3, 4,
  5, 6
]
Enter fullscreen mode Exit fullscreen mode
  • Here we have merged array1 with itself.

Example - 6 

const array1 = [1,2,3,4,5,6];
const array2 = ["A","B","C","D"];
const array2d = [[1,2],[3,4],[[5,6],[7,8]]];

const array1ToMultiple = array1.concat(array1,array2,array2d)
console.log(array1ToMultiple)
Enter fullscreen mode Exit fullscreen mode

Output - 

[1,2,3,4,5,6,1,2,3,4,5,6,'A', 'B', 'C', 'D',[ 1, 2 ],
  [ 3, 4 ],
  [ [ 5, 6 ], [ 7, 8 ] ]]
Enter fullscreen mode Exit fullscreen mode
  • We can also merge multiple arrays by passing them inside concat method.

THANK YOU FOR CHECKING THIS POST

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/text-animation-in-css-16j9

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Top comments (3)

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 •

Nice post! 😁

Contributing to add more to the list:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr = [...arr1, ...arr2]; // [ 1, 2, 3, 4, 5, 6]

// You can also use concat like this:
arr1.concat([...arr2]); // [ 1, 2, 3, 4, 5, 6]
Enter fullscreen mode Exit fullscreen mode

Best regards

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari •

Thanks for this help like you always did 😉

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 •

np! :)

Read next

shilleh profile image

How to Connect MPU9250 and Raspberry Pi (Part 2 - Calibration)

Shilleh -

facubotta profile image

Meta Data in React

Facundo Botta -

pavanbelagatti profile image

This is How You Build AI Apps Using the RAG Framework in 5 Minutes!

Pavan Belagatti -

pragativerma18 profile image

The Complete Guide to Logging in Django

Pragati Verma -