Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteWeb ProgrammingApa itu Underscore JS? Manfaatnya untuk Melengkapi jQuery

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.

Artikel Terkait  Cara Membuat Website Bisnis Travel Menggunakan WordPress

Underscore JS: Sebuah Penjelasan

underscore-js-2

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.

Artikel Terkait  Google AMP Adalah : Solusi untuk Meningkatkan SEO Situs

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:

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/.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya