# JavaScript Arrays 101 ## **Introduction** Imagine you have a notebook where you write down a list of tasks for the day. Instead of storing each task in a separate notebook, you write them all in one notebook with numbers: Task 1, Task 2, Task 3, etc. An array in JavaScript works the same way. It is a single container that holds multiple values in a specific order. In this blog, we will learn what arrays are, how to create them, how to access and modify their values, and how to loop through them. * * * ## **1\. What Arrays Are and Why We Need Them** An **array** is a collection of values stored in a single variable. Each value in the array is called an **element**, and each element has a position called an **index**. ### **Why Do We Need Arrays?** Without arrays, storing multiple related values would be messy: **Without an array (repetitive and hard to manage):** ```javascript let fruit1 = "Apple"; let fruit2 = "Banana"; let fruit3 = "Mango"; let fruit4 = "Orange"; let fruit5 = "Grapes"; console.log(fruit1); console.log(fruit2); console.log(fruit3); // This gets annoying quickly with many values! ``` **With an array (clean and manageable):** ```javascript let fruits = ["Apple", "Banana", "Mango", "Orange", "Grapes"]; console.log(fruits[0]); console.log(fruits[1]); console.log(fruits[2]); // Much cleaner! ``` Arrays make your code cleaner, easier to manage, and easier to work with groups of related data. ### **Real-Life Examples** Think of arrays as lists in real life: * **A shopping list**: Milk, Bread, Eggs, Vegetables * **Student marks**: 85, 90, 78, 92, 88 * **Days of the week**: Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday ### **Basic Array Concepts** **Element**: A single value in the array ```javascript ["Apple", "Banana", "Mango"] ^ ^ ^ Elements ``` **Index**: The position of an element (starts from 0, not 1) ```javascript ["Apple", "Banana", "Mango"] 0 1 2 Indices ``` * * * ## **2\. How to Create an Array** There are two main ways to create an array in JavaScript. ### **Method 1: Using Square Brackets (Recommended)** The most common way to create an array is using square brackets `[]`: ```javascript let fruits = ["Apple", "Banana", "Mango"]; console.log(fruits); // Output: ["Apple", "Banana", "Mango"] ``` ### **Example 1: Array of Numbers** ```javascript let marks = [85, 90, 78, 92, 88]; console.log(marks); // Output: [85, 90, 78, 92, 88] ``` ### **Example 2: Array of Mixed Types** Arrays can contain different types of values: ```javascript let student = ["Ashish", 20, true, 450]; // String, number, boolean, number all in one array console.log(student); // Output: ["Ashish", 20, true, 450] ``` ### **Example 3: Empty Array** You can create an empty array and add values later: ```javascript let emptyArray = []; console.log(emptyArray); // Output: [] ``` ### **Method 2: Using the Array Constructor** You can also use the `new Array()` constructor, but this is less common: ```javascript let fruits = new Array("Apple", "Banana", "Mango"); console.log(fruits); // Output: ["Apple", "Banana", "Mango"] ``` We will stick with square brackets as it is simpler and more popular. * * * ## **3\. Accessing Elements Using Index** To get a specific element from an array, you use the element's index inside square brackets. ### **Important: Indexing Starts from 0** The first element is at index 0, the second element is at index 1, and so on. ```javascript let fruits = ["Apple", "Banana", "Mango", "Orange", "Grapes"]; // Index: 0 1 2 3 4 console.log(fruits[0]); // Output: Apple console.log(fruits[1]); // Output: Banana console.log(fruits[2]); // Output: Mango console.log(fruits[3]); // Output: Orange console.log(fruits[4]); // Output: Grapes ``` ### **Example 1: Accessing Different Elements** ```javascript let marks = [85, 90, 78, 92, 88]; console.log("First mark: " + marks[0]); // Output: First mark: 85 console.log("Second mark: " + marks[1]); // Output: Second mark: 90 console.log("Last mark: " + marks[4]); // Output: Last mark: 88 ``` ### **Example 2: Using Array Values in Calculations** ```javascript let prices = [100, 200, 150, 300, 250]; let total = prices[0] + prices[1] + prices[2]; console.log("Total of first three items: " + total); // Output: Total of first three items: 450 ``` ### **What Happens with Invalid Index?** If you try to access an index that does not exist, you get `undefined`: ```javascript let fruits = ["Apple", "Banana", "Mango"]; console.log(fruits[0]); // Output: Apple console.log(fruits[5]); // Output: undefined console.log(fruits[10]); // Output: undefined ``` ### **Visual Representation of Array Indexing** ```javascript Array: ["Apple", "Banana", "Mango", "Orange", "Grapes"] Index: 0 1 2 3 4 |----------|----------|----------|----------| Value: Apple Banana Mango Orange Grapes Accessing: fruits[0] = "Apple" fruits[2] = "Mango" fruits[4] = "Grapes" ``` * * * ## **4\. Updating Elements** You can change the value of an element by assigning a new value to its index. ### **Basic Syntax** ```javascript arrayName[index] = newValue; ``` ### **Example: Updating a Single Element** ```javascript let fruits = ["Apple", "Banana", "Mango"]; console.log("Before: " + fruits[1]); // Output: Before: Banana fruits[1] = "Orange"; // Change Banana to Orange console.log("After: " + fruits[1]); // Output: After: Orange console.log("All fruits: ", fruits); // Output: All fruits: ["Apple", "Orange", "Mango"] ``` * * * ## **5\. Array Length Property** Every array has a **length property** that tells you how many elements are in the array. ### **Syntax** ```javascript arrayName.length ``` ### **Example: Getting Array Length** ```javascript let fruits = ["Apple", "Banana", "Mango"]; console.log(fruits.length); // Output: 3 ``` The array has 3 elements, so the length is 3. * * * ## **6\. Basic Looping Over Arrays** Looping through an array means going through each element one by one. This is very useful when you want to do something with every element. ### **Method 1: Using for Loop** The most traditional way to loop through an array: ```javascript let fruits = ["Apple", "Banana", "Mango"]; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } ``` Output: ```plaintext Apple Banana Mango ``` ### **Breaking Down the for Loop** ```plaintext for (let i = 0; i < fruits.length; i++) { ^ ^ ^ ^ | | | | | | | +-- Increment i by 1 each time | | +--------- Continue while i is less than array length | +------------ Start with i = 0 +----------------- Create a loop variable i } ``` ### **Method 2: Using forEach** There is a simpler way using `forEach()`. We will learn this in the "Array Methods" blog: ```javascript let fruits = ["Apple", "Banana", "Mango"]; fruits.forEach(function(fruit) { console.log(fruit); }); ``` Or with arrow functions: ```plaintext let fruits = ["Apple", "Banana", "Mango"]; fruits.forEach(fruit => console.log(fruit)); ``` Both produce the same output as the for loop. Output: ```plaintext Apple Banana Mango ``` * * * * * * ## **Visual Array Representation** ### **Memory Storage Visualization** ```plaintext Array: let students = ["Ashish", "Priya", "Rahul"]; Memory: ┌─────────────────────────────────────┐ │ students │ ├─────────────────────────────────────┤ │ [0] "Ashish" (index 0) │ ├─────────────────────────────────────┤ │ [1] "Priya" (index 1) │ ├─────────────────────────────────────┤ │ [2] "Rahul" (index 2) │ └─────────────────────────────────────┘ students.length = 3 ``` * * * ## **Summary** 1. **Arrays** are collections of values stored in a single variable 2. **Create arrays** using square brackets: `let arr = [value1, value2]` 3. **Access elements** using index (starting from 0): `arr[0]` 4. **Update elements** by assigning new values: `arr[0] = newValue` 5. **Array length** tells you how many elements are in the array: `arr.length` 6. **Last element** is always at index `arr.length - 1` 7. **Loop through arrays** using a for loop to process each element 8. **Indexing starts at 0**, not 1 9. **Arrays** make managing multiple related values much easier