Blog Feed

Menurut saya, pengolahan data yang banyak / heterogen dalam sebuah variable memang lebih baik menggunakan array.

Dalam sebuah prakteknya kita akan menjumpai kasus dimana sebuah array harus di tampilkan secara berurutan.

Hal ini dapat dilakukan dengan menggunakan looping dengan perintah for. Anda dapat perhatikan kode berikut ini

const myArr = [3, 15, 9]

for (let index = 0; index < myArr.length; index++) {
    const element = myArr[index]
    console.log(element)
}

/* 
output
-------------- 
3
15
9
*/

Akan tetapi mari kita bandingkan kode diatas dengan menggunakan method foreEach() dalam menampilkan dan mengurutkan data pada array.

const myArr = [3, 15, 9]

myArr.forEach((element) => { console.log(element) })

/* 
output
-------------- 
3
15
9
*/

bagaimana?….

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.

arr.forEach(function callback(currentValue[, index[, array]]) {
    //your iterator
}[, thisArg]);

Keterangan:

callback: fungsi untuk mengeksekusi array agar untuk dilakukan perulangan dan menampilkannya secara berurutan

curretValue: Adalah element yang dieksekusi

index: penggunaannya optional, dan menyatakan index dari element yang di eksekusi

array: penggunaan parameter bersifat optional, dan parameter ini menyatakan array yang dieksekusi.

thisArg: Penggunaanya optional dan value ini menyatakan this dalam fungsi forEach

Dan sekarang kita akan melanjutkan pembahasan bagaimana cara kerja dari method forEach(). Anda dapat perhatikan kode berikut ini

const menu = ['nasi padang', 'soto betawi', 'sate madura']

menu.forEach(makanan => {
   console.log(makanan)
})

/*
output
-------------
nasi padang
soto betawi
sate madura
*/

Mari kita lihat cara kerjanya, perhatikan gambar dibawah ini.

• Kasus diatas akan melakukan 3 kali perulangan karena array diatas hanya memiliki 3 element. Proses pertama.

• Proses yang berikutnya

• proses yang terakhir.

Dan proses terhenti dikarenakan tidak ada lagi element yang di panggil maka callback menampilkan hasil.

Saya harap penjelasan tetang forEach dapat di mengerti. Semoga bermanfaat.

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()

Syntak

array.map(functionCallback(currentValue, index, arr), thisValue)

• 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()

const myArray = [19, 3, 7]

const result = myArray.map(tambah => tambah + 5)

console.log(result) //output -> [24, 8, 12]

Karena kita telah membuat ketentuan dengan ditambah 5, oleh karena itu map() akan membentuk array baru yang setiap element akan ditambah 5.

Mari kita lihat simulasi cara kerja, agar anda lebih memahaminya.

• Karena array sumber hanya memiliki 3 element, maka hanya terjadi 3 proses saja untuk map() membentuk array baru. Ini adalah proses pertama.

• Proses selanjutnya

• Proses perulangan element yang terakhir

• Karena tidak ada element lagi yang akan di lakukan perulangan oleh map() maka proses berhenti dan menampilkan output dengan array yang baru

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.

Sebelumnya saya sempat membaca artikel pada web https://alligator.io/js/maps-introduction disana mereka menuliskan parameter fungsi dengan menggunakan emoticon.

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.

    Content-Type: application/javascript; charset=utf-8

• Jika anda ingin loaded file javascript kedalam dokumen HTML. Maka anda perlu menambahkan atribut charset dengan value UTF-8 pada tag script <script>

    <script src="./app.js" charset="utf-8">

• Ataupun anda dapat melakukan loaded file javascript kedalam HTML dengan menambahkan atribut charset dengan value utf-8 pada tag meta <meta>

  ...
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="./app.js">
  </body>
  ...

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.

Perhatikan kode berikut ini.

const s1 = '\u00E9' //é
const s3 = 'e\u0301' //éconsole.log(s1 !== s3) //true

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 👩

Anda dapat perhatikan kode berikut ini.

Untuk kode menampilkan emoji anda dapat kunjungi link berikut ini https://unicode.org/emoji/charts/full-emoji-list.html

Menghitung Karakter

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.

ngopi dulu sedulur

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.

Syntak

syntak filter sebagai berikut:

const newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

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.

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.

Syntak

arr.some(callback(element[, index[, array]])[, thisArg])

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().