DEV Community

G Gokul
G Gokul

Posted on

BASIC ARRAY METHODS IN JAVASCRIPT

Basic Array Methods

JavaScript Array length:

  • the length property returns the length (size) of an array.
  • The length property can also be used to set the length of an array.

Example:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.length);
fruits.length = 2;
console.log(fruits)

Output:
4
[ 'Banana', 'Orange' ]

JavaScript Array toString():

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

Example:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.toString());

Output:
Banana,Orange,Apple,Mango

JavaScript Array at():

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

Example:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.at(2));

Output:
Apple

JavaScript Array join():

  • The join() method also joins all array elements into a string.
  • It behaves just like toString(), but in addition you can specify the separator.

Example:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.join("*"));

Output:
Banana*Orange*Apple*Mango

JavaScript Array pop():

  • The pop() method removes the last element from an array.

Example:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.pop());
console.log(fruits)

Output:
Mango
[ 'Banana', 'Orange', 'Apple' ]

JavaScript Array push()

  • The push() method adds a new element to an array (at the end).

Example:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.push("Kiwi"));
console.log(fruits)

Output:
5
[ 'Banana', 'Orange', 'Apple', 'Mango', 'Kiwi' ]

JavaScript 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".

Example:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.shift());
console.log(fruits)

Output:
Banana
[ 'Orange', 'Apple', 'Mango' ]

JavaScript 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.

Example:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.unshift("Lemon"));
console.log(fruits)

Output:
5
[ 'Lemon', 'Banana', 'Orange', 'Apple', 'Mango' ]

Array.isArray()
Example:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(Array.isArray(fruits));

Output:
True

JavaScript Array delete()

  • Using delete() leaves undefined holes in the array.
  • Use pop() or shift() instead.

Example:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(delete fruits[0]);
console.log(fruits)

Output:
true
[ <1 empty item>, 'Orange', 'Apple', 'Mango' ]

JavaScript 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.

Example:
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
console.log(myChildren)

Output:
['Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus' ]

Array copyWithin()

  • The copyWithin() method copies array elements to another position in an array.
  • The copyWithin() method overwrites the existing values.
  • The copyWithin() method does not add items to the array.
  • The copyWithin() method does not change the length of the array.

Example:
const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
console.log(fruits.copyWithin(2, 0, 2));

Output:
['Banana', 'Orange', 'Banana', 'Orange', 'Kiwi' ]

JavaScript Array flat()

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

Example:
const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();
console.log(newArr)

Output:
[1, 2, 3, 4, 5, 6 ]

JavaScript Array flatMap()

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

Example:
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap(x => [x, x * 10]);
console.log(newArr)

Output:
[
1, 10, 2, 20, 3,
30, 4, 40, 5, 50,
6, 60
]

JavaScript Array splice()

  • The splice() method can be used to add new items to an array.
  • The first parameter (2) defines the position where new elements should be added (spliced in).
  • The second parameter (0) defines how many elements should be removed.
  • The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be added.

Example:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.splice(2, 0, "Lemon", "Kiwi"));
console.log(fruits)

Output:
[]
['Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango' ]

JavaScript Array toSpliced()

  • The difference between the new toSpliced() method and the old splice() method is that the new method creates a new array, keeping the original array unchanged, while the old method altered the original array.

*Example:"
const months = ["Jan", "Feb", "Mar", "Apr"];
const spliced = months.toSpliced(0, 2);
console.log(spliced)

Output:
['Mar', 'Apr' ]

JavaScript 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.

Example:
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
console.log(citrus)
console.log(fruits)

Output:
[ 'Orange', 'Lemon' ]
[ 'Banana', 'Orange', 'Lemon', 'Apple', 'Mango' ]

Top comments (0)