JavaScript Basic Array Methods

1)Array length:

• The length property returns the length (size) of an array

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;

-The length property can also be used to set the length of an array:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length = 2;

2)Array toString()

• The toString() method returns the elements of an array as a comma separated string.
• Every JavaScript object has a toString() method.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let myList = fruits.toString();
output:
The toString() method returns the elements of an array as a comma separated string:
Banana,Orange,Apple,Mango

3)Array at()

• The at() method returns an indexed element from an array.
• The at() method returns the same as []

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);
output:
The at() method returns an indexed element from an array:
Apple

4)Array join()

• The join() method also joins all array elements into a string.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
output:
The join() method joins array elements into a string.
It this example we have used " * " as a separator between the elements:
Banana * Orange * Apple * Mango

5)Array pop() and Array push()

• The pop() method removes the last element from an array
• The push() method adds a new element to an array (at the end). -The push() method returns the new array length.

6)Array shift()

• The shift() method removes the first array element and "shifts" all other elements to a lower index.
• The shift() method returns the value that was "shifted out".

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
output:
The shift() method removes the first element of an array (and "shifts" the other elements to the left):

Banana,Orange,Apple,Mango

Orange,Apple,Mango

7)Array unshift()

• The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements
• The unshift() method returns the new array length

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
output:
The unshift() method adds new elements to the beginning of an array:
Banana,Orange,Apple,Mango
Lemon,Banana,Orange,Apple,Mango

8)Array concat()

• The concat() method creates a new array by merging (concatenating) existing arrays
• The concat() method does not change the existing arrays. It always returns a new array.
• The concat() method can take any number of array arguments.
• The concat() method can also take strings as arguments.

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];

const myChildren = myGirls.concat(myBoys);
output:
The concat() method merges (concatenates) arrays:

Cecilie,Lone,Emil,Tobias,Linus

Example (Merging Three Arrays)

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

Example (Merging an Array with Values)

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");

9)Array copyWithin()

• The copyWithin() method copies array elements to another position in an array.
• The copyWithin() method overwrites the existing values.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.copyWithin(2,0);
output:
copyWithin() copies array elements to another position in an array, overwriting existing values:
Copy to index 2, all elements from index 0:
Banana,Orange,Banana,Orange

10)Array flat()

• The flat() method creates a new array with sub-array elements concatenated to a specified depth.

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();
output:
The flat() Method
1,2,3,4,5,6

11)Array flatMap()

• The flatMap() method first maps all elements of an array and then creates a new array by flattening the array.

const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap(x => [x, x * 10]);
output:
The flatMap() Method
1,10,2,20,3,30,4,40,5,50,6,60

12)Array slice()

• The slice() method slices out a piece of an array into a new array.
• The slice() method creates a new array.
• The slice() method does not remove any elements from the source array.

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
output:
Slice out a part of an array starting from array element 1 ("Orange"):
Banana,Orange,Lemon,Apple,Mango
Orange,Lemon,Apple,Mango