Table of Contents

25+ Tag Fungsi Built-in JavaScript yang Wajib Kamu Kuasai (Dari Pemula sampai Expert)

Bayangkan lagi masak di dapur. Daripada bikin bumbu dari nol setiap kali, lebih enak kan kalau punya bumbu dasar yang siap pakai? Nah, fungsi built-in JavaScript itu persis seperti bumbu dapurnya programmer. Mereka adalah fungsi-fungsi yang sudah tersedia langsung di JavaScript, siap dipakai kapan aja tanpa perlu repot-repot bikin dari nol.

Dari manipulasi string sampai ngatur array, dari main-main tanggal sampai matematika kompleks, JavaScript sudah nyiapin segalanya. Tapi dengan begitu banyaknya pilihan, mana sih yang benar-benar penting? Artikel ini bakal jadi panduan lengkap buat kamu. Kita akan eksplor kumpulan fungsi penting JavaScript yang bakal bikin coding-mu lebih efisien dan powerful. Yuk, langsung aja kita selami!

String Manipulation: Main-Main dengan Teks

Ini adalah kelompok fungsi built-in yang paling sering dipakai. Buat kamu yang sering berurusan dengan input user, validasi form, atau manipulasi teks, ini wajib banget dipahami.

1. length – Tau Panjang String

let nama = "JavaScript";
console.log(nama.length); // Output: 10

Fungsi ini sebenernya property, tapi sering banget dipakai. Berguna untuk validasi, misal ngecek panjang password.

2. toUpperCase() & toLowerCase() – Ubah Kapitalisasi

let salam = "Halo Dunia";
console.log(salam.toUpperCase()); // "HALO DUNIA"
console.log(salam.toLowerCase()); // "halo dunia"

Perfect untuk normalisasi data, biar semua input konsisten.

3. includes() – Cek Apakah Ada Substring Tertentu

let email = "user@example.com";
console.log(email.includes("@")); // true
console.log(email.includes("gmail")); // false

Lebih modern dibanding pakai indexOf() yang ribet.

4. split() – Pecah String Jadi Array

let kalimat = "JavaScript itu seru banget";
let kataKata = kalimat.split(" ");
console.log(kataKata); // ["JavaScript", "itu", "seru", "banget"]

Biasanya dipakai waktu parsing CSV atau memisahkan tag.

5. trim() – Buang Spasi di Awal dan Akhir

let inputUser = "   javascript   ";
console.log(inputUser.trim()); // "javascript"

Wajib banget dipakai sebelum nyimpan data ke database!

Array Methods: Powerhouse untuk Manipulasi Data

Kalau kamu kerja dengan data dalam jumlah banyak, array methods ini bakal jadi senjata andalanmu.

6. forEach() – Loop yang Lebih Elegant

let angka = [1, 2, 3];
angka.forEach(function(angka) {
    console.log(angka * 2); // 2, 4, 6
});

Gantinya for loop tradisional, lebih clean dan readable.

7. map() – Transformasi Array

let harga = [10000, 20000, 30000];
let hargaDiskon = harga.map(harga => harga * 0.8);
console.log(hargaDiskon); // [8000, 16000, 24000]

Fungsi favorit para React developer! Mengembalikan array baru tanpa mengubah array asli.

8. filter() – Saring Data yang Diinginkan

let angka = [1, 2, 3, 4, 5, 6];
let angkaGenap = angka.filter(angka => angka % 2 === 0);
console.log(angkaGenap); // [2, 4, 6]

Seperti namanya, buat nyaring data berdasarkan kondisi tertentu.

9. find() & findIndex() – Cari Elemen dalam Array

let users = [
    {id: 1, name: "John"},
    {id: 2, name: "Jane"},
    {id: 3, name: "Doe"}
];

let user = users.find(user => user.id === 2);
console.log(user); // {id: 2, name: "Jane"}

let index = users.findIndex(user => user.name === "Doe");
console.log(index); // 2

find() mengembalikan elemennya, findIndex() mengembalikan posisi indexnya.

10. reduce() – The Ultimate Array Method

let angka = [1, 2, 3, 4, 5];
let total = angka.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(total); // 15

Agak tricky di awal, tapi sangat powerful sekali kamu paham. Bisa buat hitung total, flatten array, atau grouping data.

Number Methods: Berhitung dengan JavaScript

Buatan kamu yang perlu operasi matematika atau format angka.

11. parseInt() & parseFloat() – Konversi String ke Angka

let stringAngka = "123.45";
console.log(parseInt(stringAngka)); // 123
console.log(parseFloat(stringAngka)); // 123.45

Essential banget waktu baca input dari form HTML (yang selalu berupa string).

12. toFixed() – Format Desimal

let harga = 123.4567;
console.log(harga.toFixed(2)); // "123.46"

Cocok buat format mata uang. Hati-hati, return-nya string, bukan number!

13. isNaN() – Cek Apakah Bukan Angka

console.log(isNaN("Hello")); // true
console.log(isNaN(123)); // false
console.log(isNaN("123")); // false (string angka bisa dikonversi)

Penting untuk validasi input numeric.

Date Object: Main-Main dengan Waktu dan Tanggal

Tanggal dan waktu sering bikin pusing, tapi JavaScript bikinnya lebih gampang.

14. new Date() – Buat Objek Date

let sekarang = new Date();
let tanggalCustom = new Date("2024-12-25");
let dariTimestamp = new Date(1703510400000);

Bisa bikin date dari string, timestamp, atau parameter terpisah.

15. getFullYear(), getMonth(), getDate() – Ambil Bagian Tanggal

let sekarang = new Date();
console.log(sekarang.getFullYear()); // 2024
console.log(sekarang.getMonth()); // 11 (Desember, karena dimulai dari 0)
console.log(sekarang.getDate()); // 25 (tanggal)

Hati-hati dengan getMonth() yang dimulai dari 0 (Januari = 0)!

16. toLocaleDateString() – Format Tanggal yang User-Friendly

let sekarang = new Date();
console.log(sekarang.toLocaleDateString('id-ID')); // "25/12/2024"
console.log(sekarang.toLocaleDateString('en-US')); // "12/25/2024"

Auto-format sesuai locale pengguna. Very handy!

Math Object: Matematika Level Lanjut

Buatan kamu yang perlu operasi matematika kompleks.

17. Math.random() – Generate Angka Random

let random0to1 = Math.random(); // 0.0 sampai 1.0
let random1to10 = Math.floor(Math.random() * 10) + 1; // 1 sampai 10

Buat game, random quote, atau apa aja yang butuh randomness.

18. Math.floor(), Math.ceil(), Math.round() – Pembulatan Angka

let angka = 3.7;
console.log(Math.floor(angka)); // 3 (pembulatan ke bawah)
console.log(Math.ceil(angka)); // 4 (pembulatan ke atas)
console.log(Math.round(angka)); // 4 (pembulatan terdekat)

Pilih sesuai kebutuhan pembulatanmu.

19. Math.max() & Math.min() – Cari Nilai Tertinggi/Terendah

let angka = [1, 5, 3, 9, 2];
console.log(Math.max(...angka)); // 9
console.log(Math.min(...angka)); // 1

Perhatikan penggunaan spread operator (…) untuk array.

Object Methods: Utility untuk Object

Buat manipulasi object yang lebih advanced.

20. Object.keys(), Object.values(), Object.entries() – Ekstrak Data dari Object

let user = {nama: "John", umur: 30, kota: "Jakarta"};

console.log(Object.keys(user)); // ["nama", "umur", "kota"]
console.log(Object.values(user)); // ["John", 30, "Jakarta"]
console.log(Object.entries(user)); // [["nama", "John"], ["umur", 30], ["kota", "Jakarta"]]

Sangat powerful untuk iterasi object atau konversi ke array.

21. Object.assign() & Spread Operator – Menggabungkan Object

let obj1 = {a: 1, b: 2};
let obj2 = {b: 3, c: 4};

// Cara lama
let gabungan1 = Object.assign({}, obj1, obj2);

// Cara modern (ES6)
let gabungan2 = {...obj1, ...obj2};

console.log(gabungan2); // {a: 1, b: 3, c: 4}

Spread operator lebih modern dan readable.

JSON Methods: Bermain dengan Data API

Wajib banget di era web development modern.

22. JSON.stringify() – Convert Object ke JSON String

let data = {nama: "John", umur: 30};
let jsonString = JSON.stringify(data);
console.log(jsonString); // '{"nama":"John","umur":30}'

Essential untuk kirim data ke server atau simpan ke localStorage.

23. JSON.parse() – Convert JSON String ke Object

let jsonString = '{"nama":"John","umur":30}';
let data = JSON.parse(jsonString);
console.log(data.nama); // "John"

Kebalikan dari stringify, buat baca data dari API.

Bonus: Fungsi Modern ES6+

Beberapa fungsi modern yang bikin hidup lebih mudah.

24. String.includes() vs String.indexOf()

let teks = "Hello World";

// Cara lama
if (teks.indexOf("World") !== -1) {
    console.log("Ketemu!");
}

// Cara modern
if (teks.includes("World")) {
    console.log("Ketemu!");
}

includes() lebih readable dan intuitive.

25. Array.includes() – Cek Keberadaan Element

let fruits = ["apple", "banana", "orange"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("grape")); // false

Lebih simple dibanding pake indexOf() !== -1.

Tabel Cheat Sheet Cepat

Buat kamu yang suka ringkasan:

Kategori	Fungsi	Kegunaan
String	toUpperCase(), includes(), split()	Manipulasi teks
Array	map(), filter(), reduce()	Transformasi data
Number	parseInt(), toFixed()	Operasi angka
Date	new Date(), toLocaleDateString()	Manipulasi tanggal
Utility	JSON.parse(), Object.keys()	Helper functions

Kesimpulan

Nah, itulah dia kumpulan fungsi penting JavaScript yang bakal bikin skill coding-mu naik level. Dari yang basic kayak manipulasi string sampai yang advanced kayak array methods, semua punya peran penting dalam development sehari-hari.

Kunci menguasainya? Praktik, praktik, dan praktik! Coba buat project kecil-kecilan, eksperimen dengan fungsi-fungsi ini, dan lihat bagaimana mereka bisa menyelesaikan masalah dengan elegant. Jangan takut buka dokumentasi MDN kalau lupa detailnya.

Ingat, menjadi programmer JavaScript yang jago bukan tentang menghafal semua fungsi, tapi tentang tahu fungsi apa yang tersedia dan kapan harus menggunakannya. Selamat coding!