What Are JavaScript Arrays?
This JavaScript arrays tutorial will teach you everything you need to know. Imagine you need to store a list of your friends’ names. You could create separate variables:
var friend1 = "Hamlet";
var friend2 = "Ophelia";
var friend3 = "Scarlet";But this gets messy fast! Arrays solve this problem by letting you store multiple values in one organized list.
Creating Your First Array
var friends = ["Hamlet", "Ophelia", "Scarlet"];
We create an array using square brackets [] and separate each item with a comma. This creates a list of three strings stored in one variable called friends.
Understanding Array Indexes
Important: Arrays start counting at 0, not 1!
var friends = ["Hamlet", "Ophelia", "Scarlet"];
// position 0 position 1 position 2
console.log(friends[0]); // Output: "Hamlet"
console.log(friends[1]); // Output: "Ophelia"
console.log(friends[2]); // Output: "Scarlet"We access items in an array by using their position number (called an index) inside square brackets. The first item is always at position 0, not 1.
How Many Items Do I Have?
friends.length; // Output: 3
We use the .length property to find out how many items are in the array. This returns the total count of items.
Finding Items in Your Array
The indexOf() Method
Want to find where something is? Use indexOf():
var friends = ["Hamlet", "Ophelia", "Scarlet"];
friends.indexOf("Ophelia"); // Returns: 1
friends.indexOf("John"); // Returns: -1 (not found!)
We use indexOf() to search for an item in the array. If the item exists, it returns the position where it was found. If the item doesn’t exist, it returns -1.
Practical Example: Checking if Someone is in Your List
var friends = ["Hamlet", "Ophelia", "Scarlet"];
var searchName = "Ophelia";
if(friends.indexOf(searchName) > -1) {
alert(searchName + " is in your friends list!");
} else {
alert("Sorry, " + searchName + " is not in your list");
}
We check if indexOf() returns a value greater than -1. Any position (0, 1, 2, etc.) is greater than -1, so this tells us the item exists. If it returns exactly -1, the item wasn’t found.
Adding Items to Your Array
Adding to the End
var friends = ["Ophelia", "Summer"];
friends.push("Daisymay");
// Now: ["Ophelia", "Summer", "Daisymay"]We use push() to add a new item to the end of the array. The array automatically expands to include the new item.
Removing Items from Your Array
Removing the Last Item
var friends = ["Ophelia", "Summer", "Daisymay"];
friends.pop();
// Now: ["Ophelia", "Summer"]
We use pop() to remove the last item from the array. This method also returns the removed item if you need to use it.
Removing the First Item
var friends = ["Ophelia", "Summer", "Daisymay"];
friends.shift();
// Now: ["Summer", "Daisymay"]
We use shift() to remove the first item from the array. All remaining items automatically shift down to fill the empty position.
Changing Items in Your Array
var friends = ["Ophelia", "Summer", "Daisymay"];
friends[2] = "Peter";
// Now: ["OPhelia", "Summer", "Peter"]
We assign a new value to the string at position 2. Just access the position you want to change and assign a new value to it!
Displaying Your Array Nicely
The join() Method
var friends = ["Betty", "Augustine", "James"];
console.log(friends.join(", "));
//Output: "Betty, Augustine, James"
console.log(friends.join(" / "));
//Output: "Betty / Augustine / James"
console.log(friends.join(" and "));
//Output: "Betty and Augustine and James"We use join() to combine all array items into one string. Whatever separator we put inside the parentheses will appear between each item.
Practice Challenge
Try creating a shopping list array with these operations:
// 1. Create an array with 3 items
var shoppingList = ["milk", "eggs", "bread"];
// 2. Add "cheese" to the list
shoppingList.push("cheese");
// 3. Check if "eggs" is in the list
if(shoppingList.indexOf("eggs") > -1) {
console.log("Don't forget the eggs!");
}
// 4. Remove the first item
shoppingList.shift();
// 5. Display the list nicely
console.log("Buy: " + shoppingList.join(", "));We practice using multiple array methods together. Try running this code and then modify it to add your own items!
Quick reference cheat sheet
| Method | What It Does | Example |
|---|---|---|
.length | Returns number of items | arr.length |
[index] | Accesses item at position | arr[0] |
.indexOf(item) | Finds position of item | arr.indexOf("x") |
.push(item) | Adds item to end | arr.push("new") |
.pop() | Removes last item | arr.pop() |
.shift() | Removes first item | arr.shift() |
.join(separator) | Combines into string | arr.join(", ") |
Key Takeaways
- JavaScript arrays for beginners start with understanding that arrays let you store multiple values in one variable.
- Array positions start at 0, not 1.
- Use
indexOf()to search for items (returns -1 if not found). - Use
push()to add items andpop()/shift()to remove them. - Use
join()to display your array as a formatted string.
Now you’re ready to work with JavaScript arrays! Practice these methods and they’ll become second nature.
