MODULE 5: Arrays & Objects (ES6 Essentials)

JavaScript Foundations • StreetGeek Academy

🧠 MODULE 5: Arrays & Objects (ES6 Essentials)

Understand how to store, access, and manipulate collections of data using arrays and objects, and use them to dynamically render portfolio content.

1) What Are Arrays and Objects?

Arrays and objects are core data structures in JavaScript.

Type	Structure	Best For
Array	Ordered list of values	Multiple items of the same kind (projects, skills)
Object	Key-value pairs	Describing one specific thing (a single project)

Array Example

let skills = ["HTML", "CSS", "JavaScript", "PHP"];
console.log(skills[0]); // "HTML"

💡 Index numbers start at 0.

Object Example

let project = {
  title: "Portfolio Website",
  tech: "HTML, CSS, JS",
  year: 2025,
  isPublished: true
};

console.log(project.title); // "Portfolio Website"

2) Arrays of Objects = Data Structures

When you combine arrays and objects, you can describe many similar items efficiently.

let projects = [
  { title: "Portfolio",        tech: "HTML / CSS / JS",   year: 2025 },
  { title: "WPNfinite Plugin", tech: "PHP / WordPress",   year: 2024 },
  { title: "ShopBlocks WP",    tech: "JS / WooCommerce",  year: 2025 }
];

console.log(projects[1].title); // "WPNfinite Plugin"

✅ This pattern powers dynamic sections in real websites.

3) Array Methods You’ll Use Constantly

Core Methods

Method	Purpose	Example
`.push()`	Add item to end	`skills.push("React")`
`.pop()`	Remove last item	`skills.pop()`
`.shift()` / `.unshift()`	Remove / add to start	`skills.unshift("Git")`
`.slice(start, end)`	Copy portion of array	`skills.slice(1, 3)`
`.indexOf("CSS")`	Find position	returns `1`
`.includes("JS")`	Boolean check	returns `true`
`.join(", ")`	Turn array → string	`"HTML, CSS, JS"`

Modern Iteration Methods (ES6)

Method	What It Does
`.forEach()`	Loop through each item (no return)
`.map()`	Create a new array from each item
`.filter()`	Return subset matching a condition
`.find()`	Return first match
`.reduce()`	Combine array into a single value

Example

skills.forEach(skill => console.log(skill));

let uppercaseSkills = skills.map(s => s.toUpperCase());

let jsOnly = skills.filter(s => s.includes("JS"));

4) Object Essentials (ES6)

Dot vs Bracket Notation

project.title;      // Dot notation
project["year"];    // Bracket notation

Add or Update Properties

project.client = "StreetGeek Academy";
project.year = 2026;

Destructuring (Syntactic Sugar)

const { title, year } = project;
console.log(`${title} – ${year}`);

Spread Operator (`...`)

let extended = { ...project, rating: 5 };
console.log(extended);

5) Hands-On Practice

Exercise 1 – List Your Skills

<ul id="skill-list"></ul>

const skillList = document.getElementById("skill-list");
let skills = ["HTML", "CSS", "JavaScript", "PHP"];

skills.forEach(skill => {
  let li = document.createElement("li");
  li.textContent = skill;
  skillList.appendChild(li);
});

✅ Outputs a live list of skills on your portfolio page.

Exercise 2 – Render Projects from Data

<section id="projects"></section>

const projects = [
  { title: "Portfolio Site",  tech: "HTML, CSS, JS",      year: 2025 },
  { title: "ShopBlocks WP",   tech: "PHP, WooCommerce",   year: 2025 }
];

const section = document.getElementById("projects");

projects.forEach(p => {
  const card = document.createElement("div");
  card.className = "card";
  card.innerHTML = `
    <h3>${p.title}</h3>
    <p>${p.tech}</p>
    <small>${p.year}</small>
  `;
  section.appendChild(card);
});

✅ Project cards load dynamically — just edit the data array to update.

Exercise 3 – Filter & Display

Add a quick filter in the console:

let recent = projects.filter(p => p.year >= 2025);
console.table(recent);

💡 Filters are perfect for search, sorting, and category tabs later in your site.

6) Arrays + Functions = Power

Combine Module 4 and 5 concepts:

function getProjectTitles(list) {
  return list.map(p => p.title);
}

console.log(getProjectTitles(projects));

✅ Reusable utility for any dataset.

7) Quiz Time

Show/Hide Questions

1) What’s the index of the first item in an array?

2) How do you add a new property to an object?

3) Which method creates a new array from each item of an existing array?

4) How would you combine two arrays into one with ES6 syntax?

5) What’s the difference between .forEach() and .map()?

🚀 Challenge Task: Dynamic Project Gallery

Add a Dynamic Project Gallery to your portfolio using arrays + objects.

In `app.js`, create an array of project objects:

const myProjects = [
  { title: "Nfinite Dashboard", tech: "JS, CSS Grid",     link: "#" },
  { title: "ShopBlocks WP",     tech: "PHP, WooCommerce", link: "#" },
  { title: "BoldGrid Addon",    tech: "JS, WordPress",    link: "#" }
];

Render them in a grid layout using forEach or map, and add a “View More” button:

const grid = document.getElementById("project-grid");

myProjects.forEach(p => {
  const div = document.createElement("div");
  div.className = "card";
  div.innerHTML = `
    <h3>${p.title}</h3>
    <p>${p.tech}</p>
    <button>View More</button>
  `;
  div.querySelector("button").addEventListener("click", () => {
    console.log(`Opening ${p.title}`);
  });
  grid.appendChild(div);
});

✅ You’ve now connected data → logic → UI — exactly how modern apps work.

🏁 Module 5 Summary

How to store and access arrays and objects
How to use array methods for transformation and filtering
How to render data dynamically in the DOM
How to combine arrays, objects, and functions for modular code

Next up → MODULE 6: The DOM (Document Object Model)
You’ll learn to select, create, and update HTML elements in real time — the core skill that turns your portfolio into a truly interactive web app.