50+ Method Built-in JavaScript yang Harus Dikuasai Developer (Cheat Sheet Lengkap)

Pernah nggak sih kamu menghabiskan waktu berjam-jam menulis fungsi yang ternyata sudah tersedia di JavaScript? Atau baru sadar bahwa solusi untuk masalahmu sebenarnya tinggal pakai satu method built-in saja? Welcome to the club! Bahkan developer senior pun kadang masih menemukan method built-in JavaScript yang belum pernah mereka gunakan.

JavaScript itu seperti punya gudang senjata lengkap yang tersembunyi. Method built-in adalah senjata-senjata tersebut—siap pakai, sudah teroptimasi, dan gratis! Masalahnya, banyak developer yang tidak menyadari kekuatan yang sebenarnya sudah mereka miliki di ujung jari.

Di artikel ini, saya kumpulkan 50+ method built-in JavaScript paling essential yang wajib kamu kuasai. Kita akan organisir berdasarkan kategori dengan contoh praktis yang bisa langsung kamu terapkan. Think of this as your ultimate JavaScript cheat sheet. Let’s unlock the power!

String Methods: Senjata Pamungkas untuk Manipulasi Teks

String adalah tipe data yang paling sering kita manipulasi. Berikut method-method andalannya:

1. length – Property Panjang String

const nama = "JavaScript";
console.log(nama.length); // 10

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

const teks = "Hello World";
console.log(teks.toUpperCase()); // "HELLO WORLD"
console.log(teks.toLowerCase()); // "hello world"

3. trim() – Membersihkan Spasi Berlebih

const username = "   user123   ";
console.log(username.trim()); // "user123"

4. includes() – Pencarian Substring Modern

const kalimat = "Saya belajar JavaScript";
console.log(kalimat.includes("belajar")); // true
console.log(kalimat.includes("Python")); // false

5. startsWith() & endsWith() – Pencarian Posisi Spesifik

const filename = "document.pdf";
console.log(filename.endsWith(".pdf")); // true
console.log(filename.startsWith("doc")); // true

6. slice() – Mengambil Potongan String

const str = "Hello World";
console.log(str.slice(0, 5)); // "Hello"
console.log(str.slice(6)); // "World"

7. split() – Konversi String ke Array

const tags = "js,html,css,react";
const tagArray = tags.split(",");
console.log(tagArray); // ["js", "html", "css", "react"]

8. replace() & replaceAll() – Find and Replace

const text = "Saya suka Java. Java itu keren.";
console.log(text.replace("Java", "JavaScript")); 
console.log(text.replaceAll("Java", "JavaScript"));

9. padStart() & padEnd() – Padding String

const angka = "5";
console.log(angka.padStart(3, "0")); // "005"
console.log(angka.padEnd(3, "0")); // "500"

10. match() – Pencarian dengan Regular Expression

const email = "user@example.com";
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(email.match(regex)); // Array atau null

Array Methods: Powerhouse untuk Manipulasi Data

Array methods adalah jantung dari functional programming di JavaScript:

11. map() – Transformasi Setiap Elemen

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

12. filter() – Filtering Data

const scores = [85, 45, 90, 60, 70];
const passed = scores.filter(score => score >= 70);
console.log(passed); // [85, 90, 70]

13. reduce() – Akumulasi Nilai

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10

14. find() & findIndex() – Pencarian Elemen

const users = [
  {id: 1, name: "John"},
  {id: 2, name: "Jane"}
];
const user = users.find(u => u.id === 2);
console.log(user); // {id: 2, name: "Jane"}

15. some() & every() – Testing Kondisi

const ages = [18, 22, 25, 30];
console.log(ages.some(age => age < 18)); // false console.log(ages.every(age => age >= 18)); // true

16. sort() – Pengurutan Array

const fruits = ["banana", "apple", "cherry"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "cherry"]

// Untuk angka perlu comparator function
const numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 25, 40, 100]

17. forEach() – Iterasi Sederhana

const colors = ["red", "green", "blue"];
colors.forEach(color => console.log(color));

18. includes() – Cek Keberadaan Elemen

const colors = ["red", "green", "blue"];
console.log(colors.includes("green")); // true

19. flat() & flatMap() – Flatten Nested Array

const nested = [1, [2, 3], [4, [5]]];
console.log(nested.flat(2)); // [1, 2, 3, 4, 5]

20. Array.from() – Konversi ke Array

const str = "hello";
const chars = Array.from(str);
console.log(chars); // ["h", "e", "l", "l", "o"]

Object Methods: Master Data Structure

21. Object.keys() – Ambil Semua Keys

const user = {name: "John", age: 30, city: "New York"};
console.log(Object.keys(user)); // ["name", "age", "city"]

22. Object.values() – Ambil Semua Values

console.log(Object.values(user)); // ["John", 30, "New York"]

23. Object.entries() – Konversi ke Array of Entries

console.log(Object.entries(user)); 
// [["name", "John"], ["age", 30], ["city", "New York"]]

24. Object.assign() – Merge Objects

const obj1 = {a: 1, b: 2};
const obj2 = {b: 3, c: 4};
const merged = Object.assign({}, obj1, obj2);
console.log(merged); // {a: 1, b: 3, c: 4}

25. Object.freeze() & Object.seal() – Immutability

const obj = {name: "John"};
Object.freeze(obj); // Tidak bisa diubah sama sekali
Object.seal(obj); // Bisa ubah value, tapi tidak bisa tambah/hapus property

Number Methods: Utility untuk Angka

26. Number.isInteger() – Cek Bilangan Bulat

console.log(Number.isInteger(5)); // true
console.log(Number.isInteger(5.5)); // false

27. Number.parseFloat() & Number.parseInt()

console.log(Number.parseInt("123px")); // 123
console.log(Number.parseFloat("3.14em")); // 3.14

28. toFixed() – Format Angka Desimal

const price = 19.99;
console.log(price.toFixed(1)); // "20.0"

29. toLocaleString() – Format Berdasarkan Lokal

const amount = 1234567.89;
console.log(amount.toLocaleString('id-ID')); // "1.234.567,89"

Math Methods: Operasi Matematika

30. Math.round(), Math.floor(), Math.ceil()

console.log(Math.round(4.7)); // 5
console.log(Math.floor(4.7)); // 4  
console.log(Math.ceil(4.3)); // 5

31. Math.random() – Generate Angka Acak

// Random antara 0-10
const random = Math.floor(Math.random() * 11);
console.log(random);

32. Math.max() & Math.min()

console.log(Math.max(10, 20, 5)); // 20
console.log(Math.min(10, 20, 5)); // 5

33. Math.pow() & Math.sqrt()

console.log(Math.pow(2, 3)); // 8
console.log(Math.sqrt(16)); // 4

Date Methods: Manipulasi Waktu dan Tanggal

34. new Date() – Constructor Date

const now = new Date();
const customDate = new Date("2023-12-25");

35. getFullYear(), getMonth(), getDate()

console.log(now.getFullYear()); // 2023
console.log(now.getMonth()); // 11 (0-based)
console.log(now.getDate()); // 4

36. getHours(), getMinutes(), getSeconds()

console.log(now.getHours()); // Jam sekarang
console.log(now.getMinutes()); // Menit sekarang

37. toISOString() & toLocaleDateString()

console.log(now.toISOString()); // Format ISO
console.log(now.toLocaleDateString('id-ID')); // "4/12/2023"

Function Methods: Advanced Function Techniques

38. call() & apply() – Method Borrowing

const person1 = {name: "John"};
const person2 = {name: "Jane"};

function greet(greeting) {
  return `${greeting}, ${this.name}!`;
}

console.log(greet.call(person1, "Hello")); // "Hello, John!"
console.log(greet.apply(person2, ["Hi"])); // "Hi, Jane!"

39. bind() – Create Bound Function

const johnGreet = greet.bind(person1);
console.log(johnGreet("Welcome")); // "Welcome, John!"

Promise Methods: Async Programming

40. then() & catch() – Promise Handling

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

41. Promise.all() – Multiple Async Operations

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // [3, 42, "foo"]
});

42. Promise.race() – First to Complete

const promise1 = new Promise((resolve) => setTimeout(resolve, 500, 'one'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'two'));

Promise.race([promise1, promise2]).then(value => {
  console.log(value); // "two" (karena lebih cepat)
});

JSON Methods: Data Serialization

43. JSON.stringify() – Object to JSON String

const obj = {name: "John", age: 30};
const jsonString = JSON.stringify(obj);
console.log(jsonString); // '{"name":"John","age":30}'

44. JSON.parse() – JSON String to Object

const objAgain = JSON.parse(jsonString);
console.log(objAgain); // {name: "John", age: 30}

Global Methods: Utility Functions

45. setTimeout() & setInterval()

// Jalankan sekali setelah 2 detik
setTimeout(() => console.log("Hello"), 2000);

// Jalankan setiap 1 detik
const interval = setInterval(() => console.log("Tick"), 1000);

46. clearTimeout() & clearInterval()

// Hentikan interval setelah 5 detik
setTimeout(() => clearInterval(interval), 5000);

ES6+ Modern Methods

47. String.padStart() & String.padEnd()

console.log("5".padStart(3, "0")); // "005"

48. Array.includes()

console.log([1, 2, 3].includes(2)); // true

49. Object.values() & Object.entries()

const obj = {a: 1, b: 2};
console.log(Object.values(obj)); // [1, 2]

50. Optional Chaining (?.)

const user = {profile: {name: "John"}};
console.log(user?.profile?.name); // "John"
console.log(user?.address?.city); // undefined (tidak error)

51. Nullish Coalescing (??)

const value = null ?? 'default';
console.log(value); // "default"

Cheat Sheet Cepat: Method yang Paling Sering Dipakai

Tips Master Method Built-in JavaScript

1. Practice Method Chaining: Kombinasikan method untuk workflow yang powerful
2. Understand Return Values: Setiap method mengembalikan value tertentu
3. Check Browser Compatibility: Beberapa method baru tidak support IE
4. Read MDN Documentation: Sumber terbaik untuk detail lengkap
5. Experiment in Console: Coba langsung di browser developer tools

Dengan menguasai method-method built-in ini, kamu akan menulis kode yang lebih clean, efficient, dan maintainable. Ingat, programmer yang baik bukan yang tahu semua method, tapi yang tahu method mana yang tepat untuk menyelesaikan masalah tertentu.

Selamat bereskplorasi! 🚀