JavaScript Arrays
The previous lesson stored facts as text you could send later. This lesson keeps the list alive in the script. Three color names sit in order, and you point at a slot by its number.
A shelf, not a note
Square brackets build the list while the script runs. Each value sits in a numbered slot. This is not JSON text waiting for parse, and it is not an object whose fields have names. Order is the whole point of the structure.
Names versus numbers
📊 Named object versus numbered array
| Question | Object | Array |
|---|---|---|
| How you point | a key such as name | an index such as 0 |
| First color | not a list of colors | colors[0] |
| How many | you count the keys | length |
| Order | not the point | the point |
| After the last JSON page | a note about data | a live list in the script |
An object answers which name you mean. An array answers which position you mean. The first color is colors[0], with no key required. Putting an object inside a slot is a later habit, not this page.
Brackets, not braces
Curly braces open an object. Square brackets open an array. The three color names are three slots in order. The mug you built earlier was one named field. When you only want a list, keep the square brackets.
let colors = ["red", "green", "blue"];
console.log(colors[0]);
The first slot is index 0
colors[0] prints red. Counting starts at zero, so the second name is colors[1] and that slot prints green. The third name is blue, at index 2.
let colors = ["red", "green", "blue"];
console.log(colors.length);
console.log(colors[colors.length - 1]);
length counts the slots
colors.length is 3 because three names are stored. The last slot is colors[colors.length - 1], and it prints blue. You subtract one because the first index is zero, not one. length is a property, so you do not add parentheses.
let colors = ["red", "green", "blue"];
colors[1] = "gold";
console.log(colors[1]);
console.log(colors.length);
Replacing a slot keeps the count
colors[1] = "gold" overwrites green. The next read of that slot prints gold. length stays 3, because an existing slot was replaced rather than a new one added. Adding and removing slots belongs to the next lesson.
let colors = ["red", "green", "blue"];
console.log(colors[9]);
console.log(colors.length);
A missing index is not a new slot
colors[9] has nothing stored, so the read is undefined. length is still 3. Asking for a slot that was never filled does not grow the list. Writing past the end would grow it and leave gaps, and that is not the tool on this page.
let bag = ["red", 12, true];
console.log(bag[1]);
console.log(typeof bag[0]);
Keep one kind of value when you can
A slot may hold a string, a number, or a boolean. bag[1] prints 12. typeof bag[0] is string. A list of colors is easier to read than a mixed bag. The language allows the mix.
Show the first color on the page
Read index 0. Write that string into the paragraph. Leave the other colors in the list.
<!DOCTYPE html>
<html>
<head>
<title>arrays — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let colors = ["red", "green", "blue"];
let box = document.getElementById("line");
box.textContent = colors[0];
</script>
</body>
</html>
The paragraph shows red. Change only the first string inside the brackets, then refresh, and the line follows. The other two colors stay stored. They are simply not written into the paragraph.
Practice steps
- Create the three colors and read index 0.
- Read length, then read the last color with length minus one.
- Replace index 1 with gold and read that slot plus the length.
- Read index 9 and confirm the length is still 3.
- Read the number in the mixed bag and the type of the first slot.
- In the HTML demo, change only the first color, refresh, and read the paragraph.
Frequent slip-ups
- Counting from 1 and skipping the first color
- Calling
lengthwith parentheses as if it were a function - Treating the array as JSON text that needs
parse - Expecting
lengthto grow when you only read a missing index - Replacing a slot and assuming a new item was added
- Reaching for array methods on this page
Summary
- An array is a live ordered list in the script
- Square brackets create it
- Index 0 is the first item
lengthcounts slots and takes no parentheses- Assigning to an existing index replaces that slot
- Reading past the end is
undefinedandlengthstays put - The first item can fill one line on the page
- Next: array methods, which add and remove slots
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top