JavaScript - For...in Loop: A Beginner's Guide

Hai pengguna muda! Hari ini, kita akan mendalami salah satu alat yang berguna di JavaScript: for...in loop. Jangan khawatir jika Anda belum pernah mengoding sebelumnya - saya akan memandu Anda langkah demi langkah, seperti yang saya lakukan untuk ribuan murid dalam tahunajaran saya mengajar. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda sukai), dan mari kita mulai!

Apa Itu for...in Loop?

Sebelum kita masuk ke detilnya, mari kita mengerti apa itu for...in loop. Bayangkan Anda punya sebuah kotak besar penuh mainan (kami akan sebut kotak ini "object" di JavaScript). for...in loop seperti tangan ajaib yang mencapai ke dalam kotak dan mengeluarkan satu mainan pada satu waktu, memungkinkan Anda untuk melihat setiap mainan secara individual.

Dalam istilah pemrograman, for...in loop memungkinkan kita untuk mengulang properti dari sebuah object. Ini adalah cara untuk memeriksa setiap piece data yang disimpan di dalam object, satu per satu.

Sintaks for...in Loop

Sekarang, mari kita lihat bagaimana menulis for...in loop. Jangan khawatir jika itu terlihat agak aneh pertama kali - kita akan menguraikan bersama!

for (let key in object) {
// kode yang akan dieksekusi
}

Mari kitauraikan ini:

• for: Kata kunci ini memberitahu JavaScript bahwa kita sedang memulai sebuah loop.
• let key: Ini membuat sebuah variabel (kita menyebutnya key disini) yang akan menahan nama setiap properti saat kita mengulang object.
• in: Kata kunci ini memisahkan nama variabel dari object yang kita ulang.
• object: Ini adalah object yang kita ingin periksa.
• Kurung kurawal {} berisi kode yang akan dijalankan untuk setiap properti di object.

Contoh for...in Loop Dalam Aksi

Contoh 1: Menelusuri Object Sederhana

mari mulai dengan sebuah contoh sederhana. Bayangkan kita punya sebuah object yang mewakili sebuah buku:

let book = {
title: "The Great Gatsby",
author: "F. Scott Fitzgerald",
year: 1925
};

for (let property in book) {
console.log(property + ": " + book[property]);
}

Jika kita menjalankan kode ini, ini adalah apa yang kita lihat di console:

title: The Great Gatsby
author: F. Scott Fitzgerald
year: 1925

Apa yang terjadi disini? Loop for...in kita mengulang setiap properti di object book. Untuk setiap iterasi:

• property menahan nama properti saat ini ("title", "author", atau "year").
• book[property] memberikan kita nilai dari properti itu.
• Kita menggunakan console.log() untuk mencetak nama properti dan nilai nya.

Contoh 2: Menghitung Properti

Ayo katakan kita ingin menghitung berapa banyak properti yang ada di sebuah object:

let car = {
make: "Toyota",
model: "Corolla",
year: 2020,
color: "blue"
};

let propertyCount = 0;

for (let prop in car) {
propertyCount++;
}

console.log("Object mobil memiliki " + propertyCount + " properti.");

Ini akan mencetak: "Object mobil memiliki 4 properti."

Dalam contoh ini, kita menggunakan loop for...in untuk mengulang setiap properti di object car. Sebaliknya melakukan sesuatu dengan properti itu sendiri, kita hanya menambahkan counter setiap kali loop berjalan. Hal ini memberikan kita jumlah total properti di object.

Contoh 3: Menyaring Properti

kadang-kadang, Anda mungkin ingin melakukan sesuatu hanya dengan properti tertentu. Mari lihat sebuah contoh:

let person = {
name: "Alice",
age: 30,
city: "New York",
job: "Engineer",
hobby: "painting"
};

console.log("Properti yang dimulai dengan 'j':");
for (let prop in person) {
if (prop.startsWith('j')) {
console.log(prop + ": " + person[prop]);
}
}

Ini akan mencetak:

Properti yang dimulai dengan 'j':
job: Engineer

Dalam contoh ini, kita menggunakan loop for...in untuk mengulang semua properti di object person, tapi kita hanya mencetak properti yang dimulai dengan huruf 'j'. Kita menggunakan metode startsWith() untuk memeriksa kondisi ini.

Metode Umum yang Digunakan dengan for...in Loops

Berikut adalah tabel dari beberapa metode umum yang Anda mungkin gunakan bersamaan dengan loop for...in:

Metode	Deskripsi	Contoh
hasOwnProperty()	Memeriksa jika properti secara langsung di object (tidak diwarisi)	if (object.hasOwnProperty(property))
Object.keys()	Mengembalikan array dari nama properti yang dapat dienumerasi milik object	Object.keys(object)
Object.values()	Mengembalikan array dari nilai properti yang dapat dienumerasi milik object	Object.values(object)
Object.entries()	Mengembalikan array dari pasangan [key, value] properti string-keyed milik object	Object.entries(object)

Penutup

Dan begitulah! Anda baru saja mengambil langkah pertama ke dunia for...in loops. Ingat, seperti belajar menunggang sepeda, pemrograman memerlukan latihan. Jangan frustasi jika itu belum masuk akal segera - terus mencoba dengan berbagai object dan lihat apa yang Anda bisa lakukan dengan for...in loops.

Seperti yang kita katakan di dunia coding, "Satu-satunya cara untuk belajar pemrograman adalah dengan memrogram!" Jadi, mengapa tidak mencoba membuat object Anda sendiri dan menggunakan for...in loops untuk menelusuri mereka? Mungkin buat object yang mewakili film atau buku favorit Anda, dan lihat apa yang Anda bisa lakukan dengannya.

Selamat coding, dan ingat - setiap ahli pernah menjadi pemula. Tetap keras, dan sebelum Anda tahu, Anda akan berulang-ulang melalui object seperti seorang ahli!

Credits: Image by storyset