Cara menggunakan call and apply javascript

Penggunaan Kembali Metode

Dengan metode call(), kita bisa menulis metode yang bisa digunakan pada objek yang berbeda.

Table of Contents Show

Penggunaan Kembali Metode
Semua Fungsi adalah Metode
Keyword this
Metode call() JavaScript
Metode call() dengan Argumen
Di Javascript semua adalah object termasuk function.
Keyword this
Penggunaan method Call, Apply, dan Bind
Terima kasih telah membaca !
Apakah JavaScript cocok untuk pemula?
Apa itu method di JavaScript?
Apa saja tipe data di JavaScript?
Apa itu OOP pada JavaScript?

Table of Contents

Penggunaan Kembali Metode
Semua Fungsi adalah Metode
Keyword this
Metode call() JavaScript
Metode call() dengan Argumen
Di Javascript semua adalah object termasuk function.
Keyword this
Penggunaan method Call, Apply, dan Bind
Terima kasih telah membaca !
Apakah JavaScript cocok untuk pemula?
Apa itu method di JavaScript?
Apa saja tipe data di JavaScript?
Apa itu OOP pada JavaScript?

Table of Contents

Penggunaan Kembali Metode
Semua Fungsi adalah Metode
Keyword this
Metode call() JavaScript
Metode call() dengan Argumen
Di Javascript semua adalah object termasuk function.
Keyword this
Penggunaan method Call, Apply, dan Bind
Terima kasih telah membaca !
Apakah JavaScript cocok untuk pemula?
Apa itu method di JavaScript?
Apa saja tipe data di JavaScript?
Apa itu OOP pada JavaScript?

Table of Contents

Penggunaan Kembali Metode
Semua Fungsi adalah Metode
Keyword this
Metode call() JavaScript
Metode call() dengan Argumen
Di Javascript semua adalah object termasuk function.
Keyword this
Penggunaan method Call, Apply, dan Bind
Terima kasih telah membaca !

Semua Fungsi adalah Metode

Dalam JavaScript, semua fungsi adalah metode objek.

Jika suatu fungsi bukan metode dari objek JavaScript, itu adalah fungsi dari objek global (lihat bab sebelumnya).

Contoh di bawah ini membuat objek dengan 3 properti, firstName, lastName, fullName.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function</h2>

<p> Contoh ini membuat objek dengan 3 properti (firstName, lastName, fullName). </p>
<p> Properti fullName adalah sebuah metode: </p>

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

<script>
var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
x = myObject.fullName();
document.getElementById("demo").innerHTML = x; 
</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.

Metode call() JavaScript

Metode call() adalah metode JavaScript yang telah ditentukan sebelumnya.

Dapat digunakan untuk memanggil metode dengan objek pemilik sebagai argumen (parameter).

Dengan menggunakan call(), sebuah objek bisa menggunakan metode yang dimiliki oleh objek lain.

Contoh ini menunjukan cara memanggil metode fullName person yang digunakan person1.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function</h2>
<p>Contoh ini memanggil metode fullName person yang digunakan person1.</p>

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

<script>
var person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
var person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
var x = person.fullName.call(person1); 
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

Contoh ini memanggil metode fullName person, yang digunakan di person2.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>Contoh ini memanggil metode fullName person, yang digunakan di person2.</p>

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

<script>
var person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
var person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
x = person.fullName.call(person2); 
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

Metode call() dengan Argumen

Metode call() bisa menerima argumen.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function</h2>
<p>Contoh ini memanggil metode fullName person yang digunakan person1.
</p>

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

<script>
var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
var person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
var x = person.fullName.call(person1, "Oslo", "Norway"); 
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

source image : https://medium.com/@omergoldberg/javascript-call-apply-and-bind-e5c27301f7bb

Call, apply, dan bind merupakan salah satu topik yang cukup sering ditanyakan saat interview.

Jika kamu sedang mencari pekerjaan untuk role Javascript developer, entah itu Frontend atau Backend, wajib banget untuk memahami konsep ini.

Untuk memahami method — method ini, ada 2 hal yang perlu di pahami

Di Javascript semua adalah object termasuk function.

Karna function adalah object maka pasti dong function memiliki property atau method bawaan.

Oh iya buat yang belum familiar dengan object bisa baca tulisan tentang object di link berikut.

Nah, berikut ini adalah property bawaan dari function.

Property

length, gunanya untuk mencari tahu jumlah paramenter yang dibutukan oleh sebuah function
name, gunanya untuk mencari tahu nama function.

Lebih jelasnya mengenai property — property ini, perhatikan contoh codenya dibawah ini.

function add(a, b) {}
console.log(add.name) // output : add
console.log(add.length) // output : 2

Nah, berikut ini adalah method bawaan dari function.

call
apply
bind
toString, gunanya untuk mengubah code fungsi jadi string.

function add(a, b){
  return a + b
}console.log(add.toString())// output
function add(a, b){
  return a + b
}

Untuk penggunaan 3 method pertama akan dibahas dibawah.

Yang penting sudah dapat pointnya bahwa di Javascript function adalah sebuah object yang memiliki property dan method bawaan.

Keyword this

Sederhananya keword this ini digunakan sebagai kata pengganti dari sebuah object.

Ibarat orang, misal nama saya Yudi. Untuk mengatakan buku milikku, saya bisa bilang “buku Yudi”. Tapi dari pada saya mengulang menyebutkan nama saya, kalimat tersebut bisa di ganti menjadi “buku saya”.

Lebih jelasnya perhatikan contoh codenya dibawah!

const person = {
  firstName: "Ricardo",
  lastName : "Kaka",
  fullName : function() {
    return person.firstName + " " + person.lastName;
  }
};console.log(person.fullName())
// output : Ricardo Kaka

Perhatikan return statement function fullName pada code diatas!

Selain kita menggunakan nama objectnya(person), kita juga bisa menggunakan kata pengganti atau aliasnya menggunakan keyword “this”.

Jadinya akan seperti ini, dan outputnya tetap sama.

const person = {
  firstName: "Ricardo",
  lastName : "Kaka",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};console.log(person.fullName())
// output : Ricardo Kaka

Keyword “this” ini mengacuh ke objectnya.

Perlu di ingat bahwa “this” adalah sebuah keyword dan bukan variable, jadi nilainya tidak bisa di ubah. Sudah dari sononya :)

Penggunaan method Call, Apply, dan Bind

Setelah memahami 2 konsep diatas, sekarang kita masuk ke inti dari tulisan ini.

Method call, apply, dan bind digunakan untuk mengakses data dari object lain yang berbedah kontext.

Misal seperti ini(sambil perhatikan codenya).

Kita punya object dengan nama “myNum” dan sebuah fungsi “add”, kemudian di fungsi add kita ingin menggunakan data “num” dari “obj”.

Hasilnya seperti yang kamu liat adalah NaN, hal ini karena fungsi add tidak mengenali “this.num”.

Ingat bahwa keyword “this” mengacuh ke objectnya, dalam hal ini “this” di dalam function mengacuh ke function add bukan ke obj.

const myNum= { num: 2}function add(a, b){
  return this.num + a + b;
}console.log(add(1, 2);
// output: NaN

Nah, agar di fungsi add bisa mengakses dari dari object “myNum” kita bisa menggunakan method bawaan function yaitu call, apply, atau pun bind.

call

const myNum= { num: 2}function add(a, b){
  return this.num + a + b;
}console.log(add.call(myNum,1, 2);
// output: 5

apply

cara kerja apply hampir sama seperti call, yang membedakan hanya pada cara passing argument functionnya. Kalau apply argumentnya dalam bentuk array

const myNum= { num: 2}function add(a, b){
  return this.num + a + b;
}console.log(add.apply(myNum,[1, 2]);
// output: 5

bind

Cara kerja bind sedikit berbeda dari call dan apply, method bind akan mereturn function baru.

Lebih jelasnya perhatikan contoh codenya berikut.

const obj = { num: 2}function add(a, b){
  return this.num + a + b;
}const newAdd = add.bind(obj);console.log(newAdd(1,2))

Terima kasih telah membaca !

Saya akan sangat berterimah kasih terhadap saran atau koreksi untuk membuat tulisan saya lebih baik kedepannya.

Arigatō :)

Apakah JavaScript cocok untuk pemula?

Sangat cocok untuk pemula, bukan? Tak hanya itu, JavaScript merupakan alat brilian untuk pemrogram pemula yang ingin memperluas wawasan dan meningkatkan kemampuan mereka pada bahasa lain. JavaScript mendukung keterampilan berharga, seperti fungsional, objek, dan gaya pemrograman imperatif.

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 saja tipe data di JavaScript?

Ada beberapa tipe data dalam pemrograman Javascript:.

String (teks).

Integer atau Number (bilangan bulat).

Float (bilangan Pecahan).

Boolean..

Object..

Apa itu OOP pada JavaScript?

Apa itu OOP (Object Oriented Programming)? OOP adalah singkatan dari Object Oriented Programming, yaitu suatu metode pemrograman yang fokus atau berorientasi pada objek. Tujuan dari dirancangnya OOP adalah membantu para developer dalam mengembangkan model yang sudah ada di kehidupan sehari-hari.