JavaScript Arrays
Arrays are used to store more than one value or a group of values under a single variable name.
Arrays can store any value, including strings, numbers, objects, functions,
and even other arrays(multidimensional arrays), thus making it possible to create more complex data structures such as an
array of objects or an array of arrays.
There are 3 ways to construct array in JavaScript:
- Using an Array literal.
- By using keyword
new.
- By passing arguments in Array constructor.
Syntax
var myArray = [element0, element1, ..., elementN];
OR
var myArray = new Array(element0, element1, ..., elementN);
JavaScript Array Literal
Using an array literal is the easiest way to create a JavaScript Array.
Syntax
var array_name = [item1, item2, ...];
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array </title>
</head>
<body>
<script>
var Smartphones=["Samsung","OnePlus","Google"];
for (i=0;i<Smartphones.length;i++){
document.write(Smartphones[i] + "<br/>");
}
</script>
</body>
</html>
Output
JavaScript Array Examples
Note : An array is an ordered collection of values. Each value in an array is called an element,
and each element has a numeric position in an array, known as its index.
JavaScript Array Keyword new
The
new operator is used to create an instance of an object.
To create an object, the new operator is followed by the constructor method.
Syntax
var array_name = [item1, item2, ...];
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array New Keyword </title>
</head>
<body>
<script>
var i;
var Smartphones = new Array();
Smartphones[0] = "Samsung";
Smartphones[1] = "OnePlus";
Smartphones[2] = "Google";
for (i=0;i<Smartphones.length;i++){
document.write(Smartphones[i] + "<br>");
}
</script>
</body>
</html>
Output
JavaScript Array New Keyword Examples
JavaScript Array Constructor
An instance of the array is created by passing arguments in constructor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array Constructor </title>
</head>
<body>
<p>Avoid using new Array(). Use [] instead.</p>
<script>
var Smartphones=new Array("Samsung","OnePlus","Google");
for (i=0;i<Smartphones.length;i++){
document.write(Smartphones[i] + "<br>");
}
</script>
</body>
</html>
Output
JavaScript Array Constructor
Tip: Avoid using new Array(). Use [] instead.
Adding New Elements to an Array
To add a new element at the end of an array, use the push() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array Push New Element </title>
</head>
<body>
<script>
var Smartphone = ["OnePlus ", " Samsung ", " Google Pixel "];
Smartphone.push("Sony");
document.write(Smartphone + "<br>"); // Prints: OnePlus, Samsung, Google Pixel, Sony
document.write("String Length : " + Smartphone.length);
</script>
</body>
</html>
Output
JavaScript Array Push New Element Examples
Adding New Elements using unshift()
To add a new element at the beginning of an array we can use the unshift() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array Unshift Element </title>
</head>
<body>
<script>
var Smartphone = [" OnePlus ", " Google Pixel ", " Sony "];
Smartphone.unshift("Samsung ");
document.write(Smartphone + "<br>"); // Prints: Samsung,OnePlus,Google Pixel,Sony
document.write("String Length : " + Smartphone.length); // Prints: 4
</script>
</body>
</html>
Output
JavaScript Array Unshift Element
Removing Elements from an Array
To remove the last element from an array you can use the pop() method.
This method returns the value that was popped out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array POP Method Remove Element </title>
</head>
<body>
<script>
var Smartphone = ["OnePlus", "Samsung", "Google Pixel"];
var last = Smartphone.pop();
document.write(last + "<br>"); // Prints: Google Pixel
document.write("String Length : " + Smartphone.length); // Prints: 2
</script>
</body>
</html>
Output
JavaScript Array POP Method Remove Element
Removing Elements using shift()
To remove the first element from an array you can use the shift() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array Shift Remove Element </title>
</head>
<body>
<script>
var Smartphone = ["OnePlus", "Google Pixel", "Samsung"];
var first = Smartphone.shift();
document.write(first + "<br>"); // Prints: OnePlus
document.write("String Length : " + Smartphone.length); // Prints: 2
</script>
</body>
</html>
Output
JavaScript Array Shift Remove Element
Tip: The push() and pop() methods runs faster than shift() and unshift().
Because push() and pop() methods simply add and remove elements at the end of an array therefore the elements do not move,
whereas shift() and unshift() add and remove elements at the beginning of the array that require re-indexing of whole array.
Merging Two or More Arrays
The concat() method is used to combine two or more arrays.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array Concat Method </title>
</head>
<body>
<script>
var Smartphones = [" OnePlus ", " Google Pixel ", " Samsung "];
var Laptops = [" Dell ", " HP ", " Microsoft Surface "];
// Creating new array by combining Smartphones and Laptops arrays
var Gedgets = Smartphones.concat(Laptops);
document.write(Gedgets); // Prints: OnePlus , Google Pixel , Samsung , Dell , HP , Microsoft Surface
</script>
</body>
</html>
Output
JavaScript Array Concat Method Examples
Tip: The concat() method can take any number of array arguments so you can add any number of arrays.
Array Searching
If you want to search an array for a specific value, you can simply use the indexOf() and lastIndexOf().
If the value is found, both methods return an index value representing the array element. If the value is not found, -1 is returned.
The indexOf() method returns the first one found, whereas the lastIndexOf() returns the last one found.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Array Search Method </title>
</head>
<body>
<script>
var Smartphone = ["Google Pixel", "OnePlus", "Motorola", "Xiaomi", "Asus"];
document.write(Smartphone.indexOf("Google Pixel") + "<br>"); // Prints: 0
document.write(Smartphone.indexOf("OnePlus") + "<br>"); // Prints: 1
document.write(Smartphone.indexOf("Apple")); // Prints: -1
</script>
</body>
</html>
Output
JavaScript Array Search Method Examples