JavaScript Arrays with Examples

In JavaScript, an array is a type of object that is used to store a collection of values, such as numbers, strings, or even other objects. Arrays are a fundamental data structure in JavaScript, and they provide a convenient way to work with groups of related data.

Sample Code

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
const name = ["kaashiv", "infotech", "venkat"];
document.getElementById("demo").innerHTML = name;
</script>

</body>
</html>

Output

JavaScript Arrays
Kaashiv,infotech,venkat

Why Use Arrays ?

If you have a list of items (a list of names, for example), storing the names in single variables could look like this.

let name1 = "kaashiv";
let name2 = "infotech";
let name3 = "venkat";

An array can hold many values under a single name, and you can access the values by referring to an index number.
You can also create an array, and then provide the elements.

Example

const names = [];
name[0]= "kaashiv";
name[1]= "infotech";
name[2]= "venkat";

Using the JavaScript Keyword new

The following example also creates an Array, and assigns values to it.

Sample Code

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
const name = new Array("kaashiv", "infotech", "venkat");
document.getElementById("demo").innerHTML = name;
</script>

</body>
</html>

Output

JavaScript Arrays
Kaashiv,infotech,venkat

Accessing Array Elements

You access an array element by referring to the index number.

Sample Code

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>
<h2>JavaScript array elements are accessed using numeric indexes (starting from 0).</h2>
<p id="demo"></p>

<script>
const name = new Array("kaashiv", "infotech", "venkat");
document.getElementById("demo").innerHTML = name[0];
</script>

</body>
</html>

Output

JavaScript Arrays
JavaScript array elements are accessed using numeric indexes (starting from 0).
kaashiv

Changing an Array Element

This statement changes the value of the first element in name.

Sample Code

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const name = ["kaashiv","infotech","venkat"];
name[0] = "krishiv";
document.getElementById("demo").innerHTML = name;
</script>

</body>
</html>

Output

JavaScript Arrays
JavaScript array elements are accessed using numeric indexes (starting from 0).
krishiv,infotech,venkat

The length Property

The length property of an array returns the length of an array (the number of array elements).

Sample Code

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>
<p>The length property returns the length of an array.</p>

<p id="demo"></p>

<script>
const names = ["kaashiv","infotech","venkat"];
document.getElementById("demo").innerHTML = names.length;
</script>

</body>
</html>

Output

JavaScript Arrays
The length property returns the length of an array.
3

Adding Array Elements

The easiest way to add a new element to an array is using the push() method.

Sample Code

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>The push method appends a new element to an array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
const  names =  ["kaashiv","infotech","venkat"];
document.getElementById("demo").innerHTML = names;

function myFunction() {
  names.push("krishiv");
  document.getElementById("demo").innerHTML = names;
}
</script>

</body>
</html>

Output

JavaScript Arrays with Examples

JavaScript Arrays

Sample Code

Output

Why Use Arrays ?

Example

Using the JavaScript Keyword new

Sample Code

Output

Accessing Array Elements

Sample Code

Output

Changing an Array Element

Sample Code

Output

The length Property

Sample Code

Output

Adding Array Elements

Sample Code

Output

Related Searches to JavaScript Arrays with Examples

Wikitechy

Workshop

Join our Community

Other Languages