Arrays and Objects
Arrays
An array is an ordered list of values. Arrays can hold any type of value, including other arrays and objects.
const skills = ["HTML", "CSS", "JavaScript"];
const scores = [95, 88, 72, 100];
const mixed = [1, "hello", true, null];
// Access elements by index (starts at 0)
console.log(skills[0]); // "HTML"
console.log(skills[2]); // "JavaScript"
console.log(skills.length); // 3
Common Array Methods
Adding and Removing Items
const fruits = ["apple", "banana"];
fruits.push("mango"); // Add to end → ["apple", "banana", "mango"]
fruits.pop(); // Remove from end → ["apple", "banana"]
fruits.unshift("grape"); // Add to start → ["grape", "apple", "banana"]
fruits.shift(); // Remove from start → ["apple", "banana"]
map — Transform Every Element
map creates a new array by applying a function to each element:
const prices = [10, 25, 50];
const withTax = prices.map(price => price * 1.15);
console.log(withTax); // [11.5, 28.75, 57.5]
filter — Keep Only Matching Elements
filter creates a new array with only the elements that pass a test:
const scores = [45, 78, 92, 55, 88, 30];
const passing = scores.filter(score => score >= 60);
console.log(passing); // [78, 92, 88]
find — Get the First Matching Element
find returns the first element that satisfies the condition, or undefined:
const users = [
{ id: 1, name: "Amara" },
{ id: 2, name: "James" },
{ id: 3, name: "Fatima" }
];
const user = users.find(u => u.id === 2);
console.log(user); // { id: 2, name: "James" }
reduce — Compute a Single Value
reduce processes all elements and accumulates them into one value:
const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(total); // 15
The second argument to reduce (here 0) is the initial value of the accumulator.
Objects
An object is a collection of key-value pairs. Objects model real-world entities with properties.
const student = {
name: "Amara Okonkwo",
age: 24,
course: "Frontend Engineering",
isEnrolled: true
};
Accessing Properties
// Dot notation (preferred when key name is known)
console.log(student.name); // "Amara Okonkwo"
// Bracket notation (use when key is dynamic or has spaces)
const key = "age";
console.log(student[key]); // 24
console.log(student["course"]); // "Frontend Engineering"
Adding and Updating Properties
student.email = "amara@example.com"; // Add new property
student.age = 25; // Update existing property
console.log(student.email); // "amara@example.com"
Destructuring
Destructuring lets you extract values from arrays or properties from objects into individual variables — a much cleaner syntax than repeated dot notation.
Array Destructuring
const coordinates = [51.5074, -0.1278];
const [latitude, longitude] = coordinates;
console.log(latitude); // 51.5074
console.log(longitude); // -0.1278
Object Destructuring
const { name, course, age } = student;
console.log(name); // "Amara Okonkwo"
console.log(course); // "Frontend Engineering"
// Rename while destructuring
const { name: studentName } = student;
console.log(studentName); // "Amara Okonkwo"
// Default values
const { grade = "Not graded" } = student;
console.log(grade); // "Not graded" (property doesn't exist)
The Spread Operator
The spread operator (...) expands an array or object into individual elements. It is commonly used to copy and merge:
// Copying an array
const original = [1, 2, 3];
const copy = [...original];
copy.push(4);
console.log(original); // [1, 2, 3] — unchanged
console.log(copy); // [1, 2, 3, 4]
// Merging arrays
const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];
console.log(merged); // [1, 2, 3, 4]
// Copying an object
const base = { theme: "dark", lang: "en" };
const updated = { ...base, lang: "fr" };
console.log(updated); // { theme: "dark", lang: "fr" }
Key Takeaways
- Arrays store ordered lists; access elements with zero-based indexes
- map creates a transformed copy; filter creates a filtered copy; find returns the first match; reduce accumulates to one value
- Objects store key-value pairs; access with dot notation or bracket notation
- Destructuring extracts values from arrays and objects into named variables cleanly
- The spread operator (...) copies or merges arrays and objects without mutating the original
Practice Exercise
- Create an array of 5 numbers and use
mapto double every value - Filter the doubled array to keep only numbers greater than 10
- Use
reduceto sum the filtered array - Create a
productobject with name, price, and inStock properties - Destructure the product object into individual variables
- Use spread to create a copy of the product with an updated price
Try it yourself
Key Takeaways
- Arrays are zero-indexed ordered lists; use push/pop to add/remove from the end and unshift/shift for the start
- map() returns a new transformed array; filter() returns a new filtered array; both leave the original unchanged
- find() returns the first matching element or undefined; reduce() accumulates all elements into a single value
- Object properties are accessed with dot notation (obj.key) or bracket notation (obj[key]) for dynamic keys
- Destructuring extracts values in one concise line: const { name, age } = person
- The spread operator (...) copies arrays and objects without mutation, making it essential for safe state updates
Quick Quiz
1.What does the filter() method return?
2.How do you access an object property using a variable as the key?
3.What does the spread operator (...) do when used with an object?
4.What is the initial value argument in array.reduce(callback, initialValue) used for?
Ready to go further?
CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.
Join CareerEx