JavaScript

Kadang saya perlu tahu posisi elemen terakhir yang memenuhi kondisi tertentu di array. findLastIndex() bikin ini gampang, tanpa harus reverse array dulu. 1. Dasar findLastIndex() Copy array.findLastIndex(callback(element[, index[, array]])[, thisArg]) callback → fungsi dijalankan di tiap elemen sampai cocok. thisArg → opsional, konteks this. Return → index elemen terakhir yang cocok, atau -1. 2. Contoh Dasar Copy const numbers = [1,3,5,8,10,12,7,6]; const lastEvenIndex = numbers.findLastIndex(num => num % 2 === 0); console.log(lastEvenIndex); // 7 3. Contoh Real-World Transaksi terakhir > 200:

Kalau kamu ingin mengubah elemen array tanpa mengubah array asli, with() jawabannya. 1. Dasar with() Copy let newArray = array.with(index, value); Membuat array baru dengan elemen di index diganti value. Array asli tetap utuh. Contoh: Copy const colors = ['red','blue','green','yellow']; const updatedColors = colors.with(1,'purple'); console.log(updatedColors); // ['red','purple','green','yellow'] console.log(colors); // ['red','blue','green','yellow'] 2. Gunakan untuk Immutable Updates Copy const items = ['item1','item2','item3']; const updatedItems = items.with(2,'newItem'); console.log(updatedItems); // ['item1','item2','newItem'] console.log(items); // ['item1','item2','item3'] 3. Kombinasi dengan Metode Lain Copy const numbers = [1,2,3,4,5]; const modifiedNumbers = numbers.with(3,100).map(num => num*2); console.log(modifiedNumbers); // [2,4,6,200,10] console.log(numbers); // [1,2,3,4,5] 4. Kegunaan Real-World UI Updates: Update elemen di daftar/tabel tanpa mengubah data asli. State Management: Cocok untuk Redux atau sistem yang memerlukan immutability. Data Processing: Non-destructive updates untuk dataset penting. 5. Catatan Performa Membuat array baru → butuh memory tambahan, jadi perhatikan jika array besar.

Di JavaScript, melakukan iterasi pada array dan koleksi adalah hal yang umum, dan ada beberapa cara untuk melakukannya, termasuk for, forEach, dan map. Setiap metode memiliki kasus penggunaan, keuntungan, dan keterbatasannya masing-masing. Pada panduan ini, kita akan membahas perbedaan ketiga metode tersebut, cara menggunakannya dengan efektif, dan kapan memilih salah satunya. 1. Loop for Tradisional Loop for adalah salah satu metode iterasi tertua dan paling fleksibel di JavaScript. Metode ini memberi kontrol penuh atas proses iterasi.

Saat bekerja dengan JavaScript, memahami lingkup variabel (variable scope) sangat penting agar kode berjalan sesuai harapan. Dalam artikel ini, kita akan membahas berbagai jenis lingkup variabel di JavaScript, bagaimana cara kerjanya, dan praktik terbaik untuk mengelolanya. 1. Apa itu Lingkup Variabel? Lingkup variabel menentukan di mana sebuah variabel bisa diakses atau terlihat dalam kode. Di JavaScript, terdapat tiga jenis lingkup utama: Lingkup Global Lingkup Fungsi Lingkup Block Setiap jenis lingkup menentukan bagaimana dan di mana variabel dapat diakses.

Di ekosistem JavaScript, package manager memegang peranan penting dalam mengelola dependensi, skrip, dan konfigurasi proyek. Meskipun npm telah lama menjadi default, alternatif seperti Yarn, pnpm, dan Bun muncul dengan fitur unik dan peningkatan performa. Pada artikel ini, saya akan membahas perbedaan masing-masing package manager untuk membantu memilih yang paling sesuai dengan kebutuhan proyek Anda. 1. npm (Node Package Manager) npm adalah package manager asli untuk Node.js dan tetap paling banyak digunakan. Ia sudah terpasang bersama Node.js, sehingga menjadi pilihan default banyak developer.

Saat mengembangkan aplikasi web, menguji kode di lingkungan lokal sangat penting. Salah satu cara termudah untuk menyajikan file statis secara lokal adalah dengan menggunakan http-server. Alat baris perintah yang ringan dan mudah digunakan ini memungkinkan Anda membuat server web dasar dengan konfigurasi minimal. 1. Apa itu http-server? http-server adalah server HTTP sederhana tanpa konfigurasi untuk menyajikan file statis. Ditulis dengan JavaScript dan dijalankan di Node.js, sehingga mudah diinstal dan digunakan di sistem apa pun yang memiliki Node.js.

Kadang-kadang di proyek JavaScript, saya butuh memecah array besar jadi potongan-potongan kecil—entah buat manajemen UI atau pemrosesan data. Meski JavaScript punya banyak metode bawaan, nggak ada yang langsung bilang: “Hei, saya bisa nge-chunk array buat kamu.” Gini deh, kita bisa tambahkan sendiri. Menambahkan Metode chunk kita bisa extend Array.prototype pakai Object.defineProperty biar semua array bisa pakai chunk: Copy Object.defineProperty(Array.prototype, 'chunk', { value: function(size) { let arr = this; return [].concat.apply([], arr.map((el, i) => i % size ? [] : [arr.slice(i, i + size)]) ); } }); Cara Kerjanya this → array yang kita panggil chunk. arr.map + i % size → bikin chunk baru tiap size elemen. [].concat.apply([], …) → merapikan semua chunk jadi satu array. Contoh Penggunaan Copy let numbers = [1,2,3,4,5,6,7,8,9]; console.log(numbers.chunk(3)); // Output: [[1,2,3],[4,5,6],[7,8,9]] Sekarang tinggal panggil .chunk(size) di array mana pun.

Kadang saya butuh bikin teks terlihat rapi—judul, nama, atau label UI. Manual kapitalisasi itu nyebelin. Untungnya, JavaScript bisa bantu dengan fungsi title case. Fungsi titleCase Copy function titleCase(str) { return str .toLowerCase() .split(" ") .map(word => word[0].toUpperCase() + word.slice(1)) .join(" "); } Cara Kerjanya Lowercase & Split: str.toLowerCase().split(" ") → pastikan semua huruf kecil dulu, lalu pisah jadi kata-kata.

Saat mengelola teks di aplikasi web, sering kali saya perlu menampilkan potongan teks yang lebih pendek dari teks aslinya agar tampilan tetap rapi dan mudah dibaca. Kali ini kita akan membuat fungsi JavaScript yang memangkas teks hingga panjang tertentu dan menambahkan elipsis ("…") jika teks melebihi batas tersebut. Fungsi limitText Fungsi limitText dirancang untuk memangkas teks hingga panjang tertentu dan menambahkan elipsis jika panjang teks melebihi batas yang ditentukan. Berikut implementasinya:

Kadang saya butuh ambil ID video YouTube dari URL—entah buat embed atau manipulasi video. URL YouTube bisa macem-macem formatnya. Untungnya, JavaScript bisa bantu gampang. Fungsi YouTubeGetID Copy function YouTubeGetID(url) { url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/); return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0]; } Cara Kerja Split URL: Memecah URL berdasarkan pola umum YouTube (v=, youtu.be/, /embed/, dll). Ambil ID: Setelah split, ID biasanya ada di indeks ke-2. Kalau ada, ambil sebelum karakter non-alfanumerik; kalau nggak, ambil bagian pertama. Contoh Penggunaan Copy console.log(YouTubeGetID('https://www.youtube.com/watch?v=QOM0xWASUwE')); // QOM0xWASUwE console.log(YouTubeGetID('https://youtu.be/QOM0xWASUwE')); // QOM0xWASUwE console.log(YouTubeGetID('https://www.youtube.com/embed/QOM0xWASUwE')); // QOM0xWASUwE console.log(YouTubeGetID('https://www.youtube.com/vi/QOM0xWASUwE')); // QOM0xWASUwE Catatan Fungsi ini simpel tapi efektif buat semua format URL umum. Bisa langsung dipakai di aplikasi web untuk embed, playlist, atau manipulasi video. Kesimpulan Pada akhirnya, YouTubeGetID bikin hidup lebih gampang saat bekerja dengan URL YouTube. Snippet ini siap langsung dicoba, tinggal copy-paste dan jalan. Gini deh, kadang hal kecil kayak ini hemat waktu banget.

Dalam pengembangan software, seringkali kita perlu menghapus elemen duplikat dari array. JavaScript menyediakan beberapa cara untuk melakukannya, tergantung apakah kamu ingin menghapus duplikat berdasarkan satu atau beberapa properti, atau mempertahankan elemen terakhir yang muncul. Di sini kita akan membahas berbagai metode menggunakan filter() dan pendekatan lainnya. 1. Menghapus Duplikat Berdasarkan ID Unik Jika array terdiri dari objek dengan properti ID unik, kita bisa menghapus duplikat berdasarkan ID tersebut. Hanya satu objek dengan ID yang sama yang akan dipertahankan.

Mengelola dan memanipulasi data array adalah tugas umum dalam pengembangan web. Artikel ini akan membahas cara mengurutkan array berisi objek berdasarkan nilai tertentu menggunakan JavaScript, dengan contoh mengurutkan daftar objek berdasarkan properti order. 1. Data Awal saya mulai dengan sekumpulan data berupa array objek. Setiap objek memiliki dua properti: name dan order. Copy let data = [ { name: 'Edward', order: 21 }, { name: 'Sharpe', order: 37 }, { name: 'And', order: 45 }, { name: 'The', order: -12 }, { name: 'Magnetic', order: 13 }, { name: 'Zeros', order: 37 } ] Tujuan saya adalah mengurutkan objek-objek ini berdasarkan nilai order.

Dalam pengembangan web atau aplikasi JavaScript, seringkali saya perlu mencari teks tertentu di dalam string yang lebih besar. Meski JavaScript menyediakan metode bawaan seperti indexOf atau search, terkadang saya ingin kontrol lebih atas hasil pencarian. Di sini akan dibahas cara membuat fungsi kustom findText. 1. Pengenalan Fungsi findText Fungsi findText dirancang untuk mencari substring dalam string dan mengembalikan teks di posisi substring tersebut. kita bisa menentukan jumlah karakter yang ingin diambil di kiri dan kanan substring yang ditemukan.

Filter array itu hal wajib di web development. Selain filter() dan includes(), ada banyak trik buat filter sesuai kebutuhan. Gini deh, beberapa contohnya. 1. Filter Berdasarkan Kondisi Copy const arr = [1,2,3,4,5,6]; const even = arr.filter(n => n % 2 === 0); console.log(even); // [2,4,6] 2. Filter Unik Copy const arr = [1,2,3,2,4,5,3]; const unique = arr.filter((x,i)=>arr.indexOf(x)===i); console.log(unique); // [1,2,3,4,5] 3. Filter Berdasarkan Properti Objek Copy const users = [ {name:'Alice', age:25}, {name:'Bob', age:30}, {name:'Charlie', age:25} ]; const filtered = users.filter(u=>u.age===25); console.log(filtered); // [{name:'Alice', age:25}, {name:'Charlie', age:25}] 4. Filter + Transform Copy const arr = [1,2,3,4,5]; const result = arr.filter(n=>n%2===0).map(n=>n*2); console.log(result); // [4,8] 5. Filter Dinamis Copy const filterArray = (arr, crit) => arr.filter(n=>n>=crit); console.log(filterArray([1,2,3,4,5],3)); // [3,4,5] Kesimpulan Pada akhirnya, filter() di JavaScript fleksibel banget. Bisa untuk angka, objek, unik, bahkan dinamis. Snippet di atas siap dipakai di proyek mana pun. Gini deh, kadang hal kecil kayak filter ini bikin manipulasi data jauh lebih mudah.

Mengelola operasi asinkron di JavaScript bisa menjadi rumit, tapi dengan Promise dan async/await, kita bisa menulis kode yang lebih bersih dan mudah dipahami. Di artikel ini, kita akan membahas cara menggunakan keduanya untuk menangani operasi asinkron dengan contoh praktis. 1. Membuat State dengan Objek Sederhana kita mulai dengan membuat objek sederhana untuk menyimpan state: Copy let state = { text: 'text here' }; 2. Membuat Fungsi Asinkron dengan Promise Misalnya kita ingin mendapatkan nama depan dan nama belakang dari suatu data secara asinkron. kita bisa menggunakan fungsi yang mengembalikan Promise: