Tag: tutorial

Perkenalan

Array merupakan tipe data yang bersifat mutable yang berarti tipe data ini dapat dilakukan perubahan berdasarkan method yang telah disediakan oleh array.

Array jika di terjemahkan dalam bahasa indonesia adalah larik. Pada javascript array merupakan objek global yang berfungsi menyimpan banyak data yang berbeda dalam suatu array.

Dalam dokumentasi resmi menyebutkan array seperti struktur data objek yang berupa list / atau berupa daftar dalam satu array (larik). Penggunaan array javascript sangat flexible, artinya dalam satu array dapat terdiri dari beberapa data dengan berbagai macam tipe data yang berbeda.

Inisialisasi

Terdapat dua cara yang cukup dikenal untuk mengisialisasi array yang pertama dengan menggunakan kurung siku [ ] dan kedua memangil instasi objek array.

// insialisasi array 
// -----------------

// cara yang pertama.
const array1 = [element0, element1,...elementN)

// cara yang kedua
const array2 = new Array(element0, element1,...elementN) // cara yang buruk!

Sebaiknya kita mendeklarasikan data array menggunakan cara yang pertama. Karena cara kedua adalah cara yang buruk dalam mendeklarasikan array.

Data yang disimpan dalam array disebut dengan element. Setiap element pada array dipisahkaan dengan koma (,). Element pada array yang menjadi objek, oleh karena itu array disebut sebagai struktur / tipe data objek.

Perhitungan element pada array disebut dengan index. Uniknya adalah index element array di mulai dari nol (0). Perhatikan kode berikut ini.

const arrays = ['iqbal', 23, true]

console.log(arrays[0]) // output -> iqbal
console.log(arrays[1]) // output -> 23
console.log(arrays[2]) // output -> true

Contoh diatas adalah array yang bersifat heterogen yang berarti dalam suatu array memiliki tipe data yang berbeda untuk setiap elementnya. Namun array juga memiliki sifat yang homogen yang berarti elemen-elemen pada array memiliki tipe data yang sama.

Length pada array

Sesuai dengan namanya, length jika diterjemahkan dalam bahasa indonesia berarti panjang. Artinya panjang dari array bergantung dari jumlah elemen-elemen yang terdapat didalam array. Jadi penggunaan length secara spesifik adalah menghitung jumlah keseluruhan elemen dari array.

const arrays = ['iqbal', 23, true]

console.log(arrays.length) // output -> 3 

Akses Data Pada Array

Akses data pada array yaitu dengan cara menyebutkan nomor index pada element array yang ingin di akses. Sebagaimana telah di singgung bahwa element array dimulai dari nol (0). Dan mengaksesnya harus perlu menggunakan menggunakan kurung siku diikuti dengan nomor index yang ingin diakses

const arrays = ['iqbal', 23, true]

console.log(arrays[0]) // mengakses index 1 
console.log(arrays[1]) // mengakses index 2 
console.log(arrays[2]) // mengakses index 3

dan untuk mengkases mengakses index terahkir dari array dapat menggunakan method length – 1

// mengakses index terakhir dari array 
const arrays = ['iqbal', 23, true]

console.log(arrays.length -1) // output -> true 

Ada banyak sekali method yang ada array. Namun kita akan membahas method yang sering digunakan pada saat development. Atau anda dapat membaca langsung semua method pada array javascript di dokumentasi resmi pada link dibawah ini

Dokumentasi Resmi Array Javascript

Dalam pemograman, perintah komentar akan diabaikan dan tidak akan dieksekusi. Penggunaan komentar sangat penting karena dengan pemberian komentar maka kita dapat memberikan penjelasan terhadap kode yang ditulis.

Semicolom atau titik-koma, tentunya para pemula lebih senang dengan penulisan titik koma diakhir kode karena membuat kode menjadi lebih rapi menurut mereka.

Template String sama halnya dengan tipe data String yaitu merepresentasikan data berupa text / tekstual. Template string dipekernalkan oleh ES6 penggunakan template string dengan cara memberikan back-tik(` `) pada sebuah data.

Tipe data adalah suatu struktur data yang terdapat pada variable atau merepresentasikan suatu value.

Mengawali pembelajaran terhadap suatu Bahasa pemograman apapun, harus mengenal tentang variable.

Apa itu variable? 

Apa kegunaan dari variable? 

Bagaimana cara menggunakan variable?

Ketiga indikator tersebut harus betul-betul dipahami. Mari kita mulai dengan Apa itu Variable.

Variable adalah sebuah konsep dapat diibaratkan wadah atau tempat didalam pemograman yang berguna untuk penyimpanan data atau sebuah potongan informasi. Kemudian disimpan pada memori komputer selama program tersebut berjalan. Jika diilustrasikan maka penggambarannya bisa dilihat pada gambar dibawah ini.

Ilustrasi dari ketiga gelas diatas menggambarkan sebuah variable, dimana gelas pertama merupakan penggambaran variable yang tidak diberikan nilai (dalam javascript bisa disebut undefined). 

Dan pada gelas berikutnya berisikan dua jenis minuman yang berbeda dan sama halnya dengan variable yang dapat menampung nilai apapun baik tipe data berupa number, string, boolean, null, undefined, Symbol, array maupun object.

Dalam penggunaan variable harus dideklarasikan dengan cara memberikan identitas atau memberikan nama sebagai tanda pengenal variable. Penamaan variable harus unik dan tidak boleh sama, variable pada javscript juga perlu dikenalkan agar kita dapat mengisi suatu nilai dan dapat menggunakan variable.

Penamaan terhadap sebuah variable disebut dengan identifier. Berikut ini adalah contoh deklarasi variable dalam javascript.

Mendeklarasikan suatu variable dalam javascript terdapat 3 cara, yaitu dapat menggunakan keyword var, let dan const. 

Ketiga keyword dalam mendeklarasikan variable memiliki perbedaannya masing-masing. Mari kita membahas perbedan-perbedaan tersebut.

Menggunakan Var

Sebelum diperkenalkan fitur-fitur ES6 dalam javascript, untuk mendeklarasikan sebuah variable yakni menggunakan keyword var.

var mahasiswa = “iqbal”;

Anda juga dapat mendeklarasikan variable dalam satu statement.

var nama = "iqbal", kelas = 10;

console.log(nama); // output -> iqbal 
console.log(kelas); // output -> 10

Untuk penulisan variable dalam satu baris statement tidak disarankan.

Karena menurut saya penulisan kode seperti ini akan membuat programmer lain akan kesulitan membaca kode kita jika ditulis seperti itu.

Untuk saat ini, penggunaan var dianggap tidak efektif lagi dalam mendeklarasikan variable. Dikarenakan beberapa kasus seperti saat anda lupa menggunakan var dalam mendeklarasikan sebuah variable, maka anda telah meletakan sebuah value pada undeclared variable.

mahasiswa = "iqbal"; // output -> iqbal

// contoh undeclared variable

Kode diatas tidak error, karena javascript akan menganggap ini sebagai variable global. Dalam sebuah envirotment modern apabila bila anda mengaktifkan mode ketat dengan perintah use strict. Pendeklarasian terhadap variable tanpa var akan menjadi error.

Perhatikan kode berikut ini

'use strict'

nama = 'iqbal'; // output -> ReferenceError: nama is not defined

Kode diatas akan menampilkan error karena javascript tidak mengenali “nama” yang tidak terdefenisikan. Pada permasalahan demikian anda perlu menginisialisasi “nama” sebagai variable baik menggunakan var, let ataupun const.

Ada lagi permasalahan yang ditimbulkan penggunaan keyword var dalam deklarasi variable. Seperti anda dapat mendeklarasikan ulang dengan identifier yang sama seperti contoh berikut ini.

var nama = "iqbal";

var nama = "niyaz";

console.log(nama); // output -> niyaz 

Potongan kode diatas akan menghasilkan output “niyaz”. Meskipun deklarasi awal variable nama diberikan nilai “iqbal”. Akan tetapi kita dapat mendeklarasikan ulang variable dengan identifier yang sama yakni nama dan memberikan value yang berbeda dalam hal ini disebut sebagai reassign.

Reassign adalah cara penulisan kode yang buruk. Karena dalam kasus dengan baris kode yang kompleks maka aktivitas maintenance kode akan menjadi rumit ketika mengalami bug atau saat melakukan pengembangan aplikasi.

Beberapa point diatas telah menunjukan kelemahan dari var, yaitu reassign dan undeclared variable.

Namun akan ada permasalahan lainnya jika masih mempertahankan penggunaan var. Maka kita harus memahami konsep hoisting dan scope pada javascript.

Kedua konsep ini juga akan memberi penjelasan tentang perbedaan penggunaan var dan let.

• Scope adalah ruang lingkup, dalam javascript variable yang di inisialisasi dengan menggunakan var akan ditugaskan menjadi objek global. Untuk membatasi penggunaan variable agar tidak menjadi objek global adalah kita memerlukan ruang lingkup baru, yaitu dengan cara membuat fungsi untuk membatasi ruang lingkup tersebut.  Untuk penjelasannya dapat memperhatikan kode dibawah ini.

var nama = "iqbal";

// membuat fungsi namaOrang
function namaOrang() {
    var nama = "niyaz";
    console.log(nama)
}

// menampilkan fungsi namaOrang
namaOrang(); // output -> niyaz

// menampilkan variable nama 
console.log(nama); // output -> iqbal

kode diatas menunjukan bahwa kita dapat membuat variable nama dengan value “iqbal” yang bertugas sebagai global objek / global variable. Namun variable nama yang berada dalam fungsi namaOrang akan membuat suatu ruang lingkup yang baru sehingga variable nama menjadi local variable yang hanya dapat digunakan hanya didalam fungsi.

Perlu untuk diketahui bahwa inisialisai variable dengan var akan menjadikannya sebagai function scope, artinya kita perlu membuat fungsi agar variable dalam fungsi tersebut menjadi local, sehingga memiliki batasan dan hanya dapat digunakan pada fungsi tersebut.

• Hoisting, jika anda mendeklarasikan sebuah variable pada javascript maka yang terjadi adalah javascript mengangkat semua variable keatas kemudian mengeksekusinya. Meskipun anda menempatkan variable diakhir baris kode maka javascript akan tetap mengangkat variable keatas sebelum mengeksekusinya.

hallo = "hello world" // mengisi variable hallo 

console.log(hallo); // menampilkan variable hallo

var hallo // variable hallo akan diangkat keatas sebelum dieksekusi

berikut adalah penjelasan mengapa anda harus menginggalkan penggunaan var untuk membuat variable.

next kita lanjutkan penggunaan let.

Kuy lah…..

Menggunakan Let

Let adalah fitur baru yang diperkenalkan oleh ES6 yang pada dasarnya pengembangan dari var.

Perbedaannya ada pada scope, apabila var cangkupannya adalah function scope, bila berada diluar dari fungsi akan dinyatakan sebagai global objek. Berbeda halnya dengan let yang cangkupannya adalah block scope.

Block scope dengan menggunakan let yaitu cangkupanya terbatas pada block tempat variable let didefenisikan. Sehingga dengan konsep block scope yang dianut oleh let dapat menjadi solusi atas permasalahan yang dialami oleh var.

Seperti halnya jika kita deklarasi dengan identifier yang sama.

let nama = "iqbal"; 

let nama = "niyaz";

console.log(nama); // output -> SyntaxError: Identifier 'nama' has already been declared

Reassign pada indentifier yang sama seperti kasus kode diatas hanya berlaku dengan apabila kita menggunakan var.

Akan tetapi apabila menggunakan let akan mendapatkan error,  sebab variable nama telah dideklarasikan dan anda tidak dapat melakukan deklarasi variable dengan identifier yang sama.

Dalam pengembangan javascript modern sebaiknya tidak menggunakan var untuk mendeklarasikan sebuah variable. Para programmer javascript seharusnya menggunakan let untuk mendeklarasikan variable. Karena let menganut block scope sehingga anda tidak perlu membuat function untuk membuat local variable.

Konsep hoisting juga tidak berlaku dalam let. Perhatikan kode berikut ini.

nama = "iqbal"; 

let nama;

console.log(nama); // output -> ReferenceError: nama is not defined

Mana yang lebih baik dari var atau let?

Sebaiknya anda beralih menggunakan let pada saat initialisasi sebuah variable!

Udah capek? eits…. masih sisa satu pembahasan lagi tentang const. Jom kita lanjut?

Kuy lah….

Menggunakan Const

Mudahnya dalam memahami const adalah anda tidak dapat merubah isi dari variable.

Apabila var dan let dapat melakukan perubahan isi suatu variable maka const tidak dapat melakukannya. Karena const sesuai dengan singkatannya yakni konstanta yang berarti tetap.

const nama = "iqbal"; 

nama = "niyaz"; 

console.log(nama); // output -> TypeError: Assignment to constant variable.

Namun terdapat pengecualian terhadap tipe data object (array dan object). Variable const akan mengijikan untuk melakukan perubahan data sesuai dengan method yang telah disediakan oleh array maupun object dan ini disebut dengan mutable.

Agar mudah dipahami perhatikan kode berikut ini contoh mutable dengan object.

const mahasiswa = {
    nama: 'iqbal',
    kelas: 304,
}

mahasiswa.fakultas = 'informatika'

console.log(mahasiswa); 
// output -> { nama: 'iqbal', kelas: 304, fakultas: 'informatika' }

Dan ini adalah mutable dengan array.

const mahasiswa = ['iqbal', 'niyaz'];

mahasiswa.push('dwi');

console.log(mahasiswa);
// output > [ 'iqbal', 'niyaz', 'dwi' ]

Const tidak memberikan Immutable (tidak bisa berubah) pada tipe data objek adalah memastikan bahwa referensi tidak dirubah asalkan terdapat method yang diijinkan untuk melakukan perubahan pada objek tersebut.

Mana yang akan saya pilih var, let dan const?

Saya kecenderungan menggunakan const untuk mendeklarasikan sebuah variable.

Alasan saya adalah const adalah konstruksi yang sangat sederhana dalam mendeklarasi variable, artinya saya menempatkan variable hanya sekali untuk fungsi tertentu saja. Namun adakalanya saya juga menggunakan let pada kasus-kasus tertentu.

Untuk var sebaiknya anda menghindari atau tidak menggunakannya lagi.