Arrays Objects
Master JavaScript's most important data structures for organizing, storing, and manipulating data.
Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.
What You'll Learn in This Lesson
💡 Running Code Locally: While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience:
- Download Node.js to run JavaScript on your computer
- Use your browser's Developer Console (Press F12) to test code snippets
- Create a .html file with <script> tags and open it in your browser
🗂️ Real-World Analogy: Arrays and Objects are like different storage systems :
- • Arrays = A numbered list (like a shopping list: item 1, item 2, item 3...)
- • Objects = A labeled filing cabinet (look up by name: "age", "email", "address")
- • You can put arrays inside objects and objects inside arrays !
🧠 Introduction
Every real JavaScript application—websites, games, APIs, mobile apps—heavily relies on arrays and objects. They are the foundation of data representation, making them one of the most important concepts you will ever master.
Data Structure
Access By
Best For
Example
Array
Index (0, 1, 2...)
Ordered lists
["apple", "banana"]
Object
Key name
Named properties
If variables are single boxes that hold one value… Arrays and objects are storage containers, folders, databases, and flexible multi-value structures that allow your program to organize information just like real-world systems do.
By the end of this lesson, you'll understand how to use arrays and objects, how to transform them with map, filter, reduce, and how to think like a real developer when structuring data.
🍇 Working With Arrays
- Other arrays
- A mix of everything
- fruits[0] → "apple"
- fruits[1] → "banana"
- fruits[2] → "orange"
➕ Adding & Removing Items
These are your essential tools for managing lists dynamically.
🔍 Finding Items
🔁 Looping Through Arrays
🧮 Array Reduction
- Combining text
- Processing API data
- Creating analytics
🧱 Objects — Key-Value Data
- Other objects
🧩 Object Methods
JavaScript gives you tools to explore an object:
🧱 Nested Objects
🛒 Array of Objects
🎓 REAL WORLD EXAMPLES
Arrays + objects together represent real data.
📘 ESSENTIAL ARRAY METHODS CHEAT SHEET
🧠 Best Practices
They can still be modified; const prevents reassigning.
They are cleaner, faster, and used by all modern JavaScript developers.
🎮 Mini Project — Data Dashboard Simulation
This is exactly how real dashboards, analytics systems, and UIs calculate data.
🎯 Practice Challenge
- 1️⃣ Create an array of numbers - Use map() to square each number.
- 2️⃣ Use filter() - Get numbers greater than 10.
- 3️⃣ Create an object representing a book - Include: title, author, year
- 4️⃣ Create an array of objects - Use forEach() to print each one.
- 5️⃣ Use reduce() - Calculate the sum of an array.
🏁 Recap
- ✅ Arrays (push, pop, map, filter, reduce)
- ✅ Objects (keys, values, entries, nested structures)
- ✅ Array of objects (most common real-world data format)
- ✅ Real development patterns
- ✅ How arrays & objects work together in every real application
Arrays and objects are 80% of JavaScript data handling. Once you master them, you can build anything.
📋 Quick Reference — Arrays & Objects
Method
What It Does
map(fn)
Transform every item, return new array
filter(fn)
Keep items where fn returns true
reduce(fn, init)
Combine all items into one value
Object.keys(obj)
Array of all property names
arr.push(item)
Add to end of array
Lesson 6 Complete — Arrays & Objects!
You now know how to store ordered data with arrays and named data with objects — the foundation of almost all JavaScript applications.
Up next: ES6+ Modern JavaScript — supercharge your code with the latest JS features! 🚀
Practice quiz
Array indexes start at which number?
- 1
- 0
- -1
- It depends on the array
Answer: 0. JavaScript array indexes always start at 0, so the first element is arr[0].
Given const fruits = ["apple", "banana", "orange"], what does fruits[2] return?
- "apple"
- "banana"
- "orange"
- undefined
Answer: "orange". Index 2 is the third element because indexing starts at 0, which is "orange".
Which array method ADDS an item to the END of an array?
- shift()
- unshift()
- pop()
- push()
Answer: push(). push() adds to the end; pop() removes from the end; unshift()/shift() work at the start.
Which method REMOVES an item from the START of an array?
- shift()
- pop()
- push()
- unshift()
Answer: shift(). shift() removes the first element; unshift() adds to the start.
What does [1, 2, 3].map(n => n * 2) return?
map() transforms every item, doubling each to produce [2, 4, 6].
What does [1, 2, 3, 4].filter(n => n % 2 === 0) return?
filter() keeps only items where the test is true, so the even numbers [2, 4] remain.
What does const sum = [1, 2, 3, 4].reduce((total, n) => total + n, 0) produce?
- 4
- 10
- 24
Answer: 10. reduce() combines all items into one value: 1 + 2 + 3 + 4 = 10.
For const person = { name: "Alice", age: 30, city: "New York" }, what does Object.keys(person) return?
- Alice
- New York
Answer: New York. Object.keys() returns an array of the property names: ["name", "age", "city"].
Given const student = { name: "Bob", grades: [90, 85, 95] }, what does student.grades[2] return?
- 90
- 85
- 95
- undefined
Answer: 95. grades[2] is the third element of the grades array, which is 95.
Which is the correct way to access the age property of the person object?
- person->age
- person("age")
- age
Answer: age. You access object values with dot notation (person.age) or bracket notation (person["age"]).
Continue this course
- Previous: Events
- Next: ES6+ Features