Introduction
In this article, we will learn about Arrays in the JavaScript programming language.
Array in JavaScript
The array is a collection of data items stored under a single name. Array provides a framework for announcing and accessing multiple data. Objects should have only one identifier, thereby simplifying the task of data management.
We use an array when we have to deal with multiple data items. Arrays are a special type of object in JavaScript. If we want to verify that an array is an object, we can check it through the "typeof" operator.
Array syntax in JavaScript
var array_name= ["one", "two", "three", "four"];
The complete program of Array in JavaScript is listed below.
<!DOCTYPE html>
<html>
<body>
<h2>First Array Example Program</h2>
<p>First paragraph.</p>
<p>JavaScript code starts here....</p>
<script>
var stu = ["Rahul", "Rohit", "Rohan"];
document.write(stu);
</script>
<p>JavaScript code ends here......</p>
</body>
</html>
The above program generates the following output.
![array-example-program]()
Explanation
In the above array example program, we use JavaScript code inside the HTML code. So, first, we print a heading into the <h2> tag "First Array Example Program". Then we print two paragraphs by using <p> tag, As "First Paragraph" and "JavaScript code starts here....". After that, we write JavaScript code as <script> tag. Inside <script> tag, first, we define an array named stu. In the next line, we access the array elements bt "document.write(stu);" line, which prints array elements separated by commas as the output. In the last line, we print a paragraph," JavaScript code ends here....".
How to access the array elements?
Array elements can be assessed through the index of the element. The array index starts with 0. For example, if we have 5 elements in an array. So the index will be like [0], [1], [2], [3], [4]. We can access the full array, and then we will use the array name for this. But if we want to access any specific element of the array, then we will use the index number. If we want to access the third element of the array, we will use the [2] index of the array.
As we have seen in the above array example program, we access the full array through the array name stu. Through the statement "document.write(stu);" we print the full array.
The complete program for showing the process of accessing the array elements is listed below.
<!DOCTYPE html>
<html>
<body>
<h2>How to access array elements</h2>
<script>
var ele = ["CsharpCorner","Delhi","Noida", "GZB", "Faridabad"];
document.write(ele);
</script>
</body>
</html>
The above program generates the following output.
![array-access-elements]()
Explanation
In the above example program, we define an array named "ele" and access that by the statement "document.write(ele); ". It returns the elements of the array as the output of the program.
Access elements by index
In array elements accessed by the index number like ele[0] for the first element, ele[1] for the second element, etc.
The complete program for showing how to access array elements by the index number.
<!DOCTYPE html>
<html>
<body>
<h2>How to access array elements by index</h2>
<script>
var ele = ["CsharpCorner","Delhi","Noida", "GZB", "Faridabad"];
document.write(ele[3]);
</script>
</body>
</html>
The above program generates the following program.
![assess array by index]()
Explanation
In the above program, we access the fourth element of the array list as the statement "document.write(ele[3]);" which returns "GZB" as the element.
Replace the Array elements in JavaScript
The complete program for showing how to replace the array elements in JavaScript.
<!DOCTYPE html>
<html>
<body>
<h2>How to access array elements by index</h2>
<script>
var ele = ["CsharpCorner","Delhi","Noida", "GZB", "Faridabad"];
document.write(ele[3]);
ele[3]= "Panipat";
document.write(ele[3]);
</script>
<p> Value changed GZB to Panipat</p>
</body>
</html>
The following program generates the following output.
![replace_elements]()
Explanation
In the above program, first, we print the fourth element of the array from the list that is "GZB", that we change the value of "GZB" to "Panipat".
Array Methods in JavaScript
Array in JavaScript contains various methods for performing basic operations. The various array methods are as follows:
concat() Method of Array
The concat() method is used to merge two or more arrays. It does not change the existing arrays but returns a new array as the output.
The complete program of the concat() method of Array in JavaScript is listed below.
<!DOCTYPE html>
<html>
<body>
<h3>Example program of concat method</h3>
<script>
var arr1 = ["CsharpCorner", "GZB", "Faridabad"];
var arr2 = ["Delhi", "Haryana", "UP"];
var arr3 = ["Rohan", "Rohit"];
var arr = arr1.concat(arr2,arr3);
document.write(arr);
</script>
</body>
</html>
The above program generates the following output.
![concat-method-example]()
Explanation
In the above example program, first, we print a heading through <h3> tag that prints "Example program of concat method". After that, the JavaScript code starts. In this, we create three arrays, and in the other fourth array, we call the concat method. Through the statement "document.write" statement we print the result of the program.
copyWithin() method of Array
copyWithin() method is used to copy the elements of the array from one place to another. This method overwrites the original value of the element form the other element.
The complete program of the copyWithin() method of the array in JavaScript is listed below.
<!DOCTYPE html>
<html>
<body>
<button onclick="arrayCopyWithin()">Click</button>
<p id="pDemo"></p>
<script>
var colors=["Red","Green","Blue"];
function arrayCopyWithin() {
document.getElementById("pDemo").innerHTML = colors.copyWithin(1,0);
}
</script>
</body>
</html>
</html>
The above program generates the following output.
![copy-within-example]()
Explanation
In the above program, first, we build a button named "click". After that, the JavaScript code starts. In JavaScript code, we create an array, and inside that method, we use the copyWithin method. In the output, We found the button on the screen that shows click. When we click the button, the result shows as the output image.
fill() method of Array
fill method in JavaScript array elements will override with a specific element. It works as a static value.
The complete program of fill() method in JavaScript is listed below.
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<button onclick="fillTheArray()">Click</button>
<p id="pDemo"></p>
<script>
var cities=["Delhi","GZB","Noida"];
function fillTheArray() {
document.getElementById("pDemo").innerHTML = friends.fill("UP");
}
</script>
</body>
</html>
The above program generates the following output.
![fill-method-example]()
Explanation
In the above program, first, we build a button with the name "click". After that, the JavaScript code starts. In JavaScript code, we create an array named cities with three elements inside a user-defined array we call the fill() method. In the output, we found a button "click" When we click the button, we get the result shown in the output image.
Length property of Array in JavaScript
The length property of the array is used to get the length of the array in JavaScript. It returns the number of the array as the output. The value is an unsigned, 32-bit integer and is always numerically bigger than the array's highest number.
The complete program for showing the use of the length property of the array in JavaScript is listed below.
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<h2>Length Property Example Program</h2>
<script>
var cities=["Delhi","GZB","Noida", "UP"];
document.write(cities.length);
</script>
</body>
</html>
The above program generates the following output.
![length-example-output]()
Explanation
In the above program, first, we print a heading in the <h2> tag. After that, the JavaScript code starts. Here, we create an array of named cities. As the output, we get the number of the elements of the array as shown in the output image.
Summary
In this article, we learned about the array and its methods in JavaScript with the example programs.