Apa itu Underscore JS? Manfaatnya untuk Melengkapi jQuery

Last Updated on May 11, 2022 by

Underscore JS adalah library JavaScript yang menyediakan berbagai macam pembantu pemrograman fungsional yang berguna tanpa memperluas objek bawaan apa pun.

Underscore menyediakan lebih dari 100 fungsi yang mendukung kedua pembantu fungsional favorit Anda sehari-hari seperti peta, filter, invoke, serta hal-hal yang lebih khusus seperti function binding, pembuatan template javascript, pembuatan indeks cepat, pengujian kesetaraan mendalam dan masih banyak lagi lainnya.

Test Suite lengkap disertakan untuk Anda teliti. Anda juga dapat membaca kode sumber beranotasi. Ada juga versi modular dengan referensi impor yang dapat diklik. Anda dapat memilih antara impor monolitik dan modular. Ada ringkasan singkat dari opsi di bawah ini, serta diskusi yang lebih komprehensif di artikel.

Underscore JS: Sebuah Penjelasan

Underscore.JS adalah library berbasis Javascript populer yang menyediakan 100+ fungsi untuk memfasilitasi pengembangan web serta berbagai fungsi yang sangat membantu para developer. Underscore.JS dapat digunakan langsung di dalam browser dan juga dengan Node.js.

Bekerja dengan objek menggunakan JavaScript bisa sangat menantang, khususnya jika Anda memiliki banyak manipulasi yang harus dilakukan dengan objek tersebut. Underscore mempunyai banyak fitur yang memudahkan pekerjaan dengan objek.

Underscore.JS adalah proyek open source dan Anda dapat dengan mudah berkontribusi ke perpustakaan dan menambahkan fitur dalam bentuk plugin dan membuatnya tersedia di GitHub dan di Node.js.

Ada beberapa fitur yang tersedia dalam Underscore.JS.

• Collections

Underscore.JS menyediakan berbagai fungsi untuk koleksi (collections) seperti map, pengurangan yang digunakan untuk menerapkan operasi pada setiap item koleksi. Fitur ini menyediakan metode seperti groupBy, countBy, max, min yang memproses koleksi dan memudahkan banyak tugas.

• Array

Underscore.JS menyediakan berbagai fungsi untuk array seperti iterasi dan proses array seperti first, initial, lastIndexOf, intersection, difference, dan lain sebagainya.

• Function

Underscore.JS menyediakan fungsi seperti bind, delay, before, after dan masih banyak lagi.

• Object

Underscore.JS menyediakan fungsi untuk memanipulasi objek dan membandingkan objek. Misalnya, kunci, nilai, perluasan, perluasanOwn, isEqual, isEmpty, dan masih banyak lagi lainnya.

• Utilities

Underscore.JS menyediakan berbagai metode utilitas seperti noConflict, random, iteratee, escape, dan berbagai metode utilitas lainnya.

• Chaining

Underscore.JS menyediakan metode chaining atau rantai juga seperti rantai dan nilai.

Underscore JS NPM dan Cara Instal Underscore

Underscore JS npm menerima total 7.869.102 download dalam seminggu. Dengan demikian, kami mencetak tingkat popularitas yang di mana Underscore bisa digunakan untuk menjadi proyek ekosistem Utama.

Berdasarkan statistik proyek dari repositori GitHub untuk Underscore JS npm. Kami juga telah mendapati bahwa Underscore telah dibintangi 26.050 kali dan 24.819 proyek lain di ekosistem pengembangan bergantung pada software ini.

Unduhan dihitung sebagai rata-rata bergerak untuk jangka waktu 12 bulan terakhir, tidak termasuk akhir pekan dan titik data yang diketahui hilang. Anda bisa mencoba download Underscore JS npm di sini: https://www.npmjs.com/package/underscore.

Anda juga bisa menggunakan dua cara lainnya untuk menginstal Underscore.JS.

1. Cara Pertama: Menggunakan File Underscore.JS di Browser

Dalam metode ini, kita akan membutuhkan file Underscore.JS dari situs resminya dan akan menggunakannya langsung di browser. Ikutilah langkah-langkah di bawah ini:

• Langkah 1: Pertama-tama, Anda bisa buka situs resmi Underscore.JS https://underscorejs.org/.

Perhatikan bahwa ada opsi unduhan yang tersedia yang memberi Anda file underscore-min.js UMD (Production) terbaru yang tersedia. Klik kanan pada tautan dan pilih simpan sebagai. Perhatikan bahwa file tersedia dengan dan tanpa minifikasi.

• Langkah 2: Selanjutnya, sertakan underscore-min.js di dalam tag skrip dan mulai bekerja dengan Underscore.JS. Untuk itu, Anda dapat menggunakan kode yang diberikan di bawah ini.

<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>

Berikut ini adalah contoh kode yang bekerja untuk hasil yang lebih bisa dipahami:

<html>
   <head>
      <title>Underscore.JS - Working Example</title>
      <script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
      <style>
         div {
            border: solid 1px #ccc;
            padding:10px;
            font-family: "Segoe UI",Arial,sans-serif;
            width: 50%;
         }
      </style>
   </head>
   <body>
      <div style = "font-size:25px" id = "list">
      </div>
      <script type = "text/JavaScript">
         var numbers = [1, 2, 3, 4];
         var listOfNumbers = '';
         _.each(numbers, function(x) { listOfNumbers += x + ' ' });
         document.getElementById("list").innerHTML = listOfNumbers;
      </script>
   </body>
</html>

Output:
1 2 3 4

1. Cara Kedua: Menggunakan Node.js

Jika Anda memilih metode ini, pastikan Anda telah menginstal Node.js dan npm di sistem Anda. Anda dapat menggunakan perintah berikut untuk menginstal Underscore.JS.

npm install underscore

Anda bisa mengobservasi output di bawah ini saat Underscore.JS berhasil diinstal:

+ underscore@1.10.2
added 1 package from 1 contributor and audited 1 package in 6.331s
found 0 vulnerabilities

Sekarang, saat mencoba jika Underscore.JS bekerja dengan baik dengan Node.js, buatlah sebiah file dengan tester.js dan tambahkan kode di bawah ini ke dalamnya:

var _ = require('underscore');
var numbers = [1, 2, 3, 4];
var listOfNumbers = '';
_.each(numbers, function(x) { listOfNumbers += x + ' ' });
console.log(listOfNumbers);

Simpanlah program di atas di dalam tester.js dengan perintah di bawah ini yang digunakan untuk mengkompilasi dan mengeksekusi program.

\>node tester.js

Output:

Contoh Penerapan Underscore.JS

Contoh kode berikut ini didasarkan pada kode pengujian unit underscore.js. Sekarang kita akan melihat penggunaan sebenarnya dari underscore.js dengan contoh penerapan kode Underscore.js.

1.	<script type="text/javascript">    
2.	    var array = [1, 2, 3, 1, 2, 3];    
3.	    console.log('First Function');    
4.	    console.log('_.first(' + array + ', 2): ' + _.first(array, 2));    
5.	    
6.	    var kucing = [    
7.	      {    
8.	        kucing: 'Mpus',    
9.	        Kelucuan: 8    
10.	    },     
11.	      {    
12.	        kucing: 'Sister',    
13.	        kelucuan: 10    
14.	    },    
15.	      {    
16.	        kucing: 'Holi',    
17.	        kelucuan: 10    
18.	    }];    
19.	    
20.	    console.log('Unique Function');    
21.	    varexpectedKucing = _.uniq(kucing, true, 'kelucuan');    
22.	    console.log('Actual: ' + JSON.stringify(kucing));    
23.	    console.log('Result: ' + JSON.stringify(expectedKucing));    
24.	    
25.	    // elemen dikembalikan mulai dgn index yg diberikan    
26.	    console.log('Rest Function');    
27.	    var numbers1 = [1, 2, 3, 4];    
28.	    var after = _.rest(numbers1, 2);    
29.	    console.log('_.rest(' + numbers2 + ', 2): ' + after);    
30.	    
31.	    // mengembalikan semuanya kecuali n elemen terakhir
32.	    var numbers2 = [1, 2, 3, 4];    
33.	    var after = _.initial(numbers2, 2);    
34.	    console.log('Initial Function');    
35.	    console.log('_.initial(' + numbers2 + ', 2): ' + after);    
36.	    
37.	    // ambil n elemen terakhir
38.	    var numbers3 = [1, 2, 3, 4];    
39.	    var after = _.last(numbers3, 2);    
40.	    console.log('Last Function');    
41.	    console.log('_.last(' + numbers3 + ', 2): ' + after);    
42.	    
43.	    // range function    
44.	    console.log('Range Function');    
45.	    console.log('_.range(3, 10, 3): ' + _.range(3, 10, 3));    
46.	    console.log('_.range(12, 7, -2): ' + _.range(12, 7, -2));    
47.	    
48.	    // index terakhir elemen  
49.	    console.log('LastIndexOf Function');    
50.	    console.log('_.lastIndexOf([-1, 1, 2], 1): ' + _.lastIndexOf([-1, 1, 2], 1));    
51.	    
52.	    // index dari elemen   
53.	    console.log('IndexOf Function');    
54.	    console.log('_.indexOf([1, 1, 2], 1): ' + _.indexOf([1, 1, 2], 1));    
55.	    
56.	    // perbedaan antara dua array   
57.	    console.log('Difference Function');    
58.	    var result = _.difference([1, 2, 3], [2, 30, 40]);    
59.	    console.log(' _.difference([1, 2, 3], [2, 30, 40]): ' + result);    
60.	    
61.	    result = _.difference([1, 2, 3, 4], [2, 30, 40], [1, 11, 111]);    
62.	    console.log(' _.difference([1, 2, 3, 4], [2, 30, 40], [1, 11, 111]): ' + result);    
63.	    
64.	    // gabungan dua array    
65.	    console.log('Union Function');    
66.	    var result = _.union([1, 2, 3], [2, 30, 1], [1, 40]);    
67.	    console.log(' _.union([1, 2, 3], [2, 30, 1], [1, 40]): ' + result);    
68.	    
69.	    result = _.union([1, 2, 3], [2, 30, 1], [1, 40, [1]]);    
70.	    console.log(' _.union([1, 2, 3], [2, 30, 1], [1, 40, [1]]): ' + result);    
71.	    
72.	    // intersection dari dua array   
73.	    console.log('Intersection Function');    
74.	    var result = _.intersection([2, 4, 3, 1], [1, 2, 3]);    
75.	    console.log(' _.intersection([2, 4, 3, 1], [1, 2, 3]): ' + result);    
76.	    
77.	    //without    
78.	    console.log('Without Function');    
79.	    var list = [1, 2, 1, 0, 3, 1, 4];    
80.	    console.log(' _.without([1, 2, 1, 0, 3, 1, 4], 0, 1): ' + _.without(list, 0, 1));    
81.	</script> 

Demikianlah penjelasan tentang Underscore.JS serta cara instal Underscore JS NPM yang bisa Anda coba. Underscore.js memungkinkan Anda menghindari verbositas yang tidak perlu tanpa mengorbankan keterbacaan.

Library ini membantu Anda menghindari keharusan untuk menulis kode boilerplate. Anda juga bisa menulis algoritma perbedaan simetris Anda sendiri untuk array, tetapi ini jauh lebih mudah. Kami berharap artikel ini dapat membantu Anda dalam bekerja dengan Underscore.js. Simak terus informasi-informasi menarik seputar pengembangan aplikasi dan website hanya di situs kami https://appkey.id/.