Explore JavaScript arrays and objects on Day 3 of our tutorial series. Understand data storage, iteration techniques, and object manipulation.
Every program you write comes down to one thing in the end: moving data around. Holding it, reshaping it, reading it back out. In JavaScript, two structures do most of that work, and today they’re the whole show.
Arrays and objects.
Day 3 is where they click. We’ll build arrays, change them, and walk through them a few different ways. Then we’ll do the same for objects: how to define them, reach into them, and store behavior right next to the data. Get comfortable here and the harder stuff later, from DOM work to full apps, stops feeling like a wall.
Table of Contents
- Creating and Manipulating Arrays
- Array Methods and Iteration
- Object Literals and Properties
- Object Methods
- Iterating Over Object Properties
- Conclusion
Creating and Manipulating Arrays
Arrays are ordered lists. You drop values in, they keep their spot, and you can mix types in the same list if you want. That flexibility is why they turn up everywhere. You make one with square brackets [] and separate the values with commas:
/**
* Array holding different types of elements
* @type {Array}
*/
let ourArray = ['apple', 'banana', 'cherry', 42, true];Every element has an index, and the count starts at zero, not one. So the first item lives at position 0:
/**
* Access and log the first element of the array
* @param {number} index - The index to access in the array
*/
console.log(ourArray[0]); // Output: 'apple'Want to change a value? Assign a new one to that index. No special method needed:
/**
* Update the value at a specific index in the array
* @param {number} index - The index to update
* @param {string} newValue - The new value to assign
*/
ourArray[2] = 'grape';Array Methods and Iteration
Arrays ship with built-in methods that handle the common chores, adding, removing, and reshaping, so you’re not writing that logic by hand. A handful you’ll reach for constantly:
- push(): Adds an element to the end of the array.
- pop(): Removes the last element and hands it back.
- shift(): Removes the first element and hands it back.
- unshift(): Adds an element to the beginning.
- splice(): Adds, removes, or replaces elements at a given index.
- slice(): Copies a section out into a new array and leaves the original untouched (it returns a shallow copy).
Say you want to drop the first element. shift() does it and returns what it removed:
/**
* Remove the first element from the array and return it
* @returns {string} The removed element
*/
ourArray.shift(); // Output: 'apple'You’ll also need to walk through an array element by element. JavaScript gives you a few ways, and picking one mostly comes down to readability:
for loop:
/**
* Log each element in the array using a for loop
* @param {Array} array - The array to iterate over
*/
for (let i = 0; i < ourArray.length; i++) {
console.log(ourArray[i]);
}forEach() method:
/**
* Log each element using forEach method
* @param {Array} array - The array to iterate over
*/
ourArray.forEach((element) => {
console.log(element);
});for...of loop:
/**
* Log each element using for...of loop
* @param {Array} array - The array to iterate over
*/
for (const element of ourArray) {
console.log(element);
}My default is for...of when I just need the values, and forEach() when I’m already thinking in callbacks. The old-school for loop still earns its keep when you need the index or want to break out early, since forEach() can’t stop partway through.
Object Literals and Properties
Objects hold collections too, but they’re keyed, not positional. Instead of reaching for item number 2, you reach for a value by its name, its key. There’s no numeric index to count through.
You’ll hear people say objects are unordered. That was the old rule of thumb, and it isn’t quite true anymore. Modern JavaScript does define an iteration order: integer-like keys come first in ascending numeric order, then everything else in the order you added it. You can lean on that, but if the order genuinely drives your logic, an array is the honest tool. You build an object with curly braces {}:
/**
* Object representing a person
* @type {Object}
* @property {string} firstName - The person's first name
* @property {string} lastName - The person's last name
* @property {number} age - The person's age
* @property {boolean} isStudent - Whether the person is a student
* @property {Array} hobbies - A list of hobbies
*/
let ourObject = {
firstName: 'John',
lastName: 'Doe',
age: 30,
isStudent: true,
hobbies: ['reading', 'sports'],
};You can reach properties two ways, dot notation or bracket notation:
/**
* Access and log object properties
* @param {Object} obj - The object to access properties from
*/
console.log(ourObject.firstName); // Output: 'John'
console.log(ourObject['lastName']); // Output: 'Doe'Adding or changing a property is the same move, just assign to it:
/**
* Modify and add new properties to an object
* @param {Object} obj - The object to modify
* @param {string} newProperty - The new property to add
*/
ourObject.age = 31;
ourObject.city = 'New York';Object Methods
Objects can hold functions too. Store a function as a property and it becomes a method, which lets an object carry its behavior right alongside its data. Assign the function to a property, then call it like any other:
/**
* Add a method to the object that returns the full name
* @returns {string} The full name of the person
*/
ourObject.fullName = function () {
return `${this.firstName} ${this.lastName}`;
};
console.log(ourObject.fullName()); // Output: 'John Doe'Iterating Over Object Properties
To walk an object’s keys, the classic tool is the for...in loop:
/**
* Log all key-value pairs of an object using for...in loop
* @param {Object} obj - The object to iterate over
*/
for (const key in ourObject) {
console.log(`${key}: ${ourObject[key]}`);
}One thing to know before you lean on it: for...in doesn’t stop at the object’s own keys. It also walks any enumerable properties the object inherits through its prototype chain, which is usually not what you want. If you only care about the object’s own keys, grab them with Object.keys(ourObject) and loop over that instead. It’s more predictable, and it reads clearly.
Conclusion
Day 3 was about the two workhorses. Arrays give you ordered, indexable collections you can push, pop, and loop through. Objects give you named, structured data that can carry its own behavior. Nearly everything you build in JavaScript sits on top of these two.
You now know how to create both, change them, reach into them, and iterate over them. That’s not trivia. It’s the everyday vocabulary of real code, from a ten-line script to the front end of a WordPress site.
Keep going. Arrays and objects are the ground floor for the more interesting work ahead, and the reps you put in today are what make that work feel easy later.
What’s Next?
Day 4 is DOM manipulation, where JavaScript stops being abstract and starts changing what people actually see on the page. You’ll learn to read and rewrite content, structure, and styling on the fly, with hands-on exercises that carry straight into real interactive work.