JavaScript Roadmap — Day 31: Introduction to Arrays — Storing Multiple Values

 

 

📊 Your Progress Day 31 of 180 (17%)

✅ Beginner Phase Complete! ⚡ Intermediate Phase (Days 31-90) 🏆 Advanced (91-180+)

📙 MEDIUM Intermediate Phase · First Day! 🚀

📋 In This Lesson Day 31

1. The Problem3 min

2. What Are Arrays?4 min

3. Creating Arrays3 min

4. Accessing Elements4 min

5. Array Properties3 min

6. Common Mistakes3 min

7. Try It Yourself5 min

8. Practice Tasks10 min

JavaScript · Day 31 of 180 · Intermediate Phase — 🚀 NEW PHASE!

Introduction to Arrays — Storing Multiple Values

So far, we've stored single values in variables. But what if you need to store a list of items? Arrays are the answer — they let you store multiple values in one variable, making data management powerful and efficient.

Day 31 / 180

⚡ Intermediate Phase

🕐13 min read

💻7 code examples

🎯3 practice tasks

📝5 quiz questions

Imagine you need to store a list of 10 student names. Without arrays, you'd need 10 separate variables. With arrays, you use just one:

Without Array vs With Array

// ❌ Without array — 10 variables for 10 names
let student1 = "Ali";
let student2 = "Sara";
let student3 = "Waheed";
// ... 7 more variables!

// ✅ With array — one variable holds all names
let students = ["Ali", "Sara", "Waheed", "Ahmed", "Fatima"];
console.log(students);  // ["Ali", "Sara", "Waheed", "Ahmed", "Fatima"]

Arrays are one of the most important data structures in JavaScript. They allow you to store, organize, and manipulate collections of data efficiently. Today, we'll start with the basics — creating arrays, accessing elements, and understanding array properties. This is the foundation for all advanced array methods you'll learn in the coming days.

1. The Problem — Managing Multiple Values

Imagine you're building a shopping cart. A customer can add multiple items. Without arrays, you'd need a separate variable for each item — which is impossible because you don't know how many items they'll add. Arrays solve this by letting you store any number of items in a single, ordered list.

Think of an array like a train with multiple compartments. The train is your array variable, and each compartment holds a value. You can add more compartments, remove them, or rearrange them — all while keeping the train (array) intact.

💡 The insight: Arrays are ordered collections. Each value has a position (index) starting from 0. This order matters — you can access items by their position, loop through them in order, and sort them.

2. What Are Arrays? — Ordered Lists of Values

An array is a special type of object used to store ordered collections. You can put any type of data in an array — numbers, strings, booleans, objects, even other arrays! Arrays are zero-indexed, meaning the first element is at position 0, the second at 1, and so on.

Array Basics

// Arrays can hold any data type
let mixed = [42, "hello", true, null, { name: "Waheed" }];

// Index positions (zero-based):
//    0       1        2       3          4
// [ "apple", "banana", "cherry", "date", "elderberry" ]

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]);  // "apple" (first element)
console.log(fruits[2]);  // "cherry" (third element)
console.log(fruits[5]);  // undefined (doesn't exist)

📝 QUIZ Test Your Understanding

Question 1: What index position does the first element in an array have?

A) 1 B) 0 C) first D) -1

3. Creating Arrays — Two Ways

There are two main ways to create arrays in JavaScript: array literals (preferred) using square brackets [], and the Array constructor using new Array(). The array literal is shorter, cleaner, and almost always the better choice.

Creating Arrays

// ✅ Method 1: Array literal (RECOMMENDED)
let colors = ["red", "green", "blue"];
let numbers = [1, 2, 3, 4, 5];
let empty = [];  // Empty array (ready to fill later)

// ⚠️ Method 2: Array constructor (less common)
let fruits = new Array("apple", "banana", "cherry");

// ⚠️ Be careful with single number in constructor
let arr1 = new Array(5);   // Creates array with 5 empty slots, NOT [5]
let arr2 = [5];              // Creates array with one element: 5

// ✅ Best practice: always use []
let shoppingCart = [];
shoppingCart[0] = "Milk";
shoppingCart[1] = "Eggs";
shoppingCart[2] = "Bread";

4. Accessing and Modifying Array Elements

Use bracket notation array[index] to access or modify array elements. Remember that indexes start at 0. You can also change existing elements by assigning a new value to an index.

Accessing and Modifying

let fruits = ["apple", "banana", "cherry", "date"];

// Accessing elements
console.log(fruits[0]);  // "apple"
console.log(fruits[2]);  // "cherry"
console.log(fruits[4]);  // undefined (doesn't exist)

// Modifying elements
fruits[1] = "blueberry";  // Changes "banana" to "blueberry"
console.log(fruits);  // ["apple", "blueberry", "cherry", "date"]

// Adding new elements
fruits[4] = "elderberry";  // Adds new element at index 4
console.log(fruits);  // ["apple", "blueberry", "cherry", "date", "elderberry"]

📝 QUIZ 2 & 3 Test Your Understanding

Question 2: Given let arr = [10, 20, 30, 40], what is arr[2]?

A) 10 B) 20 C) 30 D) 40

Question 3: What happens when you access an index that doesn't exist in an array?

A) Throws an error B) Returns null C) Returns undefined D) Returns 0

5. The length Property — How Many Items?

Every array has a length property that tells you how many elements are in the array. This is incredibly useful for looping through arrays (which we'll cover soon). The length property updates automatically when you add or remove elements.

Length Property

let fruits = ["apple", "banana", "cherry"];
console.log(fruits.length);  // 3

// Length updates automatically when you add elements
fruits[3] = "date";
console.log(fruits.length);  // 4

// You can also set length to truncate an array
fruits.length = 2;
console.log(fruits);  // ["apple", "banana"] (cherry and date removed)

// Last element is always at index length - 1
console.log(fruits[fruits.length - 1]);  // "banana"

📝 QUIZ Test Your Understanding

Question 4: If an array has 7 elements, what is the index of the last element?

A) 7 B) 8 C) 6 D) length

6. Common Mistakes to Avoid

Mistakes & Fixes

// ❌ MISTAKE 1: Off-by-one errors (forgetting zero-indexing)
let arr = ["a", "b", "c"];
console.log(arr[3]);  // undefined (last index is 2, not 3)

// ✅ FIX: Remember index 0 = first element
console.log(arr[2]);  // "c"

// ❌ MISTAKE 2: Using Array constructor incorrectly
let wrong = new Array(5);  // Creates [empty × 5], NOT [5]!

// ✅ FIX: Use array literals
let right = [5];  // [5]

// ❌ MISTAKE 3: Confusing arrays with other data types
console.log(typeof [1, 2, 3]);  // "object" (not "array")

// ✅ FIX: Use Array.isArray() to check if something is an array
console.log(Array.isArray([1, 2, 3]));  // true

7. Try It Yourself — Array Playground

Experiment with arrays below. Add, modify, and view array elements in real time.

✏️ Array Playground

HTML

<div style="padding:24px;font-family:sans-serif;max-width:550px;"> <h3 style="color:#0f1117;margin-bottom:16px;">📦 Array Explorer</h3> <div style="margin-bottom:16px;"> <label style="display:block;margin-bottom:8px;font-size:12px;font-weight:700;">Current Array:</label> <div id="arrayDisplay" style="background:#1e2235;padding:12px;border-radius:8px;font-family:monospace;color:#cdd6f4;margin-bottom:12px;">[]</div> </div> <div style="margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap;"> <input type="text" id="itemInput" placeholder="Enter value" style="flex:1;padding:8px;border-radius:8px;border:1px solid #e5e7eb;"> <button id="addBtn" style="background:#00c896;color:white;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;">Add</button> <button id="removeLastBtn" style="background:#f38ba8;color:white;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;">Remove Last</button> <button id="resetBtn" style="background:#4f6ef7;color:white;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;">Reset</button> </div> <div style="background:#1e2235;border-radius:8px;padding:12px;"> <div style="font-size:12px;font-weight:700;color:#a8b8ff;margin-bottom:8px;">📊 Info:</div> <div id="info" style="font-family:monospace;font-size:13px;color:#cdd6f4;"></div> </div> </div>

JAVASCRIPT

let items = []; function updateDisplay() { const arrayDisplay = document.querySelector("#arrayDisplay"); const info = document.querySelector("#info"); if (items.length === 0) { arrayDisplay.textContent = "[] (empty)"; info.innerHTML = `📦 Length: 0<br>💡 Add some items to get started!`; } else { arrayDisplay.textContent = JSON.stringify(items); info.innerHTML = `📦 Length: ${items.length}<br>🔹 First item: ${items[0]}<br>🔹 Last item: ${items[items.length - 1]}`; } } document.querySelector("#addBtn").addEventListener("click", () => { const input = document.querySelector("#itemInput"); const value = input.value.trim(); if (value) { items.push(value); input.value = ""; updateDisplay(); } }); document.querySelector("#removeLastBtn").addEventListener("click", () => { items.pop(); updateDisplay(); }); document.querySelector("#resetBtn").addEventListener("click", () => { items = []; updateDisplay(); }); updateDisplay();

LIVE PREVIEW

💡 Add items to see the array grow!

8. Practice Tasks

Task 1 — Easy: Create Your First Array

Create an array called favoriteFoods with 5 of your favorite foods. Then log the first and last items using bracket notation.

Task 2 — Medium: Modify the Array

Start with let numbers = [10, 20, 30, 40, 50]. Change the third element to 99. Then add a new element 60 at the end. Finally, log the array and its length.

Task 3 — Hard: Array Analyzer

Write a function analyzeArray(arr) that logs: the length of the array, the first element, the last element, and whether the array contains the value "JavaScript". Test with different arrays.

🔥 Challenge of the Day

Create an array called myArray with any 5 items. Then write code to swap the first and last items. Log the array before and after.

🔍 View Solution

let myArray = [1, 2, 3, 4, 5];
console.log("Before:", myArray);
let temp = myArray[0];
myArray[0] = myArray[myArray.length - 1];
myArray[myArray.length - 1] = temp;
console.log("After:", myArray);

🎯 Key Takeaways

• Arrays store multiple values in a single variable
• Zero-indexed — first element is at index 0
• Use bracket notation array[index] to access/modify elements
• The length property tells you how many elements are in the array
• Always prefer array literals [] over new Array()
• Accessing an index that doesn't exist returns undefined (not an error)

💼 Common Interview Questions

❓ Q: How do you create an array in JavaScript?

💡 A: Using array literals: let arr = [1, 2, 3];

❓ Q: What is the index of the first element in an array?

💡 A: 0 (arrays are zero-indexed).

❓ Q: How do you get the number of elements in an array?

💡 A: Using the length property: arr.length.

← Previous Lesson

Day 30: Hoisting

Next Lesson →

Day 32: Array Methods

🚀⚡🎯

Welcome to the Intermediate Phase! 🎉

You've completed 30 days. Now we dive deeper into JavaScript's most powerful features — starting with Arrays!

Enjoying this roadmap?

Follow Muhammad Waheed Asghar for daily JavaScript tips and updates!

Follow on LinkedIn Follow on Facebook