Various styles to declare array in JavaScript
3 different styles to define Array in JavaScript
In this article we will learn the concept of array in
JavaScript. If you have programming background then you already knows the
concept of Array in various programming language. The fundamental idea behind array
is to collect similar element together.
If we can do so, then the collection can be access by it’s
index. There are various ways to implement array in JavaScript. In this article
we will learn them one by one.
First Style to define array
This is one style to represent array. We can keep the entire
similar element within [] bracket. Try to understand the below code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
var arr = ['a','b','c'];
alert(arr[0]);
</script>
</form>
</body>
</html>
The implementation is very simple, only we have defined
array using “var” keyword. Then we are accessing the 0th element of
the array. Here is output.
Second style to define array
This is another style to define array. Here we will use
Array() function to create array. Have a look on below code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
var arr = new Array("One", "Two", "Three");
alert(arr[0]);
</script>
</form>
</body>
</html>
The new operator will create a collection of string into
“arr” which we have declared as array. Then we are accessing the 0th
element of Array. Here is sample output.
Third style to define array
This style is little similar to second style , only the
difference is that we are not creating element in time of Array() creation.
Here is sample example.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
var arr = new Array();
arr[0] = 100;
arr[1] = "Sourav";
arr[2] = "Kayal";
alert(arr[1] + arr[2]);
</script>
</form>
</body>
</html>
The nice face to observe , in JavaScript array is type less.
As we know JavaScript is loosely type checking language, it means there is no
different data type (like int,char,string) in Javascript. So that Array() also
works in same fashion. We can set any data type in one array. At first line of
initialization we are setting int(number in JavaScript) and then we are setting
string into it.
We are trying to access the 1st and 2nd
value from array. Here is output.
Conclusion:-
In this small article we have learned three different styles
to define array. Hope you have understood all the concepts. Array also contains many properties, in coming
article we will understand it.