What an array is and what you need
An array holds an ordered list of values. It is useful when several items belong together, such as task names, scores, or products in a basket. Each item has a numbered position called an index. JavaScript starts counting indexes at 0, so the first item is at index 0, the second at index 1, and so on.
You can try the examples in a browser’s developer console or in Node.js 18 or later. They use standard JavaScript features supported by those environments. Enter each example as shown and look at the output from console.log(). If you use a browser console, you do not need to create an HTML page first.
Create an array and access its elements
Create an array by placing values inside square brackets, separated by commas. For example: const colors = ["red", "green", "blue"]; This array has three strings. An empty array, const colors = []; starts with no elements and can be filled later. Arrays can hold other kinds of values too, but keeping related items of the same kind together often makes code easier to understand.
Read an element by putting its index in square brackets after the array name: console.log(colors[0]); prints red, and console.log(colors[2]); prints blue. The length property reports how many elements the array contains: console.log(colors.length); prints 3. Because indexes start at 0, the last element of a nonempty array is at colors[colors.length - 1].
An index outside the array does not produce an element. For the three-item colors array, console.log(colors[3]); prints undefined. Before using a value from an index that might not exist, check that the index is at least 0 and less than the array’s length. This is especially helpful when an index comes from user input or a calculation.
Update, add, and remove elements
You can replace an existing element by assigning a new value at its index. Starting with const colors = ["red", "green", "blue"]; enter colors[1] = "yellow"; followed by console.log(colors);. The array now contains red, yellow, and blue. Declaring the array with const prevents you from assigning a different array to the variable, but it does not prevent changes to the array’s elements.
Use push() to add to the end: colors.push("purple");. Use pop() to remove and return the last element: const removed = colors.pop();. To add at the beginning, use unshift(); to remove and return the first element, use shift(). These methods change the original array, so check its contents afterward if that matters to your program.
Avoid assigning far beyond the current length, such as colors[10] = "orange"; on a short array. That creates empty positions between existing elements and the new one, which can make later iteration confusing. If your goal is simply to append an item, push() expresses that intention more clearly.
Iterate through an array
Iteration means doing something for each element. A for...of loop is a direct choice when you need the values: const tasks = ["read", "practice", "review"]; for (const task of tasks) { console.log(task); } This prints each task in order. The loop variable task holds the current value; it does not hold the index.
When you need both the position and the value, use an indexed loop: for (let i = 0; i < tasks.length; i++) { console.log(i, tasks[i]); } The loop begins at 0 and stops before i reaches tasks.length. Using i <= tasks.length instead would run once too many times and read undefined at the end.
The forEach() method offers another way to run a function for every element: tasks.forEach((task, index) => { console.log(index, task); });. It is convenient for actions such as printing or updating another part of your program. Unlike an ordinary for loop, you cannot stop forEach() early with break.
Choose the right approach and check your results
Use a loop or forEach() when you want to perform an action for each item. When you want a new array made from existing values, map() is often a better fit. For example: const tasks = ["read", "practice", "review"]; const labels = tasks.map(task => "Task: " + task); console.log(labels);. The result contains three prefixed strings. map() returns a new array; it does not replace the original tasks array.
If an array result surprises you, log both the array and its length, then check the index you used. Ask whether the method you called changes the original array, as push() does, or returns a new one, as map() does. Keeping that distinction in mind makes small list-based programs easier to write and debug.
