JavaScript - Array.concat()
Tags: javascript, webcat
Published: 2020-11-07 15:49:30

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lur8by70yjg9nsmm1e5u.png)

Today I will talk about the Array.concat() method in JavaScript.

The concat() method returns a new array, build of this array joined with other arrays and/or values.

let's take a look at its syntax:

```
const newArray = oldArray.concat(optinalValues);
```
oldArray - The array we call the concat method on.
concat() - The method receives 0 or more parameters.
optionalValues - An optional value to pass to the method, it can be an array, a primitive data type, a function, or an object.

An alternative syntax:
```
const newArray = [].concat(oldArray, optionalValues);
```  
Personally, I like the alternative syntax, because it is more readable and easier for me to understand that we create a new array from all the elements of the passed parameters, and not adding new elements to the old array.

<br>

##Examples:

1) Passing Data Types: 

The method copies the data types into the new array.

* Passing a number
```
const oldArray = [1, 2, 3];
const number = 5;

const newArray = oldArray.concat(number);
// result => [1, 2, 3, 5]
```

* Passing a string
```
const oldArray = [1, 2, 3];
const string = 'Web Cat';

const newArray = oldArray.concat(string);
// result => [1, 2, 3, 'Web Cat']
```

* Passing a boolean
```
const oldArray = [1, 2, 3];
const flag = true;

const newArray = oldArray.concat(flag);
// result => [1, 2, 3, true]
```

* Passing undefined
```
const oldArray = [1, 2, 3];
const variable = undefined;

const newArray = oldArray.concat(variable);
// result => [1, 2, 3, undefined]
```

* Passing null
```
const oldArray = [1, 2, 3];
const emptyObj = null;

const newArray = oldArray.concat(emptyObj);
// result => [1, 2, 3, null]
```

<hr>

2) Passing Arrays

The method creates a new array consisting of the elements in the array on which it is called and each of the elements of the passing array.

* Passing a different array
```
const oldArray = [1, 2, 3];
const anotherArray = [4, 5, 6];

const newArray = oldArray.concat(anotherArray);
// result => [1, 2, 3, 4, 5, 6]
```

* Passing itself
```
const oldArray = [1, 2, 3];

const newArray = oldArray.concat(oldArray);
// result => [1, 2, 3, 1, 2, 3]
```

<hr>

3) Passing Structural Types

The method makes a shallow copy of structural data types into the new array. It means that if we change the original parameter, it will change it in the new array as well.

* Passing a nested array
```
const oldArray = [1, 2, 3];
const nestedArray = [4, 5, 6, [7]];

const newArray = oldArray.concat(nestedArray);
// Result => [1, 2, 3, 4, 5, 6, [7]]

nestedArray[3].push(6);
// Result => [1, 2, 3, 4, 5, 6, [7, 6]]
```

* Passing an object
```
const oldArray = [1, 2, 3];
const obj = {
  name: 'Mike',
  nickname: 'Web Cat'
};

const newArray = oldArray.concat(obj);
// result => [1, 2, 3, { name: 'Mike', nickname: 'Web Cat' }]

obj.age = 25;
// result => [1, 2, 3, { 
     age: 25, 
     name: 'Mike',
     nickname: 'Web Cat'
   }]
```

<hr>

4) Passing functions

The method takes the function and pushed it into the array as if it was a regular data type.

* Passing a function declaration 
```
const oldArray = [1, 2, 3];
function myFunc() {
	return this[0] + this[1];
}

const newArray = oldArray.concat(myFunc);
// result => [1, 2, 3, function myFunc() {
    return this[0] + this[1];
}]
```
In case we pass a function declaration to the concat() method, the function will get the context of the array.

* Passing an arrow function
```
const oldArray = [1, 2, 3];
const myFunc = x => x;

const newArray = oldArray.concat(myFunc);
// result => [1, 2, 3, x => x]
```
In case we pass an arrow function to the concat() method, the function will not get a new context.

<hr>

5) Omitting parameters

If we call the function without parameters, it will create a shallow copy of the original array.
 
* Passing no parameters
```
const oldArray = [1, 2, 3];

const newArray = oldArray.concat();
// result => [1, 2, 3]
```

<hr>

6) Passing multiple parameters

When we pass multiple parameters to the method, it makes a new array with all its elements in the same order they got passed to the method.
 
* Passing no parameters
```
const oldArray = [1, 2, 3];
const val1 = 4;
const val2 = '5';
const val3 = {
	value: 'sixth',
}
const val4 = [[7]];

const newArray = oldArray.concat(val1, val2, val3, val4);
// result => [1, 2, 3, 4, "5", {
  value: "sixth"
}, [7]]
```

This is only one part of a series of posts about the different methods in JavaScript.
Stay tuned for more posts weekly :D