Skip to main content

4. Pemrograman Dasar dan Konsep Javascript.html

Quick Intro to JS Browser BOM. Index | by GP Lee | Web Developers ...

Gambar 1. Pengenalan JavaScript.

JavaScript adalah bahasa pemrograman yang sangat populer dan banyak digunakan dalam pengembangan situs web. Sebagian besar situs web yang ada saat ini menggunakan JavaScript untuk memberikan interaktivitas dan fungsionalitas yang lebih baik kepada pengguna. Selain itu, JavaScript juga memiliki beragam framework dan library yang memudahkan pengembangan aplikasi web. Dengan memahami dasar-dasar JavaScript, kalian akan lebih mudah mempelajari dan menggunakan berbagai framework dan library tersebut.

JavaScript merupakan salah satu bahasa pemrograman yang cukup bersejarah, karena ia sudah hadir sejak tahun 1995. Pada awalnya, JavaScript bernama Mocca, kemudian berganti nama menjadi LiveScript sebelum akhirnya diberi nama JavaScript setelah disetujui oleh standar EcmaScript. EcmaScript adalah standar yang ditetapkan oleh organisasi European Computer Manufacturers Association (ECMA) untuk mengatur sintaks, fitur, dan perilaku JavaScript. Versi EcmaScript yang paling banyak digunakan adalah ES6, yang dirilis pada tahun 2015. ES6 atau dikenal juga sebagai ECMAScript 2015 menghadirkan banyak perubahan dan peningkatan signifikan dalam bahasa JavaScript.

JavaScript juga merupakan jenis bahasa scripting, yang berarti ia digunakan sebagai bagian dari program yang lebih besar, seperti web browser. Artinya, JavaScript hanya dapat digunakan dalam program tersebut. Selain itu, JavaScript juga merupakan bahasa yang ditulis secara dinamis (dynamically typed). Hal ini berarti bahwa satu variabel dalam program JavaScript dapat berisi tipe data yang berbeda. Anda dapat mengisi variabel dengan angka dan kemudian mengubahnya menjadi huruf tanpa mengalami kesalahan.

ilustrasi interpreter

Gambar 2. Penjelasan interpreter.

Untuk menjalankan JavaScript, diperlukan interpreter. Interpreter ini akan menerjemahkan kode JavaScript ke dalam bahasa yang dapat dimengerti oleh komputer agar dapat dijalankan. Penerjemahan ini dilakukan secara otomatis oleh web browser saat halaman web yang mengandung kode JavaScript diakses.

Sebelum kita melangkah ke dalam dunia coding JavaScript yang menarik, ada beberapa konsep dasar yang penting untuk dipahami. Mari kita bahas!

  1. Aturan Penulisan

Ada beberapa konsep dasar yang perlu kita patuhi dalam penulisan kode javascript. Yaitu:

a.      Whitespace

A picture containing background pattern

Description automatically generated

Gambar 3. Penggunaan whitespace.

Whitespace mengacu pada area kosong yang terdiri dari karakter-karakter tidak terlihat seperti spasi, tab, atau enter dalam JavaScript atau bisa dilihat pada gambar 3.. Whitespace ini memiliki peran penting dalam menjaga tata letak kode agar terlihat lebih rapi dan teratur. Penggunaan whitespace tidak akan mempengaruhi ukuran file JavaScript secara signifikan, sehingga tidak perlu khawatir akan berdampak pada kinerja website. Selain itu, saat browser menjalankan JavaScript, Whitespace akan diabaikan, sehingga tidak mempengaruhi eksekusi kode secara langsung.


b.      Line Length

A picture containing background pattern

Description automatically generated

Gambar 4. Penggunaan line length.

Line length mengacu pada jumlah karakter dalam satu baris kode JavaScript. Untuk menciptakan pengalaman coding JavaScript yang lebih nyaman, idealnya satu baris kode sebaiknya tidak melebihi 80 karakter. Jika sebuah perintah JavaScript terlalu panjang untuk muat dalam satu baris, sebaiknya potong perintah tersebut menjadi dua baris. Disarankan untuk memotong perintah setelah operator (+, -, =) atau koma (,) atau bisa dilihat pada gambar 4.


c.       Comments

Gambar 5. Penggunaan komentar.

Komentar membantu kita mencatat tujuan dari satu atau beberapa baris kode. Komentar dalam JavaScript memainkan peran penting dalam menjelaskan maksud atau fungsi dari kode kita. Dengan menggunakan komentar yang baik, kita bisa memberikan konteks yang berharga kepada diri sendiri dan juga kepada orang lain yang membaca kode tersebut. Komentar satu baris dituliskan dengan menambahkan // pada awal penulisan komentar. Kita juga dapat menuliskan komentar multi baris dengan menambahkan /* pada awal komentar dan ditutup dengan */ pada akhir komentar seperti pada gambar 5.


d.      Case Sensitive

Gambar 6. Penggunaan case sensitive.

Case Sensitive membedakan penulisan antara huruf besar dan huruf kecil. Misalnya, sebuah variabel bernama 'helloworld' dianggap berbeda dengan 'HelloWorld' seperti gambar 6. Untuk itu, sangat penting bagi kita untuk tetap konsisten dalam menulis kode. Walaupun terlihat seperti perbedaan kecil, kesalahan penulisan dapat menyebabkan masalah pada website kalian.


e.      Statement Rules

Gambar 7. Penggunaan statement rules.

Dalam dunia pemrograman, sebuah pernyataan (statement) dapat dianggap sebagai instruksi atau langkah-langkah kerja yang harus dilakukan oleh program. Aturan pertama yang perlu diketahui adalah simple statement. Simple statement adalah pernyataan sederhana yang biasanya terdiri dari satu baris kode dan diakhiri dengan tanda titik koma (;). Namun, perlu diketahui bahwa penggunaan tanda titik koma (;) pada akhir setiap simple statement bersifat opsional dalam JavaScript. JavaScript memiliki mekanisme yang disebut "automatic semicolon insertion" yang secara otomatis akan menambahkan tanda titik koma jika diperlukan seperti pada gambar 7.


f.        Reserved Words

Reserved Words adalah kata-kata khusus yang sudah ditentukan di dalam bahasa JavaScript dan digunakan untuk menjalankan perintah-perintah bawaan atau fitur-fitur tertentu yang telah tersedia. Oleh karena itu, kita tidak diperbolehkan menggunakan Reserved Words sebagai nama variabel atau fungsi dalam kode kita. Mengapa kita harus memperhatikan Reserved Words? Hal ini dikarenakan JavaScript akan menganggap kata-kata tersebut memiliki makna khusus, dan jika kita menggunakan Reserved Words sebagai nama variabel atau fungsi, akan menyebabkan kebingungan atau bahkan kesalahan dalam eksekusi kode.

 

 

 

Berikut ini adalah daftar kata-kata reserved words pada JavaScript:

abstract

arguments

await*

boolean

break

byte

case

catch

char

class*

const

continue

debugger

default

delete

do

double

else

enum*

eval

export*

extends*

false

final

finally

float

for

function

goto

if

implements

import*

in

instanceof

int

interface

let*

long

native

new

null

package

private

protected

public

return

shirt

static

super*

switch

synchronized

this

throw

throws

transient

true

try

typeof

var

void

volatile

while

with

yield


Kata-kata dengan tanda * merupakan kata-kata baru di ECMAScript 5 dan 6. Lalu berikut adalah objects, properties, dan methods bawaan dari JavaScript:

Array

Date

eval

function

hasOwnProperty

Infinity

isFinite

isNan

isPrototypeOf

length

Math

NaN

name

Number

Object

protoype

String

toString

undefined

valueOf


Berikut adalah reserved words dari properties dan object Java yang juga harus dihindari penggunaannya:

getClass

java

JavaArray

javaClass

JavaObject

JavaPackage

 

 


Karena JavaScript sering digunakan bersamaan dengan aplikasi lain sehingga terdapat beberapa penggunaan nama objek dan properti HTML dan Windows yang harus dihindari, seperti:


alert

all

anchor

anchors

area

assign

blur

button

checkbox

clearInterval

clearTimeout

clientInformation

close

closed

confirm

constructor

crypto

decodeURI

decodeURIComponent

defaultStatus

document

element

elements

embed

embeds

encodeURI

encodeURIComponent

escape

event

fileUpload

focus

form

forms

frame

innerHeight

innerWidth

layer

layers

link

location

mimeTypes

navigate

navigator

frames

frameRate

hidden

history

image

images

offscreenBuffering

open

opener

option

outerHeight

outerWidth

packages

pageXOffset

pageYOffset

parent

parseFloat

parseInt

password

pkcs11

plugin

prompt

propertyIsEnum

radio

reset

screenX

screenY

scroll

secure

select

self

setInter val

setTimeout

status

submit

taint

text

textarea

top

unescape

untaint

window

 

 


 

Lalu terdapat beberapa reserved words yang digunakan oleh HTML event handlers:

onblur

onclick

onerror

onfocus

onkeydown

onkeypress

onkeyup

onmouseover

onload

onmouseup

onmousedown

onsubmit

 

  1. Variabel

Gambar 8. Penggunaan variabel.

Variabel adalah wadah ajaib dalam dunia pemrograman yang digunakan untuk menyimpan nilai atau data yang ingin kita gunakan. Jadi, bayangkan variabel sebagai suatu nama yang kita berikan kepada sebuah nilai/data atau bisa lihat gambar 8.

 

Variabel dapat menampung berbagai jenis nilai, seperti angka, teks, boolean, dan masih banyak lagi. Artinya, kita bisa menggunakan variabel untuk menyimpan angka favorit kita, kata-kata yang ingin kita tampilkan di layar, atau bahkan apakah suatu kondisi benar atau salah. Terdapat tiga Reserved Words yang dapat digunakan untuk mendeklarasikan variabel yaitu var, let, dan const.

 

Saat kita belajar JavaScript, terdapat tiga tahap penting dalam penggunaan variabel, yaitu:

Gambar 9. Tahapan dalam penggunaan variabel.

a.      Declaration

Tahap ini melibatkan pendaftaran variabel ke dalam program yang kita tulis.

b.      Initialization

Tahap ini melibatkan penyiapan memori yang akan digunakan oleh variabel.

c.       Assignment

Tahap ini melibatkan penetapan nilai spesifik yang akan disimpan dalam variabel.

 

Terdapat beberapa aturan yang perlu diperhatikan saat membuat variabel, yaitu:

a.      Penggunaan Spasi

Shape

Description automatically generated

Gambar 10. Penggunaan underscore.

Jika nama variabel terdiri dari dua kata, hindari menggunakan spasi sebagai pemisah. Sebaiknya gunakan underscore (_) untuk memisah dua atau lebih kata atau bisa lihat gambar 10.


b.      Awalan Angka

Text, letter

Description automatically generated

Gambar 11. Penggunaan awalan angka dalam penamaan variabel.

Angka tidak boleh digunakan sebagai awalan nama variabel, tetapi dapat digunakan untuk mengakhiri nama variabel atau bisa lihat gambar 11.

  

c.       Penggunaan camelCase

Shape

Description automatically generated

Gambar 12. Penggunaan camelcase.

camelCase adalah konvensi penulisan variabel yang direkomendasikan. Format dasarnya adalah dengan menggunakan huruf kecil untuk seluruh kata pertama dan huruf kapital untuk huruf pertama pada kata kedua atau bisa lihat gambar 12.


d.      Penggunaan Shorthand

A picture containing graphical user interface

Description automatically generated

Gambar 13. Penggunaan shorthand.

Shorthand adalah metode yang digunakan untuk mempersingkat penulisan variabel. Hal ini berguna untuk membuat kode program menjadi lebih ringkas. Dengan menggunakan Shorthand, kita tidak perlu menuliskan kata kunci var pada 'age' dan 'pass', meskipun keduanya tetap merupakan variabel atau bisa lihat gambar 13.

 

  1. Tipe Data

Tipe data digunakan untuk mendefinisikan jenis nilai yang dapat disimpan dalam variabel. Beberapa tipe data dasar dalam JavaScript meliputi:

a.      Number

Gambar 14. Tipe data number.

Berbeda dengan bahasa pemrograman lain, JavaScript memiliki pendekatan yang lebih sederhana dalam hal tipe data angka. Di JavaScript, kita tidak perlu memikirkan jenis angka seperti integer, float, atau long seperti pada gambar 14. Sebaliknya, JavaScript hanya memiliki satu jenis tipe data angka yang disebut "number". Tipe data number dalam JavaScript dapat menyimpan nilai angka dengan presisi hingga 64 bit.

 

b.      String

Gambar 15. Tipe data string.

Di JavaScript, kita menggunakan tipe data string untuk menyimpan data teks atau kata-kata. Untuk membuat string, kita perlu menambahkan tanda petik di sekitar teks tersebut. Kita bisa menggunakan petik dua (" ") atau petik satu (' ') untuk tujuan ini atau bisa lihat gambar 15. Sebenarnya, tidak ada aturan yang baku yang mengatur kapan kita harus menggunakan petik dua atau petik satu. Namun, umumnya disarankan untuk menggunakan petik dua (" ") untuk penulisan string. Ini dikarenakan penggunaan petik dua lebih umum dan lebih konsisten dalam komunitas JavaScript.


c.       Boolean

Graphical user interface, text, application, email

Description automatically generated

Gambar 16. Tipe data boolean.

Boolean adalah salah satu tipe data penting dalam JavaScript yang digunakan untuk mengungkapkan nilai logika. Tipe data ini hanya memiliki dua nilai, yaitu true (benar) atau false (salah) seperti pada gambar 16. Dengan menggunakan tipe data boolean, kita dapat membuat pengambilan keputusan dan mengatur alur kerja program. Misalnya, kita bisa menggunakan tipe data Boolean untuk menentukan kondisi-kondisi tertentu dalam program. Jika suatu kondisi bernilai true, maka aksi tertentu dapat dilakukan. Namun, jika kondisi tersebut bernilai false, maka aksi tersebut dapat diabaikan.


d.      Null

Logo

Description automatically generated

Gambar 17. Tipe data null.

Null adalah tipe data khusus dalam JavaScript yang digunakan untuk menunjukkan bahwa suatu variabel tidak memiliki nilai atau kosong. Ketika kita mendefinisikan variabel dengan nilai null, itu berarti variabel tersebut tidak mengandung data apapun atau bisa lihat gambar 17.

 

Misalnya, kita dapat menggunakan null untuk menandakan bahwa suatu variabel tidak memiliki referensi ke objek atau nilai yang valid. Null sering digunakan saat kita ingin secara eksplisit menetapkan bahwa variabel tidak memiliki nilai yang berguna pada saat itu. Perlu diperhatikan bahwa null bukanlah string kosong (" ") atau angka nol (0). Null adalah nilai yang secara khusus menunjukkan ketiadaan nilai.


e.      Undefined

Graphical user interface, text, application, email

Description automatically generated

Gambar 18. Tipe data undefined

Undefined adalah tipe data special dalam JavaScript yang menunjukkan bahwa suatu variabel belum diinisialisasi atau tidak memiliki nilai. Ketika kita mendeklarasikan sebuah variabel tanpa memberikan nilai awal, secara otomatis variabel tersebut akan memiliki nilai undefined. Perlu diingat bahwa undefined adalah nilai yang diberikan secara otomatis pada variabel yang belum diinisialisasi atau pada situasi tertentu seperti fungsi tanpa pernyataan return atau properti objek yang tidak didefinisikan.

 

Dalam pengembangan aplikasi, penting untuk mengelola variabel dengan baik dan memastikan bahwa mereka memiliki nilai yang valid. Jika kita ingin menunjukkan bahwa suatu variabel tidak memiliki nilai, lebih baik menggunakan null daripada mengandalkan undefined secara implisit.

 

  1. Struktur Kontrol

Struktur kontrol dalam JavaScript digunakan untuk mengatur alur eksekusi program berdasarkan kondisi-kondisi tertentu atau melakukan pengulangan terhadap blok kode tertentu. Ada beberapa struktur kontrol yang umum digunakan dalam JavaScript, yaitu:

a.      Pernyataan if-else

Graphical user interface, text, application, email

Description automatically generated

Gambar 19. Percabangan if-else.

Percabangan if-else adalah salah satu konsep dasar dalam pemrograman yang digunakan untuk membuat keputusan berdasarkan kondisi yang diberikan. Dalam JavaScript, if-else digunakan untuk mengontrol alur eksekusi program, di mana blok kode akan dieksekusi jika kondisi tertentu terpenuhi, dan blok kode lainnya akan dieksekusi jika kondisi tersebut tidak terpenuhi.

Graphical user interface, text

Description automatically generated

Gambar 20. Contoh penggunaan if-else

Pada program di gambar 20, kita menggunakan if-else untuk memeriksa apakah nilai angka lebih besar dari 10. Jika kondisi angka > 10 bernilai salah, maka blok kode dalam else akan dieksekusi dan "Angka tidak lebih besar dari 10" akan ditampilkan.


b.      Pernyataan switch-case

Graphical user interface, text, application, email

Description automatically generated

Gambar 21. Percabangan switch-case.

Percabangan switch-case adalah salah satu konstruksi kontrol dalam JavaScript yang digunakan untuk memilih aksi yang berbeda berdasarkan nilai ekspresi yang diberikan. Jika nilai ekspresi cocok dengan salah satu kasus yang didefinisikan, blok kode yang terkait dengan kasus tersebut akan dieksekusi.

Text

Description automatically generated

Gambar 22. Contoh penggunaan switch-case.

Pada program di gambar 22, switch-case digunakan untuk menentukan rasa buah berdasarkan nilai variabel buah dan mengubah nilai variabel rasa sesuai dengan pilihan yang dipilih.


c.       Perulangan for

Logo

Description automatically generated with medium confidence

Gambar 23. Perulangan for.

Perulangan for adalah salah satu struktur pengulangan yang digunakan dalam JavaScript untuk mengulangi blok kode tertentu sejumlah kali. Perulangan ini berguna saat kita ingin melakukan tugas yang sama secara berulang berdasarkan kondisi atau iterasi.

Graphical user interface, text

Description automatically generated

Gambar 24. Contoh penggunaan for.

Pada program di gambar 24, perulangan for digunakan untuk mencetak setiap elemen dalam array fruits. Variabel i diinisialisasi dengan nilai awal 0, kondisi i < fruits.length akan dievaluasi sebelum setiap iterasi, dan variabel i akan ditingkatkan dengan 1 setiap kali iterasi selesai. Di dalam blok kode, kita menggunakan fruits[i] untuk mengakses dan mencetak elemen-elemen array.


d.      Perulangan while

Graphical user interface

Description automatically generated with low confidence
Gam
bar 25. Perulangan while.

Perulangan while adalah salah satu struktur pengulangan yang digunakan dalam JavaScript untuk mengulangi blok kode tertentu selama kondisi yang ditentukan bernilai benar (true). Perulangan ini berguna ketika kita tidak tahu berapa kali kita perlu mengulangi tugas, tetapi kita hanya ingin melanjutkan selama kondisi terpenuhi.

A picture containing graphical user interface

Description automatically generated

Gambar 26. Contoh penggunaan while.

Pada program di gambar 26, perulangan while akan mengeksekusi blok kode yang mencetak pesan "Iterasi ke-" ditambah nomor iterasi dari 1 hingga 5. Variabel i diinisialisasi dengan nilai awal 1, dan setiap kali iterasi selesai, nilai i ditingkatkan dengan 1. Perulangan akan terus berlanjut selama kondisi i <= 5 bernilai benar.


e.      Perulangan do-while

Text

Description automatically generated

Gambar 27. Perulangan do-while.

Perulangan do-while adalah salah satu struktur pengulangan yang digunakan dalam JavaScript untuk mengulangi blok kode tertentu setidaknya satu kali, kemudian dilanjutkan selama kondisi yang ditentukan masih bernilai benar (true). Perulangan ini berguna ketika kita ingin memastikan bahwa blok kode dijalankan setidaknya sekali sebelum memeriksa kondisi.

Graphical user interface, application

Description automatically generated

Gambar 28. Contoh penggunaan do-while.

Pada program di gambar 28, perulangan do-while akan mengeksekusi blok kode yang mencetak pesan "Iterasi ke-" ditambah nomor iterasi dari 1 hingga 5. Blok kode akan dijalankan setidaknya sekali sebelum memeriksa kondisi. Variabel i diinisialisasi dengan nilai awal 1, dan setiap kali iterasi selesai, nilai i ditingkatkan dengan 1. Perulangan akan berlanjut selama kondisi i <= 5 bernilai benar.


f.        Perulangan forin

Text

Description automatically generated with medium confidence

Gambar 29. Perulangan forin.

Perulangan forin digunakan dalam JavaScript untuk mengulangi setiap properti yang dapat di enumerasi dari sebuah objek. Properti yang di enumerasi dapat berupa properti milik objek itu sendiri maupun properti yang diwarisi dari prototype objek.

Text

Description automatically generated

Gambar 30. Contoh penggunaan forin.

Pada program di gambar 30, perulangan for-in digunakan untuk mengulangi setiap properti pada objek person. Pada setiap iterasi, properti disimpan dalam variabel prop, dan nilai properti diakses menggunakan person[prop]. Dalam contoh ini, kita mencetak nama properti beserta nilainya menggunakan console.log().


g.      Perulangan forof

Graphical user interface

Description automatically generated

Gambar 31. Perulangan forof.

Perulangan for...of adalah fitur baru dalam JavaScript yang memungkinkan kita mengulangi elemen-elemen dari struktur data yang dapat diiterasi seperti array, string, objek iterable, dan lainnya. Perulangan ini memberikan cara yang lebih sederhana dan ekspresif untuk mengakses setiap elemen dalam struktur data.

Graphical user interface, text

Description automatically generated

Gambar 32. Contoh penggunaan forof.

Pada program di gambar 32, perulangan for...of digunakan untuk mengulangi setiap elemen dalam array fruits. Setiap elemen disimpan dalam variabel fruit, dan kemudian dicetak menggunakan console.log().


h.      Perulangan trycatch

Graphical user interface, text, application

Description automatically generated

Gambar 33. Perulangan trycatch

Perulangan try...catch adalah fitur dalam JavaScript yang digunakan untuk menangani kesalahan atau exception yang mungkin terjadi dalam blok kode. Dengan menggunakan try...catch, kita dapat mencoba menjalankan potensi kode yang memicu kesalahan dan menangkap serta mengelola kesalahan tersebut dengan cara yang terkontrol.

Graphical user interface, text, application

Description automatically generated

Gambar 34. Contoh penggunaan trycatch.

Pada program di gambar 34, kita mencoba membagi angka 10 dengan 0, yang akan memicu kesalahan pembagian oleh nol. Dalam blok try, kesalahan tersebut ditangkap dan di-handle di dalam blok catch. Pesan kesalahan error.message dicetak ke console.log().


  1. Function

Function dalam JavaScript adalah blok kode yang dapat dipanggil atau dieksekusi secara berulang dengan memberikan nilai input dan mengembalikan nilai output tertentu. Function memungkinkan kita untuk memecah kode menjadi bagian-bagian yang lebih kecil, modular, dan dapat digunakan kembali. Ada beberapa hal yang perlu diperhatikan dalam menggunakan function, yaitu:

a.      Pendefinisian function

Logo

Description automatically generated with medium confidence

Gambar 35. Mendefinisikan function.

Pada program di gambar 35, function didefinisikan dengan menggunakan kata kunci function, diikuti dengan nama function dan tanda kurung egg. Blok kode function diapit oleh kurung kurawal { }.


b.      Pemanggilan function

A picture containing chart

Description automatically generated

Gambar 36. Pemanggilan function.

Pada program di gambar 36, untuk menjalankan kode dalam function, kita perlu memanggilnya dengan menggunakan nama fungsi diikuti tanda kurung egg.


c.       Parameter dan argumen

Text

Description automatically generated with medium confidence

Gambar 37. Parameter dan argumen dalam function.

Function dapat menerima parameter, yaitu nilai yang diberikan saat memanggil function. Parameter digunakan untuk mengirimkan data ke dalam function. Ketika function dipanggil, parameter diisi dengan argumen yang diberikan.


d.      Nilai kembalian

Text

Description automatically generated with medium confidence

Gambar 38. Penggunaan return pada function.

Function dapat mengembalikan nilai menggunakan kata kunci return. Nilai kembalian digunakan untuk mengirimkan hasil atau output dari function ke tempat pemanggilan.


e.      Function sebagai nilai

Text

Description automatically generated with medium confidence

Gambar 39. Function sebagai nilai.

Di JavaScript, function juga dapat digunakan sebagai nilai dan disimpan dalam variabel. Kita dapat memanfaatkan hal ini untuk mengirim function sebagai argumen ke function lainnya atau menyimpan fungsi dalam struktur data.


f.        Function rekursif

Text

Description automatically generated

Gambar 40. Function rekursif.

Function rekursif adalah function yang memanggil dirinya sendiri. Ini memungkinkan kita untuk melakukan iterasi atau perulangan dalam cara yang terstruktur dan terkontrol atau bisa lihat gambar 40.

Dalam pemrograman JavaScript, terdapat dua konsep yang penting untuk kita pahami terkait dengan objek, yaitu this dan closure. Kenapa kita perlu memahami kedua konsep ini? Mempelajari konsep this dan closure pada pemrograman JavaScript sangat penting karena keduanya memiliki peran yang signifikan dalam pengembangan aplikasi JavaScript yang lebih kompleks. Mari kita bahas!

  1. This

Text

Description automatically generated

Gambar 41. Pengenalan this.

This adalah sebuah kata kunci yang digunakan dalam JavaScript untuk merujuk pada objek saat ini yang sedang dieksekusi. Dengan menggunakan this, kita dapat mengakses properti dan metode dari objek tersebut. Jadi, this memungkinkan objek untuk berinteraksi dengan data dan perilaku yang dimilikinya.

Misalnya, jika kita memiliki objek "mahasiswa" dengan properti "nama" dan metode "getInfo", kita dapat menggunakan this dalam metode tersebut untuk mengakses properti "nama" dari objek saat ini.

Text

Description automatically generated

Gambar 42. Contoh penggunaan this.

Pada program di gambar 42, this digunakan untuk mengakses properti "nama" dan "umur" dari objek "mahasiswa" saat metode "getInfo" dipanggil.

 

  1. Closure

Graphical user interface

Description automatically generated

Gambar 43. Lexical environment.

Closure merupakan kombinasi antara function dan lingkungan leksikal di mana function tersebut didefinisikan. Dalam JavaScript, setiap kali sebuah function dibuat, ia menyimpan referensi ke lingkungan leksikalnya. Hal ini memungkinkan function tersebut untuk mengakses variabel-variabel yang berada di lingkup yang sama dengan function tersebut, bahkan jika function itu dieksekusi di lingkup yang berbeda.

Misalnya, kita dapat membuat sebuah function yang mengembalikan function lain yang memiliki akses ke variabel di lingkungan leksikalnya. Dengan menggunakan closure, kita dapat membuat functions yang memiliki akses ke variabel-variabel tertentu, bahkan setelah function utama telah selesai dieksekusi.

Gambar 44. Contoh penggunaan closure.

Pada program di gambar 44, function innerFunction merupakan sebuah closure karena ia memiliki akses ke variabel outerVariable yang berada di lingkungan luarannya (yaitu di dalam function outerFunction). Meskipun outerFunction telah selesai dieksekusi, variabel outerVariable masih dapat diakses oleh innerFunction melalui mekanisme closure. Ketika kita memanggil closureFunctionegg, ia akan mencetak "Hello World!" ke konsol.


 

  

Referensi

12 Konsep Dasar JavaScript yang Harus Diketahui Developer | WEBAPP | APPKEY

Panduan Belajar JavaScript Terlengkap untuk Pemula 2023 (niagahoster.co.id)

Struktur kendali JavaScript - Belajar Front-End Website (petik.net)

Lingkup variabel, closure (javascript.info)

Last modified: Tuesday, 8 August 2023, 9:29 AM