JavaScript Array Methods And Properties With Examples

In this guide, we will give you ideas of all methods that are mostly used to implement an hour of code in seconds and that is provided by the javascript core library. The methods can be defined as below examples.

Converting Arrays into Strings

In JavaScript  tostring() keyword/method is used to convert the array into String separated by comma.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>Array Methods</h2>
<h2>toString()</h2>
<p>The toString() returns comma separated string:</p>
<p id="darkweb"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("darkweb").innerHTML = fruits.toString();
</script>
</body>
</html>

JavaScript Sorting Array

The sorting method is used to arrange the element of the array alphabetically.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Array Sort</h2>
<p>The sort() sorts an array alphabetically.</p>
<button onclick="myhelloFunction()">Try it</button>
<p id="darkweb"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("darkweb").innerHTML = fruits;
function myhelloFunction() {
fruits.sort();  document.getElementById("darkweb").innerHTML = fruits;
}
</script>
</body>
</html>

Javascript Array.size() vs Array.length

The array.size is not valid method beside that ask many times and the array.lenght is use to find tha javaxript length or to find element is exists or not. The example for array.length is below:

fruits = ["Ban", "Ora", "App", "Man"];

var totalarray = fruits.length; //give number of array exists
var last = fruits[fruits.length - 1]; // last array of fruits

How to Loop Through an Array in JS Or Array.ForEach()

array.foreach used to loop the array elements that is in current array. It cn be understand with the below example:

<!DOCTYPE html>
<html>
<body>
<h2>Arrays loop</h2>
<p>Array.forEach() calls array element.</p>

<p id="daerkweb"></p>

<script>
var fru, text;
fru = ["Ban", "Ora", "App", "Man"];

text = "<ul>";
fru.forEach(myhelloFunction);
text += "</ul>";
document.getElementById("daerkweb").innerHTML = text;

function myhelloFunction(value) {
  text += "<li>" + value + "</li>";
} 
</script>

</body>
</html>

How To Add Array Elements Or Append Something To An Array?

If you are looking to add elements or append something in array then use push for it. The exmple of append element in array is:

fru = ["Ban", "Ora", "App", "Man"];
fru.push("Lem");    // adds a new element (Lem) to fru

How To Create Array OR Initialize An Array’s Length In JavaScript?

Here we will give you an example of create new array or initialize an array that will give you idea what is correct process.

var po = new Array();     // Wrong Method
var po = [];              // Right Method
 
Below we create two different statements to create a new array containing 6 numbers:

var po = new Array(400, 100, 10, 50, 205, 100); // Wrong
var po = [400, 100, 10, 50, 205, 100];          // Right

JavaScript Array join() Method To Concatenate Array Elements

In this method you can concatenate array elements to specific string like below example:

fru = ["Ban", "Ora", "App", "Man"];
document.getElementById("daarkweb").innerHTML = fru.join(" + ");
document.getElementById("daarkweb").innerHTML = fru.join(" , ");

The pop() Method Or Remove Elements From A JavaScript Array

The pop method use for removing the elements from an array from the last. See below example to usages:

fru = ["Ban", "Ora", "App", "Man"];
fru.pop(); // Removes the last element ("Man") from fru

Shifting Elements Or Move First Element To The End Of An Array

If you are looking to shift the first element at the last of the array then you can use the shift method and follow the below example.

fru = ["Ban", "Ora", "App", "Man"];
fru.shift();  // Removes the first element "Ban" from fru

Hope this guide will help you to learn javascript array methods and properties to use anywhere in your project.

Stay in touch. Ask Questions.
Lean on us for help, strategies and expertise.

Leave a Reply

Your email address will not be published. Required fields are marked *