Data Exploration: Array & Object

Jun 2026

JavaScript, Array, Object, Data

Syifa Fauziyah Arizal

If JavaScript is a kitchen, arrays and objects are the fridge. Messy data = no cooking.

“You don’t write bad code. You organize bad data.”

🧺 Array — Storing Multiple Data

An array is a list of data.

JavaScript


let fruits = ["Apple", "Banana", "Orange"];

Why arrays matter

Store lots of data
Easy to loop
Easy to filter
Easy to process

➕➖ Essential Array Methods

JavaScript


// add to the end
fruits.push("Mango");

// remove last item
fruits.pop();

// add to the front
fruits.unshift("Grape");

// remove first item
fruits.shift();

These are basic tools. You will use them constantly.

✂️ splice() vs 🍰 slice()

These two are often confused — but very different.

JavaScript


// splice() changes the original array
let numbers = [1, 2, 3, 4];
numbers.splice(1, 2);
// result: [1, 4]

// slice() copies only
let nums = [1, 2, 3, 4];
let newNums = nums.slice(1, 3);
// result: [2, 3]

Easy rule:

splice = brutal
slice = polite

🧠 Modern Array Power: map() & filter()

map() — transform data

JavaScript


let prices = [10000, 20000, 30000];

let discounted = prices.map(price => price * 0.9);

filter() — select data

JavaScript


let cheap = prices.filter(price => price < 25000);

Real projects use these every single day.

🧱 Object — Data with Identity

JavaScript


let user = {
  name: "Syfa",
  age: 20,
  isActive: true
};

Accessing object data:

JavaScript


console.log(user.name);
console.log(user["age"]);

🪆 Nested Object

Objects inside objects. Very common in API responses.

JavaScript


let student = {
  name: "Syfa",
  major: "Informatics",
  scores: {
    math: 90,
    js: 95
  }
};

console.log(student.scores.js);

🧪 Practice 1 — Product List

JavaScript


let products = [
  { name: "Keyboard", price: 150000 },
  { name: "Mouse", price: 80000 },
  { name: "Headset", price: 200000 }
];

let cheapProducts = products.filter(p => p.price < 100000);
console.log(cheapProducts);

🧪 Practice 2 — Student Data

JavaScript


let students = [
  { name: "Adit", score: 85 },
  { name: "Bela", score: 92 },
  { name: "Ciko", score: 70 }
];

let names = students.map(s => s.name);

🧪 Practice 3 — Array + Object Combo

JavaScript


let users = [
  { name: "Syfa", role: "admin", active: true },
  { name: "Rizal", role: "user", active: false }
];

let activeUsers = users.filter(u => u.active);

🔥 Mini Challenges

Filter students with score > 80
Increase all product prices by 10% using map()
Get users with role "admin"

Don’t rush. Data thinking takes time.

🧠 Why This Module Matters Before DOM

When working with DOM, you will:

Loop data
Filter data
Render data into HTML

Weak array & object skills = DOM nightmare.