What is JavaScript Array
JavaScript Array : Arrays are used to store a group of values of same data-type in a single variable. Arrays can store 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.
JavaScript Arrays can be used when there a pool of data, of same data type that has a common link. For example: Name of students of a class. All the students belongs to a single class, so, we can create an array, suppose, Class_5, and store all students names of Class 5 in it. It is a perfect way to organize similar type of data together.
There are 2 ways to create arrays in JavaScript:
- By using JavaScript Array literal.
- By using
new keyword.
We will understand each method with proper examples, but first look at the basic syntax of creating an array:
Syntax
var myArray = [element0, element1, ..., elementN];
OR
var myArray = new Array(element0, element1, ..., elementN);
JavaScript Array Literal
Array literal is a method of creating an array by defining a simple list of values, separated by commas(,) and enclosed within brackets([]). Using an array literal is the easiest way to create a JavaScript Array.
You can write as many values as needed in the array. Each value will be stored at contiguous memory location. These values can be accessed with index numbers starting with zero. The first value can be accessed by index 0, second by index 1, and so on.
Syntax of Array Literal
var array_name = [item1, item2, item3];
<!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 : Always remember that array's indexing starts from zero.
JavaScript Array new keyword
JavaScript has a constructor array() that creates arrays. To access this constructor, we have to create an object first. So, the new keyword, followed by constructor name, creates an object that we can use to enter array values.
Syntax of using new keyword
var array_name = new array(item1, item2, item3);
<!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
Tip: Avoid using new Array(). Use array literal method 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