Cara menggunakan METHOD pada JavaScript

Contoh:

Table of Contents Show

Keyword this
Method JavaScript
Mengakses Method Objek
Menggunakan Metode Bawaan
Menambahkan Method ke Objek
Jenis-jenis method Array JavaScipt
Apa itu method di JavaScript?
Apa itu Method array?
Apa itu slice di JavaScript?
Apa tanda yang dapat digunakan untuk membuat objek di JavaScript?

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Keyword <i>this</i></h2>

<p>Pada Contoh ini, <b>this</b> merepresentasikan objek <b>person</b>.</p>
<p> Karena objek person "memiliki" method fullName. </p>
<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

Keyword this

Dalam definisi fungsi, this mengacu pada “pemilik” fungsi.

Dalam contoh di atas, this adalah objek person yang “memiliki” fungsi fullName.

Dengan kata lain, this.firstName berarti properti firstName dari objek this.

Method JavaScript

Method JavaScript adalah tindakan yang dapat dilakukan pada objek.

Method JavaScript adalah properti yang berisi definisi fungsi.

Properti	Value
firstName	John
lastName	Doe
age	50
eyeColor	blue
fullName	function() {return this.firstName + ” ” + this.lastName;}

Metohd adalah fungsi yang disimpan sebagai properti objek.

Mengakses Method Objek

Kita dapat mengakses method objek dengan sintaks berikut:

Biasanya kita akan mendeskripsikan fullName() sebagai method objek person, dan fullName sebagai properti.

Properti fullName akan dieksekusi (sebagai fungsi) ketika dipanggil dengan ().

Contoh ini menunjukan cara mengakses method fullName() dari objek person.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p> Membuat dan menggunakan method objek. </p>
<p> Method sebenarnya adalah definisi fungsi yang disimpan sebagai nilai properti. </p>
<p id="demo"></p>

<script>
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>

Jika kita mengakses properti fullName, tanpa(),maka hal ini akan mengembalikan definisi fungsi, sebagai berikut:

<!DOCTYPE html>
<html>
<body>

<p> Method objek adalah definisi fungsi yang disimpan sebagai nilai properti. </p>
<p> Jika Anda mengaksesnya tanpa (), ini akan mengembalikan definisi fungsi: </p>

<p id="demo"></p>

<script>
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>

Menggunakan Metode Bawaan

Contoh ini menggunakan methode toUpperCase() dari objek String, untuk mengonversi teks menjadi huruf besar:

var message = "Hello world!";
var x = message.toUpperCase();

Nilai x, setelah eksekusi kode di atas akan menjadi:

HELLO WORLD!

Menambahkan Method ke Objek

Menambahkan method baru ke objek sanagat mudah, caranya akan ditunjukan pada contoh dibawah ini.

Contoh

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
};
person.name = function() {
  return this.firstName + " " + this.lastName;
};

document.getElementById("demo").innerHTML =
"My father is " + person.name(); 
</script>

</body>
</html>

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.toString() dan Array.toLocaleString()

Method toString() 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 toString() 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.

Apa itu method di JavaScript?

Method JavaScript adalah tindakan yang dapat dilakukan pada objek. Method JavaScript adalah properti yang berisi definisi fungsi. Metohd adalah fungsi yang disimpan sebagai properti objek.

Apa itu Method array?

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.

Apa itu slice di JavaScript?

slice() merupakan method array di JavaScript yang berfungsi menyalin sebagian elemen array ke array baru. Elemen yang ingin disalin ditentukan menggunakan indeks, indeks awal dan akhir. Method ini tidak mengubah array asli.