JavaScript for Beginners - Part 6: Data Structures (Arrays & Objects)

Data Structures (Arrays & Objects)

So far, we’ve stored single values in variables (e.g., let name = "Ibtissam"). But what happens when you need to store a list of names? Or describe a single user with multiple properties like name, age, and email?

That’s where Arrays and Objects come in. They are the primary ways you will organize data in JavaScript.

1️⃣ Arrays (Ordered Lists)

An Array is a list of values where order matters. Every item has a numbered position called an index, starting from 0.

🇲🇦 Darija:

تخيل الطابلو (Array) بحال شي صف أو لائحة مرتبة. كل حاجة محطوطة فبلاصهتا وعندها نمرة، يعني كاين ترتيب، وكيبدا ديما من رقم صفر. إيلا بغيتي تجمع بزاف ديال المعلومات من نفس النوع (بحال النقط ديال الامتحانات أو السميات ديال صحابك)، كتخدم بهاد الطابلو. هو اللي كيخليك تستف المعلومات باش تقدر من بعد دوز عليهم وحدة بوحدة.

🛠️ Essential Array Methods:

• .length: Counts the total number of items.
• .push(item): Adds a new item to the end of the list.
• .pop(): Removes the very last item.
• .map(): Transforms every item and returns a brand-new array.

2️⃣ Objects (The Descriptive Key-Value)

An Object allows you to group related data together using labels (keys). Unlike arrays, order doesn’t matter here; the names of the keys are what matter.

🇲🇦 Darija:

إيلا كان الطابلو عبارة على لائحة، فالكائن البرمجي (Object) داير بحال بطاقة التعريف أو شي ملف شخصي. ملي كيكون عندك شي عنصر عامر معلومات وخصائص (بحال السمية، الكنية، العمر، والمدينة)، مايمكنش تحطهم فطابلو عادي حيت غادي تلف ليك شكون هي السمية وشكون هي المدينة. هنا فين كينفع لوبجي، حيت كل معلومة كتكون عندها سميتها (المفتاح) والقيمة ديالها. يعني باش توصل للمعلومة، كتعيط عليها بسميتها المكتوبة ماشي بالنمرة ديال الترتيب.

💻 Code Examples

Working with Arrays:

const techStack = ["HTML", "CSS", "JavaScript"];

// Accessing items (Remember: 0-based index)
console.log(techStack[0]); // Output: "HTML"

// Changing an item
techStack[1] = "Tailwind";
console.log(techStack); // Output: ["HTML", "Tailwind", "JavaScript"]

// Using the .map() method
const numbers = [2, 4, 6];
const doubled = numbers.map(num => num * 2); 
// doubled is now [4, 8, 12]

Working with Objects:

const user = {
    username: "Amine_Dev",
    level: 25,
    isPro: true,
    skills: ["JS", "React"] // Yes, an array inside an object!
};

// Accessing Data
console.log(user.username); // Dot Notation (Cleanest way)
console.log(user['level']); // Bracket Notation (Flexible way)

// Modifying Data
user.level = 26;            // Update an existing property
user.city = "Casablanca";   // Add a brand new property

🔗 The Ultimate Combo: Array of Objects

In the real world, you will mostly use them together. Think of a database containing multiple users:

const users = [
    { name: "Sara", id: 1 },
    { name: "Omar", id: 2 }
];

Challenge Time! (تمرين تطبيقي)

English: Create a variable called library that holds an Array of two Objects representing books. Each book object should have:

1. A title (string)
2. The number of pages (number)

Darija: صاوب واحد الـ Variable سميتو library فيه Array ديال جوج ديال الـ Objects كيمثلو كتوبة. كل كتاب خاصو يكون فيه:

1. العنوان (title) كـ نص (String).
2. عدد الصفحات (pages) كـ رقم (Number).

📝 Key Takeaways (الملخص)

• Arrays for Ordered Lists: Use arrays when you have a collection of similar items where the specific order is important.
  • Darija: كنخدمو بالطابلو فاش كتكون عندنا لائحة ديال حاجات من نفس النوع ومرتبة.
• Objects for Descriptions: Use objects to describe a single entity (like a user or a product) using descriptive keys.
  • Darija: كنخدمو بـ Object فاش كنبغيو نوصفو شي حاجة معينة بمجموعة ديال الخصائص اللي عندها سميات.
• Zero-Based Indexing: Always remember that the first item in a JavaScript array is at position 0.
  • Darija: ديما عقل باللي الحساب فـ الطابلو كيبدا من الزيرو ماشي من الواحد.
• Accessing Objects: Dot notation (user.name) is the most common way to get data out of an object.
  • Darija: النقطة هي أسهل وأكثر طريقة مستعملة باش توصل للمعلومة وسط الـ Object.
• Nesting Data: You can put arrays inside objects and objects inside arrays to represent complex real-world data structures.
  • Darija: تقدر تدير طابلو وسط أوبجي أو العكس، وهادشي هو اللي كيخلينا نمثلو بيانات معقدة فـ المواقع ديالنا.

See you in the next part! :)