Declaring Arrays

Site: Philippine Science High School - MC - Knowledge Hub
Course: SY25.CS3.Web Development
Book: Declaring Arrays
Printed by: , Guest user
Date: Tuesday, 25 November 2025, 9:33 PM

1. Introductions

After completing this module, you are expected to:

      • Represent a group of similar data using arrays.
      • Create arrays and define its elements.

          For groups of similar data, most high-level computer programming languages have ways to be collected together and referred to by a single name. One of the most widely used techniques is the array. An array contains a data set represented by a single variable name. You can use an array when you want to store a group or a list of related data in a single, easily controlled location.

          In this learning guide we will take a look at this technique and learn how to use it in JavaScript.


2. Declaring and Initializing Array


          There are a few ways to create arrays in JavaScript, but the most common is to use an array literal, which is a single declaration that declares a variable and specifies the values of the array as its content.

          Use the basic syntax for creating variables, to create an array using a literal array with one addition: the values in the array are separated by commas, and the entire array value set is enclosed in square brackets.

          Here is the syntax to create an array using the literal array:


 where name is the name of the variable allocated to the array, and the values in the array are value1, value2, and value3.

           The var statement is often very long when using an array literal to declare a large array. While you want to terminate every line of JavaScript code with a semicolon in most cases, breaking a literal array over several lines is acceptable. For example, you might write a literal array for a long array as follows:

 


          An element is each value found in the array. Each element has a number, referred to as an index, that represents the position of the element within the array. While numbering usually begins with 1 in everyday life, numbering also starts with 0 in programming. This is the case for arrays.

          By enclosing your index number in brackets after the array name, means you refer to a particular array element. As in the example below, chemElements [0] is the first element in the chemElements array, chemElements [1] is the second element, chemElements [2] is the third element, and so on. This also means that you would refer to the 10th element in the array using index 9 if you have an array consisting of 10 elements.

 Example:

<script>

 //creating array with literal method

  var chemElements = ["Argon", "Krypton", "Neon", "Xenon"];

 //accessing the values of array

document.write(chemElements[0]+"</br>");

document.write(chemElements[1]+"</br>");

document.write(chemElements[2]+"</br>");

document.write(chemElements[3]+"</br>");

 </script>

 

 Output:



          The var name = [value1, value2, value3,...]; syntax allows the array to be generated and the elements that it contains to be defined. Elements may be added to an existing array as well. To do this, you use a syntax similar to that used to assign a value to a standard variable, except that, after the name of the array, you also have an index for the new element in square brackets.

          For example, to add the value “Mercury” as a fifth element of the chemElements array, you would use the following statement:


          Because the existing four elements have the index number 0, 1, 2, and 3, this statement uses the next number, 4, and assigns it the string value "Mercury".

          The example below shows the updated code with the above statement to add the fifth element.

<script>

//creating array with literal method

var chemElements = ["Argon", "Krypton", "Neon", "Xenon"];

chemElements [4] = "Mercury";

//accessing the values of array

document.write(chemElements[0]+"</br>");

document.write(chemElements[1]+"</br>");

document.write(chemElements[2]+"</br>");

document.write(chemElements[3]+"</br>");

document.write(chemElements[4]+"</br>");

</script>

          You may create an array that does not contain any elements, and later add elements to it. By using the following syntax, you create a new empty array:


          In this expression, the square brackets imply that the new variable is an array. You can then add elements to the array just as you would to an array that contains elements already.

          Dynamically, the size of an array can change. If you allocate a value to an element that has not yet been created, the element and any elements that may precede it are automatically created.

          The first statement in the following code, for example, creates an array of chemElements without any elements. The second statement that assigns the third element to "Neon," which also creates the first two elements in the process (chemElements[0] and chemElements[1]).





          Most programming languages require all elements in an array to be exactly the same data type. In JavaScript, however, the values assigned to the elements of the array can be of different data types.


3. Array() Constructor Method


          The arrays are represented by the Array object in JavaScript. A special constructor called Array() is included in the Array object that provides another way to create an array. A constructor is a particular type of function that is used to establish reference variables as the basis for (that is, variables whose data type is the reference data type). You can create new arrays with the constructor Array() by using the new keyword and the constructor Array() name with the following syntax:


or


          You include an integer that represents the number of elements to be included in the array inside the parentheses of the Array() construction.

 Example1:              

<script>

//creating array with constructor method

var chemElements = new Array(4);

chemElements[0] = "Argon";

chemElements[1] = "Krypton";

chemElements[2] = "Neon";

chemElements[3] = "Xenon";

//accessing the values of array

document.write(chemElements[0]+"</br>");

document.write(chemElements[1]+"</br>");

document.write(chemElements[2]+"</br>");

document.write(chemElements[3]+"</br>");

</script> 

Example2:

 The code below will generate the same output as the methods above.

<script>

//creating array with constructor method

var chemElements = new Array("Argon", "Krypton", "Neon", "Xenon");

 //accessing the values of array

document.write(chemElements[0]+"</br>");

document.write(chemElements[1]+"</br>");

document.write(chemElements[2]+"</br>");

document.write(chemElements[3]+"</br>");

 </script>



          In general, JavaScript programmers create arrays using literals instead of the constructor. Many programmers think it's better to use literals than to use the constructor, and the constructor provides no unique advantages over literals.


4. Summary and References

Summary:

In summary,

  • An array contains a data set represented by a single variable name. It can be use when you want to store a group or a list of related data in a single, easily controlled location.
  • There are a few ways to create arrays in JavaScript:
    • The most common is to use an array literal;
    • Creating an empty array by using the syntax var name = [ ];
    • Array() constructor method


References:

Sasha Vodnik and Don Gosselin(2015). JavaScript. In Sasha Vodnik and Don Gosselin (Sixth Edition), Building Arrays and Controlling Flow (147-211). Australia, Brazil, Mexico, Singapore, United Kingdom, United States, Cengage Learning

 Array( ) Constructor: (n.d.). Retrieve from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array

 JavaScript Array – A Complete Guide for Beginners: (n.d.). Retrieve from https://data-flair.training/blogs/javascript-array/