JavaScript - Array.concat()

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.

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]

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]

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'
   }]

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.

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]

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