Arrays Objects
Master JavaScript's most important data structures for organizing, storing, and manipulating data.
Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.
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.
💡 Running Code Locally: While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience:
🗂️ Real-World Analogy: Arrays and Objects are like different storage systems :
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.
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.
These are your essential tools for managing lists dynamically.
🔍 Finding Items
🔁 Looping Through Arrays
JavaScript gives you tools to explore an object:
🧱 Nested Objects
Arrays + objects together represent real data.
They can still be modified; const prevents reassigning.
They are cleaner, faster, and used by all modern JavaScript developers.
This is exactly how real dashboards, analytics systems, and UIs calculate data.
Arrays and objects are 80% of JavaScript data handling. Once you master them, you can build anything.
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"]).