lifelong learner — urip iku urup, currently working on accenture.

Javascript ES6 – iterasi pada string (looping)

0
Degananda.com -

Iterasi pada string

Iterasi adalah proses yang dilakukan berulang – ulang terhadap suatu variabel tertentu. Misalkan pada kasus programming kita memiliki array dengan anggota [1,2,3,4]. Maka akan terdapat empat buah iterasi jika iterasi tersebut dilakukan berdasarkan isi anggotannya. Iterasi pertama memproses 1, iterasi kedua memproses 2 , iterasi ketiga memproses tiga dan terahir iterasi ke empat memproses 4.

Jika sebelumnya kita hanya melakukan iterasi terhadap suatu array ataupun kondisi variabel boolean (jika a kurang dari b dan lain sebagainnya) maka pada ES6 (Ecmascript 2015) kita dapat melakukan iterasi pada suatu string!. Ya benar suatu string anda tidak salah membacannya. Hal ini sangat berguna jika kita ini melakukan manipulasi terhadap suatu string dibandingkan dengan menggunakan kondisional boolean.

Perhatikan kasus berikut ini, misalkan kita memiliki kata “degananda”. Tugas yang harus kita lakukan adalah membuat iterasi pada setiap huruf di kata tersebut dan menampilkan setiap huruf itu. Jika menggunakan pendekatan (approach) non ES6 maka kode yang akan kita tulis adalah sebagai berikut ini

var nama = "degananda";
for(var i = 0;i<nama.length;i++){
    console.log(nama.charAt(i));
}

lalu jika kita menggunakan pendekatakan ES6 maka proses iterasi dapat dilakukan langsung tanpa mendefinisikan variabel-variabel kondisional diatas. Hal ini akan mempersingkat line of code yang harus dituliskan dan menambah tingkat kebersihan atau cleaness dari source code kita. Berikut adalah kode untuk melakukan iterasi pada “degananda” dengan memanfaatkan ES6

var nama = "degananda";
for(const char of nama){
    console.log(char);
}

sangat clean bukan ? dan semakin mudah untuk dibaca oleh manusia (semakin high level language). Penggunaan for untuk iterasi terhadap string memiliki mekanisme layaknya forEach pada suatu array. Kedua kode diatas akan menghasilkan hasil seperti dibawah ini.

String repeat

Terdapat satu string method baru terkait perulangan. Ketika kita menuliskan kata “dega” dan ingin menuliskan menjadi “dega dega dega”. ES6 Menghadirkan fitur baru yakni metode repeat() yang terikat pada suatu string. Fungsinya dalah melakukan repeat terhadap karakter atau kata sebanyak “x” kali. Jumlah iterasi ini akan menjadi paramter dari method repeat() tersebut. Perhatikan contoh kode berikut ini yang akan merepeat “dega” sebanyak 5 kali

var nama = "dega";
console.log(nama.repeat(5));

lalu apakah fungsi dari repat ini ? untuk apa kita merepeat suatu kata atau huruf ?

  1. repeat ini sangat berguna untuk membuat indent atau jarak menjorok suatu kalimat dari kiri dengan menggunakan spasi. Mengapa ? karena terkadang beberapa browser mengintepretasikan berbeda jika kita menggunakan tab. Maka fungsi repeat ini sangat berguna untuk membuat indent dari suatu kalimat atau paragraph.

perhatikan contoh berikut ini kita akan menspesifikasikan spasi menjorok kekanan sebanyak 5 spasi diawal kalimat.

var indent = " ";
// set jumlah spasi untuk indent sebanyak 5
var jumlahSpasiIndent = 5; 
var kalimat = "hari ini sangat cerah karena matahari sedang tersenyum.";
console.log(`${indent.repeat(jumlahSpasiIndent)} ${kalimat}`);

dengan formated indent seperti ini akan sangat membantu untuk menyelaraskan margin. Kode diatas jika dieksekusi akan menghasilkan seperti ini pada konsol.

Iterasi pada unicode

ES6 juga menghadirkan iterasi pada suatu kode unicode. Hal ini dapat kita manfaatkan ketika menghadapi kasus untuk memanipulasi unicode. Contohnya kita memiliki kode unicode uD83D. Maka kita dapat melakukan iterasi dengan kode berikut ini.

for(const char of 'x\uD83D\uDE80y'){
    console.log(char.length);
}

kode diatas akan menghasilkan output seperti berikut ini

berikut ini adalah penjelasan singkat mengapa dapat memberikan output “1 2 1”

  1. Meski disana terdapat banyak karakter iterasi hanya dilakukan sebanyak tiga kali. Mengapa ? karena dipisahkan oleh backslash (“\”). Sehingga kata sebelum dipenggal backslash akan dihitung sebagai satu karakter.
  2. Lalu mengapa pada iterasi kedua “uD83D”
    menghasilkan panjang dua karakter sementara iterasi lainnya hanya mendapatkan panjang sebanyak satu karakter ?

coba print kode unicode “uD83D diatas” maka akan muncul kode “?” yang mana simbol tersebut akan dihitung 2 karakter oleh sistem.

console.log('\u{D83D}');

kode diatas akan menampilkan simbol seperti ini