JS Array Methods - Hosting Deals

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Array Method

Converting Arrays to Strings

The JavaScript method toString() is used an array to a string of (comma separated) array values.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<h2>toString()</h2>

<p>The toString() method returns an array as a comma separated string:</p>

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo”).innerHTML = fruits.toString();

</script>

</body>

</html>

Output

JavaScript Array Methods

toString()

The toString() method returns an array as a comma separated string:

Banana,Orange,Apple,Mango

The join() method combines all the array elements into a string.

It works like toString(), but in addition, specify the separator:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<p>The join() method joins array elements into a string.</p>

<p>It this example we have used ” * ” as a separator between the elements:</p>

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo”).innerHTML = fruits.join(” * “);

</script>

</body>

</html>

Output

JavaScript Array Methods

join()

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

Popping and Pushing

While working with arrays, it is easy to remove elements and add new elements.

This is what popping and pushing are:

Popping items out of an array, or pushing items into an array.

JavaScript Array pop()

The pop() methods is used to remove the last element from an array:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<p>The pop() method removes the last element from an array.</p>

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo1”).innerHTML = fruits;

fruits.pop();

document.getElementById(“demo2”).innerHTML = fruits;

</script>

</body>

</html>

Output

JavaScript Array Methods

pop()

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

Banana,Orange,Apple,Mango

Banana,Orange,Apple

The pop() method returns the value that was “popped out”:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<p>The pop() method returns the value that was “popped out”:</p>

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo1”).innerHTML = fruits.pop();

document.getElementById(“demo2”).innerHTML = fruits;

</script>

</body>

</html>

Output

JavaScript Array Methods

pop()

The pop() method returns the value that was "popped out":

Mango

Banana,Orange,Apple

JavaScript Array push()

The push() method is used to add a new element to an array (at the end):

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<p>The push() method appends a new element to an array:</p>

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo1”).innerHTML = fruits;

fruits.push(“Kiwi”);

document.getElementById(“demo2”).innerHTML = fruits;

</script>

</body>

</html>

Output

JavaScript Array Methods

push()

The push() method appends a new element to an array:

Banana,Orange,Apple,Mango

Banana,Orange,Apple,Mango,Kiwi

Shifting Elements

Shifting is similar to popping, but working on the first element instead of the last.

JavaScript Array shift()

The shift() method is used to remove the first array element and “shifts” all other elements to a lower index.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<h2>shift()</h2>

<p>The shift() method removes the first element of an array (and “shifts” the other elements to the left):</p>

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo1”).innerHTML = fruits;

fruits.shift();

document.getElementById(“demo2”).innerHTML = fruits;

</script>

</body>

</html>

Output

JavaScript Array Methods

shift()

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

JavaScript Array unshift()

The unshift() method is used to add a new element to an array (at the beginning), and “unshifts” older elements:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<h2>unshift()</h2>

<p>The unshift() method adds new elements to the beginning of an array:</p>

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo1”).innerHTML = fruits;

fruits.unshift(“Lemon”);

document.getElementById(“demo2”).innerHTML = fruits;

</script>

</body>

</html>

Output

JavaScript Array Methods

unshift()

The unshift() method adds new elements to the beginning of an array:

Banana,Orange,Apple,Mango

Lemon,Banana,Orange,Apple,Mango

Changing Elements

Array elements are accessed using their index number:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<p>Array elements are accessed using their index number:</p>

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo1”).innerHTML = fruits;

fruits[0] = “Kiwi”;

document.getElementById(“demo2”).innerHTML = fruits;

</script>

</body>

</html>

Output

JavaScript Array Methods

Array elements are accessed using their index number:

Banana,Orange,Apple,Mango

Kiwi,Orange,Apple,Mango

JavaScript Array length

The length property gives a method to append a new element to an array:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

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

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo1”).innerHTML = fruits;

fruits[fruits.length] = “Kiwi”;

document.getElementById(“demo2”).innerHTML = fruits;

</script>

</body>

</html>

Output

JavaScript Array Methods

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

Banana,Orange,Apple,Mango

Banana,Orange,Apple,Mango,Kiwi

JavaScript Array delete()

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<p>Deleting elements leaves undefined holes in an array:</p>

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];

</script>

</body>

Output

JavaScript Array Methods

Deleting elements leaves undefined holes in an array:

The first fruit is: Banana

The first fruit is: undefined

Merging (Concatenating) Arrays

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

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<h2>concat()</h2>

<p>The concat() method merges (concatenates) arrays:</p>

const myGirls = [“Cecilie”, “Lone”];

const myBoys = [“Emil”, “Tobias”, “Linus”];

const myChildren = myGirls.concat(myBoys);

document.getElementById(“demo”).innerHTML = myChildren;

</script>

</body>

</html>

Output

JavaScript Array Methods

concat()

The concat() method merges (concatenates) arrays:

Cecilie,Lone,Emil,Tobias,Linus

Merging Three Arrays

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<h2>concat()</h2>

<p>The concat() method merges (concatenates) arrays:</p>

const array1 = [“Cecilie”, “Lone”];

const array2 = [“Emil”, “Tobias”, “Linus”];

const array3 = [“Robin”, “Morgan”];

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

document.getElementById(“demo”).innerHTML = myChildren;

</script>

</body>

</html>

Output

JavaScript Array Methods

concat()

The concat() method merges (concatenates) arrays:

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

Merging an Array with Values

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<h2>concat()</h2>

<p>The concat() method can merge string values to arrays:</p>

const myArray = [“Emil”, “Tobias”, “Linus”];

const myChildren = myArray.concat(“Peter”);

document.getElementById(“demo”).innerHTML = myChildren;

</script>

</body>

</html>

Output

JavaScript Array Methods

concat()

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

Emil,Tobias,Linus,Peter

Splicing and Slicing Arrays

The splice() method adds new items to an array.

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

JavaScript Array splice()

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

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<h2>splice()</h2>

<p>The splice() method adds new elements to an array:</p>

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo1”).innerHTML = fruits;

fruits.splice(2, 0, “Lemon”, “Kiwi”);

document.getElementById(“demo2”).innerHTML = fruits;

</script>

</body>

</html>

Output

JavaScript Array Methods

splice()

The splice() method adds new elements to an array:

Banana,Orange,Apple,Mango

Banana,Orange,Lemon,Kiwi,Apple,Mango

The first parameter specifies the position where new elements can be added (spliced in).

The second parameter specifies how many elements can be removed.

The rest of the parameters (“Lemon” , “Kiwi”) specify the new elements to be added.

The splice() method is used to return an array with the deleted items:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<h2>splice()</h2>

<p>The splice() method adds new elements to an array, and returns an array with the deleted elements (if any):</p>

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo1”).innerHTML = “Original Array:<br> ” + fruits;

let removed = fruits.splice(2, 2, “Lemon”, “Kiwi”);

document.getElementById(“demo2”).innerHTML = “New Array:<br>” + fruits;

document.getElementById(“demo3”).innerHTML = “Removed Items:<br> ” + removed;

</script>

</body>

</html>

Output

JavaScript Array Methods

splice()

The splice() method adds new elements to an array, and returns an array with the deleted elements (if any):

Original Array:
Banana,Orange,Apple,Mango
New Array:
Banana,Orange,Lemon,Kiwi
Removed Items:
Apple,Mango

Using splice() to Remove Elements

splice() is used to remove elements without leaving “holes” in the array:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<h2>splice()</h2>

<p>The splice() methods can be used to remove array elements:</p>

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo1”).innerHTML = fruits;

fruits.splice(0, 1);

document.getElementById(“demo2”).innerHTML = fruits;

</script>

</body>

Output

JavaScript Array Methods

splice()

The splice() methods can be used to remove array elements:

Banana,Orange,Apple,Mango

Orange,Apple,Mango

JavaScript Array slice()

The slice() method is used to slice out a piece of an array into a new array.

The example below slices out a part of an array starting from array element 1 (“Orange”)

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<h2>slice()</h2>

<p>This example slices out a part of an array starting from array element 1 (“Orange”):</p>

const fruits = [“Banana”, “Orange”, “Lemon”, “Apple”, “Mango”];

const citrus = fruits.slice(1);

document.getElementById(“demo”).innerHTML = fruits + “<br><br>” + citrus;

</script>

</body>

</html>

Output

JavaScript Array Methods

slice()

This example slices out a part of an array starting from array element 1 ("Orange"):

Banana,Orange,Lemon,Apple,Mango

Orange,Lemon,Apple,Mango

Automatic toString()

when a primitive value is expected, JavaScript automatically converts an array to a comma-separated string

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Methods</h2>

<h2>toString()</h2>

<p>The toString() method returns an array as a comma separated string:</p>

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo”).innerHTML = fruits.toString();

</script>

</body>

</html>

Output

JavaScript Array Methods

toString()

The toString() method returns an array as a comma separated string:

Banana,Orange,Apple,Mango