2. An array is a special variable, which can hold more than one value:
Syntax:
const array_name = [item1, item2, ...];
const cars = ["Saab", "Volvo", "BMW"];
Why Use Arrays?
If you have a list of items (a list of car names, for example), storing the cars in single variables could
look like this:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
However, what if you want to loop through the cars and find a specific one? And what if you had
not 3 cars, but 300?
The solution is an array!
An array can hold many values under a single name, and you can access the values by referring to
an index number.
3. Access the Full Array
With JavaScript, the full array can be accessed by referring to the array name:
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
4. Looping Array Elements
One way to loop through an array, is using a for loop:
<html> <body>
<h1>JavaScript Arrays</h1>
<h2>Looping an Array</h2>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
5. Associative Arrays
Many programming languages support arrays with named indexes.
Arrays with named indexes are called associative arrays (or hashes).
JavaScript does not support arrays with named indexes.
In JavaScript, arrays always use numbered indexes.
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
document.getElementById("demo").innerHTML =person[0] + " " + person.length;
</script>
</body>
</html>
6. Basic Array Methods
Array length Returns the length (size) of an array
Array toString() Converts an array to a comma separated string of values
Array at() Returns an indexed element from an array
Array join() Joins all array elements into a string
Array pop() Removes the last element from an array
Array push() Adds a new element to an array
Array shift() Removes the first array element
Array unshift() Adds a new element at the beginning of an array
Array delete() Creates undefined holes in the array
Array concat() Creates a new array by merging existing arrays
Array copyWithin() Copies array elements to another position in the array
Array flat() Creates a new array from sub-array elements
Array slice() Slices out a part of an array
Array splice() Adds new items to an array
Array toSpliced() Adds new items to an array in a new array
7. JavaScript Array length
The length property returns the length (size) of an array:
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>
<p>The length property returns the length of an array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>
</body>
</html>
9. Reversing an Array
The reverse() method reverses the elements in an array:
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reverse() Method</h2>
<p>The reverse() method reverses the elements in an array:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
// Create and display an array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
// Reverse the array:
fruits.reverse();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>