Tutorial Belajar JavaScript Part 30: Mengenal Method (fungsi) Objek Tipe Data Array JavaScript

Sama seperti tipe data dasar dalam JavaScript, Array juga memiliki fungsi atau method yang bisa digunakan dalam pemrosesan array. Dalam tutorial kali ini kita akan membahas apa saja method atau fungsi array di dalam JavaScript.


Jenis-jenis method Array JavaScipt

Untuk mempermudah penggunaan array, JavaScript menyediakan beberapa fungsi yang melekat pada setiap variabel array (atau lebih tepat disebut dengan method). Berikut adalah method objek array di dalam JavaScript.

  • join()
  • reserve()
  • sort()
  • slice()
  • splice()
  • push dan pop()
  • shift() dan unshift()
  • toString() dan toLocaleString()

Kita akan membahas seluruh method ini secara lebih mendalam.


Method Objek Array: Array.join()

Method Array .join() berfungsi untuk menggabungkan elemen array menjadi sebuah string. Sebuah argumen bisa diinputkan kedalam method ini yang akan berfungsi sebagai karakter ’pembatas’ untuk menyatukan array. Berikut adalah contoh penggunaan method join() dalam JavaScript:

<script>
var arr1 = [1,2,3,4,5,"a","b","c","d","e"];
console.log(arr1.join());         //hasil: 1,2,3,4,5,a,b,c,d,e
console.log(arr1.join("."));      //hasil: 1.2.3.4.5.a.b.c.d.e
console.log(arr1.join("|"));      //hasil: 1|2|3|4|5|a|b|c|d|e
console.log(arr1.join("_"));      //hasil: 1_2_3_4_5_a_b_c_d_e
</script>

Perhatikan bahwa jika argumen tidak ditulis, maka tanda koma ”,” akan digunakan sebagai pembatas string. Fungsi join() ini adalah kebalikan dari fungsi split() dari objek string.


Method Objek Array: Array.reverse()

Method Array.reverse() digunakan untuk membalikkan urutan dari elemen di dalam array. Method ini akan mengubah array asal. Berikut adalah contoh penggunaan method reverse():

<script>
var arr1 = [1,2,3,4,5,"a","b","c","d","e"];
console.log(arr1.toString());         //hasil: 1,2,3,4,5,a,b,c,d,e
 
arr1.reverse();
console.log(arr1.toString());         //hasil: e,d,c,b,a,5,4,3,2,1
</script>

Method Objek Array: Array.sort()

Method Array.sort() digunakan untuk mengurutkan elemen dari array. Jika method ini dipanggil tanpa argumen, elemen dari array akan diurutkan berdasarkan abjad. Jika elemen di dalam array bukan huruf, maka akan dikonversi sementara menjadi string, baru kemudian dilakukan proses pengurutan. Jika ditemukan elemen dengan nilai null atau undefined, akan di tempatkan pada urutan akhir.

Berikut adalah contoh penggunaan method sort() dalam array JavaScript:

<script>
var arr1 = ["zulkifli","andi","erik","joko","dina"];
arr1.sort();
console.log(arr1.toString());         //hasil: andi,dina,erik,joko,zulkifli
 
var arr2 = [3,5,2,8,,,1,31,22,44,33,11];
arr2.sort();
console.log(arr2.toString());         //hasil: 1,11,2,22,3,31,33,44,5,8,,
</script>

Dari contoh diatas terlihat bahwa method sort() tidak menghasilkan nilai yang seharusnya dalam pengurutan angka. Untuk hal ini, kita bisa menginput fungsi kedalam argumen method sort().

Fungsi yang diinput di dalam argumen method sort() akan memiliki 2 inputan untuk memutuskan elemen mana yang akan ditampilkan terlebih dahulu. Jika elemen pertama seharusnya ditampilkan terlebih dahulu, maka fungsi harus menghasilkan nilai kurang dari 0, dan apabila angka kedua harus tampil terlebih dahulu, maka fungsi harus mengembalikan nilai lebih besar dari 0.

Sebagai contoh, berikut adalah method sort() dengan argumen berupa fungsi untuk mengurutkan angka dalam elemen array.

<script>
var arr2 = [3,5,2,8,,,1,31,22,44,33,11];
arr2.sort(function(a,b) {return a-b;});
console.log(arr2.toString());             //hasil: 1,2,3,5,8,11,22,31,33,44,,
</script>

Method Objek Array: Array.concat()

Method Array.concat() berfungsi untuk ”penyambungan” array. Hasil akhir dari pemanggilan fungsi ini adalah array baru dengan penambahan dari method concat(). Elemen yang ditambahkan diinput sebagai argumen dari method concat(). Berikut adalah contohnya:

<script>
var arr1 = [1,2,3,4,"a","b","c","d"];
console.log(arr1.toString());         //hasil: 1,2,3,4,a,b,c,d
 
var arr2=arr1.concat(11,22,33,44);
console.log(arr2.toString());         //hasil: 1,2,3,4,a,b,c,d,11,22,33,44
</script>

Method Objek Array: Array.slice()

Method Array.slice() digunakan untuk ’memotong’ array menjadi array baru, atau menjadi ’sub-array’ dari array asal. Method slice() ini membutuhkan 2 buah argumen yang berisi posisi index awal dan akhir pemotongan.

Jika hanya diberikan 1 argumen, maka method ini akan mengembalikan array baru dimulai dari posisi argumen sampai dengan akhir array. Jika argumen bernilai negatif, maka perhitungan akan dimulai dari akhir array. Berikut adalah contoh penggunaan method array slice():

<script>
var arr1 = [1,2,3,4,"a","b","c","d"];
 
//slice dari index ke 2 sampai 4
var arr2 = arr1.slice(2,4)
console.log(arr2.toString());         //hasil: 3,4
 
//slice dari index ke 4 sampai akhir array
var arr3 = arr1.slice(4)
console.log(arr3.toString());         //hasil: a,b,c,d
 
//slice dari index ke 2 dari akhir array
var arr4 = arr1.slice(-2)
console.log(arr4.toString());         //hasil: c,d
 
//slice dari index ke 5 dari akhir array sampai
//index ke 2 dari akhir array
var arr5 = arr1.slice(-5,-2)
console.log(arr5.toString());         //hasil: 4,a,b
</script>

Dari contoh kode yang kita lakukan, terlihat bahwa index terakhir tidak termasuk ke dalam array baru. arr1.slice(2,4) akan mengembalikan elemen array dari index ke-2, ke-3, namun tidak ke-4.


Method Objek Array: Array.splice()

Walaupun memiliki nama method yang mirip dengan slice(), method splice() sepenuhnya berbeda. Method splice() adalah method ’serba-bisa’ yang bisa digunakan untuk memotong array, menambahkan elemen array, bahkan melakukan keduanya sekaligus.

Tidak seperti method slice() dan concat(), pemanggilan method ini akan mengubah array asal.

Jika hanya diberikan satu buah argumen, method splice() akan berfungsi ’menghapus’ array asal mulai dari index yang diberikan, dan mengembalikan nilai array yang ’dihapus’. Berikut contohnya:

<script>
var arr1 = [1,2,3,4,"a","b","c","d"];
console.log(arr1.toString());     // hasil: 1,2,3,4,a,b,c,d
 
//splice dari index ke 4
var arr2 = arr1.splice(4)
 
console.log(arr1.toString());     // hasil: 1,2,3,4
console.log(arr2.toString());     // hasil: a,b,c,d
</script>

Jika method splice() memiliki 2 argumen, maka argumen kedua berfungsi untuk menentukan seberapa banyak elemen yang akan di ’hapus’. Jika elemen yang dihapus berada ditengah-tengan array asal, maka array asal akan ’tersambung’. Berikut contohnya:

<script>
var arr1 = [1,2,3,4,"a","b","c","d"];
console.log(arr1.toString());     // hasil: 1,2,3,4,a,b,c,d
 
//hapus 3 elemen mulai dari index ke 3
var arr2 = arr1.splice(3,3)
 
console.log(arr1.toString());     // hasil: 1,2,3,c,d
console.log(arr2.toString());     // hasil: 4,a,b
</script>

Method splice() mendukung argumen ke 3, 4, dan seterusnya. Jika disertakan, argumen ini akan berfungsi sebagai elemen yang akan ditambahkan ke array asal dimulai dari posisi argumen pertama. Berikut adalah contoh kode program splice() dengan 3 atau lebih argumen:

<script>
var arr1 = [1,2,3,4,"a","b","c","d"];
console.log(arr1.toString());     // hasil: 1,2,3,4,a,b,c,d
 
// masukkan elemen "x","y","z"
// mulai dari elemen ke 4
var arr2 = arr1.splice(4,0,"x","y","z")
 
console.log(arr1.toString());     // hasil: 1,2,3,4,x,y,z,a,b,c,d
console.log(arr2.toString());     // hasil: [] (array kosong)
 
var arr1 = [1,2,3,4,"a","b","c","d"];
console.log(arr1.toString());     // hasil: 1,2,3,4,a,b,c,d
 
// hapus 4 elemen mulai dari elemen ke 4
// masukkan elemen "x","y","z" pada posisi penghapusan
var arr2 = arr1.splice(4,4,"x","y","z")
 
console.log(arr1.toString());     // hasil: 1,2,3,4,x,y,z
console.log(arr2.toString());     // hasil: a,b,c,d
</script>

Method splice() ini mungkin sedikit sulit dipahami jika dibandingkan dengan method objek array lainnya, namun bisa bermanfaat dalam pembuatan program.


Method Objek Array: Array.push() dan Array.pop()

Method push() dan pop() digunakan untuk menambahkan dan mengurangi elemen dari array. Kedua method ini memungkinkan pemrosesan array sabagai sebuah ’stack’ atau tumpukan dengan metoda ”first in last out”.

Method push() akan menambahkan elemen array pada akhir dari array, sedangkan method pop()  akan menghapus elemen terakhir dari array. Kedua method ini akan mengubah array asal dan mengembalikan nilai jumlah elemen array.

Berikut adalah contoh penggunaan method Array.push() dan Array.pop() dalam JavaScript:

<script>
var arr1 = [];
 
arr1.push("a","b","c");
console.log(arr1.toString());   // hasil: a,b,c
 
arr1.push("d");
console.log(arr1.toString());   // hasil: a,b,c,d
 
arr1.pop();
console.log(arr1.toString());   // hasil: a,b,c
 
arr1.pop();
console.log(arr1.toString());   // hasil: a,b
</script>

Objek Array: Array.unshift() dan Array.shift()

Method Array.unshift() dan Array.shift() hampir sama dengan Array.push() dan Array.pop() perbedaannya, method unshift() dan shift() akan menambahkan atau menghapus elemen array di awal array.

Method unshift() akan menambahkan elemen baru diawal array, dan menggeser seluruh eleman yang ada. Method shift() akan menghapus elemen paling awal array, dan menggeser ke bawah seluruh elemen lain di dalam Array. Kedua method ini akan mengubah array asal.

Berikut adalah contoh penggunaan method Array.unshift() dan Array.shift() dalam JavaScript:

<script>
var arr1 = [];
 
arr1.unshift("a","b","c");
console.log(arr1.toString());   // hasil: a,b,c
 
arr1.unshift("d");
console.log(arr1.toString());   // hasil: d,a,b,c
 
arr1.shift();
console.log(arr1.toString());   // hasil: a,b,c
 
arr1.shift();
console.log(arr1.toString());   // hasil: b,c
</script>

Method Objek Array: Array.toSting() dan Array.toLocaleString()

Method toSting() dan toLocaleString() berfungsi untuk menkonversi array menjadi string. Dalam contoh-contoh yang kita lakukan dalam tutorial ini, hampir semuanya menggunakan method toString untuk menampilkan hasil array.

Kedua method ini akan mengkonversi masing-masing elemen menjadi string, lalu menyambungnya menjadi sebuah string dengan karakter koma sebagai pemisah.

Perbedaan antara toSting() dan toLocaleString() adalah method toLocaleString() akan mengkonversi elemen berdasarkan setingan lokal web browser, namun anda tidak akan melihat perbedaannya. Berikut adalah contoh penggunaan kedua method ini:

<script>
var arr1 = [1,2,3,4,"a","b","c","d"];
console.log(arr1.toString());           // hasil: 1,2,3,4,a,b,c,d
console.log(arr1.toLocaleString());     // hasil: 1,2,3,4,a,b,c,d
</script>

Dalam tutorial kali ini, kita telah membahas 11 method dasar array dalam JavaScript. Namun tipe data Array JavaScript masih memiliki method lain yang dikenal dengan ECMAScript 5 array method. Disebut dengan ECMAScript 5 array method karena method ini ditambahkan pada versi ECMAScript 5.

Method ini contohnya: forEach(), map(), dan filter(). Karena method ini sedikit rumit (hampir setiap argumennya adalah fungsi), maka saya akan ’melompati’ sementara method ini.


eBook JavaScript Uncover Duniailkom
JavaScript sudah menjadi fitur wajib di setiap website modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih lengkap, mulai dari dasar hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut bisa ke eBook JavaScript Uncover Duniailkom.

Tutorial Terkait:

8 Comments

  1. Aprillia
    08 Jun 15
    • Andre
      20 Nov 15
  2. jaya
    08 Apr 16
  3. Alfian W
    30 May 16
    • Andre
      31 May 16
  4. Hasbullah Idris
    28 Sep 16
    • Andre
      29 Sep 16

Add Comment