JavaScript Array Methods – Tutorials Art

The JavaScript array methods help to work on arrays. Following are some JavaScript array methods that are used to work with arrays in JavaScript.

Arrays to String Conversion

The toString() the method is used to convert an array to a string of array values.

<!DOCTYPE html>
<html>
<body>


<script>
const language = ["Python", "R", "C++", "Ruby"];
document.write(language.toString());
</script>

</body>
</html>

Output:

The join() the method also works the same as toString(), but it specifies the separator:

<!DOCTYPE html>
<html>
<body>


<script>
const language = ["Python", "R", "C++", "Ruby"];
document.write(language.join(" * "));
</script>

</body>
</html>

Output:

Changing Elements

We can access the array elements using their index number. An array index starts from 0. To change the array element we can use the index.

<!DOCTYPE html>
<html>
<body>


<script>
const language = ["Python", "R", "C++", "Ruby"];
language[1] = "C#";
document.write(language);
</script>

</body>
</html>

Output:

The length property is used to append a new element to an array:

<!DOCTYPE html>
<html>
<body>


<script>
const language = ["Python", "R", "C++", "Ruby"];
language[language.length] = "C#";
document.write(language);
</script>

</body>
</html>

Output:

Deleting Elements

To delete the array objects the delete operator is used in JavaScript.

<!DOCTYPE html>
<html>
<body>


<script>
const language = ["Python", "R", "C++", "Ruby"];
delete language[1];
document.write(language);
</script>

</body>
</html>

Output:

Shifting Elements

The process of shifting is the same as popping but it works on the first element instead of the last element. The method is used to remove the first array element and shift all other elements to a lower index.

<!DOCTYPE html>
<html>
<body>

<p id="tacode1"></p>
<p id="tacode2"></p>
<p id="tacode3"></p>

<script>
const language = ["Python", "R", "C++", "Ruby"];
document.getElementById("tacode1").innerHTML = language;
document.getElementById("tacode2").innerHTML = language.shift();
document.getElementById("tacode3").innerHTML = language;
</script>

</body>
</html>

Output:

The unshift() the method is used to add a new element at the beginning of an array ().

<!DOCTYPE html>
<html>
<body>

<p id="tacode1"></p>
<p id="tacode2"></p>

<script>
const language = ["Python", "R", "C++", "Ruby"];
document.getElementById("tacode1").innerHTML = language;
language.unshift("Java");
document.getElementById("tacode2").innerHTML = language;
</script>

</body>
</html>

Output:

Slicing an Array

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

<!DOCTYPE html>
<html>
<body>


<script>
const a = ["Python", "R", "C++", "Ruby"];
const b = a.slice(1);
document.write(b);
</script>

</body>
</html>

Output:

This method will create a new array without removing the value from the original.

We can slice two-element like the below example:

<!DOCTYPE html>
<html>
<body>


<script>
const a = ["Python", "R", "C++", "Ruby"];
const b = a.slice(1, 3);
document.write(b);
</script>

</body>
</html>

Output:

Pop() and Push()

While working with arrays adding and removing elements is very easy. The process of removing an array of elements is called popping and adding elements into an array is called pushing and are used in JavaScript Array Methods.

Pop()

For the popping function in arrays, the pop() method is used.

<!DOCTYPE html>
<html>
<body>

<p id="tacode1"></p>
<p id="tacode2"></p>
<p id="tacode3"></p>

<script>
const language = ["Python", "R", "C++", "Ruby"];
document.getElementById("tacode1").innerHTML = language;
document.getElementById("tacode2").innerHTML = language.pop();
document.getElementById("tacode3").innerHTML = language;
</script>

</body>
</html>

Output:

Push()

For pushing function in arrays the push() method is used:

<!DOCTYPE html>
<html>
<body>


<button onclick="Fun()">Click to push element</button>
<p id="tacode"></p>

<script>
const language = ["Python", "R", "C++", "Ruby"];
document.getElementById("tacode").innerHTML = language;

function Fun() {
  language.push("Java");
  document.getElementById("tacode").innerHTML = language;
}
</script>

</body>
</html>

Output:

Splicing an Array

The splice() the method is used to add new items to an array, we also define the position where the element should be added:

<!DOCTYPE html>
<html>
<body>


<script>
const language = ["Python", "R", "C++", "Ruby"];
language.splice(2, 0, "C#", "Java");
document.write(language);
</script>

</body>
</html>

Output:

Using splice() to Element removal

We can use splice() method to remove elements without leaving “holes” in the array:

<!DOCTYPE html>
<html>
<body>


<script>
const language = ["Python", "R", "C++", "Ruby"];
language.splice(1, 2);
document.write(language);
</script>

</body>
</html>

Output:

Concatenate Arrays

The concat() the method (one of the JavaScript Array Methods )is used to create a new array by merging existing arrays:

<!DOCTYPE html>
<html>
<body>


<script>
const a = ["C++", "Ruby"];
const b = ["Python", "R", "C#"];
const c = a.concat(b);  
document.write(c);
</script>

</body>
</html>

Output: