Pelajaran 3 dari 1012 menit

Arrays and objects

Lists and records are the shapes most data takes. Learn to build them, read them and transform them without loops getting in the way.

Pelajaran ini hanya tersedia dalam bahasa Inggris. Antarmuka halaman tetap dalam bahasa Anda.

Dalam pelajaran ini

Create and read arrays and objects
Transform data with map, filter and reduce
Use destructuring and the spread syntax

Arrays are ordered lists#

arrays.ts

const fruits = ["mango", "papaya", "salak"];console.log(fruits[0]); // "mango" (positions start at 0)console.log(fruits.length); // 3fruits.push("durian"); // add to the endconsole.log(fruits.includes("salak")); // true

Objects are records with named fields#

objects.ts

const product = {  name: "Kopi Toraja",  price: 85000,  inStock: true,};console.log(product.name); // "Kopi Toraja"console.log(product["price"]); // 85000 (bracket access works too)

Real data is usually both: an array of objects.

map, filter and reduce#

These three methods replace most loops. Each one takes a function and returns a new value, leaving the original array untouched.

cart.ts

type Item = { name: string; price: number; quantity: number };const cart: Item[] = [  { name: "Notebook", price: 15000, quantity: 2 },  { name: "Pen", price: 5000, quantity: 0 },  { name: "Bag", price: 120000, quantity: 1 },];const lines = cart.filter((item) => item.quantity > 0);1const subtotals = lines.map((item) => item.price * item.quantity);2const total = subtotals.reduce((sum, value) => sum + value, 0);3console.log(total); // 150000

filter keeps the items for which the function returns true. Out goes the pen.

map turns each item into something new: here, a number.

reduce walks the list once and carries a running value forward. Starting at 0 keeps the result a number even for an empty cart.

Tips

Read a chain of filter, map and reduce from top to bottom like a recipe: keep these, turn them into that, combine the results.

Destructuring#

Destructuring pulls fields out into variables in one step.

destructuring.ts

const user = { id: 7, name: "Sari", city: "Bandung" };const { name, city } = user;1console.log(name, city); // "Sari" "Bandung"const [first, second] = ["gold", "silver", "bronze"];2console.log(first, second); // "gold" "silver"

Object destructuring matches by name.

Array destructuring matches by position.

Spread: copy and combine#

The spread syntax ... copies the contents of an array or object into a new one. It is how you update data without changing the original, which keeps bugs away when several parts of a program share the same object.

spread.ts

const settings = { theme: "light", fontSize: 16 };const updated = { ...settings, theme: "dark" };console.log(settings.theme); // "light" (unchanged)console.log(updated.theme); // "dark"const morning = ["coffee"];const day = [...morning, "lunch", "tea"];console.log(day); // ["coffee", "lunch", "tea"]

Change in place or make a copy?

push and assigning obj.field = x change data in place, which is fast and fine for data only one function owns. Copying with spread costs a little memory but makes changes easy to track, which matters in UI code and anywhere data is shared.

LatihanExpensive items

Given the cart above, produce an array of the names of items that cost more than 10000 each, regardless of quantity.

Tampilkan solusi

solution.ts

type Item = { name: string; price: number; quantity: number };const cart: Item[] = [  { name: "Notebook", price: 15000, quantity: 2 },  { name: "Pen", price: 5000, quantity: 0 },  { name: "Bag", price: 120000, quantity: 1 },];const names = cart.filter((item) => item.price > 10000).map((item) => item.name);console.log(names); // ["Notebook", "Bag"]

Recap#

Arrays hold ordered values; objects hold named fields.
filter, map and reduce transform arrays without mutating them.
Destructuring reads fields quickly; spread copies and combines.