Javascript Dasar #6: Array & Manipulasi Data

Author Erick Irwansyah
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 #4: Pengkondisian (If, Else, dan Switch)
Javascript Dasar #4: Pengkondisian (If, Else, dan Switch)

Hai, selamat datang lagi! Di tutorial kali ini, kita akan belajar tentang pengkondisian di JavaScrip...

Baca Tutorial
Javascript Dasar #9: Asynchronous JavaScript & Promises
Javascript Dasar #9: Asynchronous JavaScript & Promises

Halo, teman-teman! Sekarang kita akan masuk ke topik yang sangat penting dalam JavaScript: Asynchron...

Baca Tutorial
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

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Javascript Dasar #9: Asynchronous JavaScript & Promises
Javascript Dasar #10: Error Handling
Javascript Dasar #4: Pengkondisian (If, Else, dan Switch)
Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya
Tutorial Terbaru
Tutorial PHP Dasar #13: Upload File dengan PHP
25 Dec 2024 Php
Tutorial PHP Dasar #12: php security (sql injection & hashing)
25 Dec 2024 Php
Tutorial PHP Dasar #11: CRUD dengan PHP dan MySQL
25 Dec 2024 Php
Tutorial PHP Dasar #10: Session dan Cookie di PHP
25 Dec 2024 Php
Tutorial PHP Dasar #9: Validasi Form di PHP
25 Dec 2024 Php