JScriptKatana

Panduan Lengkap Underscore.js: Mempermudah Manipulasi Data di JavaScript

Library Eksternal
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Pendahuluan

JavaScript adalah bahasa pemrograman yang sangat penting dalam pengembangan web, namun manipulasi array dan objek sering kali membuat kode menjadi rumit. Terutama pada proses seperti penyaringan (filtering) dan transformasi data, dibutuhkan cara penulisan yang lebih ringkas dan efisien. Di sinilah Underscore.js menjadi sangat berguna. Dengan memanfaatkan library JavaScript ini, manipulasi data yang kompleks bisa ditulis dengan cara yang lebih sederhana.

Keunggulan Underscore.js

  1. Meringkas kode
  • Proses yang biasanya panjang dalam JavaScript standar bisa ditulis hanya dalam beberapa baris dengan Underscore.js.
  1. Kaya akan fungsi siap pakai
  • Menyediakan banyak fitur untuk manipulasi array, objek, hingga kontrol fungsi.
  1. Ringan dan fleksibel
  • Anda bisa menggunakan hanya fungsi yang dibutuhkan sehingga dampaknya pada performa tetap minimal.

Apa yang Akan Dipelajari di Artikel Ini

  • Cara mengintegrasikan Underscore.js
  • Fungsi dasar dan contoh penggunaannya
  • Studi kasus yang bermanfaat dalam pengembangan nyata

2. Apa itu Underscore.js

Gambaran Umum Underscore.js

Underscore.js adalah library ringan yang memudahkan manipulasi data di JavaScript. Fokus utamanya adalah menyediakan fungsi-fungsi praktis untuk mengelola array dan objek, sehingga sering disebut juga sebagai toolkit pendukung JavaScript. Meskipun JavaScript standar sudah cukup kuat, penulisan kode bisa panjang dan sulit dibaca. Dengan Underscore.js, masalah tersebut dapat diatasi sehingga kode lebih sederhana dan mudah dikelola.

Fitur Utama

  1. Banyak utilitas bawaan
  • Menyediakan fungsi untuk manipulasi array, objek, dan kontrol fungsi.
  1. Kode lebih ringkas dan mudah dibaca
  • Dibanding JavaScript standar, baris kode lebih sedikit dan keterbacaan lebih tinggi.
  1. Tidak memiliki ketergantungan
  • Tidak bergantung pada library lain, sehingga lebih fleksibel untuk digunakan.
  1. Ringan dan cepat
  • Ukurannya kecil dan berdampak minim pada performa, cocok untuk aplikasi web modern.

Perbandingan Underscore.js dan Lodash

Salah satu library yang sering dibandingkan dengan Underscore.js adalah Lodash. Lodash dibangun dengan dasar Underscore.js dan memiliki fitur tambahan. Berikut perbedaannya:
FiturUnderscore.jsLodash
FungsionalitasBanyak fungsi utilitas dasarLebih banyak fitur tambahan
Dukungan modularisasiHanya sebagianMendukung modularisasi penuh
PerformaCepatLebih cepat dan dioptimalkan
Pemilihan antara keduanya tergantung kebutuhan proyek. Jika Anda membutuhkan library ringan dan sederhana, Underscore.js lebih cocok.

Bagaimana Underscore.js Membantu?

Underscore.js sangat bermanfaat dalam berbagai situasi berikut:
  1. Manipulasi data array
  • Operasi seperti filtering dan mapping dapat ditulis dengan ringkas.
  1. Pengelolaan objek
  • Mudah mendapatkan key atau value, serta menggabungkan properti objek.
  1. Kontrol eksekusi fungsi
  • Mendukung eksekusi sekali saja, eksekusi tertunda, dan kontrol lainnya.
  1. Pemanfaatan fungsi utilitas
  • Dapat digunakan untuk pengurutan data, randomisasi, bahkan sebagai template engine sederhana.

3. Cara Mengintegrasikan

Bagian ini menjelaskan langkah-langkah untuk mengintegrasikan Underscore.js ke dalam proyek Anda. Ada beberapa opsi: menggunakan CDN, instalasi via npm/yarn, atau mengunduh file langsung.

1. Menggunakan CDN

CDN (Content Delivery Network) memungkinkan Anda menggunakan library langsung dengan menambahkan link. Cukup tambahkan kode berikut pada bagian <head> atau akhir <body>:

Contoh: Menambahkan ke HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Integrasi Underscore.js</title>
  <!-- Link CDN Underscore.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head>
<body>
  <h1>Tes Underscore.js</h1>
  <script>
    // Contoh uji coba
    const data = [1, 2, 3, 4, 5];
    const evenNumbers = _.filter(data, function(num) {
      return num % 2 === 0;
    });
    console.log(evenNumbers); // [2, 4]
  </script>
</body>
</html>
Ketika dibuka di browser, konsol akan menampilkan angka genap.

2. Instalasi dengan npm atau yarn

Anda bisa menginstalnya untuk digunakan di proyek Node.js atau lingkungan lokal.

Instalasi dengan npm

npm install underscore

Instalasi dengan yarn

yarn add underscore

Contoh Import di JavaScript

import _ from 'underscore';

const data = [10, 20, 30, 40];
const result = _.map(data, (num) => num * 2);
console.log(result); // [20, 40, 60, 80]

3. Mengunduh File Secara Manual

  1. Kunjungi situs resmi (underscorejs.org).
  2. Unduh file JavaScript versi terbaru.
  3. Simpan file di folder proyek (misalnya js/).
  4. Tambahkan dengan tag <script> di HTML.
<script src="js/underscore-min.js"></script>

4. Menggunakan Module Bundler

Dengan Webpack atau Parcel, integrasi juga mudah.

Contoh Konfigurasi Webpack

  1. Instalasi dengan npm.
npm install underscore
  1. Import di file JavaScript.
import _ from 'underscore';
  1. Gunakan sesuai kebutuhan di bundle.

Troubleshooting

1. Pesan error “Uncaught ReferenceError: _ is not defined”
  • Periksa apakah Underscore.js sudah dimuat dengan benar. Cek link CDN atau path import.
2. Error setelah instalasi npm
  • Pastikan Node.js dan npm sudah diperbarui ke versi terbaru.

4. Cara Dasar Menggunakan

Bagian ini membahas fungsi dasar dari Underscore.js beserta contoh penggunaannya. Fungsi-fungsi ini sangat membantu untuk mempermudah manipulasi array dan objek.

1. Iterasi Array – _.each()

_.each() digunakan untuk melakukan iterasi pada array maupun objek.

Contoh Penggunaan

const numbers = [1, 2, 3, 4, 5];

// Menampilkan setiap elemen di konsol
_.each(numbers, function(num) {
  console.log(num);
});
Hasil:
1
2
3
4
5
Poin penting:
  • Bisa digunakan pada array maupun objek.
  • Callback menerima elemen, indeks, dan seluruh array.

2. Mapping Array – _.map()

_.map() menerapkan fungsi ke setiap elemen array dan menghasilkan array baru.

Contoh Penggunaan

const numbers = [1, 2, 3, 4, 5];

// Mengalikan setiap elemen dengan 2
const doubled = _.map(numbers, function(num) {
  return num * 2;
});

console.log(doubled);
Hasil:
[2, 4, 6, 8, 10]

3. Mencari Elemen Pertama yang Sesuai – _.find()

_.find() mengembalikan elemen pertama yang cocok dengan kondisi tertentu.

Contoh Penggunaan

const numbers = [1, 2, 3, 4, 5];

// Mencari elemen pertama yang >= 3
const result = _.find(numbers, function(num) {
  return num >= 3;
});

console.log(result);
Hasil:
3

4. Menyaring Semua Elemen yang Sesuai – _.filter()

_.filter() mengekstrak semua elemen yang cocok dengan kondisi.

Contoh Penggunaan

const numbers = [1, 2, 3, 4, 5];

// Menyaring hanya bilangan genap
const evens = _.filter(numbers, function(num) {
  return num % 2 === 0;
});

console.log(evens);
Hasil:
[2, 4]

5. Mengacak Elemen Array – _.shuffle()

_.shuffle() mengacak urutan elemen array.

Contoh Penggunaan

const numbers = [1, 2, 3, 4, 5];

// Mengacak urutan
const shuffled = _.shuffle(numbers);

console.log(shuffled);
Hasil (contoh):
[3, 5, 1, 4, 2]

6. Menghapus Duplikasi – _.uniq()

_.uniq() menghapus elemen yang duplikat dari array.

Contoh Penggunaan

const numbers = [1, 2, 2, 3, 4, 4, 5];

// Menghapus duplikasi
const uniqueNumbers = _.uniq(numbers);

console.log(uniqueNumbers);
Hasil:
[1, 2, 3, 4, 5]

Ringkasan

Sampai di sini, kita sudah melihat fungsi dasar Underscore.js:
  • _.each() untuk iterasi
  • _.map() untuk membuat array baru
  • _.find() dan _.filter() untuk pencarian data
  • _.shuffle() untuk randomisasi
  • _.uniq() untuk menghapus duplikasi

5. Penggunaan Lanjutan

Pada bagian ini kita membahas fungsi Underscore.js yang lebih canggih. Dengan memanfaatkannya, kita bisa melakukan analisis dan manipulasi data yang lebih kompleks.

1. Mengurutkan Array – _.sortBy()

_.sortBy() mengurutkan elemen array berdasarkan kunci atau kondisi tertentu.

Contoh

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];

// Mengurutkan berdasarkan usia
const sortedUsers = _.sortBy(users, 'age');

console.log(sortedUsers);
Hasil:
[
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 25 },
  { name: 'Charlie', age: 30 }
]

2. Mengelompokkan Array – _.groupBy()

_.groupBy() mengelompokkan elemen berdasarkan kunci atau kondisi.

Contoh

const numbers = [1.1, 2.3, 2.4, 3.5, 4.7];

// Kelompok berdasarkan angka bulatnya
const grouped = _.groupBy(numbers, function(num) {
  return Math.floor(num);
});

console.log(grouped);
Hasil:
{
  1: [1.1],
  2: [2.3, 2.4],
  3: [3.5],
  4: [4.7]
}

3. Melakukan Agregasi Data – _.countBy()

_.countBy() menghitung jumlah elemen berdasarkan kondisi tertentu.

Contoh

const words = ['apple', 'banana', 'apricot', 'blueberry'];

// Hitung berdasarkan huruf pertama
const counts = _.countBy(words, function(word) {
  return word[0];
});

console.log(counts);
Hasil:
{
  a: 2,
  b: 2
}

Ringkasan

Fungsi lanjutan yang sudah kita lihat:
  • _.sortBy() untuk mengurutkan array
  • _.groupBy() dan _.countBy() untuk mengelompokkan dan menghitung data

6. Manipulasi Objek

Underscore.js juga menyediakan fungsi praktis untuk bekerja dengan objek.

1. Mendapatkan Key dan Value

Mendapatkan Key – _.keys()

const person = { name: 'Alice', age: 25, city: 'Tokyo' };

const keys = _.keys(person);
console.log(keys);
Hasil:
['name', 'age', 'city']

Mendapatkan Value – _.values()

const values = _.values(person);
console.log(values);
Hasil:
['Alice', 25, 'Tokyo']

2. Membuat Salinan Objek – _.clone()

_.clone() membuat salinan dangkal dari sebuah objek.
const original = { name: 'Alice', age: 25 };
const clone = _.clone(original);

clone.age = 30;
console.log(original.age); // 25
console.log(clone.age);    // 30

Ringkasan

Dengan fungsi objek:
  • _.keys() dan _.values() untuk mendapatkan properti
  • _.clone() untuk membuat salinan objek

7. Manipulasi Fungsi

Bagian ini membahas cara mengontrol eksekusi fungsi dengan Underscore.js. Fitur-fitur ini bermanfaat untuk optimasi performa.

1. Binding Fungsi – _.bind()

_.bind() mengikat fungsi agar this selalu merujuk ke objek tertentu.

Contoh

const person = {
  name: 'Alice',
  greet: function(greeting) {
    return `${greeting}, nama saya ${this.name}`;
  }
};

const boundGreet = _.bind(person.greet, person);
console.log(boundGreet('Halo')); // Halo, nama saya Alice

2. Eksekusi Tertunda – _.delay()

_.delay() menunda eksekusi fungsi dalam waktu tertentu.

Contoh

_.delay(function(message) {
  console.log(message);
}, 2000, 'Muncul setelah 2 detik');
Hasil: (Setelah 2 detik)
Muncul setelah 2 detik

3. Eksekusi Satu Kali – _.once()

_.once() memastikan fungsi hanya dijalankan sekali.

Contoh

const initialize = _.once(function() {
  console.log('Inisialisasi selesai');
});

initialize(); // Dieksekusi
initialize(); // Diabaikan

4. Memoisasi Fungsi – _.memoize()

_.memoize() menyimpan hasil eksekusi agar pemanggilan ulang dengan argumen yang sama lebih cepat.

Contoh

const factorial = _.memoize(function(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
});

console.log(factorial(5)); // Hitung
console.log(factorial(5)); // Ambil dari cache

5. Kontrol Eksekusi – _.throttle()

_.throttle() membatasi frekuensi eksekusi fungsi.

Contoh

const log = _.throttle(function() {
  console.log('Diproses...');
}, 2000);

// Simulasi klik cepat
setInterval(log, 500); // Hanya berjalan setiap 2 detik

Ringkasan

Fungsi kontrol yang sudah dipelajari:
  • _.bind() untuk mengikat this
  • _.delay() untuk eksekusi tertunda
  • _.once() untuk eksekusi sekali saja
  • _.memoize() untuk cache hasil
  • _.throttle() untuk membatasi eksekusi

8. Fungsi Utilitas

Underscore.js juga memiliki fungsi utilitas yang berguna dalam banyak kasus.

1. Membuat Angka Acak – _.random()

_.random() menghasilkan angka acak dalam rentang tertentu.

Contoh

console.log(_.random(1, 10)); // Bilangan bulat
console.log(_.random(1, 10, true)); // Termasuk pecahan

2. Mengecek Apakah Kosong – _.isEmpty()

_.isEmpty() memeriksa apakah array, objek, atau string kosong.

Contoh

console.log(_.isEmpty([]));       // true
console.log(_.isEmpty({}));       // true
console.log(_.isEmpty(''));       // true
console.log(_.isEmpty([1,2,3]));  // false

3. Membuat Template – _.template()

_.template() membuat template string.

Contoh

const template = _.template('Halo, <%= name %>!');
console.log(template({ name: 'Alice' }));
Hasil:
Halo, Alice!

Ringkasan

Fungsi utilitas yang dipelajari:
  • _.random() untuk angka acak
  • _.isEmpty() untuk cek kosong
  • _.template() untuk membuat template sederhana

9. Kesimpulan

Artikel ini telah membahas Underscore.js dari dasar hingga penggunaan lanjutan. Library ini mempermudah manipulasi data di JavaScript dan membantu menulis kode yang lebih efisien.

Ringkasan Artikel

  1. Dasar penggunaan – mempelajari fungsi array dan objek.
  2. Penggunaan lanjutan – pengelompokan, pengurutan, dan agregasi data.
  3. Manipulasi fungsi – optimasi eksekusi dengan throttle, memoize, dan lainnya.
  4. Fungsi utilitas – pembuatan angka acak, validasi kosong, dan template sederhana.

Penutup

Underscore.js adalah alat yang kuat untuk membuat pengembangan JavaScript lebih efisien. Gunakan artikel ini sebagai panduan, lalu praktikkan dalam proyek Anda agar keterampilan semakin meningkat.

Pertanyaan yang Sering Diajukan (FAQ)

Q1: Apakah Underscore.js gratis digunakan?

A: Ya, Underscore.js dirilis di bawah lisensi MIT dan gratis digunakan, termasuk untuk proyek komersial.

Q2: Apa perbedaan Underscore.js dengan Lodash?

A: Underscore.js lebih sederhana dan ringan, sementara Lodash adalah versi yang dikembangkan lebih lanjut dengan fitur tambahan dan performa lebih tinggi. Pemilihan tergantung kebutuhan proyek.

Q3: Apakah Underscore.js masih relevan dengan JavaScript modern (ES6+)?

A: Banyak fitur ES6+ bisa menggantikan fungsi Underscore.js, tetapi library ini tetap berguna untuk kompatibilitas lintas browser dan menulis kode lebih ringkas.

Q4: Cocokkah Underscore.js untuk proyek besar?

A: Bisa, tetapi untuk proyek besar biasanya Lodash lebih direkomendasikan karena dukungan modularisasi dan optimasi performa. Underscore.js lebih ideal untuk proyek kecil hingga menengah.

Q5: Bagaimana cara instalasi Underscore.js?

A: Ada beberapa cara:
  1. Menambahkan CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
  1. Instalasi via npm:
npm install underscore
  1. Instalasi via yarn:
yarn add underscore

Q6: Di mana saya bisa melihat dokumentasi resmi?

A: Dokumentasi resmi tersedia di situs Underscore.js.

Q7: Apakah ada alternatif untuk kontrol fungsi selain Underscore.js?

A: Ya, di JavaScript modern Anda bisa menggunakan setTimeout(), setInterval(), Promise, atau async/await. Namun, _.throttle() dan _.debounce() membuat penulisan lebih ringkas.

Q8: Apa yang perlu diperhatikan saat menggunakan Underscore.js?

A:
  1. Hindari ketergantungan berlebihan karena ES6 sudah menyediakan banyak fitur serupa.
  2. Gunakan versi terbaru untuk menghindari celah keamanan.
  3. Pertimbangkan migrasi ke Lodash jika proyek berkembang besar.

Q9: Apakah _.template() cocok sebagai template engine utama?

A: _.template() praktis untuk kebutuhan sederhana. Namun, untuk kebutuhan lanjutan, sebaiknya gunakan Handlebars.js atau EJS.
広告