Struktur Data di JavaScript

Silver - Chapter 2 - Topic 1

Selamat datang di Chapter 2 Topik 1 online course Front End
Javascript dari Binar Academy!
 Pengantar
PM 101

Chapter 2 ini bakalan ngajak kamu buat menguasai kemampuan dasar pengembangan front-end dengan bahasa pemrograman JavaScript, mulai dari
pengenalan struktur data, penggunaan operator, pembuatan expression, basic algoritma, hingga implementasi DOM.

Nah, pada topik pertama, kita bakal bahas tentang struktur data pada bahasa pemrograman JavaScript. Cus langsung aja~

3
 Pengantar
PM 101

Detailnya, kita bakal bahas hal-hal berikut ini:

Apa itu Struktur Data?

Variabel dalam JavaScript

Tipe Data dalam JavaScript

4
Apa itu Struktur Data?

Pertama, coba kita cari tahu apa itu struktur data

pada JavaScript?

5
Apa itu Struktur Data?

Struktur data bisa kita anggap sebagai suatu kaidah untuk menyimpan data
atau merepresentasikan data di dalam komputer agar bisa digunakan secara
efisien.

Nah, pembahasan tentang struktur data nggak akan lengkap kalau kita nggak coba
bahas tipe data juga.

Kenapa? Karena untuk menerapkan struktur data di JavaScript, kita harus

mengetahui tipe data yang akan digunakan.
Apa itu Struktur Data?

Emang, gimana sih tipe data dalam

JavaScript?
JavaScript itu termasuk bahasa pemrograman dengan model data loosely typed.
Artinya, penentuan tipe datanya dinamis.

Dinamis seperti apa, sih? Maksudnya, tipe data di dalam JavaScript bisa kita
ubah-ubah, atau biasa dikenal dengan sebutan dynamic typing.

Ini beda banget dengan Java. Kenapa? Karena, Java menerapkan static typing.
Maksudnya, ketika membuat suatu data atau mendeklarasikan sebuah variabel, kita
tidak boleh mengubahnya dengan tipe data yang berbeda.
 Variabel dalam JavaScript

Nah gengs, tipe data ini bakal kita bahas lebih

dalam. Tapi, sebelum itu, kita akan kenalan dulu
dengan variabel dalam JavaScript!

8
Variabel dalam JavaScript

Coba kita pakai analogi belanja online

yaa~

Ketika berbelanja online, kita pasti membutuhkan informasi tertentu; kayak daftar
barang yang tersedia, berapa harganya, hingga testimoni pembeli sebelumnya.

Nah, informasi-informasi tersebut disimpan menggunakan variabel.

Variabel dalam JavaScript

Jadi, variabel itu bagian dari struktur data yang digunakan untuk menyimpan
informasi-informasi tertentu.

Nah, penamaan variabel dalam Javascript memiliki syarat dan ketentuan sebagai
berikut:

1. Nama harus mengandung huruf, angka, atau simbol “$” dan “_” . Karena,
dalam Javascript kedua simbol ini tidak memiliki makna khusus.
2. Karakter pertama tidak boleh angka.
Variabel dalam JavaScript

Berikut contoh penamaan variabel.

Berikut contoh penamaan variabel yang tadi sudah kita bahas ya. Ada variabel
“var $” dan “let _”

Kedua simbol itu akan dianggap seperti karakter biasa. Sama seperti alfabet.
Variabel dalam JavaScript

Dalam bahasa sehari-hari, “namaPengguna” seharusnya ditulis terpisah karena

terdiri dari dua kata; nama dan pengguna.

Namun, karena dalam bahasa pemrograman Javascript terdapat kaidah camelCase,

maka variabel dengan dua kata harus digabung, seperti contoh di atas.
Variabel dalam JavaScript

Ada tiga jenis variabel dalam JavaScript.

Nah, karena kamu udah tahu apa itu variabel dalam JavaScript, sekarang kita bahas
apa aja jenis-jenisnya.

Terdapat tiga jenis variabel dalam JavaScript, yaitu var, let, dan const.

Setiap variabel ini memiliki scope, ketentuan reassigned, ketentuan redeclared, dan
hoisiting yang mungkin berbeda-beda.

Skuy kita cari tahu perbedaan ketiganya!

Variabel dalam JavaScript

Variabel Var
Bisa dibilang, variabel var merupakan variabel yang lawas. Tapi,
penggunaannya masih dipertahankan oleh banyak programmer untuk
menjaga kompatibilitas ke versi sebelumnya.

Variabel var ini punya fungsi dan cara penggunaan yang simpel. Tapi, kita
perlu berhati-hati dalam menggunakan variabel ini karena ia memiliki
beberapa problem.
Variabel dalam JavaScript

1. Scope

Scope di dalam JavaScript bisa dikatakan sebagai cakupan atau

jangkauan program yang ditandai dengan tanda kurung kurawal atau
curly brackets ({...}).

Umumnya, variabel dalam scope akan dianggap sebagai local scope agar
tidak bisa dibaca oleh scope lain.

Tapi, jika kita menggunakan var, maka variabel akan berubah menjadi
global scope. Artinya, ia masih bisa diakses meski berada di dalam
scope.

Nah, biar nggak bingung dan repot, sebaiknya kita gunakan variabel let
untuk fungsi scope.
Variabel dalam JavaScript

2. Reassigned dan Redeclared

Variabel var dapat di-update nilainya (reassigned) dan dapat di

deklarasi ulang namanya (redeclared).

Masalahnya, tidak akan ada pesan error sama sekali ketika terjadi
duplikasi variabel. Hal ini cukup riskan jika kita melakukannya secara
tidak sengaja. Bisa-bisa hasilnya berbeda dengan yang kita inginkan~
Variabel dalam JavaScript

3. Hoisting

Hoisting ini ibarat variabelnya “diangkat” atau “dipindahkan” ke

atas.

Maksudnya, gimana? Jika kita assign sebuah variabel var lebih dulu,
JavaScript akan mendeklarasikan variabel tersebut ke atas atau
mengangkatnya ke posisi atas di dalam scope. Hasilnya nggak akan
error kok, tapi bakalan membuat kita bingung.

Jadi, sebaiknya variabel dideklarasikan di awal sebelum di-assign.

Untuk lebih jelasnya, coba perhatikan contoh di samping!
Variabel dalam JavaScript

Variabel Let
Sejak kehadiran ES6/ES2015 (EcmaScript versi 6 atau EcmaScript
yang rilis tahun 2015), JavaScript memperkenalkan variabel let dan
const.

Kode di samping ini adalah contoh penulisan variabel let.

*Catatan: EcmaScript adalah sebuah standardisasi scripting language (Javascript) yang dibuat oleh sebuah
organisasi bernama European Computer Manufacturers Association (ECMA).
Variabel dalam JavaScript

1. Scope

Jika kita menggunakan let, maka variabel akan bertindak menjadi block
scope. Artinya, variabel hanya bisa diakses di dalam scope, yang
ditandai dalam sebuah kurung kurawal.

Dengan menggunakan let, kita tidak perlu berurusan lagi dengan

function untuk membuat local scope.
Variabel dalam JavaScript

2. Reassigned dan Redeclared

Variabel let dapat di-update nilainya (reassigned), tapi tidak bisa di

deklarasi ulang namanya (redeclared). Jadi, akan ada pesan error
ketika terjadi duplikasi variabel.

Tentu hal ini akan sangat membantu jika kita nggak sengaja melakukan
deklarasi ulang variabel.
Variabel dalam JavaScript

3. Hoisting

Sebenarnya, variabel let di JavaScript juga bisa hoisted.

Menariknya, jika dijalankan pada console di web browser, ia akan

menghasilkan error. Kenapa? Karena engine JavaScript nggak bisa
mengakses nama variabel sebelum dideklarasikan atau diinisialisasi.

Kondisi ini biasanya disebut dengan istilah Temporal Dead Zone

(TDZ).
Variabel dalam JavaScript

Nah, untuk contoh kedua, penerapan hoisting variabel let di dalam

function juga akan menghasilkan error.

Karena, sebenarnya di belakang layar JavaScript mendeklarasikan

variabel tersebut ke atas tanpa value, sehingga akan menghasilkan
undefined.

Namun, ini justru berguna bagi kita. Agar kita merevisi kode sesuai
kaidah yang baik.

Oleh karena itu, sejak awal variabel sudah harus dideklarasikan atau
diinisialisasi dengan sebuah value.
Variabel dalam JavaScript

Variabel Const
Variabel const berarti, nilai atau datanya tidak akan berubah dalam
kondisi apapun. Makanya dinamakan const (konstan).

Dalam mendefinisikan variabel konstan, kita diwajibkan untuk langsung

memasukkan nilai dari variabel tersebut.
Variabel dalam JavaScript

Uppercase Constants

Kita dianjurkan untuk menggunakan variabel konstan dalam beberapa

kasus. Contohnya, penggunaan alias, agar kita lebih mudah
mengingatnya.

Variabel konstan seperti itu biasanya diberi nama dengan menggunakan

garis bawah (_) untuk spasi.

Mari kita buat konstanta untuk warna dalam format yang disebut "web"
(heksadesimal).

Kelebihan menggunakan variabel konstan adalah:

● WARNA_MERAH lebih gampang untuk diingat, lebih

bermakna, dan mudah dibayangkan daripada kode warnanya
yaitu #F00
● Menghindari terjadinya typo.
Variabel dalam JavaScript

1. Scope

Seperti halnya variabel let, jika kita menggunakan const, maka variabel
yang ada akan bertindak menjadi block scope. Artinya, variabel hanya
bisa diakses di dalam scope, yang ditandai dalam sebuah kurung
kurawal ({...}).

Dengan menggunakan const, kita tidak perlu berurusan lagi dengan

function untuk membuat local scope.
Variabel dalam JavaScript

2. Reassigned dan Redeclared

Karena ini konstanta, maka kita nggak boleh mengubah nilai dari
variabel tersebut. Dengan kata lain, kita gak bisa me-reassigned.
Kenapa? karena variabel ini sifatnya immutable. Berarti, value-nya
nggak bisa diubah.

Kita juga nggak bisa me-redeclared atau mendeklarasikan ulang, lho!

Jangan sampai lupa ya~
 Variabel dalam JavaScript

/* Object dengan variabel const masih bisa kita ubah property-nya */

Eitss, ini nggak berlaku untuk object dan array, ya!
const obj = { id:1, name:'Sabrina'}
obj.location="Jakarta"
Variabel const memang nggak bisa kita reassigned dan
console.log(obj) // Output: { id:1, name:'Sabrina', location:'Jakarta'}
// Tapi, kita gak bisa reassigned
redeclared.
obj={} // Output: TypeError: Assignment to constant variable.
Tapi, property dalam object masih bisa diubah. Ini karena
/* Array dengan variabel const masih bisa kita ubah property-nya */ object dan array dalam JavaScript bersifat mutable, yang
const arr = [1,2,3,4] berarti value-nya bisa kita ubah.
arr.push(5)
console.log(arr) // Output: [1,2,3,4,5]
// Tapi, kita gak bisa reassigned
arr=[] // Output: TypeError: Assignment to constant variable.
Variabel dalam JavaScript

3. Hoisting

Hoisting di variabel const juga sama uniknya seperti variabel let.

Karena, engine JavaScript nggak bisa mengakses nama variabel
sebelum dideklarasikan atau diinisialisasi. Meski begitu, variabel
const akan langsung menunjukkan error.

Jadi, kita harus menginisialisasi nilai dari sebuah variabel di awal

ketika mau menggunakan variabel const.
Variabel dalam JavaScript

Gimana, udah tau kan perbedaan dari tiga jenis variabel di JavaScript dan kapan sebaiknya
digunakan? Kalo masih bingung, coba cek tabel di bawah!

var const let

scope global or local block block

redeclare? yes no no

reassign? yes no yes

hoisted? yes no no
Tipe Data dalam JavaScript

Karna kamu udah kenal sama variabel dalam

Javascript, selanjutnya, kita akan bahas tipe data
dalam JavaScript.

Kuy nggak nih?

30
Tipe Data dalam JavaScript

Dua tipe data dalam JavaScript.

Terdapat dua kelompok tipe data dalam JavaScript, yaitu data primitif dan
data non primitif.

Data primitif adalah jenis data yang sudah disediakan langsung oleh
Javascript dan bisa secara langsung merepresentasikan suatu nilai.
Contohnya: String, Number, Boolean, Null, dan Undefined

Data non primitif adalah data yang dibuat sendiri oleh developer, yang bisa
menyimpan beberapa nilai pada variabel. Contohnya: Array dan Object.
Tipe Data dalam JavaScript

Untuk mengetahui tipe data, kita bisa melakukan checking codingan yang
ada, lho!

Caranya bisa dengan menggunakan operator typeof. Ada dua cara dalam
menulis syntax typeof, yaitu:
● Sebagai operator → typeof x
● Sebagai function → typeof(x)

Contoh penggunaannya bisa kamu cek pada gambar di samping yaa!

Sekarang, kita bahas satu-persatu tipe yang tadi udah disebutin. Kita mulai
dari tipe data primitif yaa!
 Tipe Data dalam JavaScript: Primitif

1. String

String adalah tipe data yang menyimpan karakter sebagai

nilainya. Bisa dalam format huruf, angka, simbol, dan
sebagainya. Lalu, karakter-karakter tersebut akan diapit oleh
tanda kutip (‘ atau “). Hasil dari data string ini dapat ditampilkan
sesuai dengan karakter yang ditulis diantara tanda kutip (‘ atau “).

Contohnya bisa dilihat pada gambar di samping yaa!

 Tipe Data dalam JavaScript: Primitif

Di dalam String, kita bisa memanggil ulang variabel yang sudah kita
deklarasikan untuk membuat suatu ekspresi tertentu. String seperti itu
biasa kita sebut dengan template literal.

Template literal wajib memakai backtick (`). Untuk menambahkan suatu

kode yang akan dieksekusi di dalam String, kita menambahkan karakter
seperti ini ${...}.

Selanjutnya, kode-kode yang ada di dalam karakter itu akan dijalankan

oleh JavaScript.
Tipe Data dalam JavaScript: Primitif

2. Number

Number adalah tipe data yang mewakili number integer (angka bilangan
bulat) dan floating number (angka bilangan desimal).

Ada banyak operasi untuk number, contohnya perkalian (*), pembagian (/),
penjumlahan (+), pengurangan (-), dan seterusnya.
Tipe Data dalam JavaScript: Primitif

Selain tipe data number biasa, ada juga yang disebut special numeric
values. Yang termasuk dalam tipe data ini, yaitu:

● Infinity: nilai khusus yang lebih besar daripada angka berapapun.

Misal, kita bisa mendapatkan nilai infinity ini dari hasil pembagian
dengan nol.

● NaN (Not a Number): kesalahan komputasi. Hal ni terjadi karena

ada operasi matematika yang salah.
 Tipe Data dalam JavaScript: Primitif

3. Boolean

Tipe data boolean ini hanya memiliki dua nilai, yaitu true dan false. Tipe
data ini akan sering dipakai pada pengecekan suatu data.

Simpelnya, data ini semacam jawaban pada soal pilihan ganda.

Tipe Data dalam JavaScript: Primitif

Nilai Boolean bisa saja datang dari suatu perbandingan. Perbandingan

yang dimaksud di sini adalah Logical Operator
Tipe Data dalam JavaScript: Primitif

4. Null

Tipe data ini hanya mewakili kekosongan. Atau, bisa disebut juga dengan
“data yang tidak ada”.

Sebagai contoh, kita mencari buku A di sebuah perpustakaan, dan di

perpustakaan itu tidak memiliki indeks dari buku A. Maka, ketika kita
bertanya kepada Pustakawannya, maka dia bisa menjawab null atau tidak ada.
Tipe Data dalam JavaScript: Primitif

5. Undefined

Undefined adalah tipe data yang nggak terdefinisi. Artinya, nggak ada
sumber nilai pada data tersebut.

Nilai ini biasanya muncul ketika kita mendefinisikan variabel, tetapi kita
tidak memasukkan nilai ke dalamnya sama sekali.

Oke, selanjutnya kita bahas tipe data non-primitif yaa!

Tipe Data dalam JavaScript: Non-Primitif

1. Object

Object merupakan sebuah tipe data yang menyimpan koleksi tipe data yang
lain. Kalo dianalogikan, tipe data ini layaknya brankas. Oleh karena itu, untuk
memperoleh koleksi data tertentu, kita harus menggunakan kunci. const object = {
Kunci itu disebut key. Sedangkan, besaran/nilai dari key disebut value. hello: ‘world’
Sepasang key dan value disebut property. }
Dari contoh di samping, key nya adalah hello, sedangkan value nya adalah
world.

Key Value
Tipe Data dalam JavaScript: Non-Primitif

2. Array

Array adalah sebuah data yang menyimpan kumpulan tipe data primitif.

Bedanya dengan object, penyimpanan data dalam array dipetakan

menggunakan index.

Ohiya, index dalam array dimulai dari 0, bukan 1. Ingat-ingat yes~

Tipe Data dalam JavaScript

Biar lebih jelas, coba perhatikan perbedaan Object vs Array berikut ini!
Tipe Data dalam JavaScript: Non-Primitif

Lanjut kita bahas Array~

Dalam JavaScript, array memiliki beberapa metode yang bisa dipakai,

misalnya untuk memanipulasi data atau hanya sekedar mencari data.

Beberapa metode yang disediakan oleh Array, yaitu: push, pop, shift,
unshift, forEach, filter, map, dan concat.

Yuk, kita bahas contohnya satu-persatu!

 Tipe Data dalam JavaScript: Non-Primitif

Push Pop

Metode ini digunakan untuk menambahkan item yang disimpan dalam index Metode ini digunakan untuk mengeluarkan item yang terakhir di array.
terakhir di array.
 Tipe Data dalam JavaScript: Non-Primitif

Shift Unshift

Metode ini digunakan untuk mengeluarkan item pertama dalam array. Method ini digunakan untuk menambahkan item di index pertama
dalam array.
 Tipe Data dalam JavaScript: Non-Primitif

forEach Filter

Metode ini digunakan sebagai cara singkat untuk melakukan perulangan Metode ini digunakan untuk melakukan penyaringan dalam suatu array.
(looping) dalam array.
 Tipe Data dalam JavaScript: Non-Primitif

Map Concat

Metode ini digunakan untuk memanipulasi isi dalam array tanpa mengubah Metode ini digunakan untuk menggabungkan beberapa array menjadi
array aslinya. Map akan membuat array baru dengan melakukan fungsi pada satu array.
setiap elemen array.
Saatnya kita
Quiz!

49
Quiz

1. Jenis variabel yang bisa di update nilainya (reassigned), tapi tidak bisa di
deklarasi ulang namanya (redeclared) adalah...

A. var

B. let

C. const

50
Quiz

1. Jenis variabel yang bisa di update nilainya (reassigned), tapi tidak bisa di
deklarasi ulang namanya (redeclared) adalah...

A. var

B. let

C. const

Variabel let bisa di update nilainya (reassigned), tapi tidak bisa di deklarasi ulang namanya (redeclared). Sedangkan
variabel var bisa keduanya, dan sebaliknya kalau variabel const tidak bisa keduanya.

51
Quiz

2. Manakah yang akan menghasilkan tipe data special numeric values NaN?

A. console.log(“Dua puluh”/2);

B. console.log(1/0);

C. console.log(“Halo-halo ” + “Bandung”);

52
Quiz

2. Manakah yang akan menghasilkan tipe data special numeric values NaN?

A. console.log(“Dua puluh”/2);

B. console.log(1/0);

C. console.log(“Halo-halo ” + “Bandung”);

Opsi A akan menghasilkan NaN karena hasil pembagian yang tidak tepat, tipe data string dibagi dengan tipe data
number. Opsi B akan menghasilkan infinity, sedangkan opsi C akan menghasilkan tipe data string.

53
Quiz

3. Metode Array yang digunakan untuk mengeluarkan item yang terakhir

adalah...

A. push

B. shift

C. pop

54
Quiz

3. Metode Array yang digunakan untuk mengeluarkan item yang terakhir

adalah...

A. push

B. shift

C. pop

push digunakan untuk menambahkan item yang disimpan ke dalam index terakhir di array, sedangkan shift
digunakan untuk mengeluarkan item pertama di array.

55
Quiz

4. Metode Array yang digunakan untuk melakukan perulangan dengan cara

singkat adalah...

A. map

B. filter

C. forEach

56
Quiz

4. Metode Array yang digunakan untuk melakukan perulangan dengan cara

singkat adalah...

A. map

B. filter

C. forEach

map digunakan untuk memanipulasi isi array, sedangkan filter digunakan untuk menyaring array.

57
Quiz

5. Metode Array yang digunakan untuk memanipulasi array tanpa mengubah

array aslinya adalah...

A. concat

B. map

C. filter

58
Quiz

5. Metode Array yang digunakan untuk memanipulasi array tanpa mengubah

array aslinya adalah...

A. concat

B. map

C. filter

Filter digunakan untuk menyaring array, sedangkan concat digunakan untuk menggabungkan beberapa array
menjadi satu array.

59
 Referensi
PM 101 dan bacaan lebih lanjut

Referensi dan bacaan lebih lanjut~

1. https://www.w3schools.com/js/js_variables.asp

2. https://www.w3schools.com/js/js_datatypes.asp

3. https://www.w3schools.com/js/js_arrays.asp

4. https://medium.com/coderupa/es6-var-let-const-apa-bedanya-1cd4daaee9f0

5. https://medium.com/@rivayudha/javascript-hoisting-alasan-kamu-benci-jav
ascript-part-ii-93ed3220630d

6. https://medium.com/swlh/deep-and-easy-es6-explanation-part-1-let-and-con
st-f96ec1d6d332

7. https://blog.bitsrc.io/hoisting-in-modern-javascript-let-const-and-var-b29040
5adfda

8. https://dev.to/anwargul0x/javascript-es6-declarations-guide-44a2

60
Penutup

Nah, selesai sudah pembahasan kita di Chapter 2

Topic 1 ini.

Selanjutnya, kita bakal bahas gimana penggunaan

operator dan pembuatan expression pada
JavaScript.

Penasaran kayak gimana? Cus langsung ke topik

selanjutnya~