Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the health-check domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/yogisv5/sitesbyyogi.com/wp-includes/functions.php on line 6260
MODULE 5: Arrays & Objects (ES6 Essentials) - SitesByYogi
SitesByYogi text logo
Contact

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

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.