Rasanya lebih simpel menggunakan forEach() dalam menampilkan data secara berurutan, selain itu juga membuat kode kita jadi kelihatan lebih bersih. Mari kita bahas lebih lanjut tentang foreEach().
Pengertian dan Cara kerja forEach()
Sebelumnya kita telah mempelajari method map(), dalam beberapa kasus yang telah saya temui pada salah satu forum online ada seseorang yang kesulitan membedakan antara method map() dan forEach().
Lalu apa yang menjadi perbedaan antara map() dengan forEach()?
Method map() akan membentuk array baru setelah melakukan perulangan terhadap array berdasarkan kriteria yang ditetukan dalam callback.
Sedangkan method forEach() hanya melakukan perulangan terhadap array dan menampilkan data yang ada pada setiap element secara berurutan.
Jadi dari penjelasan singkat diatas anda dapat memahami perbedaannya. Kemudian syntak dari forEach sebagai berikut.
Map() diperkenalkan pada tahun 2011, saya akan menjelaskan tentang fungsi map() yang di gunakan untuk array dalam beberapa point, berikut ini adalah penjelasannya:
a. Map() adalah sebuah fungsi yang melakukan perulangan pada setiap element array. Setelah perulangan dilakukan map() akan membentuk array baru berdasarkan ketentuan dari fungsi callaback yang telah diterapkan.
b. Cara pemanggilan fungsi callback map() dilakukan secara berurutan dari element yang pertama hingga element terakhir
c. Nilai array sumber tidak akan berubah walaupun telah ditempatkan dalam fungsi Map()
functionCallback : adalah fungsi yang melakukan pemanggilan terhadap element aray
currentValue : adalah parameter yang berisikan nilai pada element array yang akan di-map
index: adalah parameter untuk menapilkan index pada element, parameter ini adalah optional
arr: menampilkan array yang di-maping
thisValue: array baru yang dibentuk dari array yang di-mapping.
Contoh Kode dan Penjelasan
Saya akan memberikan dua contoh kode.
Dari syntaks map(), saya telah menjelaskan bahwa method map() terdapat 3 parameter pada fungsi callback. Pada contoh yang pertama ini saya akan memberi kan ketiga parameter tersebut. Agar membatu anda lebih mudah untuk memahami syntak method map()
dan contoh yang kedua ini kita akan bersama-sama memahami cara kerja dari method map()
Mungkin
para penggiat atau pemula dalam dunia programming, tidak semuannya
mengetahui bahwa kita dapat menggunakan emoticon atau penggunaan bahasa
cina atau jepang untuk dalam kode program.
Sesuatu yang diluar dari kebiasaan menurut saya. Berangkat dari situ pula yang menjadi cikal bakal saya menulis artikel ini.
dan berikut adalah screen shoot dari artikel yang saya maksud tadi.
Mari kita lanjutkan pembahasannya.
Apa Itu Unicode
Unicode adalah sebuah konsep standar penulisan dalam bentuk karakter atau dapat juga berupa simbol dalam bentuk visual.
Pada
umumnya komputer akan memproses apa pun perintah yang kita berikan.
Kemudian mengelolah perintah tersebut dan memberikan output atau
keluaran hasil dari pengolahan perintah tersebut.
Karena
itu pemograman javascript secara khusus memberikan aturan dalam
penulisannya. Apabila ketentuan tidak di terapkan, maka akan menjadi
masalah. Karena browser akan menganggap source code ditulis berdasarkan
karakter lokal.
Sebagaimana
kita ketahui bersama bahwa programmer tersebar di seluruh penjuru bumi
ini dengan berbeda-beda kewanegaraan dan setiap negara memiliki karakter
lokal mereka masing-masing seperti cina, jepang, dan arab.
Javascript source code dan unicode
Terdapat
dua cara dalam implementasi unicode pada source code javascript yang
pertama adalah dengan cara internal dan cara external:
1. Secara Internal
Apabila
unicode pada javascript dilakukan secara internal maka javascript akan
terlebih dahulu mengkonversi kode pada bagian unit UTF-16.
yang menjadi pertanyaan… apa itu UTF-16?
UTF-16 adalah singkatan dari 16-bitUnicode Transformation Format, dan penggunaannya adalah untuk encoding karakter unicode. UTF-16 juga disebut sebagai Sistem variable length encoding yang berarti setiap code point (kode yang mencerminkan suatu karakter) di-encode menggunakan satu atau dua kali 16-bit (1 code unit = 16 bit).
Mungkin keterangan UTF-16 Secara rinci akan sangat panjang dan saya rasa perlu ditulis dalam artikel yang berbeda.
Bedasarkan Spesifikasi dari Ecma Script 6 bahwa semua string adalah urutan dari UTF-16.
Anda dapat perhatikan contoh kode berikut ini.
Penulisan
variable yaitu memiliki indetifier yaitu nama dapat juga di
representasikan dengan n\u0061\u006D\u0061 yang mana \u0061 adalah huruf
a, dan \u006D adalah huruf m. Untuk referensi tentang karakter UTF-16
dapat kunjungi disini.
Penulisan
demikian juga berlaku pada string literal, dan juga regular exopresion
literal pada javascript. Dengan format penulisannya \uXXXX. yang mana
XXXX merupakan 4 angka Hexadecimal.
Berikut ini adalah contoh untuk menampilkan simbol pilcrow dengan Charset UTF-16
2. Secara External
Jika penulisan javascript dilakukan secara external. Seperti yang sering programmer lakukan saat develop web programming. Maka anda perlu melakukan inisialisai dokumen tersebut agar unicode yang ada dalam source code javascript dapat di terjemahkan oleh browser.
Apabila
file dari fecthing dengan menggunakan HTTP / HTTPS. Maka anda harus
menambahkan spesifikasi encode dengan parameter charset UTF-8 pada
header content-type.
begitulah 3 point, cara melakukan encode jika source code javascript berada pada external dokumen.
Namun jika anda perhatikan baik-baik bahwa secara external menggunakan UTF-8 bukannya UTF-16.
Lalu mengapa itu bisa terjadi?
Atas pertanyaan diatas, ada dua hal yang akan saya terangkan secara singkat yakni:
yang pertama, segala
file yang diawali dengan BOM (byte order mark) harus di lakukan encode
ke variant UTF. BOM sendiri adalah reprensentasi dari unicode dengan
code point U+FEFF BYTE ORDER MARK atau disingkat dengan BOM. Jadi pada
saat page menggunakan karakter tertentu maka setiap karakter harus di
encode kedalam BOM terlebih dahulu.
yang kedua, karena standar HTML5 menggunakan UTF-8, namun juga tidak terbatas dengan UTF-8. Kemudian yang menjadi hubungan dengan BOM adalah representasi dari byte untuk setiap karakter unicode, sedangkan UTF adalah untuk format transformasi unicode itu sendiri.
Saya
khawatir pembahasan ini akan jauh meluas karena untuk unicode sendiri
saya rasa perlu pembahasan dalam beberapa artikel, oleh karena itu saya
persingkat saja.
Poinnya adalah standar HTML5 secara default menggunakan BOM UTF-8 untuk merepresentasikan karakter dan symbol dalam browser.
Normalisasi
Penerapan normalisasi yaitu proses menghilangkan perintah ambigu dalam menampilkan sebuah karakter.
Atau
anda dapat pula menggunakan method normalize() yang di perkenalkan oleh
ES6. Dan method ini juga dapat digunakan untuk membandingkan string.
s1.normalize() === s3.normalize() //true
EMOJI
Penggunaan
emoji sangat menarik, sesuatu yang diluar dari kebiasaan dalam membuat
program. Anda juga dapat menerapkan emoji dalam identifier atau string
literal. Seperti screen shot kode diatas yang menggunakan emoji pada
string literal.
Meskipun begitu saya tidak pernah menggunakan emoji dalam develop program. heheh….
Dalam penggunaannya anda dapat melakukannya dengan string yaitu dengan cara encode \uXXXX dan XXX adalah bilangan hexadecimal.
Perhatikan kode berikut ini.
Namun emoji juga dapat digabungkang seperti anda membuat emoji 👩❤️👩 maka anda perlu menggabungkan 👩 dan ❤️ dan 👩
Apabila sebuah string terdiri dari dua unit kode yang di-encoding pada 1 unit tunggal code point. Maka yang dihitung bukanlah emoj/karakter/symbol, melainkan kode unit penyusun karakter tersebut.
Selain itu anda juga dapat melakukan perulangan dari emoj tersebut. seperti contoh kode berikut ini
Begitulah pembahasan tentang unicode pada javascript dan semoga bermafaat.
Kita akan menggunakan robo 3t untuk belajar tentang mongodb.
Robo 3t adalah mongodb tools yang berbasis GUI (grafik user interface). Pengertian dari GUI adalah antar muka yang berbasis grafis. Oleh karena itu user tidak perlu mengetikan perintah melalui command prompt atau shell untuk menjalankan sesuatu dalam komputer, karena semua sudah tersedia dalam bentuk gambar.
Kali ini kita akan mempelajari tentang reduce sebuah fungsi yang digunakan untuk memanipulasi array. namun sebelum ke coding menggunakan reduce kita mulai dengan defenisinya terlebih dahulu.
Jika anda mencoba melakukan translate kata reduce dengan menggunakan google translate maka akan didapati reduce = mengurangi/menurunkan. yang dimaksud bukan mengurangi nilai dengan reduce yah. jadi kita langsung saja ke defenisi yang coba saya buat semoga membuat anda menjadi paham.
Reduce adalah sebuah fungsi yang digunakan untuk mengeksekusi nilai pada setiap element dengan tipe array dan menampilkan dalam sebuah nilai saja.
Perhatikan kode diatas bahwa melakukan reduce yang semulanya array dengan [5,10,20] saya jumlahkan menjadi sebuah nilai tunggal yaitu di peroleh 35 hasil perjumlahan 5+10+20.
Cara kerja reduce dari kiri ke kanan, seperti contoh diatas reduce akan melakukan penjumlahan dari element pertama array kemudian ke element seterusnya.
callback = fungsi yang memanggil setiap nilai pada element array untuk di eksekusi dalam reduce
acumulator
= adalah parameter pertama dari fungsi callback, ini diperlukan reduce
sebagai inisial dari nilai reduce yang akan ditampilkan. paratemer ini
juga sebagai akumuliasi nilai-nilai setiap element array. saya ambil
contoh dari kode diatas, bahwa total sebagai akumulator penjumlahan
setiap element array.
currentValue = adalah nilai tiap element array sumber atau nilai aray yang akan diberlakukan kedalam fungsi reduce
index = adalah index array, parameter ini adalah optional
array = adalah array sumber, parameter ini bersifat optional
initialValue
= dapat digunakan sebagai parameter pertama pada fungsi callback, jika
intialValue tidak di deklarasikan, maka secara otomatis reduce akan
mengambil element pertama pada array kemudian menjadikannya sebagai
initial value
Cara Kerja Reduce
jika anda masih bingung saya saya akan membuat gambaran bagaimana cara reduce bekerja.
Perhatikan kode berikut output adalah 45 dan cara kerjanya tersedia pada tabel berikut ini.
dan untuk alurnya saya coba gambarkan sebagai berikut
Proses yang pertama
Proses yang kedua
Proses yang ketiga
Proses terakhir
Demikian alur proses dengan penggunaan reduce semoga mudah untuk dipahami.
Bila Array Tanpa Nilai
Fungsi reduce tidak akan terjadi, tidak akan dieksekusi apabila array tidak memiliki nilai. dan yang terjadi adalah error. ini yang harus menjadi perhatian anda
Mengambil nilai pada objek array
Dalam penjulahan dengan objek harum membuat atau mendeklarasikan initial value.
Ssesuai dengan namanya function filter. Berarti menyaring / menyeleksi setiap element array berdasarkan kriteria yang telah di tentukan.
Filter akan membuat sebuah array baru yaitu array yang dibentuk merupakan hasil dari penyeleksian array sumber. Dan setiap element pada array baru nilainya berdasarkan fungsi callback yang telah di tentukan.
Function filter ini tidak akan dieksekusi apabila array tidak memiliki element, serta filter tidak akan mengubah sumber array yang digunakan.
callaback : adalah fungsi untuk memanggil setiap element pada array. Kemudian menyeleksi nilai yang telah di tentukan. Pada fungsi callback terdapat 3 argument.
element : adalah element array yang diseleksi.
index : penggunaannya optional dan menyatakan index pada element array
array : penggunaannya adalah optional dan menyatakan array yang digunakan oleh method filter().
thisArg: penggunaannya optional dan nilai ini digunakan pada saat eksekusi fungsi callback.
Contoh dan Mekanisme kerja filter()
untuk lebih jelasnya anda dapat perhatikan kode ini. Dan seperti biasa saya akan membuatkan simulasi cara kerja fungsi filter.
// array sumber
const numbers = [30, 5, 17]
// membuat kriteria menampilkan number > 10
// pada fungsi callback.
const hasil = numbers.filter(number => number > 10)
// membuat array baru
// menampilkan hasil [30, 17]
console.log(hasil)
Berikut ini adalah cara kerja dari kode diatas.
Function callback mengecek element pertama. Karena 30 lebih dari 10 maka akan di tampilkan kedalam element baru.
Callback melanjutkan pengecekan keelemen yang kedua. Dikarenakan 5 tidak lebih dari 10 oleh karena itu tidak ditampilkan pada element baru.
Dan callback melanjutkan ke element terakhir. Nilai dielement terakhir adalah 17. Dikarenakan 17 lebih dari 10 maka nilai 17 akan di tampilkan pada element baru.
Begitulah cara kerja dari method filter. Semoga bermanfaat dan kita akan membahas method yang disediakan oleh array.
Pada Artikel ini akan membahas tentang struktur Bahasa javascript. Point yang akan dibahas diantaranya adalah: Syntaks, Statement, unicode, semicolons, white space, case sensitivity, Komentar, literals, identifiers and reservedwords,
Syntak pada Javascript
Setiap Bahasa pemograman memiliki syntak. Dan setiap Bahasa pemograman memiliki syntak yang berbeda-beda. Syntak adalah aturan untuk menuliskan perintah dalam pemograman. Jadi suatu programan atau aplikasi terdiri dari perintah-perintah yang ditulis berdasarkan aturan dari Bahasa pemograman.
Statement pada Javascript
Statement adalah intruksi atau perintah jalannya program dengan ditulis mengikuti aturan (syntak) yang telah ditetapkan oleh bahasa pemograman yang digunakan. Umumnya dalam javascript terdapat jenis statement yang sering dijumpai diantaranya statement kontrol, statement perulangan, statement function, statement class, statement handling exception.
Unicode
Penulisan javascript dapat menggunakan emoji. Seperti ketika programmer menuliskan indetifier pada variable dapat menggunakan emoji. Kasus yang lainnya adalah programmer dapat menuliskan indetifier dalam huruf latin cina dan jepang. Namun penulisan ini harus mengikuti aturan yang telah ditetapkan.
Semicolom pada Javascript
Penulisan semi kolom pada javascript bersifat optional. Pada tutorial ini saya tidak menggunakan semi kolom di akhir baris statement. Untuk lebih jelas nya silahkan baca artikel saya Semikolom / Titik Koma
White Space
Secara teori javascript mengabaikan spasi, tab dan baris baru. Dengan hal ini dapat menguntungkan programmer dalam menulis kode. Programmer dapat dengan bebas menuliskan kode program sesuai gaya yang mereka senangi. Selain itu dengan hal ini akan mempermudah melakukan indent terhadap kode program. Contoh dalam hal ini adalah saya menggunakan indent space 2 karakter agar menghasilkan kode yang lebih mudah untuk dibaca.
Case Sensitive
Javascript memiliki syntak yang case sensitive yang berarti ditulis dengan memerhatikan huruf capital dan letter sebagai contoh ‘Function’ berbeda dengan ‘function’. Karena ‘Function’ pertama diawali huruf capital sedangkan ‘function’ yang berikutnya diawali dengan huruf letter.
Komentar
Pemberian komentar pada javascript dapat dilakukan dengan cara pemberian double slash (//) untuk mengomentari satu baris saja. Apabila ingin memberikan komentar untuk beberapa baris maka diawali dengan /* dan diakhiri dengan */ . Komentar pada javascript akan membuat kode tidak akan dieksekusi. Biasanya penulisan komentar untuk memberikan keterangan sebelum kode dieksekusi. Untuk penjelasan yang lebih detail dapat membaca artikel berikut ini Komentar Pada Javacript.
Literal
Mudahnya mendefenisikan literal adalah sebagai value. Seperti value sebuah angka, atau sebuah string. Dan kontruksi lanjutan yaitu tipe data object yang terdiri dari array, object, dan function.
Identifier
indentifier adalah penamaan sebuah variable. indentifier akan mengikat suatu value dengan menggunakan tanda samadengan (=). Ada beberapa aturan dalam identifier, anda dapat jumpai pada artikel Variable: Penggunaan Var, Let, dan Const.
Reserved Word
Ada beberapa kata kusus pada bahasa pemograman javascript yang tidak bisa digunakan baik sebagai penamaan function atau identifier pada variable. Berikut ini adalah beberapa kata yang dimaksud yaitu: break, do, instanceof, typeof, case, else, new, var, catch, finally, return, void, continue, for, switch, while, debugger, function, this, with, default, if, throw, delete, in, try, classe, num, extends, super, const, export, import, implements, let, private, public, interface, package, protected, static, yield.
Sebelumnya kita telah menginstalasi mongodb pada komputer dengan OS windows 7.
Dalam menjalankan mongodb apabila menggunakan cara yang manual seperti tutorial sebelumnya tentu akan sangat merepotkan. Pasalnya jika kita mematikan komputer kita, maka kita harus mengetikan perintah tersebut untuk menjalankan monggodb.
Oleh karena itu kita perlu membuat services pada komputer anda agar anda tidak perlu repot lagi mengetikan perintah yang sama untuk menjalankan mongodb pada lokal komputer anda.
Step 1 – Patching MongoDB
Membuka Control Panel > System and Security > System. Lalu anda pilih Advanced System Setting
Pada tab Advanced anda klik envirotment variable
pilih path pada sistem variable, kemudian klik tombol edit
Pada akhir path di tambahkan titik koma sebagai pemisah path. Kemudian anda tambahkan path direktori tempat anda menginstal mongodb. pada tutorial sebelumnya kita menginstal pada direktori C:\ maka kita cukup menambahkan C:\MongoDB\bin. Anda harus hati-hati dalam penambahan variable path jangan sampai ada variable yang terhapus atau lupa menambhakan titik komanya.
Kemudian klik ok untuk menyelesaikan penambahan path
Selanjutnya anda dapat membuka command promp (cmd) dan mengetikan perintah mongo -version. Maka akan muncul versi dari mongo yang sudah kita instal, dan dengan demikian maka anda telah berhasil melakukan patch pada komputer anda.
Step 2 – Membuat File Configuration
membuat direktori bernama log pada C:\data. Dan membuat file yang bernama mongod.cfg
kemudian anda mengetikan perintah berikut ini pada file mongod.cfg. kemudian save.
Setelah itu anda jalankan command promp (cmd) sebagai administrator dengan cara klik kanan > pilih run as administrator
anda dapat mengetikan perintah sebagai berikut
mongod --config C:\data\mongod.cfg –install
Anda dapat membuka services system dengan cara klik Control Panel > All Control Panel Items > Administrative Tools > services. Maka disana akan ada lokal servis yang benama MongoDB Server. dan sampai disini anda telah berhasil menginstal MongoDB services
Step 3 – Menjalankan Services
Untuk menjalankan services anda perlu membuka command promp (cmd) sebagai administrator. dan mengetikan perintah net start MongoDB
Services berhasil dijalankan dan jika anda masuk ke system service maka status MongoDB menjadi started
Step 3 – Perintah Untuk Menghetikan services
Untuk menghentikan services anda dapat melakukan dengan cara membuka command prompt sebagai administrator dan kemudian mengetikan perintah sebagai berikut
Kita memerlukan satu tools lagi untuk mempermudah kita dalam mempelajari mongodb. tools yang akan kita install adalah robo 3T.
Sebelum memulai tutorial selanjut hal yang harus dipersiapkan adalah tools untuk membantu proses pembelajaran kita. Adapun tools tersebut adalah instalasi mongoDB dan kita akan menggunakan robo 3T.
Artikel sebelumnya kita telah membahas method every(), sebetulnya method every() dan some() hampir mirip. Namun yang membedakan mereka adalah jika every() akan menghasilkan true apabila seluruh elemen sesuai dengan kriteria dari fungsi yang telah ditentukan. Akan tetapi untuk method some() hanya perlu satu element saja yang memenuhi kriteria dan akan menghasilkan nilai true.
Some() akan melakukan pengecekan keseluruh element dari awal sampai akhir element untuk menguji berdasarkan fungsi yang telah di tentukan.
Apabila terdapat satu elemen yang memenuhi kriteria maka some() akan menampilkan output true. Sedangkan jika tidak menemukan kriteria yang di maksud maka some() akan mencari hingga akhir elemen. Jika semua elemen tidak memenuhi kriteria maka some() akan menghasilkan nilai false.
callback: adalah fungsi untuk memanggil elemen array untuk dilakukan pengujian. Hasil dari pengujian oleh fungsi ini adalah berupa boolean
element: element pada array yang sedang di proses oleh method some()
index: penggunaan optional menunjukan index pada array yang sedang diproses
array: penggunaanya juga optional, pada argumen ini menunjukan array yang sedang dipanggil.
Contoh dan Cara kerja Some()
Contoh#1
Perhatikan kode ini agar anda mudah untuk memahami cara kerja some terhadap suatu array.
const arrays = [4, 6, 3]
// membuat fungsi callback yang bernama cekArray
function cekArray(element) {
// cek setiap elemen apakah lebih besar dari 5?
return element > 5
}
console.log(arrays.some(cekArray)) // output -> true
Pada kode diatas fungsi cekArray adalah callback untuk yang bertugas mengecek semua element array apakah lebih dari 5. untuk cara kerja yang lebih detil anda dapat melihat gambar berikut ini.
Callback mengecek pada elemet pertama
Callback menemukan kriteria pada element kedua dan mengembalikan output true. Sehingga javascript akan mengabaikan elemen selanjutnya
Contoh#2
const arrays = [4, 2, 3]
// membuat fungsi callback yang bernama cekArray
function cekArray(element) {
// cek setiap elemen apakah lebih besar dari 5?
return element > 5
}
console.log(arrays.some(cekArray)) // output -> false
Output yang dihasilkan adalah false karena callback telah menguji semua array dan tidak mendapatkan kriteria nilai element lebih dari 5.
fungsi callback melakukan pengecekan pada element pertama
fungsi callback melakukan pengecekan pada element yang kedua
Output yang dihasilkan adalah false karena elemen pada array semuanya tidak lebih dari 5.
Dalam tutorial kali ini saya harap anda mengerti penggunaan some() dan dapat membedakan penggunaan some() dan every().