Jobs Hub

Array in JavaScript (with Examples)

The word array means something like:

And when we talk about array in JavaScript, then it indicates a collection or group of items stored in a single variable.

So, array in JavaScript is used when we need to store and use multiple items through a single variable. For example, let's suppose there are 120 students in a class where there are 6 subjects to cover for each. Therefore, to store marks of all 6 subjects, either we create separate variables for all subjects, or use an array.

Create an Array in JavaScript

There are two ways to create an array in JavaScript:

Create an Array in JavaScript using Array Literal

Most used method to create an array in JavaScript, is by using array literals. Here is the syntax:

const arrayName = [item1, item2, item3, ..., itemN];

Notice - While declaring an array, I have used the const keyword. This is because, a variable declared using a const keyword can neither be updated nor be re-declared. Also a const variable must be initialized at the time of its declaration. So if by mistake, we use the same variable to declare and/or define for other values, then our browser will indicate that we are re-using that const variable, which at the end keep the array constant.

Note - If you do not care or want to use the same variable again in the program, then you can follow let keyword.

Here is an example of creating an array using array literals:

const marks = [89, 87, 93, 76, 69, 80];

What if there is no array supported by JavaScript, then we have to create separate variables to store each value or marks of each subjects, something similar to this way:

const mark1 = 89;
const mark2 = 87;
const mark3 = 93;
const mark4 = 76;
const mark5 = 69;
const mark6 = 80;

or something similar to:

const maths = 89;
const physics = 87;
const computer = 93;
const chemistry = 76;
const language = 69;
const sports = 80;

For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>
   
   <p><span id="a"></span>, <span id="b"></span>, <span id="c"></span>, <span id="d"></span>,
   <span id="e"></span>, <span id="f"></span></p>

   <script>
      const marks = [89, 87, 93, 76, 69, 80];
      document.getElementById("xyz").innerHTML = marks;

      const maths = 89;
      const physics = 87;
      const computer = 93;
      const chemistry = 76;
      const language = 69;
      const sports = 80;

      document.getElementById("a").innerHTML = maths;
      document.getElementById("b").innerHTML = physics;
      document.getElementById("c").innerHTML = computer;
      document.getElementById("d").innerHTML = chemistry;
      document.getElementById("e").innerHTML = language;
      document.getElementById("f").innerHTML = sports;
   </script>
   
</body>
</html>
Output

, , , , ,

See how difficult the job becomes, when doing the same job but without using an array. So, array not only plays a crucial role in storing multiple values using a single variables. It also helps in accessing items/elements and outputting them in easy and simple way. As you can see, while printing the marks of all 6 subjects, without using array, we have to remember and write separate variable along with separator (,)

Create an Array in JavaScript using new Keyword

The same job (as done above) of creating an array in JavaScript, can also be done in this way:

const arrayName = new Array(item1, item2, item3, ..., itemN);

For example:

const marks = new Array(89, 87, 93, 76, 69, 80);

Extra Information about an Array in JavaScript

While Creating an Array in JavaScript, Spaces and Line breaks are not Important. Therefore, the same array can also be created in this way:

const marks = [
   89,
   87,
   93,
   76,
   69,
   80
];

We can also create a blank array, then define or initialize elements to it. For example:

const marks = [];
marks[0] = 89;
marks[1] = 87;
marks[2] = 93;
marks[3] = 76;
marks[4] = 69;
marks[5] = 80;

In above JavaScript code snippet, 0, 1, 2, 3, 4, 5 are indexes of array, that can be used to access array elements further.

Note - Since indexing always starts with 0, therefore element at index number [0] refers to the first value, whereas element at index number [1] refers to second value, and so on.

Access Array Elements in JavaScript

After understanding all the concept above this para, I don't think you still need to understand how an array elements be accessed. Anyway, let me tell you, to access an array elements, just use the array name along with index numbers of the elements in this way:

arrayName[index]

For example, to access third element, or element available at index number [2] of array named marks. Here is the syntax:

marks[2]

For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="myPara"></p>

   <script>
      const marks = [89, 87, 93, 76, 69, 80];
      
      let thirdMark = marks[2];
      document.getElementById("myPara").innerHTML = thirdMark;
   </script>
   
</body>
</html>
Output

Change Or Update an Array in JavaScript

We can also change/update an array further, by changing/updating its element(s). For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p>Original Array: <b><span id="one"></span></b></p>
   <p>Updated Array: <b><span id="two"></span></b></p>

   <script>
      const marks = [89, 87, 93, 76, 69, 80];
      document.getElementById("one").innerHTML = marks;

      marks[2] = 100;
      document.getElementById("two").innerHTML = marks;
   </script>
   
</body>
</html>
Output

Original Array:

Updated Array:

The element at index [2] is updated in above example.

Array in JavaScript Example

<!DOCTYPE html>
<html>
<body>

   <script>
      const marks = [89, 87, 93, 76, 69, 80];
      for(let i=0; i<5; i++)
      {
         console.log("Marks obtained in Subject No.", i+1, " = ", marks[i]);
      }
   </script>
   
</body>
</html>

The snapshot given below shows the output produced by the above example:

javascript array example

Arrays are Objects in JavaScript

Since arrays are treated as objects in JavaScript, therefore an array in JavaScript, can also be created in this way:

const marks = {
   maths: 89,
   physics: 87,
   computer: 93,
   chemistry: 76,
   language: 69,
   sports: 80
};

Notice: the curly braces or {}, instead of square braces or [].

And therefore using names, we can access members. For example:

document.write(marks.maths);

will produce 89. Here is the complete example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p>Marks obtained in Mathematics: <b><span id="math"></span></b></p>
   <script>
      const marks = {
         maths: 89,
         physics: 87,
         computer: 93,
         chemistry: 76,
         language: 69,
         sports: 80
      };

      document.getElementById("math").innerHTML = marks.maths;
   </script>
   
</body>
</html>
Output

Marks obtained in Mathematics:

We can use Multiple Types of Values as Elements of Array in JavaScript

In JavaScript, it is not necessary to use same type of value while defining elements to an array. We can use any kind of value, variable and/or object to define an array. For example:

const myArray = [10, "fresherearth", 12.32, true];

Characteristics of Arrays in JavaScript

Here are the list of some important characteristics of arrays in JavaScript:

Important Methods and Properties of Arrays in JavaScript

Please note: A few methods, which are very rarely used in rare cases, are skipped.

JavaScript Online Test

« Previous Tutorial Next Tutorial »