Advertisement

Advertisement


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









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.