Javascript Dasar #6: Array & Manipulasi Data

Author Hilya Zea
25 Dec 2024
Javascript
Javascript Dasar #6: Array & Manipulasi Data

Hai, apa kabar? Kembali lagi di tutorial JavaScript! Di tutorial kali ini, kita akan belajar tentang Array. Array adalah cara untuk menyimpan banyak data dalam satu variabel. Kalau kamu sering merasa kesulitan menyimpan beberapa nilai, array adalah solusi yang tepat!

Apa Itu Array?

Array adalah sebuah struktur data yang memungkinkan kamu menyimpan banyak nilai di dalam satu variabel. Kamu bisa menyimpan berbagai jenis data di dalam array, seperti angka, string, atau objek. Berikut adalah cara membuat array di JavaScript:

let angka = [1, 2, 3, 4, 5];

Dalam contoh ini, angka adalah array yang berisi lima angka.

Mengakses Elemen di dalam Array

Untuk mengakses elemen di dalam array, kamu bisa menggunakan indeks. Indeks array dimulai dari angka 0, jadi elemen pertama ada di indeks 0, elemen kedua di indeks 1, dan seterusnya.

let angka = [1, 2, 3, 4, 5];
console.log(angka[0]); // Output: 1
console.log(angka[2]); // Output: 3

Menambah dan Menghapus Elemen dalam Array

Ada beberapa cara untuk menambah dan menghapus elemen dalam array. Berikut adalah beberapa metode yang sering digunakan:

  1. Menambah Elemen di Akhir Array:
let angka = [1, 2, 3];
angka.push(4); // Menambah 4 di akhir array
console.log(angka); // Output: [1, 2, 3, 4]
  1. Menghapus Elemen di Akhir Array:
let angka = [1, 2, 3, 4];
angka.pop(); // Menghapus elemen terakhir
console.log(angka); // Output: [1, 2, 3]
  1. Menambah Elemen di Awal Array:
let angka = [2, 3, 4];
angka.unshift(1); // Menambah 1 di awal array
console.log(angka); // Output: [1, 2, 3, 4]
  1. Menghapus Elemen di Awal Array:
let angka = [1, 2, 3, 4];
angka.shift(); // Menghapus elemen pertama
console.log(angka); // Output: [2, 3, 4]

Iterasi Melalui Array

Sering kali kita ingin melakukan sesuatu pada setiap elemen dalam array. Di JavaScript, kita bisa menggunakan forEach untuk iterasi melalui array.

let angka = [1, 2, 3, 4, 5];
angka.forEach(function(elemen) {
  console.log(elemen); // Output: 1, 2, 3, 4, 5 (terpisah)
});

Studi Kasus: Menyaring Angka Genap dari Array

Note : Kalian bisa mempraktekannya di CodeLab dari code80vity

Sekarang, kita akan membuat program yang menyaring angka genap dari array menggunakan metode filter.

HTML-nya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Saring Angka Genap</title>
</head>
<body>
  <h1>Angka Genap dari Array</h1>
  <ul id="hasil"></ul>

  <script src="script.js"></script>
</body>
</html>

JavaScript-nya (di file script.js):

function tampilkanAngkaGenap() {
  let angka = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  let angkaGenap = angka.filter(function(elemen) {
    return elemen % 2 === 0; // Memilih angka genap
  });

  let hasil = document.getElementById("hasil");
  angkaGenap.forEach(function(elemen) {
    let listItem = document.createElement("li");
    listItem.textContent = elemen;
    hasil.appendChild(listItem);
  });
}

tampilkanAngkaGenap();

Penjelasan:

  • Di sini, kita menggunakan metode filter() untuk membuat array baru yang hanya berisi angka genap dari array yang sudah ada.
  • Setelah itu, kita menampilkan angka genap tersebut ke dalam elemen <ul> di HTML.

Gimana? Seru kan belajar tentang array? Dengan array, kamu bisa menyimpan dan memanipulasi data dalam jumlah banyak dengan mudah. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial JavaScript selanjutnya di www.code80vity.com. Semoga kamu lebih jago dalam mengelola data dan memanipulasinya di programmu! ?

Tutorial Terkait Lainnya

Javascript Dasar #1: Pengenalan Javascript
Javascript Dasar #1: Pengenalan Javascript

Hai, apa kabar? Semoga baik-baik aja ya! Pada tutorial pertama ini, kita bakal mulai mengenal apa it...

Baca Tutorial
Javascript Dasar #5: Perulangan (Loops)
Javascript Dasar #5: Perulangan (Loops)

Hai, kembali lagi! Di tutorial kali ini, kita akan belajar tentang perulangan atau loops. Perulangan...

Baca Tutorial
Javascript Dasar #10: Error Handling
Javascript Dasar #10: Error Handling

Halo, teman-teman! Di tutorial kali ini, kita akan membahas tentang Error Handling dan Debugging di ...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya
Javascript Dasar #11: DOM Manipulation
Javascript Dasar #9: Asynchronous JavaScript & Promises
Javascript Dasar #4: Pengkondisian (If, Else, dan Switch)
Tutorial Terbaru
Python Dasar #10: Modul dan library
26 Dec 2024 Python
Python Dasar #9: Penggunaan File
26 Dec 2024 Python
Python Dasar #8: Exception Handling
26 Dec 2024 Python
Python Dasar #7: conditional Python
26 Dec 2024 Python
Python Dasar #6: List dan Dictionary di Python
26 Dec 2024 Python