Robert Whitney
Ini adalah bagian 9 dari seri posting blog JavaScript yang akan membawa Anda dari pemula hingga mahir. Kali ini kita akan menjelajahi topik berikut: metode JavaScript, nilai parameter default, objek Date dalam JavaScript, dan fungsi panah. Pada akhir seri ini, Anda akan mengetahui semua dasar yang perlu Anda ketahui untuk mulai coding di JavaScript. Jika Anda belum membaca posting blog sebelumnya tentang objek JavaScript, Anda dapat melakukannya di sini. Tanpa basa-basi lagi, mari kita mulai dengan tutorial kesembilan.
Metode JavaScript dan lainnya – daftar isi:
Sampai sekarang kita telah melihat banyak konsep dan topik dalam JavaScript, tetapi masih ada beberapa yang umum digunakan yang belum kita temukan. Dalam tutorial ini, kita akan melihat apa saja itu. Yang pertama adalah nilai parameter default dalam JavaScript.
Nilai parameter default
Fungsi digunakan sangat umum dalam pemrograman, dan ketika sesuatu digunakan sesering ini, tidak hanya ada kerangka kerja seperti React yang memanfaatkan fungsi JavaScript, tetapi juga ada optimasi lebih lanjut yang dikembangkan untuk mendapatkan lebih banyak dari fungsi JavaScript. Salah satu fitur utama yang kita miliki dalam fungsi disebut nilai parameter default. Parameter default memungkinkan kita untuk menulis kode yang lebih aman yang dapat membuat asumsi yang aman tentang input pengguna. Ini juga menguntungkan pengguna dengan memberikan mereka pengaturan default yang dapat memudahkan mereka untuk memilih dari opsi mereka. Mari kita lihat beberapa contoh untuk itu.
// anggap Anda sedang mengembangkan situs web untuk kedai kopi
// dan kebanyakan orang ingin memesan americano ukuran sedang
// mengetahui ini Anda ingin memudahkan orang untuk
// memesan kopi mereka dengan lebih sedikit kerumitan
function orderCoffee(typeOfCoffee="americano", sizeOfCoffee="medium", numberOfCoffee=1){
return (numberOfCoffee + " " + sizeOfCoffee + " ukuran " + typeOfCoffee + " sedang disiapkan. ");
}
console.log("Pesanan default:");
console.log(orderCoffee());
// dengan cara ini, ketika pelanggan rata-rata memesan secara online,
// akan jauh lebih mudah bagi mereka untuk memesan kopi harian mereka
// sehingga mereka akan dapat memesan dengan satu tombol
// sebagai alternatif, orang juga dapat menyesuaikan kopi mereka
// dengan mengubah input
console.log("Pesanan kustom:");
console.log(orderCoffee("latte", "besar", 2));
console.log("Pesanan kustom lainnya:");
console.log(orderCoffee("macchiato", "kecil", 1));
// juga mungkin untuk mengubah hanya sebagian dari input
// dan memanfaatkan parameter default
// untuk sisa kolom input
console.log("Pesanan yang disesuaikan sebagian:");
console.log(orderCoffee("iced coffee"));
Menjalankan kode di atas memberi kita output berikut:
Objek Date dalam JavaScript
Objek Date dalam JavaScript cukup umum digunakan, terutama dalam pengembangan web. Kita dapat menggunakan objek Date untuk melakukan fungsi yang sensitif terhadap waktu seperti mengubah pengaturan tampilan ke mode gelap, mode terang, atau mode lain yang mungkin disukai pengguna. Kita juga dapat menggunakan informasi tanggal sesuai kebutuhan di dalam proyek yang sedang kita kerjakan. Berikut adalah beberapa contoh objek Date dalam aksi:
// langkah pertama adalah membuat instance objek date
// kita dapat melakukan ini dengan menulis yang berikut dan
// mengaturnya ke variabel atau konstanta pilihan kita
let today = new Date();
console.log("Kita berada di tahun: " + today.getFullYear());
console.log("Kita juga bisa mendapatkan bulan dalam angka:");
console.log(today.getMonth());
console.log("Juga kita bisa mendapatkan jam dalam sehari seperti ini:");
console.log(today.getHours());
console.log("Kita juga bisa mendapatkan menit yang tepat bersama dengan detik");
console.log(today.getMinutes());
console.log(today.getSeconds());
// setelah kita memiliki angka-angka ini kita dapat menggunakannya sesuai keinginan
// jika kita ingin kita dapat menampilkannya atau membuat keputusan berdasarkan mereka.
// jika kita ingin menampilkan bulan dengan nama
// daripada angka, kita juga dapat mencapainya
// dengan yang berikut
const months = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
console.log("Kita berada di bulan " + months[today.getMonth()]);
// apa yang baru saja kita lakukan adalah membuat array untuk menyimpan nama bulan
// dan kemudian memilih bulan yang benar menggunakan nilai indeks
// yang diberikan oleh metode .getMonth().
// jika kita ingin menghidupkan mode gelap setelah jam 8 malam,
// kita bisa melakukan itu dengan kode berikut
// salah satu hal pertama yang harus kita ingat adalah bahwa
// jam diberikan dalam format 24 jam
// itu berarti jam 8 malam akan berarti 20 sebagai jam
// kita juga bisa menggunakan cara singkat
// dan menggabungkan pembuatan objek date baru
// dengan metode get hours
let timeOfDay = new Date().getHours();
if (timeOfDay >= 20) {
console.log("Menghidupkan Mode Gelap...");
} else {
console.log("Jangan hidupkan Mode Gelap");
}
// karena waktu saat ini sudah lewat jam 8 malam,
// dalam kasus ini kita berharap untuk menghidupkan Mode Gelap.
// yang juga merupakan hasil yang kita dapatkan seperti yang kita lihat dari
// output konsol.
Menjalankan kode di atas akan memberi kita log konsol berikut:
Metode Map()
Metode map adalah metode yang sangat berguna yang dapat menghemat banyak baris kode, dan tergantung pada bagaimana Anda menggunakannya dapat membuat kode Anda jauh lebih bersih. Ini pada dasarnya menggantikan penggunaan loop for ketika Anda menggunakannya untuk melintasi array. Berikut adalah beberapa contoh metode map().
// mari kita buat array yang akan kita gunakan untuk pemetaan
let someNumbers = [1, 2, 3, 4, 5];
// mari kita juga buat fungsi yang akan
// kita berikan kepada metode map
function doubleNums(num1){
return num1 * 2;
}
function squareNums(num1){
return num1 * num1;
}
function add100(num1){
return num1 + 100;
}
console.log("Array angka yang digandakan:");
console.log(someNumbers.map(doubleNums));
console.log("Array angka yang dikuadratkan:");
console.log(someNumbers.map(squareNums));
console.log("100 ditambahkan ke setiap elemen dalam array angka:");
console.log(someNumbers.map(add100));
// metode map() akan melintasi setiap
// item dalam array yang diberikan dan menerapkan
// fungsi yang diberikan
// catat bahwa kita tidak menyertakan tanda kurung
// setelah nama fungsi, ini akan memanggil fungsi
// sebaliknya kita hanya melewatkan nama fungsi,
// dan metode map() memanggilnya saat dibutuhkan
Menjalankan kode di atas akan memberi kita log konsol berikut:
Metode Filter()
Metode filter(), bersama dengan metode map() adalah kedua metode JavaScript yang cukup umum. Mereka sangat mirip dengan metode map() yang baru saja kita lihat. Dengan metode map() kita dapat melewatkan fungsi apa pun, dan fungsi itu diterapkan pada setiap elemen dalam array. Dengan metode filter(), kita akan melewatkan kriteria filter dan metode filter akan melintasi semua item dalam array dan akan mengembalikan array baru dengan hanya item yang memenuhi kriteria yang akan tetap. Mari kita lihat beberapa contoh untuk itu:
// mari kita pertama-tama membuat array
// untuk menerapkan metode filter()
let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
function checkEven(num1){
if (num1 % 2 == 0){
return num1;
}
}
function checkOdd(num1){
if (num1 % 2 == 1){
return num1;
}
}
function over13(num1){
if (num1 > 13){
return num1;
}
}
function divisibleByFive(num){
if (num % 5 == 0){
return num;
}
}
console.log("Angka genap dari daftar:");
console.log(someNumbers.filter(checkEven));
console.log("Angka ganjil dari daftar:");
console.log(someNumbers.filter(checkOdd));
console.log("Angka di atas 13 dari array:");
console.log(someNumbers.filter(over13));
console.log("Angka yang habis dibagi 5 dari array:");
console.log(someNumbers.filter(divisibleByFive));
Menjalankan kode di atas akan memberi kita log konsol berikut:
Fungsi panah
Ingat ketika kita mengatakan bahwa fungsi sangat umum dalam JavaScript dan banyak optimasi dilakukan untuk mereka agar bahkan lebih efisien atau bersih? Nah, fungsi panah adalah salah satunya. Fungsi panah kadang-kadang juga disebut sebagai panah lemak. Mereka pada dasarnya memberikan cara yang jauh lebih singkat untuk menulis fungsi Anda. Mereka juga sangat umum digunakan dengan metode JavaScript yang baru saja kita lihat. Mari kita lihat mereka dengan beberapa contoh:
// JavaScript menyediakan beberapa tingkat // pemendekan kode dengan fungsi panah tergantung pada kode Anda yang tepat // Pada dasarnya cara terpanjang kita dapat menulis fungsi adalah // cara kita selalu menulisnya tanpa menggunakan fungsi panah // mari kita mulai dengan array untuk menerapkan fungsi panah let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]; console.log("Array Asli:"); console.log(someNumbers); // dalam contoh sebelumnya kita telah menerapkan banyak fungsi // setelah membuatnya sebagai fungsi bernama biasa // Dalam contoh ini kita akan menerapkan transformasi yang tepat // sehingga Anda dapat melihat kedua ekstrem dalam panjang kode // gandakan setiap angka dalam array: console.log("Gandakan setiap angka dalam array:") console.log(someNumbers.map(num => num * 2)); // kuadratkan setiap angka dalam array: console.log("Kuadratkan setiap angka dalam array:") console.log(someNumbers.map(num => num * num)); // tambahkan 100 ke setiap angka dalam array: console.log("Tambahkan 100 ke setiap angka dalam array:") console.log(someNumbers.map(num => num + 100)); // Hanya simpan angka genap dalam array: console.log("Hanya simpan angka genap dalam array:") console.log(someNumbers.filter(num => num % 2 == 0)); // Hanya simpan angka ganjil dalam array: console.log("Hanya simpan angka ganjil dalam array:") console.log(someNumbers.filter(num => num % 2 == 1)); // Hanya simpan angka yang habis dibagi 5: console.log("Hanya simpan angka yang habis dibagi 5:") console.log(someNumbers.filter(num => num % 5 == 0)); // Hanya simpan angka yang lebih dari 13: console.log("Hanya simpan angka yang lebih dari 13:") console.log(someNumbers.filter(num => num > 13));
Menjalankan kode di atas akan memberi kita log konsol berikut:
Dalam tutorial berikutnya kita akan memiliki gambaran umum tentang apa yang telah kita lihat dan melihat apa yang selanjutnya.
Robert Whitney
Ahli JavaScript dan instruktur yang melatih departemen TI. Tujuan utamanya adalah untuk meningkatkan produktivitas tim dengan mengajarkan orang lain bagaimana berkolaborasi secara efektif saat melakukan pengkodean.
