Array
Array dalam JavaScript adalah struktur data yang digunakan untuk menyimpan sekumpulan nilai atau elemen dalam satu variabel. Elemen-elemen dalam array dapat berupa nilai-nilai dari tipe data apa pun, seperti string, angka, objek, atau bahkan array lainnya.
Array adalah struktur data sederhana berisi deretan data (elemen) yang bisa diakses dengan menggunakan nomor indeks atau key. Indeks sebuah array dimulai dari nol.
let myAray = [] //membuat array kosong
let numbers = [1, 2, 3, 4, 5] //membuat array dengan nilai-angka
let fruits = ["Aple", "Orange", "Banana"] //membuat array dengan nilai-nilai string
Mengakses Array
//buat array 3 elemen
var a = [1,2,3];
//tampilkan data pada index pertama (0)
console.log(a[0]);//output: 1
//tampilkan data pada index terakhir (2)
console.log(a[2]);//output: 3
Array associative
Array yang menggunakan key (string) sebagai identitas, disebut associative-array. Untuk mengakses elemennya kita harus menggunakan key bukan nomor indeks. Key ditulis dalam tanda kurung siku atau diawali dengan tanda titik (dot-notation).
var info = [];
info['name'] = 'John';
info['age'] = 40;
info['name'] = 'John';
info['age'] = 40;
//dengan dot notation
info.sex = 'male';
console.log(info['sex']);//male
console.log(info.name);//John
//Associative-array tidak mengenal indeks
console.log(info[0]);//undefined
Array Function
Array memiliki banyak built-in function untuk memanipulasi elemen, membuat duplikat, dan lain-lain. Beberapa di antaranya bisa kita coba dengan kode berikut.
var myArray = [0];
//tambahkan elemen di index 1
myArray[1] = 5;
console.log(myArray);//0,5
//tambahkan elemen baru di belakang
myArray.push(10);
console.log(myArray); //0,5,10
//tambahkan elemen baru di depan
myArray.unshift(100);
console.log(myArray); //100,0,5,10
//tambahkan elemen baru di depan elemen terakhir
myArray.splice(myArray.length - 1, 0, 300);
console.log(myArray); //100,0,5,300,10
//hapus elemen terakhir
myArray.pop();
console.log(myArray); //100,0,5,300
//hapus elemen pertama
myArray.shift();
console.log(myArray); //0,5,300
//gabungkan dengan array lain
var otherArray = ['a', 'b', 'c'];
myArray = myArray.concat(otherArray);
console.log(myArray); //0,5,300,a,b,c
//buat array baru berisi sebagian elemen myArray
//antara index 0 - terakhir
var partial = myArray.slice(1, myArray.length - 1);
console.log(partial); //5,300,a,b
//myArray tidak berubah
console.log(myArray); //0,5,300,a,b,c
//buat duplikat
var myCopy = myArray.concat();
console.log(myCopy); //0,5,300,a,b,c
//buat string dari array dengan pemisah '|'
var s = myArray.join('|');
console.log(s); //0|5|300|a|b|c
project sederhana array
let daftarSiswa = [];
function tambahsiswa() {
let nama = document.getElementById("nama").value;
if (nama === "") {
alert("data tidak boleh kosong");
return;
}
daftarSiswa.push(nama);
document.getElementById("nama").value = "";
tampil();
}
function hapussiswa() {
if (daftarSiswa.length === 0) {
alert("tidak ada data");
}
daftarSiswa.pop();
tampil();
}
function tampil() {
let hasil = "";
for (let i = 0; i < daftarSiswa.length; i++) {
hasil += i + 1 + ". " + daftarSiswa[i] + "<br>";
}
document.getElementById("siswa").innerHTML = hasil;
document.getElementById("jumlah").innerHTML = daftarSiswa.length;
}
Object
Object adalah "mbahnya" semua tipe data dalam JavaScript. Dengan kata lain, semua tipe data adalah turunan dari Object. Untuk membuat objek, kita menggunakan notasi literal { }.
Objek memiliki properties dan untuk membuat properties kita bisa menggunakan cara yang sama dengan associative-array atau menggunakan notasi objek (key-value) seperti contoh berikut.
//notasi objek, lebih disukai
//setiap properti dipisahkan oleh koma & key-value dipisahkan //oleh titik-dua.
var myCar = {
brand: 'Honda',
year: 2011
};
//cara yg sama dengan sintaks associative-array
var yourCar = {};
yourCar['brand'] = 'Toyota';
yourCar['year'] = 2012;
// kita juga bisa mengubah dan menambah property object
yourCar.brand = "Mazda";
yourCar.color = "Black"
// Sama seperti associative-array, kita mengakses properti
// dengan key dalam kurung siku atau dot-notation.
console.log(yourCar.brand);
console.log(yourCar['brand']);
Nested Object
Nested Object adalah object yang di dalamnya terdapat object lain sebagai nilai propertinya.
let siswa = {
nama: "Andi",
kelas: "XI RPL",
umur: 16,
alamat: {
jalan: "Jl. Merdeka",
kota: "Jakarta",
provinsi: "DKI Jakarta"
}
};
📌 Properti alamat adalah object, bukan string
➡️ Inilah yang disebut nested object
Akses object Utama :
console.log(siswa.nama);
Akses object di dalam object :
console.log(siswa.alamat.kota);
console.log(siswa.alamat.jalan);
Mengubah Data Nested Object :
siswa.alamat.kota = "Bandung";
Menambah Property Nested Object :
siswa.alamat.kodePos = "40123";
Nested Object + Array (Sangat Umum)
let siswa = {
nama: "Rina",
kelas: "XI RPL",
hobi: ["Membaca", "Coding", "Olahraga"],
nilai: {
matematika: 85,
bahasa: 90,
produktif: 88
}
};
Akses array di dalam object
console.log(siswa.hobi[1]); // Coding
Akses object di dalam object
console.log(siswa.nilai.produktif);
method dalam object
let siswa = {
nama: "Andi",
kelas: "XI RPL",
sapa: function () {
console.log("Halo, nama saya " + this.nama);
}
};
siswa.sapa();
latihan Siswa
<!DOCTYPE html>
<html>
<head>
<title>Project Object Sederhana</title>
</head>
<body>
<h3>Data Siswa</h3>
<button onclick="siswa.tampil()">Tampilkan Data</button>
<p id="hasil"></p>
<script src="script.js"></script>
</body>
</html>
let siswa = {
nama: "Andi",
kelas: "XI RPL",
tampil: function () {
document.getElementById("hasil").innerHTML =
"Nama: " + this.nama + "<br>" +
"Kelas: " + this.kelas;
}
};