For-loop
For-loop adalah bentuk lain dari iterasi, dimana statement for menjadi kontrol
atas loop yang dilakukan. Hal ini yang menjadi pembeda antara for-loop dengan
while-loop.
Berikut adalah cara atau struktur penulisan for-loop:
for([Inisialisasi], [Kondisi], [Incremental/Decremental]) {
[Proses] // Merupakan proses yang akan dijalankan dalam satu iterasi
}
Pada for-loop, statement for akan menampung tiga parameter, yaitu sebut saja
inisialisasi, kondisi, dan incremental/decremental. Ketiga parameter ini akan menjadi
kontrol kapan loop ini harus berhenti. Pada parameter pertama, yaitu inisialisasi,
sebuah variable diberikan nilai awal atau default. Pada parameter kedua, yaitu
kondisi, for-loop akan terus berjalan selama kondisi ini masih terpenuhi, dengan kata
lain, mengandung nilai true. Pada parameter kedua, yaitu incremental/decremental,
variabel yang menjadi kontrol terhadap loop ini akan diubah nilainya.
Best Practice: Walaupun memang for-loop dapat mengubah kondisi di dalam
proses, namun best practice dari penggunaan for-loop adalah seluruh kendali atau
kontrol dari looping ditentukan oleh variable yang diinisialisasi, di
increment/decrement, dan juga kondisi for-loop pun menggunakan variable
tersebut.
Untuk memudahkan kamu mendapatkan gambaran jelas tentang penggunaan for-
loop, mari kita gunakan kedua contoh while-loop dan kita tulis ulang dalam bentuk
for-loop.
Contoh Looping For-loop 1 Looping Angka 1-9 Sederhana
for(var angka = 1; angka < 10; angka++) {
[Link]('Iterasi ke-' + angka);
}
Kamu bisa mencoba kode di atas disini
Contoh Looping For-loop 2 Looping Mengembalikan Angka Total
var jumlah = 0;
for(var deret = 5; deret > 0; deret--) {
jumlah += deret;
[Link]('Jumlah saat ini: ' + jumlah);
}
[Link]('Jumlah terakhir: ' + jumlah);
Contoh Looping For-loop 3 Looping Dengan Increment dan Decrement Lebih dari
1
for(var deret = 0; deret < 10; deret += 2) {
[Link]('Iterasi dengan Increment counter 2: ' + deret);
}
[Link]('-------------------------------');
for(var deret = 15; deret > 0; deret -= 3) {
[Link]('Iterasi dengan Decrement counter : ' + deret);
}
Waspadai Forever Looping!
Dengan sengaja atau sengaja, kode kamu mungkin dapat menghasilkan forever
looping, atau looping yang tidak akan pernah berhenti. Bila ini terjadi, segera periksa
statement kondisi kamu.
var flag = 1;
while(flag < 10) { // Loop akan terus berjalan, karena nilai flag tidak pernah
berubah
[Link]('Iterasi ke-' + flag);
}
Basic Simbol / Notasi Flowchart
Flowchart merupakan diagram yang menggambarkan algoritma, atau proses-proses,
yang digunakan untuk memecahkan suatu masalah. Intinya, flowchart bisa dipakai
sebelum menulis kode karena syntax lebih mudah digambar. Syntax basic flowchart
seperti berikut:
Start/End
Input/Output
Process
Conditional (IF)
Banyak tools software yang dapat kamu gunakan untuk menggambar flowchart.
salah satunya tools online editor [Link]
Bagi kalian yang nanti akan membuat sebuah sistem yang complex, menggambar
flowchart bisa jadi hal pertama yang kalian lakukan sebelum coding. Kenapa ?
Karena untuk membuat sebuah sistem yang complex kalian harus punya gambaran
yang jelas dari proses atau prosedur dari awal hingga akhir sistem yang kalian buat.
Kalau tidak ada flowchart kadang di tengah pengerjaan project kita lupa alur dari
sistem yang kita buat. Tentu hal ini akan mempengaruhi codingan kalian.
Mengenal Pseudocode
Atau agar lebih rapi, kita gunakan pseudocode. Psedudocode adalah konvensi
terstruktur atau cara menyajikan penjelasan algoritma dengan bahasa yang deskriptif
seperti kita menulis kalimat biasa sehingga mudah kita baca. Umumnya digunakan
bahasa Inggris atau bahasa perantara yang mirip bahasa pemrograman. Lihatlah
contoh algoritma penambahan angka sederhana dengan pseudocode berikut.
Bahasa Inggris
READ and SAVE "first number"
READ and SAVE "second number"
COMPUTE "first number" added by "second number"
SAVE previous computation result
SHOW the computation result
Bahasa inggris diatas nantinya akan diubah menjadi bahasa pemrograman yang kita
mau. Dibawah ini adalah contoh hasil konversi pseudocode diatas menjadi kode di
bahasa lain. Saat ini kamu hanya cukup melihat hasil konversinya sekilas saja, tidak
harus dipelajari, karena kita akan fokus pada pseudocode terlebih dahulu.
JavaScript
var a,b,c;
a = prompt("First Number?");
b = prompt("Second Number?");
c = Number(a) + Number(b);
[Link](c);
alert("Result = " + c);
Dengan begini, kita bisa menjelaskan proses atau alur logika tanpa bahasa
pemrograman tertentu. Sehingga juga logika yang sama bisa ditransfer atau
diterapkan ke bahasa pemrograman lain. Misalnya...
Python
a = input("First Number? ")
b = input("Second Number? ")
c = int(a) + int(b)
print("Result", c)
Ruby
puts "First Number?"
a = [Link]
puts "Second Number?"
b = [Link]
c = a.to_i + b.to_i
puts c
Lebih dalam tentang Pseudocode
Berikut adalah contoh yang perlu kamu tahu saat membuat pseudocode. Jangan
Terpaku 100% dengan contoh, karena dalam pseudocode tidak terpaku pada
penggunakan kata tertentu. Selama pseudocode dapat dimengerti sesama
pembaca, maka sudah cukup bisa digunakan. Kita bisa menggunakan huruf
kapital untuk keyword yang ditekankan dari sebuah step. Misal: CALCULATE 5 plus 2,
atau DISPLAY "hello".
Storing Values
Biasanya, pada saat kita belajar matematika atau fisika, kita akan bertemu dengan
rumus. Paling sederhana adalah rumus luas persegi, yaitu width dikalikan height.
Kita sebagai manusia dengan natural dapat langsung mengkalkulasi nilai panjang
dan lebar untuk mendapatkan luas. Tapi, komputer tidak semudah itu. Komputer
harus menyimpan nilai panjang dan nilai lebar di dalam memori. Memori komputer,
bayangkan saja seperti otak kita yang bisa menyimpan berbagai informasi.
Sebetulnya, saat kita menghitung panjang dan lebar secara tidak sadar kita pun
menampung nilai tersebut di kepala kita.
Contoh Pseudocode
STORE "width" with any value
STORE "height" with any value
STORE "area" without any value
CALCULATE "width" times "height"
SET "area" value with calculation result
DISPLAY "area"
Bisa dilihat dari pseudocode diatas, ada beberapa step yang kita jalankan. Mari kita
bahas tiap step ke bahasa yang lebih "manusiawi" :)
1. Simpan "width" dengan nilai berapapun
2. Simpan "height" dengan nilai berapapun
3. Simpan "area" tanpa diberikan nilai. Ini akan kita isi nanti.
4. Hitung hasil perkalian "width" dengan "height"
5. Setelah mendapatkan hasil perhitungan, isikan hasilnya ke dalam "area"
6. Tampilkan nilai dari "area"
Conditional
Saat komputer menjalankan program, seringkali komputer harus melakukan sebuah
tindakan jika suatu kondisi terpenuhi. Mudahnya, di kehidupan sehari-hari misalnya,
jika kita lapar, kita akan makan. "Jika kita lapar" adalah sebuah kondisi, dan "kita akan
makan" adalah step yang hanya akan dijalankan apabila kondisi tersebut terpenuhi.
Contoh Pseudocode
IF "hungry"
DO "eat"
DISPLAY "i am happy"
Jika kita lihat pseudocode diatas, bisa dijabarkan sebagai step berikut
1. Jika lapar, maka masuk ke step 2. Jika tidak, abaikan step 2 dan langsung ke step 3.
2. lakukan proses "eat"
3. Tampilkan "i am happy"
Yang terjadi disini ada dua kemungkinan. Jika lapar, step 2 akan diabaikan. Kita bisa
lihat dari pseudocode dimana "eat" kita buat menjorok ke dalam (ingat dengan
identasi di HTML? ya betul! :D) untuk menunjukkan semua proses yang menjorok ke
dalam setelah sebuah kondisi merupakan proses yang dijalankan hanya jika kondisi
terpenuhi.
Tidak hanya sampai disana, kondisional bisa juga melakukan proses yang hanya
dijalankan jika kondisi tidak terpenuhi. Misal, saat nilai ujian dibawah 70, saya harus
berlajar lebih giat. Tapi jika tidak, maka saya layak memberi reward untuk diri sendiri.
Contoh Pseudocode
STORE "score" to any number
IF "score" < 70
DO "learn more"
ELSE
DO "reward myself"
DO "continue with life..."
Nah disini terjadi yang biasa dinamakan percabangan. Jika score dibawah 70, maka
kita akan "learn more", dan jika tidak, maka kita harus "reward myself".
Namun apapun kondisinya, kita pasti akan masuk ke step "continue with life..."
Pseudocode diatas bisa digambarkan ke step berikut:
1. Jika "score" dibawah 70, masuk ke step 2a. Jika tidak, masuk ke step 2b. 2a. Lakukan
"learn more" 2b. Lakukan "reward myself"
2. Lakukan "continue with life..."
Saat program berjalan, berarti hanya ada dua kemungkinan. Antara menjalankan step
1 -> 2a -> 3, atau step 1 -> 2b -> 3.
More About String
String adalah tipe data yang yang berisikan karakter-karakter alfanumerik yang
dibungkus dengan karakter kutip (' dan "). karakter-karakter pada string dapat
diakses menggunakan indeks atau posisi, dimana dimulai dari angka 0.
var title = 'Your Name';
// mengambil huruf pertama dari string
[Link](title[0]); // 'Y'
// mengambil huruf terakhir dari string. Apa itu length? Penjelasan .length di
section selanjutnya :)
[Link](title[[Link] - 1]); // 'e'
// "memaksa" perubahan nilai di posisi 0
title[0] = 'T';
// tidak akan ada perubahan
[Link](title); // 'Your Name'
title = 'My name';
// ada perubahan, karena assign keseluruhan string
[Link](title); // 'My name'
// menambahkan string dengan simbol '+'
title = title + ' is Bento';
[Link](title); // 'My name is Bento'
Pada JavaScript, tipe data primitif seperti String diperlakukan seperti objek. Oleh
karena itu, String memiliki property dan method. Apabila kamu belum mendengar
tentang Objek pada JavaScript (dan memang seharusnya belum), kamu tidak perlu
pusing dengan kedua istilah tersebut. Secara sederhana, property dan method adalah
kemampuan milik String yang dapat digunakan untuk mempermudah kita dalam
melakukan pemrograman. Kamu cukup menggunakan apa yang dimanakan dengan
method. Method, akan lebih dalam dibahas di materi JavaScript Function.
String Properties
.length
Mengembalikan panjang dari suatu string; perhitungan dimulai dari 1.
var name = 'Uvuvwevwevwe Onyetenyevwe Ugwemubwem Ossas';
[Link]([Link]); // 42
String Methods
.charAt([indeks])
Mengembalikan karakter pada indeks yang diinginkan
[Link]('i am a string'.charAt(3)); // 'm'
.concat([string])
Menggabungkan beberapa string dan mengembalikannya menjadi string baru.
var string1 = 'good';
var string2 = 'luck';
[Link]([Link](string2)); // goodluck
.indexOf([string/karakter])
Mengembalikan indeks dari string/karakter yang dicari, yang pertama kali ditemukan,
atau -1 apabila tidak ditemukan.
var text = 'dung dung ces!';
[Link]([Link]('dung')); // 0
[Link]([Link]('u')); // 1
[Link]([Link]('jreng')); // -1
.substring([indeks awal], [indeks akhir (optional)])
Mengembalikan potongan string mulai dari indeks pada parameter pertama sampai
dengan indeks pada parameter kedua. Bila parameter kedua tidak ditentukan, maka
secara otomatis berakhir pada karakter terakhir. Karakter pada indeks yang
ditentukan pada parameter kedua tidak diikutkan sebagai output.
var car1 = 'Lykan Hypersport';
var car2 = [Link](6);
[Link](car2); // Hypersport
.substr([indeks awal], [jumlah karakter yang diambil (optional)])
Mendapatkan potongan string mulai dari indeks pada parameter pertama dengan
jumlah indeks pada parameter kedua. Bila parameter kedua tidak ditentukan, maka
secara otomatis berakhir pada karakter terakhir. Karakter pada indeks yang
ditentukan pada parameter kedua tidak diikutkan sebagai output.
var motor1 = 'zelda motor';
var motor2 = [Link](2, 2);
[Link](motor2); // ld
.toUpperCase()
Mengembalikan string baru dengan semua karakter yang diubah menjadi huruf
kapital.
var letter = 'This Letter Is For You';
var upper = [Link]();
[Link](upper); // THIS LETTER IS FOR YOU
.toLowerCase()
Mengembalikan string baru dengan semua karakter yang diubah menjadi huruf kecil
var letter = 'This Letter Is For You';
var lower = [Link]();
[Link](upper); // this letter is for you
.trim()
Mengembalikan string baru yang sudah dihapus karakter whitespace pada awal dan
akhir string tersebut.
var username = ' administrator ';
var newUsername = [Link](); // 'newUsername = 'administrator'
Typecasting To and From String
Typecasting berarti mengubah data dari suatu tipe data ke tipe data yang lain. Pada
JavaScript, typecasting sering dilakukan pada string, baik dari suatu tipe data menjadi
string atau sebaliknya. Berikut beberapa cara yang bisa dilakukan untuk melakukan
typecasting terhadap string.
String([angka/array])
Fungsi global String() dapat dipanggil kapan saja pada program JavaScript dan akan
mengembalikan String dari parameter yang diberikan.
var int = 12;
var real = 3.45;
var arr = [6, 7, 8];
var strInt = String(int);
var strReal = String(real);
var strArr = String(arr);
[Link](strInt); // '12'
[Link](strReal); // '3.45'
[Link](strArr); // '6,7,8'
.toString()
Mengonversi tipe data lain menjadi string. Bila data tersebut adalah array, setiap nilai
akan dituliskan dan dipisah dengan karakter koma.
var number = 21;
[Link]([Link]()); // '21'
var array = [1,2];
[Link]([Link]()); // '1,2'
Number([String])
Fungsi global Number() mengonversi tipe data string menjadi angka. Data yang
diberikan pada parameter harus berupa karakter angka saja, dengan titik bila angka
adalah bilangan desimal. Bila parameter berisi karakter selain angka dan/atau
titik, Number()akan mengembalikan NaN (Not a Number).
var number1 = Number("90"); // number1 = 90
var number2 = Number("1.23"); // number2 = 1.23
var number3 = Number("4 5"); // number3 = NaN
parseInt([String]) dan parseFloat([String])
Fungsi global parseInt([String]) dan parseFloat([String]) mengembalikan angka
dari string. Bila angka adalah bilangan desimal maka gunakan parseFloat(), bila tidak
bilangan dibelakang koma akan diabaikan.
var int = '89';
var real = '56.7';
var strInt_1 = parseInt(int); // strInt_1 = 89
var strInt_2 = parseInt(real); // strInt_2 = 56
var strReal_1 = parseFloat(int); // strReal_1 = 89
var strReal_2 = parseFloat(int); // strReal_2 = 56.7