Cara Looping Object di JavaScript: Metode dan Contoh
Irhan Hisyam Dwi Nugroho
•
19 August 2025
•
82
Mau tahu cara mudah melakukan looping object JavaScript? Warga Bimbingan, MinDi siap bantu kamu memahami berbagai metode untuk mengakses data dalam objek dengan cara yang simpel!
Ada banyak cara untuk melakukan looping objek, seperti menggunakan for...in, Object.keys(), dan Object.entries().
Yuk, simak contoh-contohnya agar Warga Bimbingan bisa langsung terapkan dalam kode kalian!
Apa Itu Object dan Looping Object di JavaScript?
Dalam JavaScript, Object adalah tipe data yang digunakan untuk menyimpan koleksi data dalam bentuk pasangan key-value, di mana setiap key (atau properti) memiliki nilai yang dapat diakses.
Objek sering digunakan untuk mewakili entitas dunia nyata, seperti informasi pengguna atau konfigurasi aplikasi.
Looping object di JavaScript adalah proses untuk mengakses atau memanipulasi setiap properti dalam objek, sehingga memudahkan kita untuk bekerja dengan data tersebut.
Dengan melakukan looping, kita bisa mengakses key dan nilai objek secara efisien tanpa harus menulis kode berulang kali.
Baca juga: Panduan Memilih Bootcamp Full Stack Developer yang Tepat
Cara Melakukan Looping Object di JavaScript
Sumber: Canva
Ada beberapa cara yang bisa digunakan untuk melakukan looping pada objek di JavaScript. Setiap metode memiliki kelebihan dan kegunaannya masing-masing. Berikut adalah beberapa metode yang bisa kalian coba:
1. Menggunakan for...in Loop
Metode for...in digunakan untuk mengiterasi semua properti dalam objek. Ini adalah cara yang paling dasar untuk mengakses properti objek, termasuk properti yang diwarisi dari prototype objek.
Pastikan untuk mengecek properti tersebut agar tidak mengakses properti yang tidak diinginkan.
Sintaks:
for (let key in object) { // Aksi pada key dan object[key] } |
Contoh Kode:
const person = { name: "John", age: 30, city: "New York" }; for (let key in person) { console.log(key, person[key]); } |
Output:
name John age 30 city New York |
Baca juga: 12 Bahasa Pemrograman Front End Teratas & Terpopuler 2024
2. Menggunakan Object.keys() dengan forEach()
Object.keys() mengembalikan array yang berisi semua properti key objek. Kemudian, kita bisa menggunakan forEach() untuk melakukan looping pada array key tersebut.
Ini memberikan fleksibilitas lebih dalam manipulasi data dan lebih terstruktur dibandingkan for...in.
Sintaks:
Object.keys(object).forEach(key => { // Aksi pada key dan object[key] }); |
Contoh Kode:
const person = { name: "John", age: 30, city: "New York" }; Object.keys(person).forEach(key => { console.log(key, person[key]); }); |
Output:
name John age 30 city New York |
Baca juga : Ingin Belajar Front End Development? Cek Roadmapnya di sini!
3. Menggunakan Object.values() dengan forEach()
Object.values() mengembalikan array yang berisi nilai dari setiap properti objek. Metode ini cocok digunakan ketika kamu hanya tertarik pada nilai objek, tanpa perlu mengakses key-nya. Ini membuat kode lebih sederhana dan jelas.
Sintaks:
Object.values(object).forEach(value => { // Aksi pada value }); |
Contoh Kode:
const person = { name: "John", age: 30, city: "New York" }; Object.values(person).forEach(value => { console.log(value); }); |
Output:
John 30 New York |
Baca juga: Cara Menjadi Web Developer Freelance: Panduan Pemula
4. Menggunakan Object.entries() dengan forEach()
Object.entries() mengembalikan array yang berisi pasangan key-value dalam bentuk array [key, value].
Metode ini sangat berguna saat kita ingin mengakses baik key maupun value dalam satu iterasi. Ini adalah salah satu cara terbaik untuk mengakses data secara langsung.
Sintaks:
Object.entries(object).forEach(([key, value]) => { // Aksi pada key dan value }); |
Contoh Kode:
const person = { name: "John", age: 30, city: "New York" }; Object.entries(person).forEach(([key, value]) => { console.log(key, value); }); |
Output:
name John age 30 city New York |
Baca juga: 10 Text Editor Terbaik untuk Web Developer (2025)
Ingin Jadi Full Stack Web Developer Profesional?
Setelah memahami Cara Looping Object di JavaScript: Metode dan Contoh, saatnya mengasah skill web development kamu lebih jauh!
Yuk, ikuti Bootcamp Full Stack Web Development di dibimbing.id! Di sini, kamu akan mempelajari semua teknik penting, mulai dari penguasaan JavaScript, HTML, CSS, hingga pengembangan aplikasi web penuh, termasuk frontend dan backend.
Belajar langsung dari mentor berpengalaman dengan kurikulum yang aplikatif dan praktis. Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu di dunia IT semakin terbuka lebar!
Jadi, tunggu apa lagi? Hubungi di sini dan daftar sekarang di dibimbing.id untuk memulai perjalananmu menjadi Full Stack Web Developer profesional. #BimbingSampeJadi!
Referensi:
- How to iterate over a JavaScript object ? [Buka]
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
