JavaScript

Agenda
● Pengenalan JavaScript
● Tipe Data
● Variable
● Percabangan
● Perulangan
● Function
● Dan lain-lain
Pengenalan JavaScript
Sejarah JavaScript
● JavaScript atau sering disingkat JS, pertama kali dibuat tahun 1995. Programmer di
Netscape bernama Brandan Eich membuat sebuah bahasa pemrograman scripting
untuk berjalan di Netscape Navigator Browser.
● Awalnya namanya adalah Mocha, lalu berubah menjadi LiveScript, dan akhirnya
menjadi JavaScript.
● JavaScript dibuat agar halaman website yang sudah kita buat menggunakan HTML
dan CSS bisa lebih interaktif
● JavaScript sekarang sudah mengalahkan Java Applet dan Flash sebagai bahasa
pemrograman untuk membuat halaman web menjadi lebih interaktif, hal ini
dikarenakan kemudahan bahasa nya dan juga secara default sekarang semua
browser sudah bisa menjalankan JavaScript tanpa harus menginstall aplikasi
tambahan seperti Java Applet dan Adobe Flash Player
JavaScript di Server
● Awalnya JavaScript memang kebanyakan di gunakan untuk berjalan di client side
(Browser)
● Namun akhir-akhir ini, semenjak keluar teknologi NodeJS yang bisa digunakan untuk
menjalankan JavaScript tanpa browser, sekarang akhirnya JavaScript juga banyak
digunakan untuk membuat aplikasi di Server
● Karena ini, akhirnya sekarang JavaScript dikenal dengan bahasa pemrograman
FullStack (Backend dan Frontend) karena bisa digunakan untuk membuat aplikasi
Backend dan aplikasi Frontend
JavaScript dan ECMAScript
● Karena JavaScript sekarang hampir di adopsi oleh sebua aplikasi browser, akhirnya
dibuatlah sebuah standarisasi yang bernama ECMAScript
● Organisasi yang melakukan standarisasi ECMAScript adalah ECMA International
● Sekarang dengan adanya standarisasi, kita bisa pastikan bahwa kode program
JavaScript kita bisa jalan di semua browser, karena browser yang ingin mendukung
JavaScript, harus mengikuti standarisasi ECMAScript
● Sekarang karena ECMAScript dan JavaScript sama, sekarang bisa dibilang
ECMAScript dan JavaScript adalah dua nama untuk satu bahasa pemrograman yang
sama
● [Link]
JavaScript vs Java
● Pemula programmer sering salah tentang JavaScript dan Java. Ada yang mengira
bahwa Java dan JavaScript adalah bahasa pemrograman yang sama, padahal itu
berbeda.
● Java adalah bahasa pemrograman lain, tidak ada hubungannya dengan JavaScript
● Walaupun namanya ada kata “Java” nya, tapi dua bahasa pemrograman ini benar-
benar berbeda, tidak ada hubungannya sama sekali
Peralatan Development
● Saat kita belajar JavaScript, kita perlu menyiapkan beberapa perangkat lunak untuk
membantu development
● Browser, ini sudah pasti, karena kita perlu menjalankan kode program JavaScript
menggunakan Browser
● Text Editor atau Integrated Development Environment, ini digunakan untuk membuat
kode program JavaScript
Browser
● Google Chrome : [Link]
● Firefox : [Link]
● Microsoft Edge : [Link]
● Safari : [Link]
● Opera : [Link]
Text Editor atau IDE
● Visual Studio Code : [Link]
● Atom : [Link]
● Sublime : [Link]
● WebStorm : [Link]
● Nodepad++ : [Link]
● Textmate : [Link]
● GNU Emacs : [Link]
● GEdit : [Link]
Program Hello World
Membuat Kode JavaScript
● Ada beberapa cara untuk membuat kode JavaScript
● Bisa langsung di file HTML
● Atau bisa menggunakan file .js (ekstensi untuk JavaScript), lalu di include di dalam
file HTML
● Pada praktek course ini kita akan menggunakan HTML langsung agar mudah
membuat kode program nya
Script JavaScript
Include Script JavaScript
Titik Koma
● JavaScript mirip seperti bahasa pemrograman C/C++, dimana di akhir tiap statement
kode program, kita perlu menambahkan ; (titik koma)
● Namun, di JavaScript tanda ; (titik koma) tidak wajib, jadi kita bisa menambahkan
ataupun tidak.
● Sangat disarankan konsisten, jika ingin menggunakan titik koma, gunakan disemua
tempat, jika tidak, jangan gunakan di semua tempat
● Saya sendiri lebih merekomendasikan menggunakan titik koma
Komentar
Komentar
● Komentar adalah kode program yang tidak akan dieksekusi ketika dibaca
● Komentar biasanya digunakan sebagai informasi tambahan atau petunjuk
● Di JavaScript, kita bisa menambahkan kode komentar
Kode : Komentar
Tipe Data Number
Tipe Data Number
● JavaScript hanya mendukung satu tipe data number, dimana tipe data number di
JavaScript bisa berupa bilangan bulat atau bilangan desimal
● Tipe seperti di bahasa pemrograman lain yang biasanya membedakan tipe data
number bilangan bulat dan bilangan desimal, di JavaScript semuanya disatukan
Kode : Tipe Data Number
Number Notation
● JavaScript mendukung number notation, defaultnya ada basis 10, JavaScript juga
mendukung binary, hexadecimal dan octal
● Hexadecimal : 0xFF
● Binary : 0b10101
● Octal : 0o10
Tipe Data Boolean
Tipe Data Boolean
● Tipe data boolean adalah tipe data yang berisikan data kebenaran, artinya hanya
ada dua data, benar dan salah (yes atau no)
● Benar di representasikan dengan kata kunci true, dan salah direpresentasikan
dengan kata kunci false
● Walaupun tipe data boolean merupakan tipe data yang sangat sederhana, tapi tipe
data boolean akan banyak digunakan di berbagai fitur pemrograman
Kode : Tipe Data Boolean
Tipe Data String
Tipe Data String
● Tipe data string atau text adalah tipe data yang berisikan kumpulan kosong atau
lebih karakter
● Sebelumnya kita sudah pernah menggunakan string ketika membuat program hello
world.
● Di JavaScript, untuk membuat data dengan tipe string, kita perlu menggunakan “
(petik dua) atau ‘ (petik satu) sebelum dan setelah isi text nya
Kode : Tipe Data String
Menambah String
● Data string bisa digabung menggunakan operator + (plus)
Kode : Menambah String
Escape Sequence
● JavaScript mendukung escape sequence di string. Escape sequence merupakan
karakter khusus, seperti ENTER, TAB, " (kutip dua), dan lain-lain. Berikut contoh
escape sequence yang didukung oleh JavaScript di data string

\n ENTER

\t TAB

\’ ‘

\” “

\\ \
Kode : Escape Sequence
Variable
Kode : Tanpa Variable
Variable
● Variable adalah tempat untuk menyimpan data
● Dengan menyimpan data di variable, kita bisa menggunakannya lagi dengan
menyebutkan nama variable nya
● Untuk membuat variable di JavaScript, kita bisa menggunakan kata kunci var diikuti
dengan nama variable nya
● JavaScript adalah dynamic language, artinya variable di JavaScript tidak terpaku
harus menggunakan satu tipe data, kita bisa mengubah-ubah tipe data di variable
yang sama
Kode : Variable
Mengubah Value di Variable
● Setelah variable di deklarasikan, kita bisa mengubah value atau nilai di dalam
variable tersebut
● Untuk mengubahnya, kita bisa menggunakan perintah nama variable diikuti dengan
tanda = (sama dengan) lalu diikuti dengan value atau nilai nya
Membuat Variable Langsung Dengan
Value
● Di JavaScript juga kita bisa mendeklarasikan sebuah variable, langsung dengan isi
value nya
● Caranya kita bisa menggunakan kata kunci var, diikuti nama variable, lalu diikuti
dengan tanda = (sama dengan), dan di ikuti dengan value atau nilai nya
Mengakses Variable
● Salah satu keuntungan menggunakan variable adalah variable bisa digunakan
kembali
● Hal ini akan mempermudah ketika membutuhkan data yang sama berkali-kali
● Untuk mengakses variable, kita cukup menyebutkan nama variable nya
Kata Kunci let dan const
● Sebelum tahun 2015, kata kunci untuk membuat variable hanya bisa menggunakan
kata kunci var
● Namun tahun 2015 sejak versi ECMAScript 2015, diperkenalkan kata kunci baru
untuk membuat variable, let dan const
● JavaScript sekarang tidak direkomendasikan lagi menggunakan kata kunci var untuk
membuat variable, namun diganti dengan let, hal ini dikarenakan ada masalah dari
desain awal var (akan kita bahas di chapter tersendiri)
Kode : Variable const
Kata Kunci const
● Kata kunci let itu seperti kata kunci var, dimana data di variable tersebut bisa
diubah-ubah sesuka kita
● Sedangkan kata kunci const berbeda, ketika sebuah variable sudah diisi di variable
const, maka variable tersebut tidak bisa diubah lagi value nya
● Variable sejenis ini kadang dibilang juga constant
Operator Matematika
Operator Matematika
● JavaScript mendukung banyak sekali operator Matematika untuk tipe data Number,
seperti :
● Operator Aritmatika
● Operator Augmented Assignments
● Operator Unary
● Dan lain-lain
Operator Aritmatika
Operator Keterangan

+ Pertambahan

- Pengurangan

* Perkalian

** Exponensial

/ Pembagian

% Sisa Bagi
Kode : Operator Aritmatika
Operator Augmented Assignments
Operator Matematika Operator Augmented Assigments

result = result + 10 result += 10

result = result - 10 result -= 10

result = result * 10 result *= 10

result = result ** 10 result **= 10

result = result / 10 result /= 10

result = result % 10 result %= 10

Kode : Operator Augmented
Assigments
Operator Unary
Operator Keterangan

+ Menandakan nilai positif

- Menandakan nilai negatif

++ Increment, menaikkan 1 angka

-- Decrement, menurunkan 1 angka

Kode : Operator Unary
Operator Perbandingan
Operasi Perbandingan
● Operasi perbandingan adalah operasi untuk membandingkan dua buah data
● Operasi perbandingan adalah operasi yang menghasilkan nilai boolean (benar atau
salah)
● Jika hasil operasinya adalah benar, maka nilainya adalah true
● Jika hasil operasinya adalah salah, maka nilainya adalah false
Operator Perbandingan
Operator Keterangan

> Lebih Dari

< Kurang Dari

>= Lebih Dari Sama Dengan

<= Kurang Dari Sama Dengan

== Sama Dengan

=== Sama Dengan dan Sama Tipe

!= Tidak Sama Dengan

!== Tidak Sama Dengan atau Tidak Sama Tipe

Kode : Operasi Perbandingan
Operator Logika
Operator Logika
● Operator logika adalah operator untuk dua buah data boolean
● Hasil dari operator logika adalah boolean lagi
Operator Logika
Operator Keterangan

&& Dan

|| Atau

! Kebalikan
Operator &&
Nilai 1 Operator Nilai 2 Hasil

true && true true

true && false false

false && true false

false && false false

Operator ||
Nilai 1 Operator Nilai 2 Hasil

true || true true

true || false true

false || true true

false || false false

Operator Unary !
Operator Nilai 2 Hasil

! true false

! false true
Kode : Operator Logika
Console
Console
● JavaScript memiliki fitur untuk melakukan logging bernama Console
● Logging adalah mekanisme yang biasa dilakukan oleh programmer untuk
menampilkan informasi dari aplikasi yang sedang berjalan, tanpa harus mengganggu
alur kerja aplikasi dan juga interaksi user
● Untuk melakukan ini, kita bisa menggunakan fitur Console di JavaScript
● Untuk menggunakan Console, kita cukup gunakan perintah console di kode
JavaScript
Console Method

Console Method Keterangan

[Link](...) Memberitahu informasi

[Link](...) Memberitahu informasi peringatan

[Link](...) Memberitahu informasi error

[Link](...) Memberitahu informasi dalam bentuk table

Kode : Console
Inspect Element di Google Chrome
Konversi String dan Number
Konversi String dan Number
● Saat membuat aplikasi, kadang kita input dari pengguna selalu dalam bentuk String
● Sedangkan kita ingin mengelola datanya dalam bentuk Number
● Maka sangat disarankan untuk melakukan konversi tipe data
Kode : Masalah Tanpa Konversi
Melakukan Konversi String dan Number
Function Keterangan

parseInt(string) Mengkonversi dari string ke number

(bilangan bulat)

parseFloat(string) Mengkonversi dari string ke number

(bilangan pecahan)

Number(string) Mengkonversi dari string ke number

(bilangan bulat atau pecahan)

[Link]() Mengkonversi dari number ke String

Kode : Konversi String ke Number
NaN
● Bagaimana jika ternyata data string yang kita coba konversi ke number bukanlah
data yang valid?
● Jika data string yang kita coba lakukan konversi bukan lah data valid, maka hasil dari
konversi tersebut adalah NaN (Not a Number)
● NaN adalah number spesial yang menyebutkan bahwa ini bukanlah number
● Jika NaN dioperasikan dengan data number lainnya, maka hasilnya akan menjadi
NaN lagi
Kode : NaN
Kode : Operasi Pada NaN
isNaN() Function
● Kadang kita ingin mengecek apakah sebuah number itu NaN atau bukan
● Untuk melakukan pengecekan tersebut, kita bisa menggunakan function
isNaN(number)
● Hasil nya adalah berupa data boolean, true jika NaN, false jika bukan
Tipe Data Array
Tipe Data Array
● Array adalah tipe data yang berisikan kumpulan data
● Array di JavaScript memiliki sifat dinamis, artinya datanya bisa bertambah dengan
sendirinya saat kita memasukkan data ke dalam Array
Diagram Array
Cara Kerja Array
● Setiap data di Array akan disimpan dalam posisi berurutan, dimana urutan pertama
dimulai dari nomor 0
● Setiap kita menambah data ke Array, otomatis data akan disimpan di urutan terakhir
● Urutan di Array, kita sebut dengan index
Cara Kerja Array
Operasi di Array

Operasi Keterangan

[Link](value) Menambah data ke Array

[Link] Untuk mendapatkan panjang Array

array[index] Mendapat data di posisi index

array[index] = value Mengubah data di posisi index

delete array[index] Menghapus data di posisi index, namun

index tidak bergeser
Perlu Diingat
● Data di dalam Array tidak ada batasannya harus data apa
● Jadi kita bisa memasukkan data apapun ke dalam Array
● Bahkan kita juga bisa memasukkan Array ke dalam Array jika kita mau
Tipe Data Object
Associative Array
● Di bahasa pemrograman lain seperti PHP, kita bisa menggunakan index beruba tipe
data lain selain number, misal string
● Fitur ini biasanya disebut associative array atau hash
● Di JavaScript associative array tidak didukung.
● Jika kita memaksa memasukkan data bukan number di index Array, maka JavaScript
akan merubah tipe data Array tersebut menjadi object, dan ini bisa berbahaya,
karena beberapa operasi di array mungkin bisa berubah hasilnya
Tipe Data Object
● Tipe data object adalah tipe data yang mirip dengan tipe data Array
● Yang membedakan adalah index pada tipe data object bisa menggunakan string
● Index di object biasanya disebut attributes atau properties, bukan index
Kode : Membuat Object Kosong
If Expression
If Expression
● Dalam JavaScript, if adalah salah satu kata kunci yang digunakan untuk percabangan
● Percabangan artinya kita bisa mengeksekusi kode program tertentu ketika suatu
kondisi terpenuhi
● Hampir di semua bahasa pemrograman mendukung if expression
Kode : If Expression
Else Expression
● Blok if akan dieksekusi ketika kondisi if bernilai true
● Kadang kita ingin melakukan eksekusi program tertentu jika kondisi if bernilai false
● Hal ini bisa dilakukan menggunakan else expression
Kode : Else Expression
Else If Expression
● Kadang dalam If, kita butuh membuat beberapa kondisi
● Kasus seperti ini, di JavaScript kita bisa menggunakan Else If expression
Kode : Else If Expression
Popup
Alert, Prompt dan Confirm
● JavaScript memiliki fitur yang bernama alert, prompt dan confirm
● Alert digunakan untuk memberi peringatan berupa popup text di browser
● Prompt digunakan untuk meminta input string dari pengguna browser dalam bentuk
popup input text
● Sedangkan confirm digunakan untuk meminta input boolean dari pengguna browser
dalam bentuk popup input pilihan
Kode : Alert
Hasil Alert
Kode : Prompt
Hasil Prompt
Kode : Confirm
Hasil Confirm
Undefined
undefined
● undefined adalah sebuah kata kunci di JavaScript
● undefined adalah sebuah tipe data
● Sebuah variable yang belum ditambahkan nilai, maka artinya variable tersebut
merupakan tipe undefined
● Kadang untuk programmer JavaScript pemula undefined ini memang agak sedikit
membingungkan
● undefined itu berbeda dengan null di bahasa pemrograman lain
Kode : Undefined Variable
Kode : Undefined Object Property
Null
Null
● null merupakan representasi data kosong
● null berbeda dengan undefined, null berarti variable sudah ditambahkan value nya,
hanya saja value nya null
● Sedangkan undefined adalah variable belum ditambahkan value apapun
Kode : Null dan Undefined
Switch Expression
Switch Statement
● Kadang kita hanya butuh menggunakan kondisi sederhana di if statement, seperti
hanya menggunakan perbandingan ==
● Switch adalah statement percabangan yang sama dengan if, namun lebih
sederhana cara pembuatannya
● Kondisi di switch statement hanya untuk perbandingan ==
Kode : Switch Statement
Operator typeof
Operator typeof
● typeof merupakan operator yang bisa kita gunakan untuk melihat tipe data sebuah
value atau variable
● Karena JavaScript merupakan dynamic langauge, jadi kadang kita perlu mengecek
tipe data sebuah value atau variable menggunakan operator typeof
● Hasil dari operator typeof adalah string tipe datanya
Type Hasil Operator typeof

Undefined “undefined”

Null “object”

Boolean “boolean”

Number “number”

BitInt “bigint”

String “string”

Symbol “symbol”

Function “function”

Lainnya “object”
Kode : Operator typeof
Operator Logika di Non
Boolean
Operator Logika di Non Boolean
● Sebelumnya kita sudah tahu bahwa operator logika AND (&&) dan OR (||) digunakan
untuk dua data boolean
● Namun berbeda di JavaScript, kita bisa menggunakan operator logika AND dan OR
untuk tipe data non boolean
Operator OR (||) di Non Boolean
● Operator logika OR (||), membaca dari kiri ke kanan.
● Operator ini akan mengambil nilai pertama yang truthy.
● Jika tidak ada satupun yang bernilai truthy, maka yang terakhir yang akan diambil
Kode : Operator OR (||)
Operator AND (&&) di Non Boolean
● Operator logika AND (||), membaca dari kiri ke kanan.
● Operator ini akan mengambil nilai pertama yang falsy.
● Jika tidak ada satupun yang bernilai falsy, maka yang terakhir yang akan diambil
Kode : Operator AND (&&)
For Loop
For Loop
● For adalah salah satu kata kunci yang bisa digunakan untuk melakukan perulangan
● Blok kode yang terdapat di dalam for akan selalu diulangi selama kondisi for
terpenuhi
Sintak Perulangan For
for(init statement; kondisi; post statement){
// block perulangan
}

● Init statement akan dieksekusi hanya sekali di awal sebelum perulangan

● Kondisi akan dilakukan pengecekan dalam setiap perulangan, jika true perulangan
akan dilakukan, jika false perulangan akan berhenti
● Post statement akan dieksekusi setiap kali diakhir perulangan
● Init statement, Kondisi dan Post Statement tidak wajib diisi, jika Kondisi tidak diisi,
berarti kondisi selalu bernilai true
Kode : Perulangan Tanpa Henti
Kode : Perulangan Dengan Kondisi
Kode : Perulangan Dengan Init
Statement
Kode : Perulangan Dengan Post
Statement
While Loop
While Loop
● While loop adalah versi perulangan yang lebih sederhana dibanding for loop
● Di while loop, hanya terdapat kondisi perulangan, tanpa ada init statement dan post
statement
Kode : While Loop
Do While Loop
Do While Loop
● Do While loop adalah perulangan yang mirip dengan while
● Perbedaannya hanya pada pengecekan kondisi
● Pengecekan kondisi di while loop dilakukan di awal sebelum perulangan dilakukan,
sedangkan di do while loop dilakukan setelah perulangan dilakukan
● Oleh karena itu dalam do while loop, minimal pasti sekali perulangan dilakukan
walaupun kondisi tidak bernilai true
Kode : Do While Loop
Break dan Continue
Break & Continue
● Pada switch statement, kita sudah mengenal kata kunci break, yaitu untuk
menghentikan case dalam switch
● Sama dengan pada perulangan, break juga digunakan untuk menghentikan seluruh
perulangan.
● Namun berbeda dengan continue, continue digunakan untuk menghentikan
perulangan saat ini, lalu melanjutkan ke perulangan selanjutnya
Kode : Break
Kode : Continue
Label
Label
● Label merupakan penanda yang bisa digunakan dengan kata kunci break dan
continue
● Secara default saat kita melakukan break atau continue, dia akan melakukan
terhadap perulangan dimana kode break dan continue itu digunakan
● Dengan menggunakan label, kita bisa melakukan break dan continue terhadap
perulangan yang kita inginkan, asalkan pada perulangannya kita gunakan label
● Untuk membuat label, kita bisa gunakan nama label lalu diikuti dengan : (titik dua)
Kode : Label
Kode : Continue atau Break di Label
For In
For In
● For In merupakan perulangan for yang digunakan untuk mengiterasi seluruh data
property di object atau index di array
● Walaupun for in bisa digunakan untuk Array, namun tidak direkomendasikan untuk
Array, karena biasanya kita jarang sekali butuh data index untuk Array, kita bisa
menggunakan For Of (yang dibahas setelah ini)
Kode : For In di Object
Kode : For In di Array
For Of
For Of
● Jika For In digunakan untuk melakukan iterasi property atau index, berbeda dengan
For Of, ini digunakan untuk melakukan iterasi terhadap isi value dari iterable object,
seperti Array, String dan lain-lain
● For of tidak bisa digunakan untuk melakukan iterasi data di object, karena object
bukanlah iterable.
Kode : For Of di Array
Kode : For Of di String
Function
Function
● Function adalah blok kode program yang akan berjalan saat kita panggil
● Sebelumnya kita sudah menggunakan function writeln() untuk menampilkan tulisan
di html
● Untuk membuat function, kita bisa menggunakan kata kunci function, lalu diikuti
dengan nama function, kurung () dan diakhiri dengan block kurung {}
● Kita bisa memanggil function dengan menggunakan nama function lalu diikuti
dengan kurung ()
● Di bahasa pemrograman lain, function juga disebut dengan method
Kode : Function
Function Parameter
Function Parameter
● Kita bisa mengirim informasi ke function yang ingin kita panggil
● Untuk melakukan hal tersebut, kita perlu menambahkan parameter atau argument di
function yang sudah kita buat
● Parameter ditempatkan di dalam kurung () di deklarasi method
● Parameter bisa lebih dari satu, jika lebih dari satu, harus dipisah menggunakan
tanda koma
Kode : Function Parameter
Function Return Value
Function Return Value
● Secara default, function itu tidak menghasilkan value apapun, namun jika kita ingin,
kita bisa membuat sebuah function mengembalikan value
● Agar function bisa menghasilkan value, kita bisa menggunakan kata kunci return di
dalam function nya.
● Dan di dalam block function, untuk menghasilkan nilai tersebut, kita harus
menggunakan kata kunci return, lalu diikuti dengan data yang ingin kita hasilkan.
● Function hanya bisa mengembalikan satu data, jika kita ingin mengembalikan
beberapa data sekaligus, kita bisa menggunakan Array sebagai return value nya
Kode : Function Return Value
Kode : Function Return Value Lebih Dari
Satu
Menghentikan Eksekusi dengan Return
● Saat kita menggunakan kata kunci return, maka kode setelah return tersebut tidak
akan dieksekusi
● Kita bisa menggunakan return untuk menghentikan eksekusi sebuah function
Kode : Menghentikan Eksekusi dengan
Return
Optional Parameter
Optional Parameter
● Secara default, parameter di function itu optional
● Artinya kita tidak wajib mengisi value nya ketika memanggil function
● Jika tidak ada value yang kita kirim ke parameter ketika memanggil function, maka
secara otomatis parameter tersebut bernilai undefined
Kode : Optional Parameter
Default Parameter
Default Parameter
● Sekarang kita tahu bahwa parameter itu optional, artinya kita bisa tidak memberi
value terhadap parameter
● Parameter juga bisa kita beri default value, artinya jika ketika kita tidak mengirim
data ke parameter atau kita mengirim data undefined, maka secara otomatis
parameter akan diisi oleh default value
Kode : Default Parameter
Rest Parameter
Rest Parameter
● Rest Parameter adalah fitur dimana kita bisa mengirim data sebanyak-banyak nya
pada satu parameter, dan secara otomatis akan di konversi menjadi Array
● Untuk membuat rest parameter, ada ketentuannya
● Rest parameter hanya boleh ada satu di function, tidak boleh lebih dari satu
● Rest parameter hanya boleh berada di posisi paling akhir, tidak boleh di depan atau
di tengah, kecuali memang cuma ada 1 parameter
● Di bahasa pemrograman lain, ada juga yang bilang ini adalah variable argument
Kode : Rest Parameter
Spread Syntax
● Kadang kita terlanjur memiliki data berupa Array
● Tapi untungnya kita juga bisa mengirim Array ke Rest Parameter
● Kita bisa gunakan … (titik tiga kali) diikuti dengan array nya ketika memanggil
function
● Fitur ini dinamakan Spread Syntax
Kode : Spread Syntax di Rest Parameter
Function Sebagai Value
Function Sebagai Value
● Function tidak hanya bisa digunakan sebagai kode program yang dieksekusi, tapi
bisa juga sebagai value
● Artinya, function bisa disimpan di variable, bisa juga dikirim melalui parameter ke
function lainnya
Kode : Function di Variable
Kode : Function di Parameter
Anonymous Function
Anonymous Function
● Sebelumnya kita selalu membuat function dengan nama
● Kita juga bisa membuat function tanpa nama function, atau istilahnya adalah
anonymous function
● Kita bisa buat anonymous function dalam sebuah variable atau bisa juga kita buat
ketika mengisi parameter
Kode : Anonymous Function di Variable
Kode : Anonymous Function di
Parameter
Function dalam Function
Function dalam Function
● Tidak ada batasan dimana kita bisa membuat function
● Termasuk jika kita ingin membuat function di dalam sebuah function, kita bisa
melakukannya
● Function yang terdapat di dalam, kita sebut inner function
● Inner function hanya bisa diakses di tempat kita membuat function nya, tidak bisa
diakses dari luar function nya
Kode : Function dalam Function
Scope
Scope
● Scope merupakan area akses sebuah data
● Ada dua jenis scope, global scope dan local scope.
● Setiap kita membuat function, maka kita akan membuat local scope untuk function
tersebut
● Data di global scope bisa diakses dari local scope, namun data di local scope hanya
bisa di akses di local scope tersebut atau di scope local dibawahnya (dalam kasus
function dalam function)
Kode : Global Scope
Kode : Local Scope
Kode : Nested Function Scope
Arrow Function
Arrow Function
● Arrow function adalah alternatif pembuatan function yang lebih sederhana dari
function biasanya
● Namun terdapat limitasi dan juga tidak bisa digunakan di semua situasi
● Dinamakan arrow function karena menggunakan tanda => (seperti panah)
● Berikut contoh beberapa kekurangan arrow function :
○ tidak memiliki fitur arguments object
○ tidak bisa menggunakan function generator
○ tidak bisa mengakses this (yang nanti akan dibahas di function di object)
○ tidak bisa mengakses super (yang nanti akan dibahas di JavaScript Object Oriented
Programming)
Kode : Membuat Arrow Function
Arrow Function Tanpa Block
● Jika sebuah arrow function isinya sederhana, misal hanya satu baris
● Kita bisa membuat arrow function tanpa harus menggunakan block
Kode : Arrow Function Tanpa Block
Arrow Function Return Value
● Arrow function bisa mengembalikan value, sama seperti function biasanya
● Jika menggunakan block, maka kita perlu menggunakan kata kunci return
● Jika tidak menggunakan block, kita tidak perlu menggunakan kata kunci return
Kode : Arrow Function Return Value
Arrow Function Tanpa Kurung
Parameter
● Jika parameter di arrow function hanya satu, kita bisa tidak menggunakan kurung
pada parameter
Kode : Arrow Function Tanpa Kurung
Parameter
Kode : Arrow Function Sebagai
Parameter
● Karena arrow function sama seperti anonymous function
● Jadi kita juga bisa menggunakan arrow function sebagai parameter di function lain
Kode : Arrow Function Sebagai
Parameter
Masalah Variable var
Masalah Variable var
● Sebelumnya sudah dijelaskan bahwa penggunaan var sudah tidak direkomendasikan
lagi, dan diganti dengan let
● Pertanyaannya kenapa?
● Alasan var tidak direkomendasikan digunakan lagi adalah, karena var tidak memiliki
block scope, artinya dia tidak mengikat ke local scope yang sebelumnya sudah kita
bahas
● Karena masalah ini, var bisa tidak terprediksi
● Kita akan buat contoh penggunaan var dan let
Kode : Menggunakan let
Kode : Menggunakan var
Destructuring
Destructuring
● Destructuring adalah fitur yang bisa digunakan untuk membongkar value-value di
array atau object ke dalam variable-variable
● Fitur ini sangat mempermudah kita ketika ingin mengambil data dari array atau
object tanpa harus melakukan pengambilan data satu persatu
Kode : Mengambil Data di Array
Kode : Destructuring Array
Kode : Mengambil Data di Object
Kode : Destructuring Object
Kode : Destructuring Nested Object
Destructuring Function Parameter
● Destructuring tidak hanya bisa dilakukan di variable, tapi juga bisa dilakukan di
function parameter
● Hal ini membuat kita mudah ketika ingin mengambil nested data dalam array atau
object dalam function
Kode : Destructuring di Function
Parameter (1)
Kode : Destructuring di Function
Parameter (2)
Default Value
● Yang paling menarik di destructuring adalah, kita bisa menambahkan default value
● Jadi misal kita kita melakukan destructuring terhadap array, ternyata tidak ada
datanya, maka kita bisa menambahkan default value
● Begitu juga pada object, jika ternyata property nya tidak ada, maka kita bisa
menambahkan default value
Kode : Default Value Destructuring
Array
Kode : Default Value Destructuring
Object
Menggunakan Nama Variable Lain
● Saat melakukan destructuring di Array, kita bisa dengan mudah membuat nama
variable sesuka kita
● Namun pada saat melakukan destructuring, kita harus membuat nama variable
sama dengan nama property
● Kita juga bisa menggunakan nama variable lain saat melakukan destructuring object
jika kita mau
Kode : Menggunakan Nama Variable
Lain