Arrays
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Arrays</title>
</head>
<body>
<!--
Arrays are simple data structures.
Arrays are special variables, which can hold more than one value.
Arrays are Ordered collections of values.
Arrays are generally described as "list-like objects".
It is a common practice to declare arrays with the const keyword.
SYNTAX:
const arrayName = [item1, item2, item2, ...];
-->
<h1>Demo: Arrays </h1>
<div>
<h2>Creating an array</h2>
<p id="para1"></p>
</div>
<div>
<h2>Creating array using Array constructor & new Keyword</h2>
<p id="para2"></p>
</div>
<div>
<h2>Creating empty array, and then adding elements</h2>
<p id="para3"></p>
</div>
<div>
<h2>Accessing array elements</h2>
<p id="para4"></p>
</div>
<div>
<h2>Modifying array elements</h2>
<p id="para5"></p>
</div>
<div>
<h2>Length of an array</h2>
<p id="para6"></p>
</div>
<div>
<h2>Creating & Fetching values from Multi-Dimension arrays</h2>
<p id="para7"></p>
<p id="para8"></p>
</div>
<!-- JavaScript code Starts here -->
<script>
/************************************************/
// Creating an array
//
const numArray = [12, 34, 45, 67, 89, 90]; // Creating an Array
document.getElementById('para1').innerHTML =
`Array "numArray" contains following elements : [${numArray}]`;
/************************************************/
// Creating an array using Array constructor & new Keyword
//
const perfectNum = new Array(6, 28, 496, 8128, 33550336); // creating an array using new keyword
document.getElementById('para2').innerHTML =
`Array "perfectNum" contains following elements : [${perfectNum}]`;
/************************************************/
// Creating an empty array, and then add the elements
//
let three = "Three";
const mixData = []; // creating an empty array
// Adding elements to the array
mixData[0] = 'One'; // Array element is a string
mixData[1] = 2; // Array element is a integer
mixData[2] = three; // Array element is a variable
mixData[3] = [4, "five", 6];// Array element is an array
mixData[4] = 7.8; // Array element is a decimal
mixData[5] = {key:9}; // Array element is an object
document.getElementById('para3').innerHTML =
`Array "mixData" contains following elements : [${mixData}]`;
console.log(mixData); // Console log output
/************************************************/
// Accessing array elements
//
const players = ["Sachin", "Rohit", "Virat", "Dhoni", "Zaheer", "Suresh", "Rahul"];
firstPlayer = players[0]; // Accessing array element by index number
document.getElementById('para4').innerHTML =
`The first element of an array "players" is : "${firstPlayer}"`;
/************************************************/
// Modifying array element
//
const carBrands = ["Mahindra", "Maruti", "xyz"];
carBrands[2] = "Tata"; // Modify the array element "xyz" to "Tata"
document.getElementById('para5').innerHTML =
`Array "carBrands" contains following elements : [${carBrands}]`;
/************************************************/
// Length of an array
//
const evenNum = [12, 14, 16, 18];
arrLength = evenNum.length // length property of array returns length of array
document.getElementById('para6').innerHTML =
`The length of an array [${evenNum}] is : ${arrLength}`;
/************************************************/
// Creating & Fetching values from Multi-Dimension arrays
//
const multiSportPlayers = [ // Creating Multi-Dimension array
["Sachin", "Dhoni", "Virat"],
["Messi", "Ronaldo", "Neymar"],
["Nadal", "Roger", "Novak"],
]
fetchMessi = multiSportPlayers[1][0]; // Fetching values
document.getElementById('para7').innerHTML =
`Array "multiSportPlayers" contains following elements : [${multiSportPlayers}]`;
document.getElementById('para8').innerHTML =
`Fetching value from Multi-Dimension array : ${fetchMessi}`;
console.log(multiSportPlayers); // Console log output
</script>
<!-- JavaScript code Ends here -->
</body>
</html>