JavaScript - For...in Loop: A Panduan untuk Pemula

Hai teman-teman yang sedang belajar pemrograman! Hari ini, kita akan mendalami salah satu alat praktis di JavaScript: loop for...in. Jangan khawatir jika Anda belum pernah mengoding sebelumnya - saya akan memandu Anda langkah demi langkah, seperti yang saya lakukan untuk ratusan murid dalam tahunajaran saya. Jadi, ambillah secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai!

Apa Itu Loop for...in?

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

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

Sintaks Loop for...in

Sekarang, mari kita lihat bagaimana menulis loop for...in. Jangan khawatir jika awalnya terlihat aneh - kita akan membongkar ini bersama-sama!

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 variabel (kita menyebutnya key di sini) 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 Loop for...in dalam Aksi

Contoh 1: Mengeksplorasi Object Sederhana

Mari kita mulai dengan contoh sederhana. Bayangkan kita memiliki 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 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 properti itu.
• Kita menggunakan console.log() untuk mencetak nama properti dan nilainya.

Contoh 2: Menghitung Properti

Apa bila kita ingin menghitung berapa banyak properti sebuah object memiliki:

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 mengoutput: "Object mobil memiliki 4 properti."

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

Contoh 3: Menyaring Properti

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

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 mengoutput:

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 digunakan dengan Loop for...in

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

Metode	Deskripsi	Contoh
hasOwnProperty()	Memeriksa apakah properti secara langsung ada di object (tidak diwarisi)	if (object.hasOwnProperty(property))
Object.keys()	Mengembalikan array yang berisi nama properti yang dapat dihitung milik object	Object.keys(object)
Object.values()	Mengembalikan array yang berisi nilai properti yang dapat dihitung milik object	Object.values(object)
Object.entries()	Mengembalikan array yang berisi pasangan [key, value] properti string yang dapat dihitung milik object	Object.entries(object)

Penutup

Dan begitu juga! Anda telah mengambil langkah pertama ke dunia loop for...in. Ingat, seperti belajar menunggang sepeda, pemrograman memerlukan latihan. Jangan frustasi jika itu tidak langsung berjalan - terus mencoba dan berlatih dengan objek yang berbeda dan lihat apa yang Anda bisa lakukan dengan loop for...in.

Seperti yang kita katakan di dunia pemrograman, "Satu-satunya cara untuk belajar pemrograman adalah dengan pemrograman!" Jadi, mengapa tidak mencoba membuat objek Anda sendiri dan menggunakan loop for...in untuk mengaksplorasi mereka? Mungkin buatlah objek yang mewakili film atau buku kesukaan Anda, dan lihat apa yang Anda bisa lakukan dengannya.

Selamat coding, dan ingat - setiap ahli pernah menjadi pemula. Tetap keras, dan sebelum Anda mengetahui, Anda akan mengulang object seperti seorang ahli!

Credits: Image by storyset