JavaScript Arrays
An array is a special variable, which can hold more than one value:
const cars = ["Saab", "Volvo", "BMW"];
Why Use Arrays?
Suppose you have a collection of things, such as a array of car names. Storing these cars in individual variables would appear like this:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
But, what if you need to go through the cars to locate a particular one?
And what if you didn't have just three cars, but rather 300?
The solution is an array!
An array is like a container that can store multiple pieces of information using just one name. You can easily find and use each piece of information by knowing its unique index number.
Creating an Array
Creating a JavaScript Array is simplest when you use an array literal.
Syntax:
const array_name = [item1, item2, ...];
It is a common practice to declare arrays with the const keyword.
Explore const and arrays in the chapter titled JS Array Const.
Spaces and line breaks don't matter. A statement can cover several lines:
You can make a array and put in the items like this:
Using the JavaScript Keyword new
The next example also makes a array and puts numbers in it:
The two examples above do exactly the same.
There is no need to use new Array().
For simplicity, readability and execution speed, use the array literal method.
Accessing Array Elements
To get a specific item from a array, you use the index number.:
Note : Array indexes start with 0.
[0] is the first element.
[1] is the second element.
Changing an Array Element
This line of code modifies the value of the initial item within the cars collection:
Converting an Array to a String
The JavaScript function called toString() changes an array into a string where the values are separated by commas.
Access the Full Array
You can get the whole array in JavaScript by using the array's name.
Arrays are Objects
Arrays are like special things in programming. When you ask JavaScript what type of thing an array is, it says object.
Arrays are like arrays that use numbers to find their items. For instance, if you have a array called 'person,' accessing the first item would look like this: person[0], and it would give you the name 'John.'
Things have names to get their parts. In this instance, when you use person.firstName, it gives you "John".
Array Elements Can Be Objects
JavaScript variables can be objects. Arrays are special kinds of objects.
This means you can store different kinds of things in one group called an Array.
In an Array, you can put things. You can also put actions in an Array. Plus, you can even put more Arrays in an Array.
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Array Properties and Methods
The true power of JavaScript arrays lies in their built-in array features and functions:
We will discuss array methods in the upcoming chapters.
The length Property
The length property of an array tells you how many things are in the array. It gives you the number of elements in the array.
The length property is always one more than the highest array index.
Accessing the First Array Element
Accessing the Last Array Element
Looping Array Elements
You can go through an array using a for loop like this:
You can also utilize the Array.forEach() function.
Adding Array Elements
You can easily add something new to a array by using the push() method:
You can put a new item into an array by using the length property.
WARNING !
Putting items into an array at big numbers can lead to empty spaces in the array.
Associative Arrays
Numerous coding languages allow the use of arrays that have specific names for each element.
Arrays that have names for their indexes are called associative arrays, or sometimes, hashes.
JavaScript does not allow arrays with named indexes.
In JavaScript, arrays always rely on numbered indexes.
WARNING !!
If you use named indexes, JavaScript will redefine the array to an object.
Following this, certain array functions and attributes may yield inaccurate outcomes.
The Difference Between Arrays and Objects
In JavaScript, arrays are like arrays, and they use numbers to keep track of their items.
In JavaScript, objects use named indexes.
Arrays are a unique type of objects that use numbers to organize their items.
When to Use Arrays. When to use Objects.
- JavaScript does not support associative arrays.
- You should use objects when you want the element names to be
strings (text).
- You should use arrays when you want the element names to be
numbers.
JavaScript new Array()
JavaScript includes a built-in way to create an array using new Array().
But it's safe to use [] instead.
Both of these statements make a new, blank array called points.
These two statements both make a new array with 6 numbers:
The word "new" can lead to surprising outcomes in your code.
How to Recognize an Array
People often ask: "How can I tell if a variable is an array?"
The issue here is that when you use the JavaScript operator called typeof, it gives back the word object.
The typeof operator returns object because a JavaScript array is an
object.
Solution 1:
To address this issue, ECMAScript 5, a version of JavaScript from 2009, introduced a new function called Array.isArray().
Solution 2:
The instanceof operator tells us if an object is made by a specific constructor.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = [];
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>
<p>To get information from a JavaScript array, you use numbers as keys, starting from zero.</p>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>
<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The toString() Method</h2>
<p>The toString() function gives back an array as a string where each item is separated by a comma.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Arrays use numbers to access its elements.</p>
<p id="demo"></p>
<script>
const person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>
<p>JavaScript uses names to access object properties.</p>
<p id="demo"></p>
<script>
const person = {
firstName: "John",
lastName: "Doe",
age: 46
};
document.getElementById("demo").innerHTML = person.firstName;
</script>
</body>
</html>
<!DOCTYPE html>
<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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>
<p>To get information from a JavaScript array, we us indexes(starts from 0)</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits[0];
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>
<p>To get information from a JavaScript array, we us indexes(starts from 0)</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits[fruits.length - 1];
</script>
</body>
</html>
<!DOCTYPE html>
<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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>Call a function for each array element:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = " < ul > ";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;
function myFunction(value) {
text += " < li > " + value + " < /li>";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</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 fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.push("Lemon");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>The length property helps add new things to a list without needing to use the push() method.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits[fruits.length] = "Lemon";
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>Adding elements with large indexes can leave empty spaces in an array without defined values.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";
let fLen = fruits.length;
let text = "";
for (i = 0; i < fLen; i++) {
text += fruits[i] + " <br> ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
<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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>When you access an array using a named index in JavaScript, the array turns into a regular object. This can cause some array methods and properties to give undefined or wrong results.</p>
<p id="demo"></p>
<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
document.getElementById("demo").innerHTML = person[0] + " " + person.length;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Creating an Array</h2>
<p>Avoid using new Array(). Use [] instead.</p>
<p id="demo"></p>
<script>
//const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Create an Array with three elements.</p>
<p id="demo"></p>
<script>
var points = new Array(40, 100, 1);
document.getElementById("demo").innerHTML = points;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Create an Array with two elements.</p>
<p id="demo"></p>
<script>
var points = new Array(40, 100);
document.getElementById("demo").innerHTML = points;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>Create an Array with one element.</p>
<p id="demo"></p>
<script>
var points = [40];
document.getElementById("demo").innerHTML = points;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator, when used on an array, returns object:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = typeof fruits;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The isArray() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = Array.isArray(fruits);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The instanceof Operator</h2>
<p>The instanceof operator returns true when used on an array:</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits instanceof Array;
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery