JavaScript Katana

Tutorial Underscore.js: Sederhanakan Operasi Array & Objek JavaScript

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

1. Pendahuluan

JavaScript adalah bahasa pemrograman penting untuk pengembangan web, tetapi bekerja dengan array dan objek dapat dengan mudah membuat kode menjadi kompleks. Khususnya, tugas seperti penyaringan data dan transformasi sering memerlukan sintaks yang lebih bersih dan efisien.

Itulah mengapa perpustakaan JavaScript Underscore.js hadir. Dengan menggunakan perpustakaan ini, bahkan operasi data yang kompleks dapat ditulis dengan cara yang sederhana dan mudah dibaca.

Mengapa Underscore.js Menonjol

  1. Kode yang lebih ringkas
  • Operasi yang sering menjadi bertele‑tele dalam JavaScript biasa dapat diekspresikan dalam hanya beberapa baris dengan Underscore.js.
  1. Serangkaian fungsi yang kaya dan praktis
  • Ia menyediakan banyak fitur, termasuk operasi array, penanganan objek, dan kontrol fungsi.
  1. Ringan dan fleksibel
  • Karena Anda dapat menggunakan hanya apa yang Anda butuhkan, dampak kinerja dapat dijaga seminimal mungkin.

Apa yang Akan Anda Pelajari dalam Artikel Ini

  • Cara menyiapkan Underscore.js
  • Fungsi inti dan contoh praktis
  • Kasus penggunaan dunia nyata yang membantu dalam pengembangan

2. Apa Itu Underscore.js?

Gambaran Umum Underscore.js

Underscore.js adalah perpustakaan ringan yang memudahkan manipulasi data dalam JavaScript. Ia menawarkan beragam fungsi praktis yang dirancang terutama untuk menyederhanakan operasi pada array dan objek, dan sering digambarkan sebagai toolkit utilitas JavaScript.

Fitur standar JavaScript memang kuat, tetapi kode dapat menjadi panjang dan keterbacaan menurun. Menggunakan Underscore.js membantu mengatasi masalah ini, memungkinkan Anda menulis kode yang lebih sederhana dan lebih mudah dipelihara.

Fitur Utama

  1. Beragam fungsi utilitas
  • Ia menyediakan banyak fungsi, termasuk operasi array, operasi objek, dan kontrol fungsi.
  1. Kode yang sederhana dan mudah dibaca
  • Dibandingkan dengan pola JavaScript tradisional, ia mengurangi boilerplate dan meningkatkan keterbacaan.
  1. Tanpa ketergantungan
  • Karena tidak bergantung pada perpustakaan lain, Anda dapat menggunakannya secara fleksibel di banyak lingkungan.
  1. Ringan dan cepat
  • Ukurannya yang kecil dan overhead yang rendah menjadikannya pilihan yang baik bahkan untuk aplikasi web modern.

Underscore.js vs. Lodash

Salah satu perpustakaan yang sering dibandingkan adalah Lodash. Lodash dibangun di atas Underscore.js dan memperluas fungsionalitasnya, dengan perbedaan seperti berikut.

AspectUnderscore.jsLodash
FunctionalityIncludes many core utility functionsOffers an even broader feature set
Modular usagePartially supportedFully modularized
PerformanceFastFast and further optimized

Pilihan Anda tergantung pada kebutuhan proyek, tetapi jika Anda menginginkan perpustakaan yang sederhana dan ringan, Underscore.js adalah pilihan yang kuat.

Bagaimana Underscore.js Dapat Membantu?

Underscore.js sangat berguna dalam situasi-situasi berikut.

  1. Manipulasi data array
  • Ia memungkinkan kode yang ringkas untuk operasi seperti penyaringan dan pemetaan.
  1. Manipulasi objek
  • Anda dapat dengan mudah mengambil kunci/nilai dan menggabungkan elemen, serta tugas lainnya.
  1. Kontrol fungsi
  • Ia memudahkan penerapan kontrol seperti “jalankan hanya sekali” atau eksekusi tertunda.
  1. Memanfaatkan helper utilitas
  • Anda juga dapat menggunakannya untuk pengurutan, randomisasi, bahkan sebagai mesin templating sederhana.

3. Instalasi

Pada bagian ini, kami akan membahas langkah‑langkah konkret untuk menambahkan Underscore.js ke proyek Anda. Anda akan mempelajari pendekatan CDN serta cara menginstalnya secara lokal dengan mengunduh berkas‑berkasnya.

1. Menggunakan CDN

CDN (Content Delivery Network) adalah cara yang praktis untuk menggunakan sebuah perpustakaan dengan cukup menautkan ke berkas yang di‑host di internet. Anda dapat menggunakan Underscore.js dengan menambahkan kode berikut di dalam tag <head> atau di akhir tag <body> pada berkas HTML Anda.

Contoh: Menambahkan ke Berkas HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Underscore.jsの導入</title>
  <!-- Underscore.jsのCDNリンク -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head>
<body>
  <h1>Underscore.jsのテスト</h1>
  <script>
    // 動作確認コード
    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>

Saat Anda membuka file ini di browser, Anda dapat memastikan bahwa hanya angka genap yang ditampilkan di konsol Developer Tools.

2. Menginstal dengan npm atau yarn

Dengan menggunakan npm atau yarn, Anda juga dapat menggunakan Underscore.js di lingkungan lokal atau dalam proyek Node.js.

Instal dengan npm

npm install underscore

Instal dengan yarn

yarn add underscore

Contoh Impor dalam File 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 dan Menggunakannya Secara Lokal

  1. Buka situs resmi ( underscorejs.org ).
  2. Unduh file JavaScript terbaru dari bagian “Download”.
  3. Letakkan file yang diunduh di folder yang sesuai dalam proyek Anda (mis., js/ ).
  4. Sambungkan file tersebut dalam file HTML Anda menggunakan tag script.
    <script src="js/underscore-min.js"></script>

4. Saat Menggunakan Module Bundler

Jika Anda menggunakan module bundler seperti Webpack atau Parcel, Anda juga dapat mengintegrasikan Underscore.js dengan mudah.

Contoh: Pengaturan Webpack

  1. Instal dengan npm.
    npm install underscore
  1. Impor dalam file JavaScript Anda.
    import _ from 'underscore';
  1. Bundel sesuai kebutuhan dan gunakan dalam proyek Anda.

Pemecahan Masalah

1. Jika Anda melihat “Uncaught ReferenceError: _ is not defined”

  • Underscore.js mungkin tidak dimuat dengan benar. Periksa kembali tautan CDN Anda atau jalur impor Anda.

2. Jika terjadi error setelah menginstal dengan npm

  • Perbarui Node.js dan npm ke versi terbaru.

4. Penggunaan Dasar

Pada bagian ini, kami akan memperkenalkan beberapa fungsi inti Underscore.js beserta contoh praktis. Fungsi-fungsi ini sangat berguna untuk bekerja secara efisien dengan array dan objek.

1. Mengiterasi Array – _.each()

_.each() adalah fungsi yang digunakan untuk mengiterasi array atau objek.

Contoh

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

// Output each element to the console
_.each(numbers, function(num) {
  console.log(num);
});

Output:

1  
2  
3  
4  
5

Poin Penting:

  • Ia berfungsi tidak hanya dengan array, tetapi juga dengan objek.
  • Callback menerima elemen, indeksnya, dan seluruh koleksi.

2. Memetakan Array – _.map()

_.map() menerapkan fungsi pada setiap elemen array dan mengembalikan array baru.

Contoh

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

// Double each element
const doubled = _.map(numbers, function(num) {
  return num * 2;
});

console.log(doubled);

Output:

[2, 4, 6, 8, 10]

3. Menemukan Elemen Pertama yang Cocok – _.find()

_.find() mengembalikan elemen pertama yang memenuhi kondisi tertentu.

Contoh

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

// Find the first element greater than or equal to 3
const result = _.find(numbers, function(num) {
  return num >= 3;
});

console.log(result);

Output:

3

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

_.filter() mengekstrak semua elemen yang memenuhi kondisi dan mengembalikannya sebagai array baru.

Contoh

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

// Extract only even numbers
const evens = _.filter(numbers, function(num) {
  return num % 2 === 0;
});

console.log(evens);

Output:

[2, 4]

5. Mengacak Elemen Array – _.shuffle()

_.shuffle() secara acak mengatur ulang elemen‑elemen dalam sebuah array.

Contoh

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

// Randomly shuffle the array
const shuffled = _.shuffle(numbers);

console.log(shuffled);

Output: (contoh)

[3, 5, 1, 4, 2]

6. Menghapus Elemen Duplikat – _.uniq()

_.uniq() menghapus nilai duplikat dari sebuah array.

Contoh

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

// Remove duplicate elements
const uniqueNumbers = _.uniq(numbers);

console.log(uniqueNumbers);

Output:

[1, 2, 3, 4, 5]

Ringkasan

Sejauh ini, kami telah membahas fungsi dasar Underscore.js beserta contoh praktis.

  • _.each() untuk mengiterasi elemen
  • _.map() untuk membuat array baru
  • _.find() dan _.filter() untuk mengekstrak elemen yang cocok
  • _.shuffle() untuk mengacak elemen
  • _.uniq() untuk menghapus duplikat

5. Penggunaan Lanjutan

Pada bagian ini, kami akan mengeksplorasi fungsi Underscore.js yang lebih lanjutan serta contoh penggunaan praktis. Fitur‑fitur ini memungkinkan manipulasi dan analisis data yang lebih canggih.

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 }
];

// Sort by age
const sortedUsers = _.sortBy(users, 'age');

console.log(sortedUsers);

Output:

[
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 25 },
  { name: 'Charlie', age: 30 }
]

2. Mengelompokkan Array – _.groupBy()

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

Contoh

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

// Group by integer part
const grouped = _.groupBy(numbers, function(num) {
  return Math.floor(num);
});

console.log(grouped);

Output:

{
  1: [1.1],
  2: [2.3, 2.4],
  3: [3.5],
  4: [4.7]
}

3. Mengagregasi Data – _.countBy()

_.countBy() adalah fungsi yang nyaman untuk mengagregasi data.

Contoh

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

// Count by first letter
const counts = _.countBy(words, function(word) {
  return word[0];
});

console.log(counts);

Output:

{
  a: 2,
  b: 2
}

Ringkasan

Pada bagian ini, kami membahas penggunaan Underscore.js yang lebih lanjutan.

  • _.sortBy() untuk mengurutkan array
  • _.groupBy() dan _.countBy() untuk mengkategorikan dan mengagregasi data

6. Operasi Objek

Pada bagian ini, kami akan memperkenalkan fungsi‑fungsi berguna untuk bekerja dengan objek di Underscore.js. Fungsi‑fungsi ini membantu menangani properti dan nilai objek secara efisien.

1. Mengambil Kunci dan Nilai Objek

Ambil Kunci – _.keys()

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

const keys = _.keys(person);
console.log(keys);

Output:

['name', 'age', 'city']

Ambil Nilai – _.values()

const values = _.values(person);
console.log(values);

Output:

['Alice', 25, 'Tokyo']

2. Mengkloning Objek – _.clone()

_.clone() membuat salinan dangkal dari sebuah objek.

const original = { name: 'Alice', age: 25 };
const clone = _.clone(original);

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

Ringkasan

Pada bagian ini, kami menjelaskan cara bekerja dengan objek menggunakan Underscore.js.

7. Operasi Fungsi

Pada bagian ini, kami akan menjelaskan cara efektif bekerja dengan fungsi menggunakan Underscore.js. Fitur‑fitur ini berguna untuk mengontrol eksekusi dan meningkatkan kinerja.

1. Mengikat Fungsi – _.bind()

_.bind() mengikat objek tertentu ke this saat fungsi dijalankan.

Contoh

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

const boundGreet = _.bind(person.greet, person);

console.log(boundGreet('Hello')); // Hello, my name is Alice

2. Eksekusi Tertunda – _.delay()

_.delay() menunda eksekusi sebuah fungsi selama waktu yang ditentukan.

Contoh

_.delay(function(message) {
  console.log(message);
}, 2000, 'Displayed after 2 seconds');

Output: (setelah 2 detik)

Displayed after 2 seconds

3. Eksekusi Hanya Sekali – _.once()

_.once() memastikan bahwa sebuah fungsi hanya dieksekusi satu kali. Panggilan selanjutnya diabaikan.

Contoh

const initialize = _.once(function() {
  console.log('Initialization complete');
});

initialize(); // Executed
initialize(); // Ignored

4. Memoisasi – _.memoize()

_.memoize() menyimpan hasil sebuah fungsi dan melewatkan perhitungan ulang ketika dipanggil lagi dengan argumen yang sama.

Contoh

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

console.log(factorial(5)); // Calculated
console.log(factorial(5)); // Retrieved from cache

5. Membatasi Eksekusi Fungsi – _.throttle()

_.throttle() membatasi seberapa sering sebuah fungsi dapat dieksekusi.

Contoh

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

// Simulate continuous events
setInterval(log, 500); // Executes only once every 2 seconds

Ringkasan

Pada bagian ini, kami mengeksplorasi utilitas terkait fungsi di Underscore.js.

  • _.bind() untuk memperbaiki konteks this
  • _.delay() untuk eksekusi tertunda
  • _.once() untuk eksekusi satu kali
  • _.memoize() untuk menyimpan hasil
  • _.throttle() untuk mengoptimalkan frekuensi eksekusi

8. Fungsi Utilitas

Pada bagian ini, kami akan memperkenalkan fungsi utilitas yang praktis yang disediakan oleh Underscore.js. Fungsi-fungsi ini berguna dalam banyak situasi, termasuk penanganan data, pembuatan nilai acak, dan templating.

1. Menghasilkan Angka Acak – _.random()

_.random() menghasilkan bilangan bulat atau bilangan floating-point acak dalam rentang yang ditentukan.

Contoh

console.log(_.random(1, 10)); // Integer
console.log(_.random(1, 10, true)); // Floating-point

2. Memeriksa Nilai Kosong – _.isEmpty()

_.isEmpty() memeriksa apakah sebuah 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() digunakan untuk membuat template string.

Contoh

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

Output:

Hello, Alice!

Ringkasan

Pada bagian ini, kami membahas fungsi utilitas di Underscore.js.

  • _.random() untuk menghasilkan angka acak
  • _.isEmpty() untuk memeriksa keadaan data
  • _.template() untuk templating sederhana

9. Kesimpulan

Dalam artikel ini, kami membahas Underscore.js mulai dari penggunaan dasar hingga teknik yang lebih maju. Perpustakaan ini sangat berguna untuk menyederhanakan manipulasi data dalam JavaScript dan menulis kode yang efisien serta mudah dipelihara.

Poin Penting

  1. Penggunaan dasar – Mempelajari fungsi inti untuk manipulasi array dan objek.
  2. Penggunaan lanjutan – Mengeksplorasi pengelompokan, pengurutan, dan agregasi.
  3. Utilitas fungsi – Membahas kontrol eksekusi dan memoisasi.
  4. Pembantu utilitas – Memperkenalkan pembuatan nilai acak dan templating.

Pemikiran Akhir

Underscore.js adalah alat yang kuat yang membuat pengembangan JavaScript lebih efisien dan mudah dipahami. Gunakan artikel ini sebagai referensi dan coba terapkan dalam proyek Anda sendiri. Praktik langsung yang berkelanjutan akan membantu Anda meningkatkan keterampilan lebih jauh.

Pertanyaan yang Sering Diajukan (FAQ)

Q1: Apakah Underscore.js gratis untuk digunakan?

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

Q2: Apa perbedaan antara Underscore.js dan Lodash?

A: Underscore.js adalah pustaka utilitas yang sederhana dan ringan. Lodash dibangun di atas Underscore.js dengan fitur tambahan, optimasi kinerja, dan modularisasi yang lebih kuat. Pilihlah berdasarkan kebutuhan proyek Anda.

Q3: Apakah Underscore.js tidak diperlukan dengan JavaScript modern (ES6+)?

A: ES6+ menyediakan banyak fitur native untuk operasi array dan objek, tetapi Underscore.js masih berguna untuk kompatibilitas lintas‑browser dan sintaks yang ringkas, terutama pada proyek legacy.

Q4: Jenis proyek apa yang cocok untuk Underscore.js?

A: Ia bekerja dengan baik untuk proyek kecil hingga menengah serta aplikasi di mana kesederhanaan kode penting. Sangat membantu ketika Anda membutuhkan utilitas ringan tanpa ketergantungan berat.

Q5: Bagaimana cara menginstal Underscore.js?

A: Anda dapat menginstalnya menggunakan salah satu metode berikut.

  1. Tambahkan via CDN:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
  1. Instal dengan npm:
    npm install underscore
  1. Instal dengan yarn:
    yarn add underscore

Pilih metode yang paling sesuai dengan lingkungan Anda.

Q6: Di mana saya dapat menemukan dokumentasi resmi?

A: Anda dapat menemukannya di situs resmi:
Underscore.js Official Website

Q7: Apakah Underscore.js dapat digunakan dalam proyek berskala besar?

A: Ya, dapat. Namun, untuk proyek besar, Lodash sering direkomendasikan karena struktur modularnya dan optimasi tambahan. Underscore.js tetap ideal untuk kasus penggunaan yang ringan.

Q8: Apakah ada alternatif untuk kontrol eksekusi fungsi?

A: Ya. JavaScript modern menawarkan alternatif seperti setTimeout(), setInterval(), Promise, dan async/await. Namun, fungsi Underscore.js seperti _.throttle() dan _.debounce() memungkinkan implementasi yang lebih bersih dan ringkas.

Q9: Apakah ada peringatan saat menggunakan Underscore.js?

A:

  1. Hindari ketergantungan yang tidak perlu ketika fitur native JavaScript sudah mencukupi.
  2. Jaga versi tetap terbaru untuk meminimalkan risiko keamanan.
  3. Pertimbangkan migrasi ke Lodash tergantung pada skala proyek.

Q10: Apakah Underscore.js direkomendasikan sebagai mesin templat?

A: _.template() nyaman untuk kasus penggunaan sederhana, tetapi untuk kebutuhan templating yang lebih maju, disarankan menggunakan pustaka khusus seperti Handlebars.js atau EJS.

広告