Widget HTML Atas

Hosting Unlimited Indonesia

Tutorial Javascript Belajar Dari Dasar | Skill Dasar Yang Wajib Dikuasai!

Ihsan Magazine - Tutorial Belajar Javascript dasar, Javascript salah satu bahasa pemograman yang powerfull dan wajib dikuasai untuk anda yang bekerja sebagai frontend dalam membangun web atau aplikasi, maka dari itu bagi anda yang ingin belajar dari dasar, saya buatkan tutorial singkat nya.

Console Javascript

Biasa kita gunakan console untuk melihat pesan error nya atau untuk debugging atau percobaan dan sangat bagus untuk dipelajari, dimana kita akan selalu menggunakan console untuk proses pengembangan menggunakan javascript, console sendiri biasa sudah langsung ada di google chrome dan mozilla

Cara akses ke console cukup mudah, yaitu bisa klik kanan di browser pilih inspect element lalu pilih tab console. dan selamat anda telah bisa melihat kode javascript yang ada di halaman tersebut.

Saatnya ketik ke dalam console javascript, ini beberapa sintaks dasar nya :

console.log('hello world');

Untuk latihan silakan ketika

alert('hati hati gan');

atau 

prompt('mau pilih apa?');

Menulis Javascript pertama Anda

<!DOCTYPE html>
<html>
<head>
    <title>Hello World Javascript</title>
</head>
<body>
    <script>
        console.log("Saya belajar Javascript");
        document.write("Hello World!");
    </script>
</body>
</html>

Kode diatas adalah contoh untuk menulis javascript didalam halaman html, anda bisa simpan file ini dengan nama apa saja, disini saya kasih nama belajar.html

Kode diatas berarti kode javascript kita harus ada di dalam tag <script>, dan document.write adalah sintaks dasar untuk menampilkan teks yang ada di dalam kurung ke dalam halaman html.

Dan jika anda cek di console, maka di console anda tulisan "Saya belajar javascript".

Ada banyak cara melampirkan kode javascript kita ke dalam html, cara paling mudah pakai tag script, dan cara yang banyak dipakai adalah menggunakan file eksternal.

Contoh :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar JS</title>
</head>

<body>
    
    <header>
        <h2>Belajar Javascript</h2>
        <p>Cek Di Console yah</p>
    </header>

    <script src="dist/script.js">
      </script>

</body>

Seperti kode diatas saya melampirkan file javascript di dalam folder dist dengan nama file script.js dan saya taruh tepat sebelum tag </body>.

Selain itu anda juga bisa menulis javascript secara inline, contoh :

<a href="#" onclick="alert('Yey!')">Klik aku!</a>


Variabel 

Variabel adalah sebuah nama yang mewakili sebuah nilai. Variabel bisa diisi dengan berbagai macam nilai seperti string (teks), number (angka), objek, array, dan sebagainya.

//contoh sederhana

let nama = 'Ihsan Magazine';
let kota = 'Tangerang';

const negara = 'Indonessia';

Variable Bisa di deklarasikan dengan keyword let atau const, bedanya let nilai nya bisa di inisialisasikan ulang sedangkan const tidak, const sangat berguna ketika membuat variabel yang tetap sehingga kode tidak error seperti membuat variable untuk mengkoneksikan javascript ke database atau untuk membuat function juga memakai const lebih disarankan.

Ada banyak cara untuk menampilkan isi Variabel, karena kita mulai dari dasar, kita akan menggunakan console.log dan document.write 

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Variabel dalam Javascript</title>
    <script>
        // membuat variabel
        var name = "Petani Kode";
        var visitorCount = 50322;
        var isActive = true;
        var url = "https://www.petanikode.com";

        // menampilkan variabel ke jendela dialog (alert)
        alert("Selamat datang di " + name);
    
        // menampilkan variabel ke dalam HTML
        document.write("Nama Situs: " + name + "<br>");
        document.write("Jumlah Pengunjung: " + visitorCount + "<br>");
        document.write("Status Aktif: " + isActive + "<br>");
        document.write("Alamat URL: " + url + "<br>");
    </script>
</head>
<body>
    

</body>
</html>

Arti simbol plus (+) pada contoh di atas adalah menggabungkan, bukan menjumlahkan.

Cara Update Nilai Variable

let name = 'ihsan';
name ='ihsandroid'
console.log(name); // output 'ihsandroid'

//ingat jika anda pakai const maka nilai tidak bisa diperbarui.

Mengenal Tipe Data

Tipe data adalah jenis-jenis data yang bisa kita simpan di dalam variabel.

Ada beberapa tipe data dalam pemrograman Javascript:
  • String (teks)
  • Integer (bilangan bulat)
  • Float (bilangan Pecahan)
  • Boolean
  • Object
  • Array
Contoh :

let name = 'ihsandroid' //string
let umur = 21 //intenger
let penggaguran = true //boolean
let nilaiPi = 3.14 //float
let alamat = {
    komplek : 'Gria Jakarta',
    jalan : 'Jl Raya Utama'
} //object
let mantan = ['Ayana','Nabilah','Chelsea Islan'] //array

Menggabungkan String

Simbol + juga dapat digunakan untuk mengkombinasikan (atau "menggabungkan") string. Seperti yang di tampilkan di bawah, "Ninja" + " Ken" di cetak sebagai string Ninja Ken.

Contoh

let nama = 'Ihsan'
let umur = 25

console.log("Halo Nama Saya Ihsan" + '' + "Umur 25");
console.log("Halo Semua, Saya" + '' + nama + "Umur:" + '' + umur);

Template Literal

Cara lain nya dari fitur javascript ES6 Adalah template literal, Dengan template literal, Anda dapat memasukkan variable di dalam string dan penulisan jadi lebih mudah dibaca dan digabungkan.

Contoh

let nama = 'Ihsan'
let umur = 25

console.log(`Halo Semua nya! Nama Saya adalah ${nama} dan umur saya ${umur} tahun.`);

Apa itu Operator?

Operator adalah simbol yang digunakan untuk melakukan operasi pada suatu nilai dan variabel, Operator dalam pemrograman terbagi dalam 6 jenis:

  1. Operator aritmatika
  2. Operator Penugasan (Assignment)
  3. Opeartor relasi atau perbandingan
  4. Operator Logika
  5. Operator Bitwise
  6. Operator Ternary

Contoh : 

let angka = 3+1

let pertama = 1
let kedua = 2
let ketiga = pertama * kedua - 3

Untuk Lebih lengkapnya bisa klik disini

Operator Percabangan

Percabangan bisa disebut juga : control flow, decision, struktur kondisi, Struktur if, dsb, Percabangan biasa digunakan agar mampu membuat program berpikir dan menentukan tindakan sesuai dengan logika/kondisi yang kita berikan.

Contoh :

let jamBuka = 7

if (jamBuka < 21){
    console.log('Kami Buka');
} else {
    console.log('kami sedang tutup');
}

Percabangan yang biasa dipakai :

  • If
  • if else
  • if else if else
  • switch
  • ternary

Untuk Selengkapnya bisa klik disini

Operator Perulangan

Perulangan akan membantu kita mengeksekusi kode yang berulang-ulang, berapapun yang kita mau.
Ada lima macam bentuk perulangan di Javascript. Secara umum, perulangan ini dibagi dua.
Yaitu: counted loop dan uncounted loop.

Contoh :

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

Perulangan yang termasuk dalam Counted Loop:
  • Perulangan For
  • Perulangan Foreach
  • Perulangan Repeat
Perulangan yang termasuk dalam Uncounted Loop:
  • Perulangan While
  • Perulangan Do/While

Yang umum dipakai ada perulangan For dan Foreach, untuk selengkapnya Klik Disini.

Operator Perbandingan

belajar javascript

belajar javascript lengkap


Ada delapan operator logika di JavaScript, yaitu:
  • Equal value, ==
  • Equal value and type, ===
  • Not equal, !=
  • Not equal value and type, !==
  • Greater than, >
  • Less than, <
  • Greater than or equal, >=
  • Less than or equal, <=
Pengunaan === 

belajar javascript komplit

Penggunaan Equal value and type (===) sangat diperuntukan untuk pengecekan terhadap nilai boolean, undefined, atau dalam pembuatan sistem login dimana username dan password wajib benar-benar sama.

Contoh

const password = "ninjaken";

// Ketika nilai password adalah "ninjaken", cetak "Berhasil log in"
if (password === 'ninjaken'){
  console.log('Berhasil log in');
}

// Ketika nilai password bukan "ninjaken", cetak "Password salah"
if (password !== 'ninjaken'){
  console.log('Password salah');
}

Operator Logika

Terdapat tiga operator yang termasuk operator logika, yaitu:
  • AND, &&
  • OR, ||
  • NOT, !

Mungkin Anda juga pernah melihat operator & dan |, hanya satu karakter & atau |. Operator tersebut pada JavaScript merupakan operator bitwise. 

Operator logika dan operator bitwise tidak bisa saling menggantikan fungsi lainnya satu sama lain. Artinya Anda jangan sampai tertukar menggunakan operator logika atau operator bitwise.

Operator logika mengembalikan salah satu dari nilai expression. Baik expression tersebut merupakan nilai boolean atau bukan. Jika expression merupakan nilai boolean maka operator logika akan mengembalikan nilai boolean. 

Jika tidak maka salah satu dari nilai expression akan dikembalikan. Saya bahas lebih lanjut terkait hal ini pada bagian cara kerja operator logika.

Sintaks

Operator logika AND dan OR membutuhkan dua expression. Sementara operator logika NOT hanya membutuhkan satu expression.

AND, &&
expr1 && expr2

OR, ||
expr1 || expr2

NOT, !
!expr

AND, &&
panduan javascript


Untuk operator AND, jika expression sebelah kiri setelah dievaluasi menghasilkan nilai false, maka operator AND akan mengembalikan expression pertama. Kebalikannya, jika expression sebelah kiri setelah dievaluasi menghasilkan nilai true, maka operator AND akan mengembalikan expression kedua.

OR, ||


Untuk operator OR, jika expression sebelah kiri setelah dievaluasi menghasilkan nilai true, maka operator OR akan mengembalikan expression pertama. Kebalikannya, jika expression sebelah kiri setelah dievaluasi menghasilkan nilai false, maka operator OR akan mengembalikan expression kedua.

NOT, !
Operator NOT sedikit berbeda dengan operator AND atau OR. Operator NOT hanya membutuhkan satu expression karena tugas dari operator NOT adalah untuk menegasikan hasil evaluasi expression yang diberikan.

Jika expression yang diberikan setelah dievaluasi menghasilkan nilai true, maka operator NOT akan mengembalikan false. Kebalikannya, jika expression yang diberikan setelah dievaluasi menghasilkan nilai false, maka operator NOT akan mengembalikan true.

Untuk Penggunaan Operator Logika cukup mengingat hal ini :
  • False && (any expression), expression tidak akan dijalankan
  • True && (any expression), expression akan dijalankan
  • False || (any expression), expression akan dijalankan
  • True || (any expression), expression tidak akan dijalankan
  • Expression dapat berupa apapun termasuk pemanggilan fungsi.
Untuk Selanjutnya Mari Mengenal Truthy dan Falsy, Klik Disini.

Array 




Bila Anda ingin mengelola beberapa nilai sebagai grup, array akan sangat bermanfaat. Array dibuat seperti [nilai1, nilai2, nilai3]. 

Setiap nilai dalam array disebut element. Saat menggunakan array, beberapa string atau integer dapat dituliskan secara bersamaan seperti yang ditampilkan digambar kanan.

Karena array juga merupakan nilai, array dapat dibuat sebagai constant atau variable.

Mendapatkan Element Array


Setiap element array memiliki nomor index. Hal penting untuk Anda ingat: nomor index dimulai dari 0.



Untuk mendapatkan element array, gunakan nomor index seperti berikut: array[indexNumber]. Seperti contoh dibawah, untuk mendapatkan "apel" Anda dapat menulis fruits[0] (0 adalah nomor index "apel").

Contoh

const animals = ["anjing", "kucing", "domba"];

// Print element array pertama
console.log(animals[0]);

// Print element array ketiga
console.log(animals[2]);

Contoh Mengupdate Element Array

const animals = ["anjing", "kucing", "domba"];

// Gantikan element ketiga array menjadi "kelinci"
animals[2] = "kelinci";

// Print array ketiga dari constant animal ke console
console.log(animals[2]);

Melakukan Iterasi dengan Array



Ada kalanya iterasi digunakan dengan array, mari kita gunakan loop for untuk mendapatkan setiap element didalam array.

Untuk mendapatkan jumlah element dalam array, Anda dapat menggunakan arrayName.length didalam loop for, jadi lebih mudah dan ringkas.

console.log(fruit[i]) <- i didalam ini akan mengambil setiap element array berdasarkan jumlah index array nya, disini karena sudah memakai method length kita tidak usah menulis dengan angka seperti i < 3, cukup i < array.length maka langsung mendapatkan jumlah array yang ada

Contoh

const animals = ["anjing", "kucing", "domba", "kelinci"];

// Gunakan property length untuk mem-print jumlah element di array
console.log(animals.length);

// Gunakan property length untuk mengubah kondisi dibawah
for (let i = 0; i < animals.length; i++) {
  console.log(animals[i]);
}

Object



Object, seperti array, digunakan untuk mengelompokkan dan mengelola beberapa nilai. Bila array mengatur nilai secara berurutan berdasarkan index, objects mengelola nilai dengan memberikannya nama yang disebut property.


Object dibuat seperti berikut: {property1: nilai1, property2: nilai2}. Bila element array ditempatkan dalam tanda kurung petak [], object harus ditempatkan dalam tanda kurung kurawal {}. 


Selanjutnya, setiap property dan nilai object harus dihubungkan dengan tanda titik dua (:), dan seperti array, setiap elementnya harus dipisahkan dengan koma.

Contoh

const character = {
  name : 'Ninja Ken',
  age : 14
};

// Print nilai character
console.log(character);

Mendapatkan Nilai Object


Untuk mendapatkan nilai dari object, gunakan objectName.propertyName dengan nama object dan property yang sesuai.

Mengupdate Nilai Object


Menulis objectName.propertyName = nilai baru akan mengupdate nilai yang disimpan dalam object.

Object sebagai Element Array



Selanjutnya, mari kita pelajari tentang array yang memiliki object sebagai element. Element array tidak harus berupa string, integer atau boolean, namun bisa juga sebagai object. 

Berkat karakteristik ini, array seperti dalam gambar dikiri dapat dibuat. Disini, untuk mencegah code menjadi terlalu panjang, setiap element sebaiknya dimulai dibaris baru.

Contoh

const characters = [
  {name: "Ninja Ken", age: 14},
  {name: "Guru Domba", age: 100},
  {name: "Baby Ninja Ben", age: 5},
];

// Selesaikan loop for dibawah
for (let i = 0; i < characters.length; i++) {
  console.log("--------------------");
  
  // Tentukan nilai constant character
  const character = characters[i];
  
  // Print "Nama saya adalah ____"
  console.log(`Nama saya adalah ${character.name}`);
  
  // Print "Saya berusia ____ tahun"
  console.log(`Saya berusia ${character.age} tahun`);
  
}

Mendapatkan Object dalam Array



Ingatkah Anda bahwa nomor index diberikan untuk setiap element didalam array? Lihatlah contoh array yang dibawah ini, nilai array-nya adalah object. 

Untuk mengakses object didalam array ini, caranya sama seperti pada saat Anda mau mengakses array lainya, gunakan arrayName[indexNumber].

Mendapatkan Nilai Object di dalam Array



Selain itu, arrayName[indexNumber].propertyName dapat digunakan untuk memperoleh nilai property object yang disimpan dalam array. Ini mungkin terlihat sedikit rumit, namun ini hanyalah sebuah kombinasi dari hal-hal yang telah Anda pelajari.

Contoh Menggunakan Object, Array dengan Loop :

const cafe = {
  name: "Progate Cafe",
  businessHours: { 
    opening: "10:00",
    closing: "20:00"
  },
  // Tambahkan property menu dan berikan array yang sudah disediakan
  menu : ['Kopi','Teh','Kue Cokelat']
  
};

console.log(`Nama: ${cafe.name}`);
console.log(`Jam: Dari jam ${cafe.businessHours.opening} sampai jam ${cafe.businessHours.closing}`);
console.log(`----------------------------`);
console.log("Menu Rekomendasi");

// Gunakan loop for untuk mem-print nilai array menu 
for (let i = 0; i < cafe.menu.length; i++){
  console.log(cafe.menu[i]);
}

Function





Function adalah kumpulan instruksi. Seperti contoh diatas ini, function dengan nama introduce memiliki dua operasi yang dapat memprint Halo dan Menyebut nama.

Contoh 


Arrow Function


Untuk mempermudah penulisan function, tersedia Arrow function yang merupakan bagian dari javascript ES6, disini fungsi nya hampir sama dengan function pada umum hanya lebih ringkas dan biasa dipakai untuk expression.

Cara pengetikan arrow function tidak memerlukan perubahan apapun selain menggantikan function() dengan () =>. Tidak ada perbedaan juga saat Anda memanggil function yang didefinisikan dengan cara ini. Jadi, mulai dari latihan ini, mari kita gunakan arrow function.

Apa itu Argument? 



Nilai data yang diteruskan ke function disebut argument. Anda dapat menggunakan nilai function tersebut dengan meneruskan nilainya saat Anda memanggil function tersebut.

Mendefinisikan Function dengan Argument


Mari kita definisikan function yang dapat menerima argument. Nilai yang diteruskan saat Anda memanggil function disebut argument, namun variable yang tertulis dalam definisi disebut parameter.

Memanggil Function dengan Argument


Untuk memanggil function yang menerima argument, tulis functionName (nilai). Function akan menerima nilai yang ditunjuk dan nilai tersebut akan diberikan untuk parameter.

Menggunakan Nilai Argument Didalam Function



Anda dapat menggunakan argument didalam function seperti constant dan variable. Pelajari cara function menerima argument melalui gambar dibawah ini.

Function dengan Beberapa Argument


Function dapat menerima beberapa argument. Anda dapat meneruskan beberapa argument dengan menuliskannya bersama dalam tanda kurung dan memisahkannya dengan koma ,. Dalam definisi function pada contoh gambar dikiri, parameter ditulis sebagai parameter1, parameter2, ....

Menggunakan Beberapa Argument


Seperti saat Anda mendefinisikan beberapa parameter, gunakan koma , untuk memisahkan beberapa argument saat Anda memanggil function. Penerusan argument harus dalam urutan yang sama seperti parameter, karena cara pendefinisian function akan digunakan untuk pemanggilan fungsi.

Apa Itu Nilai Return?



Selanjutnya, kita akan mempelajari cara menggunakan hasil function di tempat function tersebut dipanggil. Nilai yang dihasilkan setelah function dipanggil, disebut nilai return. 

Sebagian besar function digunakan untuk mengirim nilai return kembali ke tempat function tersebut dipanggil. seperti gambar di atas function add akan menerima 3 dan 7, lalu nilai return 10 akan dihasilkan.

Function dengan Nilai Return


Anda dapat mengembalikan nilai dengan menempatkan statement return di dalam function dengan menulis nilai return. Hal ini akan memungkinkan function menghasilkan output sebagai nilai return.

Menggunakan Nilai Return


Jika function memiliki nilai return, pemanggilan function akan digantikan oleh nilai return setelah function selesai dijalankan. Seperti yang ditampilkan diatas, Anda juga dapat memberikan pemanggilan function untuk constant.

Jenis Nilai Return


Seperti halnya argument, Anda dapat menggunakan jenis nilai yang berbeda untuk nilai return. Misalnya, nilai boolean (true atau false) akan dikembalikan (return) jika anda menggunakan statement kondisional. Ini sama seperti kondisi di statement if.

Mengakhiri Function dengan Return


Mari kita pelajari secara lebih terperinci tentang statement return. Anda juga dapat menggunakan return untuk keluar dari sebuah function. Namun, penting diketahui bahwa code dalam tanda kurung kurawal yang sama {}, yang terletak setelah return tidak akan dijalankan.

Contoh Menggunakan Function dengan Paramater dan Return

const number1 = 103;
const number2 = 72;
const number3 = 189;

// Ketik sebuah function getMax untuk mendapatkan nilai maksimum
const getMax = (a,b,c) => {
  let max = a;
  if (b > a){
    max = b;
  }
  if (c > b){
    max = c;
  }
  
  return max;
  
}

// Print "Nilai maksimum adalah __"
console.log(`Nilai maksimum adalah ${getMax(number1,number2,number3)}`);

Class



Class adalah blueprint dari object sehingga membuat objek menjadi efisien seperti saat membuat data pengguna, data dapat dibuat dan disusun berdasarkan "blueprint pengguna" yang telah disiapkan sebelumnya.

Penulisan:

class Animal {

} //blueprint object

Membuat Instance

Karena kita sudah menyiapkan blueprint object, mari kita coba untuk membuat object dari blueprint tersebut. 


Untuk membuat object dari class, tulis new ClassName(), seperti yang ditunjukkan dibawah ini. Object dibuat dari class yang disebut instance. Instance dari class "Animal" disebut "instance Animal".

Apa yang dimaksud dengan Constructor?



Class sering memiliki method khusus yang disebut constructor. constructor digunakan untuk memberikan nilai awal ke instance baru. Untuk menambahkan constructor ke class, tulis constructor() { } di dalam tanda kurung kurawal {} class Animal seperti yang ditunjukkan di bawah ini.

Code di Dalam Constructor

Seperti yang ditunjukkan digambar dibawah ini, instruksi dan code juga dapat ditulis didalam {} constructor. Code yang ditulis disana akan dipanggil saat instance dibuat. Hal penting untuk diingat adalah code akan dipanggil untuk setiap instance. 



Karena new Animal() dipanggil dua kali dalam gambar dibawah ini, konten dalam constructor akan dipanggil untuk keduanya.

Menambahkan Property & Nilai




Dalam constructor, mari kita tambahkan informasi terkait instance yang dibuat. Untuk menambahkan property dan nilai kedalam constructor, tulis this.property = nilai.

Instance dan Property

Seperti yang dijelaskan di awal, instance adalah object. Jadi, dengan menulis instance.property, nilai yang ditambahkan dalam constructor dapat digunakan diluar class tersebut.

Mengubah Nilai untuk Semua Instance


Dengan menambahkan constructor, instance baru akan diberi nilai awal saat dibuat. Namun, code di bawah ini akan memberi semua instance nilai yang sama, yakni, "Leo" dan "3", saat instance tersebut dibuat. Mari kita pelajari cara mengubah nilai untuk setiap instance secara bebas di slide berikutnya!

Argument Constructor

Sama seperti function, constructor juga dapat menerima argument. Dengan menulis nama argument di dalam tanda kurung () setelah constructor, argument yang ditetapkan dapat digunakan didalam proses pemanggilan constructor terkait.


Saat nilai diteruskan ke constructor sebagai argument, nilai akan ditambahkan dalam tanda kurung () milik new className(). Dalam contoh di bawah ini, nilai string "Leo" diteruskan sebagai argument dan dapat diakses sebagai name dalam constructor.

Contoh

class Animal {
  // Tambahkan argument「name」dan「age」
  constructor(name,age) {
    // Gantikan nilai string "Leo" dengan nilai milik argument name
    this.name = name;
    
    // Gantikan「3」dengan nilai milik argument age
    this.age = age;
  }
}

// Teruskan argument「"Mocha"」「8」ke constant animal dibawah
const animal = new Animal('Mocha',8);

console.log(`Nama: ${animal.name}`);
console.log(`Usia: ${animal.age}`);

Apa yang dimaksud dengan Method?



Function yang berada didalam sebuah class disebut Method. Method bisa dibilang seperti "aksi" milik sebuah instance. 

Jika data seperti name dan age dapat ditambahkan menggunakan property, method dapat mengekspresikan seluruh kumpulan instruksi seperti memberikan salam dan menghitung nilai.

Mendefinisikan Method

Method dideklarasikan dalam class dengan menulis methodName() { }. Sama seperti function, code dalam method harus dituliskan didalam {}.

Cara menggunakan Method


Method dipanggil untuk instance yang dibuat didalam class. Misalnya, dengan menuliskan instance.methodName() seperti contoh di bawah ini, method greet didalam object Animal, akan dipanggil dan dijalankan untuk instance animal.

Menggunakan Nilai dalam Method


Selanjutnya, dengan menggunakan nilai name, ayo kita buat method untuk mem-print string Nama saya adalah ____. Saat Anda ingin menggunakan nilai instance didalam method, tulis this.propertyName, menggunakan nilai khusus this.

Contoh

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log("Halo");
  }
  
  // Tambahkan method info
  info(){
    console.log(`Nama saya adalah ${this.name}`);
    console.log(`Saya berusia ${this.age} tahun`);
  }
  
}

const animal = new Animal("Leo", 3);
animal.greet();

// Panggil method info menggunakan constant animal
animal.info();

Menggunakan Method dalam Method


Anda juga dapat memanggil method dalam method lain. Seperti contoh di bawah ini, method lain dalam class yang sama dapat digunakan dengan menuliskan this.methodName() dalam method tersebut.

Inheritance


Inheritance adalah cara membuat class baru berdasarkan class yang sudah ada. Misalnya, bila class Dog diwariskan dari class Animal, class Dog juga akan memiliki semua method yang didefinisikan dalam class Animal.

Contoh Menggunakan Inheritance


Membuat Class Dog

Kita telah membuat class Animal yang dapat menangani data hewan. Sekarang, mari kita buat class Dog khusus untuk menangani data jenis anjing. Saat class yang akan Anda buat sama seperti class yang sudah ada.

Cara Menggunakan Inheritance



Saat membuat class menggunakan inheritance, gunakan extends. Agar class Dog dapat menerima warisan data dari class Animal, tulis class Dog extends Animal seperti gambar dibawah. 

Untuk terminologi pemrograman, class yang digunakan sebagai dasar disebut class induk (disini adalah class Animal), sedangkan class penerima warisan data disebut class anak (class Dog)

Method Yang Diwariskan




Class Dog akan mewarisi semua method class Animal. Karena itu, meskipun tidak ada method yang dideklarasikan dalam class Dog, class ini dapat menggunakan method info yang didefinisikan dalam class Animal.

Method Class Anak


Method dapat ditambahkan ke class yang dibuat menggunakan inheritance dengan cara yang sama seperti class normal. Di bawah ini, Anda dapat melihat method getHumanAge yang dapat mengkonversikan umur anjing ke umur manusia.

Nilai Return dalam Method


Dalam method, nilai return dapat digunakan sama seperti function. 



Seperti gambar diatas, nilai return method getHumanAge diberikan untuk constant humanAge.

Mengakses Method Class Anak

Method yang hanya didefinisikan dalam class anak tidak dapat dipanggil dari class induk. Seperti yang dapat Anda lihat di bawah ini, hal tersebut akan menyebabkan kesalahan saat Anda mencoba memanggil method getHumanAge dengan instance dari class Animal.

Contoh

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log("Halo");
  }
  
  info() {
    this.greet();
    console.log(`Nama saya adalah ${this.name}`);
    console.log(`Saya berusia ${this.age} tahun`);
  }
}

class Dog extends Animal {
  // Tambahkan method getHumanAge
  getHumanAge(){
    return this.age * 7;
  }
  
}

const dog = new Dog("Leo", 4);
dog.info();

// Panggil method getHumanAge milik instance dog
const humanAge = dog.getHumanAge();

// Print 「Saya berusia __ tahun dalam umur manusia」
console.log(`Saya berusia ${humanAge} tahun dalam umur manusia`);

Overriding





Kita telah mempelajari bahwa class anak dapat menggunakan method dalam class induk dan class anak. Namun, apa yang terjadi bila method dengan nama yang sama seperti method dalam class Animal (class induk) dideklarasikan dalam class Dog (class anak)? Method manakah yang dipanggil?



Bila method dengan nama yang sama seperti method dalam class induk didefinisikan dalam class anak, maka method class anak yang akan digunakan. Ini karena method class anak menimpa method class induk, hal ini disebut overriding.

Overriding Method info



Di sini, mari kita print usia anjing dalam usia manusia menggunakan method info dari class Dog. Dengan method getHumanAge yang Anda deklarasikan pada halaman sebelumnya, tulis ulang method seperti yang ditunjukkan di bawah ini.

Method Induk dan Anak


Dengan menggunakan gambar ini sebagai referensi, tebak, method apa yang dapat digunakan dalam class Dog (class anak)? ini dia :

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log("Halo");
  }
  
  info() {
    this.greet();
    console.log(`Nama saya adalah ${this.name}`);
    console.log(`Saya berusia ${this.age} tahun`);
  }
}

class Dog extends Animal {
  // Tambahkan method info
  info(){
    this.greet();
    console.log(`Nama saya adalah ${this.name}`);
    console.log(`Saya berusia ${this.age} tahun`);
    
    const humanAge = this.getHumanAge();
    console.log(`Saya berusia ${humanAge} tahun dalam umur manusia`);
  }
  
  getHumanAge() {
    return this.age * 7;
  }
}

const dog = new Dog("Leo", 4);
dog.info();

Overriding Constructor


Constructor dapat ditimpa dengan cara yang sama seperti method. Misalnya, Anda ingin menambahkan property ke class anak. Untuk melakukan overriding constructor, Anda harus menambahkan super() dibaris pertama constructor penimpa.

Code super() dalam constructor class anak akan memanggil constructor class induk. Karena itu, kita harus memberikan argument di antara () milik super(), sehingga constructor class induk dapat menerima argument tersebut. Sekarang, setelah memanggil constructor class milik induk, property breed akan ditambahkan.

Contoh

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  //function dalam instance disebut method
  greet() {
    console.log("Halo");
  }
  
    /**method di dalam method (saran hanya dipakai di parent saja) */
  info() {
    this.greet();
    console.log(`Nama saya adalah ${this.name}`);
    console.log(`Saya berusia ${this.age} tahun`);
  }
}

class Dog extends Animal {
  // Tambahkan constructor
  constructor(name,age,breed){
    //overriding constructor induk
    super(name,age);
    this.breed = breed;
  }
  
  //overrid method yg nama nya sama seperti method dari parent nya
  info() {
    this.greet();
    console.log(`Nama saya adalah ${this.name}`);
    // Print 「Saya adalah seekor ____」
    console.log(`Saya adalah seekor ${this.breed}`);
    
    console.log(`Saya berusia ${this.age} tahun`);
    const humanAge = this.getHumanAge();
    console.log(`Saya berusia ${humanAge} tahun dalam umur manusia`);
  }
  
  getHumanAge() {
    return this.age * 7;
  }
}
//buat instance
const animal = new Animal("Leo", 3);

//panggil method
animal.greet();
animal.kenalan();

// Tetapkan "Chihuahua" sebagai nilai argument
const dog = new Dog("Leo", 4,"Chihuahua");
dog.info();

Baiklah mungkin hanya itu saja untuk dasar belajar javascript singkat, selanjutnya anda bisa belajar memisahkan file js, meng-export nilai, manipulasi array, callback function, promise, async await dan framework atau library javascript seperti React, Vue, Angular, Svelte dan sebagainya.
Hosting Unlimited Indonesia

IDCloudHost | SSD Cloud Hosting Indonesia