DEV Community

RADHAKRISHNAN S
RADHAKRISHNAN S

Posted on

ARRAY BASIC METHODS

Array length

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

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

let size = fruits.length;
Console.log(size);
Enter fullscreen mode Exit fullscreen mode

OUTPUT:4

Array toString()

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


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

let myList = fruits.toString();
Console.log(myList);
Enter fullscreen mode Exit fullscreen mode

OUTPUT:Banana,Orange,Apple,Mango

Array at()

ES2022 introduced the array method at():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);
Console.log(fruit);
Enter fullscreen mode Exit fullscreen mode

OUTPUT:Apple

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:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit=fruits.join("*");
console.log(fruit);
Enter fullscreen mode Exit fullscreen mode

OUTPUT:Banana*Orange*Apple*Mango

Array pop()

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

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
console.log(fruits);
Enter fullscreen mode Exit fullscreen mode

OUTPUT:[ 'Banana', 'Orange', 'Apple' ]

Array push()

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

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
console.log(fruits);
Enter fullscreen mode Exit fullscreen mode

OUTPUT:[ 'Banana', 'Orange', 'Apple', 'Mango', 'Kiwi' ]

Array shift()

The shift() method removes the first array element and "shifts" all other elements to a lower index.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
console.log(fruits);
Enter fullscreen mode Exit fullscreen mode

OUTPUT:[ 'Orange', 'Apple', 'Mango' ]

Array unshift()

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

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

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

Array.isArray()

ECMAScript 5 (JavaScript 2009) added the new method Array.isArray() to JavaScript.

The Array.isArray() method is used to check whether a value is an array or not.

let fruits = ["Apple", "Banana", "Mango"];

console.log(Array.isArray(fruits));
Enter fullscreen mode Exit fullscreen mode

OUTPUT:true

Array delete()

In JavaScript, there is no delete() array method. Instead, there is a delete operator that can be used to delete an array element.

let fruits = ["Apple", "Banana", "Mango", "Orange"];
delete fruits[1];
console.log(fruits);
Enter fullscreen mode Exit fullscreen mode

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

Array concat()

The concat() method creates a new array by merging (concatenating) existing arrays:

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);
console.log(myChildren);
Enter fullscreen mode Exit fullscreen mode

OUTPUT:[
'Cecilie', 'Lone',
'Emil', 'Tobias',
'Linus', 'Robin',
'Morgan'
]

Array copyWithin()

The copyWithin() method copies array elements to another position in an array:

Copy to index 2, all elements from index 0:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0)
console.log(fruits);
Enter fullscreen mode Exit fullscreen mode

OUTPUT:[ 'Banana', 'Orange', 'Banana', 'Orange' ]

Array flat()

ES2019 Introduced the Array flat() method.

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();
console.log(newArr);
Enter fullscreen mode Exit fullscreen mode

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

Array flatMap()

ES2019 added the Array flatMap() method to JavaScript.

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]); 
console.log(newArr);
Enter fullscreen mode Exit fullscreen mode

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

Array splice()

The splice() method can be used to add new items to an array:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits);
Enter fullscreen mode Exit fullscreen mode

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

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.

Array toSpliced()

ES2023 added the Array toSpliced() method as a safe way to splice an array without altering the original array.

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.

const months = ["Jan", "Feb", "Mar", "Apr"];
const spliced = months.toSpliced(0, 1);
console.log(spliced);
Enter fullscreen mode Exit fullscreen mode

OUTPUT:[ 'Feb', 'Mar', 'Apr' ]

Array slice()

The slice() method slices out a piece of an array into a new array.

The slice() method can take two arguments like slice(1, 3).

The method then selects elements from the start argument, and up to (but not including) the end argument.

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3); 
console.log(citrus);
Enter fullscreen mode Exit fullscreen mode

OUTPUT:[ 'Orange', 'Lemon' ]

Top comments (0)