JavaScript Tutorial
JS Overview
JS Introduction
How To Add JS
JS Output
JS Comments
JS Variable
JS Data Types
JS Operators
JS Events
JS Form Events
JavaScript Statements
JS If Statement
JS Switch
JavaScript Loop
JS for loop
JS while loop
JS do while Loop
JS for..in loop
Function
JS Function
JavaScript Objects
JS Object
JS Array
JS Array Sorting
JS String
JS String Method
JS Number
JS Boolean
JS Date
JS Math
JavaScript BOM
JS Window
JS location
JS History
JS Navigator
JS Screen
JS Dialog Boxes
JavaScript DOM
Document Object
JS Methods
JS innerHTML
JavaScript Validation
JS Form Validation
JavaScript Advanced
JS Cookies
JS Delete Cookies
JS Type Conversions
JS Event Listeners
JS Error Handling
JS Reserved Keywords
Reading Section
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, ...];
Example
Try this code »
<!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>
<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
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
Thenew 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, ...];
Example
Try this code »
<!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>
<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 Constructor
An instance of the array is created by passing arguments in constructor.
Example
Try this code »
<!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>
<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
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.
Example
Try this code »
<!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>
<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
Adding New Elements using unshift()
To add a new element at the beginning of an array we can use the unshift() method.
Example
Try this code »
<!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>
<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
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.
Example
Try this code »
<!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>
<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
Removing Elements using shift()
To remove the first element from an array you can use the shift() method.
Example
Try this code »
<!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>
<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
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.
Example
Try this code »
<!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>
<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
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.
Example
Try this code »
<!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>
<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
Recommended :
Color Picker
List of color names supported by all browser »
Character Code
List of character codes to display special character »
Language Code
List of all language supported by all browser »
Country Code
List of Country code supported by all browser »
