DEV Community

subash
subash

Posted on

JavaScript Basic Array Methods Explained for Beginners (Complete Guide)

What are the Array Methods?

Array methods are built-in functions in JavaScript used to perform operations on arrays.

  1. Array length
  2. Array toString()
  3. Array at()
  4. Array join()
  5. Array pop()
  6. Array push()
  7. Array shift()
  8. Array unshift()
  9. Array isArray() 10.Array delete() 11.Array concat() 12.Array copyWithin() 13.Array flat() 14.Array slice() 15.Array splice() 16.Array toSpliced()

1.Array length;

length is mention the count of element in array

EXAMPLE:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length = 2;
document.getElementById("demo").innerHTML = fruits;

OUTPUT : Banana,Orange

EXPLANATION;
In this case fruits.length = 2 is determine how many element will show in output from the first element.

EXAMPLE2;

const fruits = ["Banana", "Orange", "Apple", "Mango"]; let size = fruits.length; document.getElementById("demo").innerHTML = size;

OUTPUT - 4

EXPLANATION;

fruits.length is determine the count of the element in array.

EXAMPLE3;

<!DOCTYPE html>

JavaScript Arrays

Bracket Indexing

Array elements are accessed using their index number:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;

OUTPUT -- Kiwi,Orange,Apple,Mango

EXAMPLE4

<!DOCTYPE html>

JavaScript Arrays

The length Property

The length property provides an easy way to append new elements to an array without using the push() method:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[fruits.length] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;

OUTPUT - Banana,Orange,Apple,Mango,Kiwi

2.Array toString()

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

let myList = fruits.toString();
console.log(typeof myList)
console.log(typeof fruits)

OUTPUT - string
object

3.Array at()

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

OUTPUT - Apple
["Banana", "Orange", "Apple", "Mango"];

This for if want print any one of in array then we use this methods

or

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

  1. Array join();
const fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits.join(" * ");

OUTPUT - Banana*Orange*Apple*Mango

  1. Array pop()
const fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo1").innerHTML = fruits.pop(); document.getElementById("demo2").innerHTML = fruits;

OUTPUT - Mango
Banana,Orange,Apple

6.Array push()

JavaScript Arrays

The push() Method

The push() method returns the new array length:

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

document.getElementById("demo1").innerHTML = fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;

OUTPUT - 5
Banana,Orange,Apple,Mango,kiwi

7.Array shift()

<!DOCTYPE html>

JavaScript Arrays

The shift() Method

The shift() method returns the element that was shifted out.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.shift();
document.getElementById("demo2").innerHTML = fruits;

OUTPUT - Banana
Orange,Apple,Mango

8.Array unshift()

<!DOCTYPE html>

JavaScript Arrays

The unshift() Method

The unshift() method returns the length of the new array:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;

OUTPUT - 5
Lemon,Banana,Orange,Apple,Mango

9.Array.isArray()

<!DOCTYPE html>

JavaScript Arrays

The isArray() Method

const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = Array.isArray(fruits);

OUTPUT -- true

10.Array delete()

Warning !

Using delete() leaves undefined holes in the array.

Use pop() or shift() instead.

<!DOCTYPE html>

JavaScript Arrays

The delete Method

Deleting elements leaves undefined holes in an array:

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

document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];

delete fruits[0];

document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];

OUTPUT -- The first fruit is: Banana
The first fruit is: undefined

11.JavaScript Array concat()

<!DOCTYPE html>

JavaScript Arrays

The concat() Method

The concat() method merges (concatenates) arrays:

const array1 = ["Cecilie", "Lone"];
const array2 = ["Emil", "Tobias", "Linus"];
const array3 = ["Robin", "Morgan"];

const myChildren = array1.concat(array2, array3);

document.getElementById("demo").innerHTML = myChildren;

OUTPUT -- Cecilie,Lone,Emil,Tobias,Linus,Robin,Morgan

EXAMPLE2;
<!DOCTYPE html>

JavaScript Arrays

The concat() Method

The concat() method can merge string values to arrays:

const myArray = ["Emil", "Tobias", "Linus"];
const myChildren = myArray.concat("Peter");
document.getElementById("demo").innerHTML = myChildren;

OUPUT -- Emil,Tobias,Linus,Peter

12.Array copyWithin()

<!DOCTYPE html>

JavaScript Arrays

The copyWithin() Method

copyWithin() copies array elements to another position in an array, overwriting existing values:

Copy to index 2, all elements from index 0:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.copyWithin(2,0);

OUTPUT - Banana,Orange,Banana,Orange

fruits.copyWithin(2,0)
In this case what was happened is first print first two element, because that only mention then the element start again in 0 index as we mentioned, but the array length is will not change.

EXAMPLE2:

<!DOCTYPE html>

JavaScript Arrays

The copyWithin() Method

copyWithin() copies array elements to another position in an array, overwriting existing values.

Copy to index 2, the elements from index 0 to 2:

const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
document.getElementById("demo").innerHTML = fruits.copyWithin(4,0,2);

OUTPUT -- Banana,Orange,Apple,Mango,Banana,Orange

Top comments (0)