Halo JavaScript!

Pengenalan

Mari kita sambut salah satu bahasa pemrograman universal di dunia: JavaScript! Untuk kamu yang belum tahu JavaScript (kadang disebut JS saja); ia adalah bahasa native untuk web yang ringan, interpreted, dan salah satu bahasa pemrograman paling populer yang digunakan oleh developer di seluruh dunia, untuk browser dan web. Bahkan beberapa aplikasi non-browser juga menggunakannya seperti Node.js, MongoDB, dan Apache CouchDB. Lebih lagi, JS adalah bahasa yang dinamis, berbasis prototype, multi-paradigm (mendukung gaya pemrograman berbasis objek, imperatif, dan deklaratif/fungsional). Mungkin kamu sudah tahu, bahwa JavaScript tidak sama dengan Java; namanya mirip tapi aslinya dibuat oleh pihak yang berbeda sehingga juga aturannya, ekosistem, sintaks, semantiknya berbeda. JavaScript pada dasarnya memberi interaksi (seperti, klik, input, animasi) pada halaman HTML (yang biasanya juga menggunakan CSS). Zaman sekarang JavaScript sudah dapat berdiri sendiri, yang dahulunya harus mengandalkan HTML dan CSS agar dapat bekerja dengan semestinya.

Stuktur Bahasa Program

Pada dasarnya, setiap bahasa pemrograman modern memiliki hal-hal yang tertulis berikut. Hal-hal ini memungkinkan programmer untuk menulis code (computer code) untuk membuat/membangun program yang dapat menyelesaikan masalah seperti menghitung angka, memproses data, membuat aplikasi web, dan banyak lainnya.

sintaks (syntax) dan pernyataan (statement): terkait bagaimana cara menulis code-nya
tipe data (data types) dan/atau struktur data (data structure)
variabel dan operator
kondisional (conditional) atau percabangan (branching)
kumpulan/koleksi data (collections) serta perulangan/iterasi (loop/iteration)
fungsi/metode (function/method)

Menjalankan Script JavaScript

Spesial untuk JavaScript, kita bisa menggunakan editor code biasa (code editor) untuk mengetikkan JavaScript bersamaan dengan HTML dan CSS; atau kita bisa langsung mengetikkan code ke dalam dev tools (terdapat di Chromium/Chrome dan Firefox) dengan membuka tab console (Ctrl+Shift+J atau Cmd+Opt+J di Chrome, Ctrl+Shift+K atau Cmd+Opt+K di Firefox). Artinya JavaScript bisa langsung digunakan dan ditulis di dalam browser ataupun editor code.

Kamu juga bisa gunakan extension browser untuk editor JavaScript yang lebih dari sekadar console di dev tools seperti Chrome Scratch JS, https://repl.it/languages/javascript, ataupun CodePen. Apapun tools yang dipakai, yang terpenting adalah kita dapat mengakses editor atau console yang akan menjalankan sintaks JavaScript.

Untuk saat ini, mari kita gunakan Repl.it.

Sintaks (Syntax) dan Pernyataan (Statement)

Sintaks itu seperti kosa kata (vocabulary) dan tata cara (grammar) pada bahasa pemrograman. Merupakan kata-kata dan perintah (command) pada bahasa yang juga merupakan instruksi untuk disusun menjadi sebuah program yang dibuat atau dikembangkan. Kita gunakan sintaks tertentu untuk membuat statement program, instruksi untuk dijalankan/dieksekusi oleh web browser, compiler, ataupun interpreter. Dalam JavaScript, ada berbagai sintaks yang polanya seperti alert();, console.log();, document.write();, dan masih banyak lagi. Kesimpulannya, sintaks dan statement adalah ekspresi (expression) apapun yang biasanya diikuti dengan titik koma (semicolon ;) ataupun hal-hal yang bisa dieksekusi oleh penjalan code (executor).

Menjalankan JavaScript dengan script JavaScript dan menampilkannya pada console

> "Hello!";
> document.write("Hello you too!");
> console.log("Hello, computer!");
> alert("Hello, human!");
> prompt("What is your name?");
> console.log("Multiline\n text!");

Bukalah Repl, dan cobalah kode di atas pada tab console

Data Type

Data Type, atau dalam bahasa Indonesia kita sebut sebagai Tipe Data, adalah sekumpulan data dengan nilai yang memiliki karakteristik berbeda. Beberapa contoh dari tipe data adalah:

Number: tipe data dengan nilai berupa angka
String: tipe data dengan nilai berupa kumpulan atau set dari beberapa karakter
Boolean: tipe data dengan nilai berupa true atau false.

Variable

Variable, atau dalam bahasa Indonesia kita sebut variabel, bisa memegang atau berisi hampir semua tipe data yang tersedia. Variabel memungkinkan kita untuk memuat atau menyimpan nilai data ke dalam sesuatu. Biasanya bersifat sementara saat program dijalankan.

var tampung = 5;
console.log(tampung); // 5

var angkaGanjil = 1;
var angkaGenap = 2;
console.log(angkaGanjil); // 1
console.log(angkaGenap); // 2

⚠️ Waspadai pemanggilan variable yang tidak bernilai!

var tampungBaru;
console.log(tampungBaru); // undefined

Operator

Operator adalah karakter yang merepresentasikan sebuah tindakan. Kita sering menemukan operator seperti + (tambah), x (kali), dan lain-lain. Namun, di dunia programming, operasi kali kita gantikan dengan simbol * (asterisk) dan operasi bagi dengan simbol / (slash)

Operator dibagi menjadi beberapa tipe:

Arithmetic Operator Arithmetic operator adalah operator yang melibatkan operasi matematika, seperti penambahan, pengurangan, perkalian, dan lain-lain.

Tambah (+)
Kurang (-)
Kali (*)
Bagi (/)
Modulus (%)

Bagi kamu yang baru kali ini mendengar tentang modulus, modulus adalah sisa bagi. Misalkan kita membagi 7 dengan 2. Hasil bagi nya adalah 3, namun sisa dari hasil baginya adalah 1. Bilangan yang memang habis dibagi, sisa hasil baginya adalah 0.

Contoh sederhana penggunaan modulus:

> 4 % 2 // 4 modulus 2
> 0 // bilangan 4 habis dibagi 2, sehingga 4 modulus 2 menghasilkan nilai 0
> 5 % 2 // 5 modulus 2
> 1 // bilangan 5 habis tidak habis dibagi 2, sehingga 5 modulus 2 menghasilkan nilai 1, sisa dari hasil pembagian

Assignment Operator Assignment operator adalah operator yang meng-"assign", atau memberikan nilai. Biasanya, assignment operator digunakan untuk memberikan nilai kepada sebuah variable.

var bilangan;
bilangan = 5; // Contoh assignment value 5 ke sebuah variable

Comparison Operator Comparison operator adalah operator yang membandingkan satu nilai dengan nilai lainnya. Hasil operasi yang melibatkan comparison operator adalah antara 'true' atau 'false'.

Equal operator (==)

var angka = 8;
console.log(angka == 8); // true
console.log(angka == 1); // false

Not Equal operator (!=)

var angka = 8;
console.log(angka != 7); // true
console.log(angka != 8); // false

Strict Equal operator (===)

Sedikit berbeda dengan equal operator, strict operator === mewajibkan nilai yang dibandingkan sama dan tipe data nya pun harus sama. Sedangkan pada ==, 8 dan "8" akan dianggap sama, karena itu menghasilkan nilai true.

var angkaBeda = "8";
console.log(angkaBeda == 8); // true
console.log(angkaBeda === 8); // false
console.log(angkaBeda === "8"); // true

Strict Not Equal operator (!==)

Sedikit berbeda dengan not equal operator, strict not equal operator !== mewajibkan nilai yang dibandingkan tidak sama dan tipe data nya pun harus sama. Sedangkan pada !=, 8 dan "8" akan dianggap sama, karena itu menghasilkan nilai false.

var angkaBeda = "8";
console.log(angkaBeda != 7); // true
console.log(angkaBeda !== 7); // true
console.log(angkaBeda !== 8); // true
console.log(angkaBeda !== "8"); // false

Less Than (<) / Greater Than (>)

operator selanjutnya adalah <, yaitu kurang dari sekian, dan >, yaitu lebih dari sekian.

var angka = 8;
console.log(angka > 7); // true
console.log(angka < 6); // false
console.log(angka <= 8); // true

Conditional Operator Conditional operator adalah operator yang akan mengevaluasi kebenaran dari nilai yang dikomputasi.

OR (||): akan menghasilkan nilai true jika salah satu premis mengandung true

console.log(true || true); // true
console.log(true || false); // true
console.log(true || false || false); // true
console.log(false || false); // false

AND (&&): akan menghasilkan nilai true jika kedua premis true.

console.log(true && true); // true
console.log(true && false); // false
console.log(false && false); // false
console.log(false && true && true); // false
console.log(true && true && true); // true

Conditional

Kondisional adalah sebuah metode dimana kode akan mengecek apakah sebuah premis benar atau tidak. Jika kondisi sesuai, maka kode dalam kondisional akan dijalankan.

Contoh Conditional 1 Menjalankan proses apabila statement kondisi true.

if(true) {
  console.log("Jalankan kode"); // baris kode ini akan di panggil
}

Contoh Conditional 2 Tidak menjalankan proses di dalam block/scope conditional apabila statement kondisi false.

if(false) {
  console.log("Jalankan kode"); // baris kode ini tidak di panggil
}

Contoh Conditional 3 Conditional dengan statement yang akan menghasilkan nilai true atau false

var tampung = 5;
if(tampung == 5) {
  console.log("angka yang ditampung adalah 5!");
}

Di dalam conditional, kita juga mengenal dengan yang dinamakan dengan branching. Branching, atau dalam bahasa indonesia berarti pencabangan, kita menjalankan potongan kode kita sesuai dengan "cabang" atau "jalur" yang memenuhi kondisi tersebut.

Contoh sangat sederhana-nya adalah sebuah kasus berikut ini:

Seorang anak diminta oleh ibunya untuk membeli telur di supermarket dan langsung pulang ke rumah. Jika di supermarket tersebut kehabisan telur, maka anak itu harus menelepon ibunya dan mengabari kalau supermarket kehabisan telur. Anak tersebut akan datang ke supermarket dan menemukan kondisi yang bercabang:

Jika di supermarket terdapat telur, anak itu akan membeli telur itu dan pulang, atau
Jika di supermarket tidak terdapat telur, anak itu akan menelepon ibunya.

pada JavaScript dan berbagai bahasa pemrograman, "jika tidak terdapat telur", atau bisa dibilang kondisi yang terjadi diluar "ekspektasi", terdapat else yang akan menjalankan proses lain jika if bernilai false. Contoh lebih jelas bisa dilihat dari contoh dibawah ini:

Contoh Conditional 4 Branching Sederhana (If-else)

var tampung = 5;
if(tampung == 5) {
  console.log("angka yang ditampung adalah 5!");
}
else {
  console.log("angka yang ditampung bukan 5!");
}

Tidak hanya sampai situ, kondisional bisa juga bersifat bertumpuk, atau biasanya disebut juga sebagai nested-if.

Contoh Conditional 5 Branching Bertumpuk Sederhana (If-else)

var tampung = 5;
if(tampung == 5) {
  console.log("angka yang ditampung adalah 5!");
}
else {
  if(tampung < 5) {
    console.log("angka yang ditampung bukan 5, tapi lebih kecil dari 5.");
  }
  else {
    console.log("angka yang ditampung bukan 5, tapi lebih besar dari 5.");
  }
}

Contoh di atas juga bisa dibuat dalam bentuk lain, yaitu else if. else-if adalah sebuah kondisional, dimana statement else if akan dijalankan apabila if tidak memenuhi kondisi / false, dan dijalankan sebelum statement else.

Contoh Conditional 5 Branching Bertumpuk Sederhana (If-else)

var tampung = 5;
if(tampung == 5) {
  console.log("angka yang ditampung adalah 5!");
}
else if(tampung < 5) {
    console.log("angka yang ditampung bukan 5, tapi lebih kecil dari 5.");
}
else {
  console.log("angka yang ditampung bukan 5, tapi lebih besar dari 5.");
}

Selain menggunakan if-else, ada satu cara lagi untuk melakukan conditional, yaitu switch-case. Switch case ini biasanya lebih sering digunakan untuk skenario yang melibatkan banyak kondisi atau branching yang banyak. Contoh sederhananya adalah dengan sebuah remote TV.

var buttonPushed = 1;
switch(buttonPushed) {
  case 1:   { console.log('matikan TV!'); break; }
  case 2:   { console.log('turunkan volume TV!'); break; }
  case 3:   { console.log('tingkatkan volume TV!'); break; }
  case 4:   { console.log('matikan suara TV!'); break; }
  default:  { console.log('Tidak terjadi apa-apa'); }
}

Seperti dilihat di kode di atas, switch akan mengambil nilai, dan case adalah skenario apa saja yang memungkinkan untuk menjalankan satu proses. Kamu mungkin menyadari ada 1 sintaks baru yang kamu temukan: break;. Break memungkinkan kamu untuk "berhenti" dari proses kondisional/switch-case, dengan tujuan agar proses tidak berlanjut ke case selanjutnya. untuk eksperimenmu, kamu bisa mencoba menghapus break dan perhatikan apa yang terjadi.

Kamu bisa eksperimen dan mencoba kode di atas disini

Loop/Iteration

Loop/Iteration adalah tindakan mengulang / merepetisi sebuah proses, dengan tujuan untuk mendapatkan deret hasil, atau dengan tujuan mendapatkan hasil tertentu dengan repetisi. Setiap proses repetisi ini disebut sebagai Iteration atau Looping.

Untuk melakukan looping/iteration, JavaScript menyediakan beberapa jenis iteration, yaitu:

while-loop
for-loop

While-loop

While-loop adalah iterasi yang akan mengulang sebuah proses dengan sebuah kondisi tertentu.

Berikut adalah cara atau struktur penulisan while-loop:

while([Kondisi]) { // Kondisi yang menentukan apakah program akan melakukan iterasi. Berupa boolean atau true/false.
  [Proses] // Merupakan proses yang akan dijalankan dalam satu iterasi
}

Pada while-loop, statement while akan mengambil sebuah nilai true atau false dari hasil kondisi yang diberikan. Apabila statement while mendapatkan nilai true, maka proses yang berada didalam curly bracket ({ }) akan dijalankan. Looping akan terus dilakukan selama kondisi while-loop masih true.

Untuk mencegah looping berjalan terus-menerus, dilakukan sebuah proses yang akan mengubah kondisi yang sedemikian rupa yang bertujuan untuk menghentikan looping dengan menghasilkan kondisi yang false.

Contoh Looping While-loop 1 Looping Angka 1-9 Sederhana

var flag = 1;
while(flag < 10) { // Loop akan terus berjalan selama nilai flag masih dibawah 10
  console.log('Iterasi ke-' + flag); // Menampilkan nilai flag pada iterasi tertentu
  flag++; // Mengubah nilai flag dengan menambahkan 1
}

Kamu bisa mencoba kode di atas disini

Contoh Looping While-loop 2 Looping Mengembalikan Angka Total

var deret = 5;
var jumlah = 0;
while(deret > 0) { // Loop akan terus berjalan selama nilai deret masih di atas 0
  jumlah += deret; // Menambahkan nilai variable jumlah dengan angka deret
  deret--; // Mengubah nilai deret dengan mengurangi 1
  console.log('Jumlah saat ini: ' + jumlah)
}

console.log(jumlah);

Kamu bisa mencoba kode di atas disini

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++) {
  console.log('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;
  console.log('Jumlah saat ini: ' + jumlah);
}

console.log('Jumlah terakhir: ' + jumlah);

Kamu bisa mencoba kode di atas disini

Contoh Looping For-loop 3 Looping Dengan Increment dan Decrement Lebih dari 1

for(var deret = 0; deret < 10; deret += 2) {
  console.log('Iterasi dengan Increment counter 2: ' + deret);
}

console.log('-------------------------------');

for(var deret = 15; deret > 0; deret -= 3) {
  console.log('Iterasi dengan Decrement counter : ' + deret);
}

Kamu bisa mencoba kode di atas disini

⚠️ 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
  console.log('Iterasi ke-' + flag);
}

Function/Method

Function adalah sebuah blok kode yang disusun sedemikian rupa untuk menjalankan sebuah tindakan. Blok kode ini dibuat untuk dapat bisa digunakan kembali. Cara atau bentuk penulisan function adalah sebagai berikut:

function nama_function(parameter 1, parameter 2, ...) {
  [Isi dari function berupa tindakan]
  return [expression];
}

Kode di atas tidak dapat kita copy-paste kan langsung, melainkan hanya sebuah bentuk penulisan function. Sebuah function, umumnya melakukan tindakan dan sebelum function berakhir, function bisa mengembalikan nilai dengan cara menambahkan sintaks return.

Kita juga dapat mengirimkan nilai ke dalam sebuah function dengan mencantumkannya ke dalam tanda kurung dalam penulisan function. Untuk mengirimkan nilai lebih dari satu, gunakan tanda , sebagai pemisah.

Contoh Function 1: Function sederhana tanpa return

function tampilkan() {
  console.log("halo!");
}

tampilkan();

Contoh Function 2: Function sederhana dengan return

function munculkanAngkaDua() {
  return 2
}

var tampung = munculkanAngkaDua();
console.log(tampung)

Contoh Function 3: Function dengan parameter

function kalikanDua(angka) {
  return angka * 2
}

var tampung = kalikanDua(2);
console.log(tampung)

Contoh Function 4: Pengiriman parameter lebih dari satu

function tampilkanAngka(angkaPertama, angkaKedua) {
  return angkaPertama + angkaKedua
}

console.log(tampilkanAngka(5,3))

Contoh Function 5: Inisialisasi parameter dengan nilai default

function tampilkanAngka(angka = 1) {
  return angka
}

console.log(tampilkanAngka(5)) // 5, sesuai dengan nilai parameter yang dikirim
console.log(tampilkanAngka()) // 1, karena default dari parameter adalah 1

⚠️ Waspadai pengiriman parameter yang UNDEFINED!

Kita juga dapat menampung function sebagai variable dengan sebuah bentuk function yang dinamakan Anonymous Function.

var fungsiPerkalian = function(angkaPertama, angkaKedua) {
  return angkaPertama * angkaKedua
}

console.log(fungsiPerkalian(2,4))

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

js-first-time.md

js-first-time.md

Halo JavaScript!

Pengenalan

Stuktur Bahasa Program

Menjalankan Script JavaScript

Sintaks (Syntax) dan Pernyataan (Statement)

Menjalankan JavaScript dengan script JavaScript dan menampilkannya pada console

Data Type

Variable

Operator

Conditional

Loop/Iteration

While-loop

For-loop

Function/Method

Files

js-first-time.md

Latest commit

History

js-first-time.md

File metadata and controls

Halo JavaScript!

Pengenalan

Stuktur Bahasa Program

Menjalankan Script JavaScript

Sintaks (Syntax) dan Pernyataan (Statement)

Menjalankan JavaScript dengan script JavaScript dan menampilkannya pada console

Data Type

Variable

Operator

Conditional

Loop/Iteration

While-loop

For-loop

Function/Method