JavaScript Arrays with Examples



JavaScript Arrays

  • 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.
javascript-arrays

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.
javascript-arrays-new

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

javascript-arrays-change-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

javascript-arrays-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-array-push

Related Searches to JavaScript Arrays with Examples