Tutorial JavaScript Lengkap (Indonesia)

JavaScript merupakan salah satu unsur pembentukan website, digunakan untuk membuat website menjadi lebih interaktif

Photo by Artem Sapegin on Unsplash

Pengenalan

JavaScript merupakan bahasa pemrograman yang digunakan untuk membuat halaman website menjadi lebih interaktif.

Dalam pengembangan website, kita membutuhkan beberapa teknologi:

• HTML: Membuat kerangka atau struktur website.
• CSS: Memperindah tampilan website atau memberikan style
• JavaScript: Membuat website menjadi interaktif.

JavaScript bertujuan untuk memanipulasi HTML dan CSS agar menjadi lebih interaktif. JavaScript terintegrasi dengan HTML dan CSS sehingga kita dapat memanipulasi HTML dan CSS sesuai dengan keinginan kita.

Ada banyak yang bisa dilakukan dengan JavaScript sehingga membuat website menjadi lebih interaktif.

Kita bisa membuat gambar muncul ketika diklik, atau kita membuat navigasi dinamis yang bisa muncul dan hilang ketika diklik, atau mengubah warna background setiap waktu tertentu. Kita bisa membuat halaman website menjadi lebih interaktif menggunakan JavaScript.

Variabel

Variabel adalah wadah atau tempat untuk menyimpan nilai di dalam bahasa pemrograman.

Membuat variabel di JavaScript menggunakan keyword var atau let.

Membuat Variabel

Membuat variabel di JavaScript menggunakan keyword var atau let, kemudian diikuti dengan nama variabel.

Disarankan untuk membuat variabel menggunakan keyword let.

Berikut contoh membuat variabel nama:

let nama;

Memberikan Nilai pada Variabel

Variabel digunakan untuk menyimpan data atau nilai.

Menyimpan nilai ke dalam variabel menggunakan operator = lalu diikuti dengan nilai yang ingin diberikan.

Berikut contoh pemberian nilai pada variabel nama

let nama;
nama = "Aufa Billah";

Membuat variabel dan memberikan nilai

Kita dapat membuat variabel dan memberikan nilai sekaligus untuk mempersingkat penulisan.

Membuat variabel dengan keyword let lalu diikuti nama variabel, kemudian memberikan nilai dengan operator = lalu diikuti nilai yang ingin diberikan.

Berikut contoh pembuatan variabel dan pemberian nilai

let nama = "Aufa Billah";

Comment

Setiap bahasa pemrograman memiliki fitur comment.

Comment digunakan untuk membuat kode program tidak diproses.

Comment bertujuan untuk memberikan dokumentasi pada kode atau meng-nongaktifkan kode tertentu.

Comment di JavaScript terdiri dari 2 jenis:

• Comment 1 baris (singkat)
• Comment multi baris

Comment 1 Baris

Membuat comment 1 baris digunakan untuk membuat komentar singkat.

Untuk membuat comment 1 baris menggunakan karakter //.

Berikut contoh membuat comment 1 baris.

// let nama = "Aufa Billah";
let nama = "Aufa";

Comment Multi Baris

Membuat commment multi baris digunakan untuk membuat komentar yang panjang.

Comment multi baris bisa digunakan untuk membuat dokumentasi atau meng-nonaktifkan kode yang panjang seperti function, object, dll.

Untuk membuat comment multi baris bisa menggunakan karakter yang diawali dengan /* diikuti bagian yang ingin dikomentari dan ditutup dengan */

Berikut contoh membuat comment multi baris:

/*
function getNama(nama) {
 return nama;
}
*/
function getNama(nama) {
 return "Hai" + nama;
}

Tipe Data

Tipe Data merupakan jenis data yang terkandung dalam sebuah nilai.

Kita dapat menyimpan nilai apapun ke dalam sebuah variabel, namun kita perlu mengetahui jenis data apa saja yang ada di dalam JavaScript.

JavaScript membedakan tipe data ke dalam 2 jenis:

• primitive
• object

Tipe data primitive adalah tipe data sederhana yang tidak memiliki tambahan properti atau method.

Tipe data primitive terdiri dari:

• string
• number
• boolean
• undefined
• null

String

String merupakan tipe data yang berisi teks.

JavaScript menyediakan 2 cara untuk menuliskan tipe data string:

• menggunakan kutip satu
• menggunakan kutip dua
• menggunakan backtick (template literal)

Berikut contoh tipe data string:

let nama = "Aufa Billah";

Number

Number merupakan tipe data yang berisi angka.

Tipe data number bisa diisi dengan angka pecahan, desimal.

Berikut contoh tipe data number:

let ipk = 4;

Boolean

Boolean merupakan tipe data yang hanya memiliki 2 nilai yaitu true dan false.

Tipe data boolean sering digunakan untuk mengontrol alur logika pemrograman seperti percabangan dan perulangan.

Berikut contoh tipe data boolean

let status = true;

Undefined

Undefined merupakan tipe data yang biasanya dihasilkan oleh JavaScript karena variabel belum diberikan nilai.

Tipe data undefined terjadi karena kita belum memberikan nilai pada variabel atau kita sendiri yang memberikan undefined pada variabel.

Berikut contoh tipe data undefined:

let umur;

Null

Null adalah tipe data di mana data kosong atau tidak ada (berbeda dengan undefined).

Biasanya tipe data null diisi oleh programmer secara sengaja

Berikut contoh tipe data null:

let params = null;

Operator

Operator di dalam bahasa pemrograman digunakan untuk berbagai keperluan.

Dalam JavaScript terdapat banyak operator yang memiliki tujuan tertentu.

Operator di dalam JavaScript terdiri dari:

• Operator Aritmatika
• Operator Increment dan Decrement
• Operator Assignment
• Operator Perbandingan
• Operator Logika

Operator Aritmatika

Operator Aritmatika atau yang dikenal sebagai operator matematika adalah operator dasar yang digunakan untuk melakukan penjumlahan di dalam javascript.

Operator Aritmatika terdiri dari operator:

• +: penambahan
• -: pengurangan
• *: perkalian
• /: pembagian
• %: modulus

Berikut contoh penggunaan operator aritmatika:

let angka1 = 20;
let angka2 = 5;
let hasilPenambahan = angka1 + angka2;
let hasilpengurangan = angka1 - angka2;
let hasilPerkalian = angka1 * angka2;
let hasilPembagian = angka1 / angka2;
let hasilModulus = angka1 % angka2;

Operator Increment dan Decrement

Operator increment digunakan untuk menaikkan 1 angka, sedangkan operator decrement digunakan untuk menurunkan 1 angka.

Berikut contoh penggunaan operator increment:

let angka1 = 5;
angka1 = angka1 + 1;
let angka2 = 5;
angka2++;

Berikut contoh penggunaan operator decrement:

let angka1 = 5;
angka1 = angka1 - 1;
let angka2 = 5;
angka2--;

Operator Assignment

Operator assignment digunakan untuk memasukkan (assign) nilai ke dalam variabel.

Operator assignment menggunakan tanda sama dengan =.

Selain itu terdapat operator assignment gabungan:

• +=
• -=
• *=
• /=
• %=

Berikut contoh penggunaan operator assignment:

let a = 10;
let b = 5;
let hasil = a + b;

Operator Perbandingan

Operator perbandingan digunakan untuk membandingkan 2 buah operand.

Contoh, kita ingin membandingkan apakah 5 > 10 atau 10 != 20.

Hasil akhir dari perbandingan ini berupa nilai true or false.

Operator perbandingan terdiri dari:

• ==: sama dengan
• !=: tidak sama dengan
• >: lebih besar dari
• <: lebih kecil dari
• >=: lebih besar sama dengan
• <=: lebih kecil sama dengan

Berikut contoh operator perbandingan:

let a = 5 == 4;
let b = 10 != 20;
let c = 10 > 5;
let d = 20 < 30;

Operator Logika

Operator logika digunakan untuk membandingkan 2 buah kondisi logika, yaitu logika true dan false.

Hasil akhir dari perbandingan ini berupa nilai true or false.

Operator logika terdiri dari:

• &&: bernilai true jika kedua logika bernilai true
• ||: bernilai true jika salah satu logika bernilai true
• !: bernilai true jika logika bernilai false (negasi)

Berikut contoh operator logika:

let a = true && true;
let b = true || false;
let c = !false;

Percabangan

Setiap bahasa pemrograman memiliki konsep percabangan.

Apa yang dimaksud dengan percabangan? Mari kita lihat definisinya terlebih dahuluu.

Percabangan digunakan untuk menjalankan aksi yang berdasarkan kondisi tertentu.

Mari kita lihat ilustrasi sederhananya:

Terdapat suatu ulangan di dalam kelas, kemudian dosen memberikan ketentuan nilai sebagai berikut:

• Jika nilai siswa di atas 75 maka siswa dianggap lulus pada mata pelajaran tersebut
• Jika nilai siswa di bawah 75 maka siswa dianggap tidak lulus sehingga harus melakukan remedial

Pada kasus di atas, kita bisa menyimpulkan bahwa jika nilai di atas 75 maka dianggap lulus, namun jika di bawah 75 maka dianggap tidak lulus.

Ilustrasi di atas dapat kita gambarkan atau kita tuliskan ke dalam pemrograman. Jika kita membuat suatu aplikasi di mana nanti menampilkan daftar siswa yang lulus dan tidak lulus, maka kita bisa memanfaatkan konsep percabangan ini.

Konsep percabangan ini sangat penting untuk dipahami oleh siapapun, mari kita bahas konsep percabangan pada pemrograman.

if Statement

Statement if digunakan untuk membuat satu buat kondisi, di mana jika kondisi terpenuhi maka kode yang ada di dalam blok if akan dijalankan.

Mari kita lihat contohnya:

Jika nilai di atas 70 maka siswa dianggap lulus.

Untuk menuliskan kondisi if sebagai berikut

if (kondisi) {
 // kode yang akan dijalankan
}

Pada kode di atas, untuk menuliskan percabangan if, kita menuliskan keyword if. Lalu diikuti tanda kurung yang berisi kondisi yang akan dicek, jika kondisi bernilai true maka kode yang berada di dalam kurung kurawal akan dijalankan.

Mari kita lihat contohnya:

let nilai = 80;
if (nilai > 75) {
 console.log("Anda lulus pada mata pelajaran Matematika");
}

Penjelasan:

Pada kode di atas, kita membuat variabel nilai yang berisi 80. Kemudian di dalam statement if kita mengecek apakah variabel nilai lebih besar dari 75? karena bernilai true maka kode yang akan didalam blok if akan dijalankan.

Jika kondisi bernilai false, make kode yang di dalam blok if tidak akan dijalankan sehingga tidak akan menampilkan apapun.

Lalu bagaimana caranya jika ingin menambahkan kondisi baru? Jika seandainya nilai di bawah 75 maka menampilkan hasil tidak lulus? Kita dapat menggunakan statement else.

else Statement

Statement else akan dijalankan ketika kondisi pada statement if tidak terpenuhi atau berniali false.

Statement else adalah kondisi akhir jika seandainya kondisi sebelumnya tidak ada yang bernilai true.

Kita dapat menggunakan else pada kasus berikut:

Jika nilai di atas 75 maka siswa dianggap lulus, namun apabila di bawah 75 maka dianggap tidak lulus.

Untuk menuliskan statement else sebagai berikut:

else {
 // kode yang akan dijalankan
}

Pada statement else kita tidak perlu menuliskan kondisi pengecekan, mengapa? karena statement else adalah kondisi terakhir yang akan dijalankan jika seandainya kondisi sebelumnya tidak terpenuhi semuanya sehingga statement else tidak membutuhkan pengecekan kondisi.

Mari kita lihat contohnya sebelumnya dan menggabungkan statement else

let nilai = 70;
if (nilai > 75) {
 console.log("Anda lulus pada mata pelajaran Matematika");
}
else {
 console.log("Anda tidak lulus pada mata pelajaran Matematika, anda harus melakukan remedial);
}

Pada kode di atas, kita membuat variabel nilai yang berisi 70. Selanjutnya masuk pada statement if, pada bagian ini akan dilakukan pengecekan kondisi apakah nilai > 75? maka hasilnya adalah false sehingga kode yang berada di dalam blok if tidak akan dieksekusi.

Karena kondisi pada statement if bernilai false, maka kondisi terakhir yang dijalankan adalah yang berada di dalam statement else sehingga akan menampilkan hasil tidak lulus.

Selanjutnya, bagaimana jika kita ingin membuat kondisi yang lebih dari 2? Seperti contoh berikut:

• Jika nilai di bawah 70 maka mendapatkan C
• Jika nilai di atas 80 maka mendapatkan B
• Jika nilai di atas 90 maka mendapatkan A

Kita dapat membuat banyak kondisi menggunakan statement else if.

else if Statement

Kita dapat membuat kondisi yang banyak atau lebih dari 2.

Statement else if digunakan untuk membuat kondisi yang lebih dari satu.

Kita dapat memanfaatkan statement else if pada kasus berikut:

• Jika nilai di atas 90 maka mendapatkan A
• Jika nilai di atas 80 maka mendapatkan B
• Jika nilai di atas 70 maka mendapatkan C
• Jika di bawah 70 maka mendapatkan D

Mari kita buat contohnya menggunakan penggabungan statement, if, else if dan else:

let nilai = 85;
if (nilai > 90) {
 console.log('Nilai Anda A');
}
else if (nilai > 80) {
 console.log('Nilai Anda B');
}
else if (nilai > 70) {
 console.log('Nilai Anda C');
}
else {
 console.log('Nilai Anda D');
}

Pada kode di atas, kita membuat variabel nilai yang berisi 85. Selanjutnya masuk ke pengecekan if, apakah nilai > 90? maka hasilnya adalah false sehingga kode blok yang di dalam if tidak dieksekusi.

Selanjutnya masuk ke pengecekan else if, apakah nilai > 80? maka hasilnya adalah true sehingga kode blok yang di dalam else if kedua akan dieksekusi sehingga tampilanya adalah “Nilai Anda B”.

Karena statement else if sudah bernilai true, maka pengecekan selanjutnya tidak akan dijalankan atau alias berhenti sehingga tidak dilakukan pengecekan kondisi kembali.

Kita dapat memanfaatkan percabangan untuk membuat pengecekan kondisi pada program kita, seperti contoh kasus di atas untuk menentukan nilai, kemudian untuk mengecek apakah username dan password sudah benar, atau menentukan apakah yang login user atau admin.

Konsep percabangan adalah konsep yang penting untuk dipahami, karena dalam membuat program kita akan sering menentukan statement mana yang akan dijalani ketika kondisi terpenuhi.

Perulangan

Perulangan merupakan salah satu konsep terpenting di dalam pemrograman, hampir semua bahasa pemrograman mempunyai konsep perulangan.

Sederhananya, perulangan digunakan untuk melakukan sesuatu berulang kali dengan cara yang cepat dan mudah.

Sebagai contoh, bagaimana caranya mencetak angka 1–10 menggunakan JavaScript?

Kita bisa mencetak menggunakan console.log() dengan menuliskan console.log() 10 baris.

Namun bagaimana jika kita ingin mencetak ribuan baris? atau melakukan perulangan yang lebih kompleks lagi?

Maka kita tidak dapat menuliskan secara manual, melainkan kita harus menuliskannya menggunakan konsep perulangan.

Terdapat berbaganis jenis perulangan di dalam JavaScript, namun pada dasarnya tetap melakukan hal yang sama yaitu melakukan sesuatu berulang kali.

Berikut berbagai perulangan yang ada di JavaScript:

• for
• do while
• while

for Statement

for merupakan salah satu statement yang digunakan untuk melakukan perulangan.

for sering digunakan untuk melakukan perulangan.

mari kita lihat syntax dari for:

for (nilai awal; kondisi; increment;) {
 // statement
}

pada kode di atas, untuk melakukan perulangan kita harus menuliskan statement for.

selanjutnya terdapat nilai awal, nilai awal digunakan untuk menentukan nilai awal dari sebuah perulangan.

selanjutnya kondisi, kondisi ini digunakan sebagai penentu kapan perulangan berakhir. jika kondisi bernilai true maka perulangan akan terus dilakukan sampai kondisi bernilai false.

terakhir adalah increment, increment digunakan untuk menaikkan nilai awal supaya kondisi bisa berakhir atau selesai.

mari kita lihat contoh sederhana:

• kita ingin mencetak kalimat “Selamat Pagi”
• kalimat tersebut dicetak sebanyak sepuluh kali

Selanjutnya mari kita buat menggunakan perulangan:

for (let i = 0; i < 9; i++) {
 console.log('Selamat Pagi');
}

Pada kode di atas, kita melakukan perulangan menggunakan statement for.

selanjutnya, kita membuat nilai awal di mana nilai awal i adalah 0;

selanjutnya, kita membuat kondisi, apakah i < 9? karena i bernilai 0 dan lebih kecil dari 9 maka bernilai true sehingga kode statement yang berada di dalam blok for akan dicetak.

selanjutnya, dilakukan increment atau penambahan pada variabel i sehingga i sekarang bernilai 1.

Sampai di sini, satu perulangan sudah selesai dijalankan, selanjutnya perulangan akan langsung masuk ke bagian kondisi bukan pada nilai awal kembali.

selanjutnya, kode program akan kembali mengecek kondisi, apakah i < ?, karena i sekarang bernilai 1 dan lebih kecil dari 9 sehingga kode statement yang berada di dalam blok for akan dicetak.

selanjutnya, dilakukan increment atau penambahan pada variabel i sehingga i sekarang bernilai 2.

Sampai di sini, perulangan akan terus dilakukan sampai nilai i bernilai 9.

Selanjutnya dilakukan pengecekan kondisi apakah i < 9? karena menghasilkan tidak (false) maka perulangan selesai dilakukan.

Sehingga kalimat ‘Selamat Pagi’ akan tercetak sebanyak 10 kali.

Kita sudah menggunakan for untuk melakukan perulangan, ada banyak hal yang bisa dilakukan dengan perulangan. Mulai dari hal yang sederhana seperti mencetak angka 1–100 atau melakukan hal yang kompleks seperti membuat segitiga menggunakan perulangan.

while Statement

Perulangan selanjutnya adalah menggunakan while.

Statement while sama seperti statement for loop, sama-sama digunakan untuk melakukan perulangan.

Statement while akan menjalankan statement selama kondisi bernilai true.

Berikut sintaks statement whilte:

while (condition) {
 // statement
}

Pada statement while kita hanya memeriksa apakah kondisi bernilai true atau tidak, sedangkan untuk mendefinisikan nilai awal dan increment tidak dilakukan di dalam statement while.

Untuk mendefinisikan nilai awal, kita lakukan di luar blok while. Sedangkan untuk increment dilakukan di dalam blok while.

Berikut penggunaan contoh sebelumnya dengan menggunakan while

let i = 0;
while (i < 9) {
 console.log('Selamat Pagi');
 i++;
}

Penjelasan:

Pada kode di atas, kita melakukan perulangan menggunakan while.

Pada baris pertama, kita membuat variabel i dengan nilai 0.

Selanjutnya kita masuk ke statement while, pada baris ini akan dilakukan pengecekan kondisi apakah i yang bernilai 0 lebih kecil dari 9? Karena bernilai true maka kode masuk ke dalam blok while.

Pada baris selanjutnya, akan dicetak tulisan selamat pagi.

Pada baris terakhir akan dilakukan increment pada nilai i satu kali sehingga i bernilai 1.

Sampai di sini statement while sudah selesai dieksusi sampai akhir baris.

Selanjutnya program masuk ke pengecekan kondisi while, apakah i yang bernilai 1 lebih kecil dari 9? karena bernilai true maka program masuk ke dalam blok while.

Selanjutnya akan dicetak tulisan selamat pagi.

Lalu pada baris selanjutnya akan dilakukan increment pada nilai i sehingga i bernilai 2.

Perulangan while akan terus berjalan hingga nilai i bernilai 9. Selanjutnya dilakukan pengecekan kondisi apakah i yang bernilai 9 lebih kecil dari 9? karena bernilai false maka perulangan selesai dijalankan alias perulagan keluar dari statement while.

Perulangan menggunakan while dan for terlihat sangat mirip dari tujuannya yaitu untuk melakukan perulangan. Hanya saja berbeda dari caranya dalam melakukan pendefinisian nilai awal dan increment.

Terdapat beberapa kondisi di mana kita menggunakan while untuk melakukan perulangan, di mana kita tidak tahu ada berapa banyak perulangan yang akan dilakukan sehingga kita cukup memeriksa kondisinya saja, jika kondisinya true maka jalankan perulangan terus menerus sampai kondisinya bernilai false. Maka dengan menggunakan while kita tidak perlu mendefinisikan nilai awal dan increment, kita cukup mengecek kondisinya saja.

Function

Function adalah salah satu elemen dasar yang ada di JavaScript. Function atau fungsi merupakan sekumpulan perintah yang bertujuan untuk melakukan aksi atau tugas tertentu.

Untuk menggunakan function, kita harus mendefinisikannya terlebih dahulu. Function dapat memiliki parameter atau argumen, dan juga dapat memiliki return value.

Pembahasan parameter dan return akan dibahas pada bagian selanjutnya.

Contoh sederhana function adalah kita ingin membuat function yang menjumlahkan dua buah angka, function tersebut bisa kita namakan penjumlahan.

Dengan menggunakan function, maka kita bisa meminimalisir penulisan kode yang berulang-ulang.

Membuat Function

Membuat function di dalam JavaScript menggunakan keyowrd function, lalu diikuti dengan:

• Nama function
• Parameter (opsional)
• Statement

Berikut syntax function:

function namaFungsi (parameter) {
 // statement
}

Pada kode di atas, untuk membuat function kita menggunakan keyword function. Setelah itu kita membuat nama fungsinya kemudian diikuti dengan tanda kurung untuk membuat parameter. Selanjutnya kita menggunakan kurung kurawal untuk menandakan blok dari function yang di dalamnya terdapat statement yang bisa kita jalankan.

Selanjutnya kita akan membuat function sederhana yang digunakan untuk menampilkan kalimat selamat datang:

function salam() {
 console.log('Selamat Datang');
}

Pada kode di atas, kita membuat function menggunakan keyword function lalu diikuti dengan membuat nama function yaitu salam. Selanjutnya setelah nama function kita menggunakan tanda kurung untuk membuat parameter namun pada kasus ini kita tidak memerlukan parameter. Selanjutnya kita menggunakan kurung kurawal untuk menandakan blok dari function tersebut. Di dalam function tersebut kita menjalankan statement console.log yang menampilkan ucapan Selamat Datang.

Memanggil Function

Kita telah membuat function, namun kita belum menjalankan function tersebut.

Bagaimana caranya menjalankan function tersebut? kita bisa memanggil nama function tersebut.

Kita buat kembali function salam:

function salam() {
 console.log('Selamat Datang');
}

Selanjutnya, untuk menjalankan function tersebut kita harus memanggil nama function tersebut:

salam();

Pemanggilan function harus diikuti dengan tanda kurung. Jika pada function yang kita buat membutuhkan parameter, maka kita wajib mengirimkan parameter ketika memanggil function tersebut.

Pembahasan mengenai parameter akan dibahas pada bagian selanjutnya.

Function Parameter

Kita bisa mengirimkan nilai ke dalam function dengan menggunakan parameter (biasa disebut juga dengan argument).

Parameter dikirimkan ke dalam function agar data yang dikirimkan dapat digunakan di dalam function sendiri.

Dengan menggunakan parameter, maka function bersifat dinamis karena bisa menampilkan data sesuai data yang dikirimkan.

Sebagai contoh, kita akan membuat fungsi yang akan menerima parameter nama dan, waktu.

function salam(waktu, nama) {
 console.log(`Selamat ${waktu}, Salam kenal ${nama}`);
}
salam('malam', 'aufa');

Pada kode di atas, kita membuat function salam dengan menerima 2 buah parameter:

• waktu: menerima parameter waktu
• nama: menerima parameter nama

Kemudian, pada baris selanjutnya kita memanggil function salam dengan mengirimkan data ke parameter waktu dan nama:

• parameter waktu menerima nilai malam
• parameter nama menerima nilai aufa

Di dalam function tersebut, kita mencetak nilai yang ada di dalam parameter sehingga yang tampil adalah Selamat Malam, Salam Kenal Aufa.

Dengan adanya parameter, kita bisa mengirimkan data secara dinamis sehingg hasil yang ditampilkan pun dinamis sesuai dengan data yang kita kirimkan.

Penggunaan parameter sendiri nantinya sangat banyak digunakan dan diimplementasikan, seperti membuat fungsi penjumlahan di mana kita menerima 2 buah parameter yaitu angka pertama dan angka kedua kemudian kita menjumlahkan kedua angka tersebut.

Return Value

Sebuah fungsi dapat mengembalikan nilai kembalian atau disebut return value.

Return value merupakan nilai yang dikembalikan setelah kita selesai menjalankan suatu fungsi. Biasanya nilai kembalian ini akan digunakan lagi untuk keperluan selanjutnya.

Untuk mengembalikan nilai pada sebuah fungsi, kita menggunakan keyword return.

Sebagai contoh, kita ingin membuat fungsi yang menjumlahkan dua buah angka, kemudian fungsi tersebut mengembalikan hasil dari penjumlahan dua buah angka tersebut

function sum(a, b) {
 return a + b;
}
let result = sum(5, 10);
console.log(result);

Pada kode di atas, kita membuat fungsi yang menerima 2 buah parameter. Di dalam fungsi tersebut terdapat keyword return yang akan mengembalikan nilai hasil dari penjumlahan variabel a dan b.

pada baris selanjutnya, terdapat variabel result yang menyimpan hasil dari function sum. Dengan menggunakan keyword return, maka nilai akan dikembalikan kepada yang memanggilnya. Pada contoh di atas, kita memanggil function sum, maka function sum akan mengembalikan hasil penjumlahan dan menyimpannya ke variabel result.

Keyword return juga akan menghentikan baris programan yang ada di dalam function. Jika di dalam function ditemukan keyword return maka program akan keluar dari function sehingga kode yang berada di bawah return yang masih berada di dalam function tidak akan dijalankan.

Array

Array merupakan sebuah variabel yang dapat menampung banyak nilai. Mengapa kita membutuhkan array? Mari kit lihat contoh sederhananya.

Jika kita terdapat 5 nama makanan, kemudian kita ingin menyimpan nama makanan tersebut ke variabel, kita dapat melakukannya seperti ini:

const makanan1 = "Nasi Goreng";
const makanan2 = "Mie Goreng";
const makanan3 = "Sate Ayam";
const makanan4 = "Ayam Goreng";
const makanan5 = "Soto Kambing";

Kita dapat menyimpan 5 makanan tersebut ke 5 variabel yang berbeda, namun bagaimana jika terdapat 100–1000 makanan? kita harus membuat 1000 variabel tentunya.

Maka oleh karena itu kita dapat memanfaatkan variabel, di mana kita bisa menyimpan banyak nilai ke dalam satu variabel saja.

Dengan array, kita bisa menyimpan banyak nama makanan ke dalam satu variabel saja.

Membuat Array

Membuat array di JavaScript menggunakan kurung siku `[]`.

Berikut syntax membuat array:

const makanan = [];

Kurung siku menandakan bahwa variabel tersebut merupakan sebuah array.

Kemudian, untuk mengisi nilainya seperti kita mengisi nilai pada variabel biasa. Hanya saja di dalam array untuk membuat banyak nilai harus dipisahkan menggunakan koma.

Nilai yang dapat disimpan di dalam array bisa beruba tipe data apa saja seperti: string, integer, boolean, dll.

Berikut contoh membuat variabel array makanan yang menyimpan banyak nilai atau nama makanan:

const makanan = ["Nasi Goreng", "Mie Goreng", "Sate Ayam", "Ayam Goreng", "Soto Kambing"];

Pada kode di atas, kita membuat array makanan yang di dalamnya berisi nilai-nilai yaitu nama-nama makanan. Setiap nama makanan menggunakan kutip dua karena tipe datanya berupa string, kemudian setiap nilai antara satu dengan yang lain dipisahkan menggunakan tanda koma.

Nilai-nilai yang terdapat pada array disebut juga sebagai element.

Mengakses Element Array

Bagaimana caranya mengakses element yang ada pada array?

Mari kita lihat contohnya terlebih dahulu:

const makanan = ["Nasi Goreng", "Mie Goreng", "Sate Ayam", "Ayam Goreng", "Soto Kambing"];

Kita ingin menampilkan element kedua yaitu Mie Goreng, bagaimana caraya?

Sebelum kita mengakses elementnya, kita harus mengetahui terlebih dahulu index dan element pada array:

• Element: merupakan nilai-nilai yang ada pada array, jika kita lihat ada 5 buah element pada array makanan.
• index: posisi dari element tersebut, ditandai dengan angka dan dimulai dari 0

Jika kita ingin menampilkan nilai Mie Goreng maka kita harus mengetahui index dari mie goreng. Jika kita hitung dari 0, maka Mie Goreng berada pada index ke 1.

Kemudian untuk mengakses element array dengan memanggil nama array-nya lalu diikuti dengan kurung kurawal yang di dalamnya terdapat index array.

Berikut berikut contoh mengakses element Mie Goreng

const makanan = ["Nasi Goreng", "Mie Goreng", "Sate Ayam", "Ayam Goreng", "Soto Kambing"];
console.log(makanan[1]);

Pada kode di atas, kita mengakses array makanan yang berada pada index ke 1 sehingga yang tampil adalah Mie Goreng. Hal ini dikarenakan index array dimulai dari 0, sehingga ketika kita mengakses index ke 1 maka yang muncul adalah element ke 2 pada array makanan. Jadi untuk mengakses element pada array harus melalui index.

Mengubah Element Array

Kita dapat mengubah nilai atau element pada array. Untuk mengubah element pada array caranya seperti mengubah nilai variabel biasa, hanya saja kita perlu mengakses element ke berapa melalui index.

Mari kita lihat kembali contoh array makanan:

const makanan = ["Nasi Goreng", "Mie Goreng", "Sate Ayam", "Ayam Goreng", "Soto Kambing"];

Kita ingin mengubah element kedua yaitu Mie Goreng menjadi nilai baru. Caranya dengan mengakses element tersebut menggunakan index lalu kita isi dengan nilai baru

const makanan = ["Nasi Goreng", "Mie Goreng", "Sate Ayam", "Ayam Goreng", "Soto Kambing"];
const makanan[1] = "Mie Kuah";
console.log(makanan);

Pada kode di atas, kita mengakses element kedua (index ke 1) kemudian kita memberikan nilai baru pada element kedua sehingga elemen kedua memiliki nilai baru yaitu Mie Kuah.

Property Length

Array memiliki property dan method default yang dapat kita gunakan. Salah satunya adalah property length.

Property length digunakan untuk mengetahui panjang element dari array.

Mari kita lihat contohnya:

const makanan = ["Nasi Goreng", "Mie Goreng", "Sate Ayam", "Ayam Goreng", "Soto Kambing"];
console.log(makanan.length);

Pada kode di atas, kita mengakses property length dari array makanan, kemudian hasilnya adalah 5. Property ini digunakan untuk mengetahui panjang element dari array.

Property length ini kita bisa manfaatkan di dalam looping untuk menampilkan isi dari array.

Looping Array

Kita dapat menggunakan for loop untuk menampilkan semua element yang ada pada array.

Mari kita lihat contohnya terlebih dahulu:

const makanan = ["Nasi Goreng", "Mie Goreng", "Sate Ayam", "Ayam Goreng", "Soto Kambing"];

Bagaimana caranya menampilkan semua element yang ada pada array?

Mungkin kita bisa mengakses element-nya satu per satu secara manual, namun bagaimana jika terdapat banyak element array? Kita bisa memanfaatkan looping untuk menampilkan semua elemen pada array

Mari kita lihat contoh menampilkan semua elemen array menggunakan looping

const makanan = ["Nasi Goreng", "Mie Goreng", "Sate Ayam", "Ayam Goreng", "Soto Kambing"];
for (let i = 0; i < makanan.length; i++) {
 console.log(makanan[i]);
}

Pada kode di atas, pada baris pertama kita membuat array makanan.

Selanjutnya, kita menggunakan for untuk menampilkan semua element pada array.

Di dalam for, kita mendefinisikan nilai awal yaitu 0, selanjutnya kita memberikan batasan looping sebanyak panjang dari element array tersebut. Di sini kita bisa memanfaatkan property length untuk membatasi jumlah looping.

Selanjutnya, di dalam kode blok for, kita mengakses array melalui index yang sesuai dengan nilai looping yang sedang dijalankan.

Di saat nilai i bernilai 0, maka kita mengakses makanan pada index ke 0, sampai seterusnya sehingga nilai i lebih kecil dari 5.