3.4.7 Arrays

This topic explains what arrays are in JavaScript, how to declare and initialize them, and how to access and manipulate their elements.

Definition

Array: An array is a datatype which can hold a number of homogenous set of elements. Such that we do not need to define multiple variables of the same type like num1, num2, ... num25. Instead, we can declare an array which contains 25 values. This way, we can directly access any value just by passing the respective array-index number. It is trivial to note that array-index starts with 0.

Core Concept

An array is like a row of lockers, each with a number. Instead of having 25 separate boxes labeled `num1`, `num2`, ..., `num25`, you have one row of 25 lockers, numbered 0 to 24. Each locker holds one value, and you can open any locker by its number (index). This makes it much easier to store and manage lists of related data—like marks of 25 students, prices of 10 products, or names of 5 friends. The first locker is always number 0, not 1.

Detailed Explanation

Why Use Arrays?

Such that we do not need to define multiple variables of the same type like num1, num2, ... num25. Instead, we can declare an array which contains 25 values.

• Avoids declaring many separate variables.
• Stores multiple values under one name.
• Access values by index number.
• Array index starts at 0.

Declaring and Initializing an Array

Declaration of an array is of the form:

```javascript var Arr = [4, 2, 5, 1, 3]; ```

Example: ```html <html> <head> <title>Arrays in JavaScript</title> </head> <body> <script type="text/javascript"> var Arr = [4, 2, 5, 1, 3]; document.write("Array is:", Arr); </script> </body> </html> ```

Output: Array is: 4,2,5,1,3

• `var Arr = [4, 2, 5, 1, 3];` declares and initializes an array with 5 elements.
• The array has indices 0, 1, 2, 3, 4.
• `document.write("Array is:", Arr);` displays all elements separated by commas.

Declaring a Null Array and Assigning Values

Alternatively, we can declare a null array first and assign values to it later:

```html <html> <head> <title>Arrays in JavaScript</title> </head> <body> <script type="text/javascript"> var Arr = []; Arr[0] = 4; Arr[1] = 2; Arr[2] = 5; Arr[3] = 1; Arr[4] = 3; document.write("Elements of Array are, after declaring a null array: ", Arr); </script> </body> </html> ```

Output: Elements of Array are, after declaring a null array: 4,2,5,1,3

• `var Arr = [];` declares an empty array.
• `Arr[0] = 4;` assigns 4 to index 0.
• `Arr[1] = 2;` assigns 2 to index 1.
• And so on.
• The array is displayed with all elements.

Using a For-Loop to Populate an Array

So, rather than assigning values one by one, we can alternatively use a `for-loop` to populate an array.

```html <html> <head> <title>Arrays in JavaScript</title> </head> <body> <script type="text/javascript"> var Arr = []; for (i = 0; i < 5; i++) { Arr[i] = prompt("Input Array element"); } document.write("Elements of Array using For-Loop are, after declaring a null array: ", Arr); </script> </body> </html> ```

Output: A prompt box appears 5 times asking "Input Array element". After entering values (e.g., 5, 3, 7, 1, 9), the page displays: Elements of Array using For-Loop are, after declaring a null array: 5,3,7,1,9

• `var Arr = [];` declares an empty array.
• The `for` loop runs 5 times (i = 0 to 4).
• Each iteration uses `prompt()` to get user input and assigns it to `Arr[i]`.
• After the loop, all elements are displayed.

Accessing Array Elements

You can access any element of an array by its index.

Example: ```javascript var Arr = [4, 2, 5, 1, 3]; document.write(Arr[0]); // Output: 4 document.write(Arr[2]); // Output: 5 document.write(Arr[4]); // Output: 3 ```

• `Arr[0]` is the first element.
• `Arr[1]` is the second element.
• `Arr[n-1]` is the last element (where n is the length).
• Accessing an index that doesn't exist returns `undefined`.

Array Length

The `length` property gives the number of elements in an array.

Example: ```javascript var Arr = [4, 2, 5, 1, 3]; document.write(Arr.length); // Output: 5 ```

Common Array Operations

Intermediate Level

An array is a data type that holds multiple values under one name. In JavaScript, arrays are declared with `var Arr = [4, 2, 5, 1, 3];` or as an empty array `var Arr = [];`. Elements are accessed by index, starting at 0. You can assign values individually (`Arr[0] = 4;`) or use a `for` loop to populate the array. The `length` property gives the number of elements. Arrays can hold any type of data (numbers, strings, objects). Common operations include `push()` (add to end), `pop()` (remove from end), and accessing elements by index.

Important Points

• - Array = datatype holding multiple values.
• - Declared with `var Arr = [4, 2, 5, 1, 3];`.
• - Index starts at 0.
• - Access elements by index: `Arr[0]`, `Arr[1]`, etc.
• - Can declare empty array and assign later: `var Arr = []; Arr[0] = 4;`.
• - Can use `for` loop to populate array with `prompt()`.
• - `length` property gives number of elements.
• - Arrays can hold any type of data.

Remember

• - Array: `var Arr = [4, 2, 5, 1, 3];`.
• - Index: Starts at 0.
• - Access: `Arr[0]` (first), `Arr[4]` (fifth).
• - Empty Array: `var Arr = [];`.
• - Populate: `Arr[0] = 4;` or `for` loop with `prompt()`.
• - Length: `Arr.length`.
• - Output: `document.write(Arr);`.

Common Mistakes

• - Starting index at 1: JavaScript arrays start at 0.
• - Accessing out-of-bounds index: Returns `undefined`.
• - Forgetting `[]` for array literal: `var Arr = (4, 2, 5);` is not an array.
• - Mixing up `length` and index: `Arr.length` is the count; `Arr[Arr.length]` is out of bounds.
• - Using `var` in loops: Use `let` for block scope in modern JavaScript.
• - Assuming arrays are fixed size: JavaScript arrays are dynamic.

Quick Revision

An array is a data type that holds multiple values under one name. In JavaScript, arrays are declared with `var Arr = [4, 2, 5, 1, 3];` or as an empty array `var Arr = [];`. Elements are accessed by index, starting at 0. You can assign values individually or use a `for` loop to populate the array. The `length` property gives the number of elements. Arrays can hold any type of data and are used to store lists of related information.

60-Second Revision

• Array: Holds multiple values under one name.
• Declare: `var Arr = [4, 2, 5, 1, 3];` or `var Arr = [];`.
• Index: Starts at 0.
• Access: `Arr[0]` (first), `Arr[4]` (fifth).
• Populate: `Arr[0] = 4;` or `for` loop with `prompt()`.
• Length: `Arr.length`.
• Output: `document.write(Arr);`.
• Key Point: Arrays store lists of data; access elements by index starting at 0.