Cara menggunakan PROPERITES pada JavaScript

Contoh:

Table of Contents

  • Keyword this 
  • Method JavaScript
  • Mengakses Method Objek
  • Menggunakan Metode Bawaan
  • Menambahkan Method ke Objek
  • Method dan Properti Angka
  • Method toString ()
  • Method toExponential()
  • Method toFixed ()
  • Method toPrecision ()
  • Method valueOf ()
  • Mengubah Variabel menjadi Angka
  • Method JavaScript Global
  • Method Number()
  • Method Number() yang Digunakan pada Tanggal
  • Method parseInt()
  • Method parseFloat()
  • Properti Angka
  • JavaScript MIN_VALUE and MAX_VALUE
  • JavaScript POSITIVE_INFINITY
  • JavaScript NEGATIVE_INFINITY
  • JavaScript NaN – Not a Number
  • Properti Angka Tidak Dapat Digunakan pada Variabel
  • Apa itu method di JavaScript?
  • Apa itu Method array?
  • Bagaimana cara memanggil fungsi di JavaScript?
  • Apa itu slice 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.

PropertiValue
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>

Method angka akan membantu dalam penggunaan tipe data angka pada JavaScript.

Section Artikel

  • 1 Method dan Properti Angka
  • 2 Method toString ()
  • 3 Method toExponential()
  • 4 Method toFixed ()
  • 5 Method toPrecision ()
  • 6 Method valueOf ()
  • 7 Mengubah Variabel menjadi Angka
  • 8 Method JavaScript Global
  • 9 Method Number()
  • 10 Method Number() yang Digunakan pada Tanggal
  • 11 Method parseInt()
  • 12 Method parseFloat()
  • 13 Properti Angka
  • 14 JavaScript MIN_VALUE and MAX_VALUE
  • 15 JavaScript POSITIVE_INFINITY
  • 16 JavaScript NEGATIVE_INFINITY
  • 17 JavaScript NaN – Not a Number
  • 18 Properti Angka Tidak Dapat Digunakan pada Variabel

Method dan Properti Angka

Pada HTML nilai primitif (seperti 3.14 atau 2014), tidak boleh memiliki properti dan method (karena bukan object).

Namun dengan JavaScript, method dan properti juga tersedia untuk nilai primitif, karena JavaScript memperlakukan nilai primitif sebagai object saat menjalankan method dan properti.

Method toString ()

Method toString () mengembalikan angka sebagai string.

Semua method angka dapat digunakan pada semua jenis angka (literal, variabel, atau ekspresi).

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Method angka JavaScript</h2>

<p> Metode toString () mengonversi angka menjadi string. </p>
<p id="demo"></p>

<script>
var x = 123;
document.getElementById("demo").innerHTML =
  x.toString() + "<br>" +
   (123).toString() + "<br>" +
   (100 + 23).toString();
</script>

</body>
</html>

Method toExponential()

Method toExponential () mengembalikan string dengan angka yang dibulatkan dan ditulis menggunakan notasi eksponensial.

Parameter menentukan jumlah karakter di belakang koma.

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>Method angka JavaScript</h2>

<p> Metode toExponential () mengembalikan sebuah string, dengan angka dibulatkan dan ditulis menggunakan notasi eksponensial. </p>
<p> Parameter menentukan opsional jumlah digit di belakang koma desimal. </p>
<p id="demo"></p>

<script>
var x = 9.656;
document.getElementById("demo").innerHTML =
  x.toExponential() + "<br>" + 
  x.toExponential(2) + "<br>" + 
  x.toExponential(4) + "<br>" + 
  x.toExponential(6);
</script>

</body>
</html>

Parameter dibuat opsional. Jika parameter tidak ditentukan maka JavaScript tidak akan membulatkan angka.

Method toFixed ()

Method toFixed () akan mengembalikan string, dengan angka yang ditulis dengan jumlah desimal tertentu.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Method angka JavaScript</h2>

<p> Metode toFixed () membulatkan angka menjadi sejumlah digit. </p>
<p> Untuk bekerja dengan uang, toFixed (2) sangat cocok. </p>

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

<script>
var x = 9.656;
document.getElementById("demo").innerHTML =
  x.toFixed(0) + "<br>" +
  x.toFixed(2) + "<br>" +
  x.toFixed(4) + "<br>" +
  x.toFixed(6);
</script>

</body>
</html>

toFixed (2) sangat cocok untuk bekerja dengan uang.

Method toPrecision ()

Method toPrecision () mengembalikan string, dengan angka yang ditulis dengan panjang tertentu.

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>Method angka JavaScript</h2>

<p> Metode toPrecision () mengembalikan sebuah string, dengan angka yang ditulis dengan panjang yang ditentukan: </p>

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

<script>
var x = 9.656;
document.getElementById("demo").innerHTML = 
  x.toPrecision() + "<br>" +
  x.toPrecision(2) + "<br>" +
  x.toPrecision(4) + "<br>" +
  x.toPrecision(6);  
</script>

</body>
</html>

Method valueOf ()

Method valueOf () mengembalikan angka sebagai angka.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Method angka JavaScript</h2>

<p>Method valueOf () mengembalikan angka sebagai angka.</p>

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

<script>
var x = 123;

document.getElementById("demo").innerHTML = 
  x.valueOf() + "<br>" +
  (123).valueOf() + "<br>" +
  (100 + 23).valueOf();
</script>

</body>
</html>

Dalam JavaScript, angka bisa menjadi nilai primitif (typeof = number) atau object (typeof = object).

Method valueOf () digunakan secara internal dalam JavaScript untuk mengonversi object Angka menjadi nilai primitif.

Method ini tidak akan digunakan dalam kode selain dengan alasan diatas.

Semua tipe data JavaScript memiliki method valueOf () dan toString ().

Mengubah Variabel menjadi Angka

Ada 3 method JavaScript yang dapat digunakan untuk mengubah variabel menjadi angka, yaitu:

  • Method Number ()
  • Method parseInt ()
  • Method parseFloat ()

Method ini bukanlah method angka, tetapi method JavaScript global.

Method JavaScript Global

Method JavaScript Global dapat digunakan pada semua tipe data JavaScript.

Method berikut adalah method yang paling relevan apabila digunakan pada angka.

MethodDeskripsi
Number() Mengembalikan angka yang dikonversi dari argumennya.
parseFloat() Mengurai argumennya dan mengembalikan angka floating point
parseInt() Mengurai argumennya dan mengembalikan ke dalam tipe integer

Method Number()

Method Number() dapat digunakan untuk mengubah variabel JavaScript menjadi angka.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Global Method</h2>

<p> Method Number () mengubah variabel menjadi angka: </p>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
  Number(true) + "<br>" +
  Number(false) + "<br>" +
  Number("10") + "<br>" + 
  Number("  10") + "<br>" +
  Number("10  ") + "<br>" +
  Number(" 10  ") + "<br>" +
  Number("10.33") + "<br>" + 
  Number("10,33") + "<br>" +
  Number("10 33") + "<br>" +
  Number("John");
</script>

</body>
</html>


Jika nomor tidak dapat dikonversi, maka akan dikembalikan sebagai NaN (Not a Number).

Method Number() yang Digunakan pada Tanggal

Method Number() juga dapat digunakan untuk mengubah tanggal menjadi angka.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Global Method</h2>

<p> Metode Number () dapat mengubah tanggal menjadi angka: </p>
<p id="demo"></p>

<script>
var x = new Date("2017-09-30");
document.getElementById("demo").innerHTML = Number(x); 
</script>

</body>
</html>


Method Number () di atas mengembalikan angka milidetik sejak 1.1.1970.

Method parseInt()

Method parseInt () digunakan untuk mengurai string dan mengembalikan bilangan bulat. Spasi diperbolehkan dan hanya angka pertama yang dikembalikan.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Global Function</h2>

<p>The global JavaScript function parseInt() converts strings to numbers:</p>

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

<script>
document.getElementById("demo").innerHTML = 
  parseInt("10") + "<br>" +
  parseInt("10.33") + "<br>" +
  parseInt("10 6") + "<br>" +  
  parseInt("10 years") + "<br>" +  
  parseInt("years 10");  
</script>

</body>
</html>


Jika nomor tidak dapat dikonversi, NaN (Not a Number) dikembalikan.

Method parseFloat()

Method parseFloat() mengurai string dan mengembalikan angka. Spasi diperbolehkan. Hanya nomor pertama yang dikembalikan:

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Global Method</h2>

<p> Metode parseFloat () mengonversi string menjadi angka: </p>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
  parseFloat("10") + "<br>" +
  parseFloat("10.33") + "<br>" +
  parseFloat("10 6") + "<br>" +  
  parseFloat("10 years") + "<br>" +
  parseFloat("years 10");    
</script>

</body>
</html>


Jika nomor tidak dapat dikonversi, NaN (Not a Number) dikembalikan.

Properti Angka

PropertyDescription
MAX_VALUE Mengembalikan angka terbesar dalam JavaScript
MIN_VALUE Mengembalikan angka terkecil dalam JavaScript
POSITIVE_INFINITY Mewakili tak terhingga (dikembalikan saat overflow)
NEGATIVE_INFINITY Mewakili infinity negatif (dikembalikan pada overflow)
NaN Merepresentasikan nilai “Not-a-Number”

JavaScript MIN_VALUE and MAX_VALUE

MAX_VALUE mengembalikan kemungkinan bilangan terbesar yang ada dalam JavaScript.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Object Properties</h2>

<p> MAX_VALUE mengembalikan kemungkinan bilangan terbesar dalam JavaScript. </p>
<p id="demo"></p>

<script>
var x = Number.MAX_VALUE;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

MIN_VALUE mengembalikan angka terendah yang mungkin dalam JavaScript.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Object Properties</h2>

<p>MIN_VALUE mengembalikan angka terendah yang mungkin dalam JavaScript.</p>

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

<script>
var x = Number.MIN_VALUE;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript POSITIVE_INFINITY

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Object Properties</h2>

<p>POSITIVE_INFINITY</p>

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

<script>
var x = Number.POSITIVE_INFINITY;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

POSITIVE_INFINITY dikembalikan pada overflow.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Object Properties</h2>

<p>POSITIVE_INFINITY dikembalikan pada overflow.</p>

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

<script>
var x = 1 / 0;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript NEGATIVE_INFINITY

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Object Properties</h2>

<p>NEGATIVE_INFINITY</p>

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

<script>
var x = Number.NEGATIVE_INFINITY;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

NEGATIVE_INFINITY dikembalikan saat overflow.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Object Properties</h2>

<p>NEGATIVE_INFINITY</p>

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

<script>
var x = -1 / 0;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript NaN – Not a Number

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Object Properties</h2>

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

<script>
document.getElementById("demo").innerHTML = Number.NaN;
</script>

</body>
</html>

NaN adalah kata khusus JavaScript yang menunjukkan bahwa bilangan bukan bilangan resmi.

Saat mencoba melakukan perhitungan aritmatika dengan string non-numerik akan menghasilkan NaN (Not a Number).

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p> Angka dibagi dengan string non-numerik menjadi NaN (Bukan Angka): </p>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 100 / "Apple";
</script>

</body>
</html>

Properti Angka Tidak Dapat Digunakan pada Variabel

Properti angka adalah properti pembungkus object angka pada JavaScript yang disebut Number.

Properti ini hanya dapat diakses dengan Number.MAX_VALUE.

Menggunakan myNumber.MAX_VALUE, di mana myNumber adalah variabel, ekspresi, atau nilai, akan mengembalikan tidak terdefinisi.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Object Properties</h2>

<p> Menggunakan properti Angka pada variabel, ekspresi, atau nilai, akan mengembalikan tak terdefinisi: </p>
<p id="demo"></p>

<script>
var x = 6;
document.getElementById("demo").innerHTML = x.MAX_VALUE;
</script>

</body>
</html>

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.

Bagaimana cara memanggil fungsi di JavaScript?

Cara Memanggil/Eksekusi Fungsi Kita bisa memanggil fungsi di dalam kode Javascript dengan menuliskan nama fungsinya seperti ini: namaFungsi(); Contoh: // membuat fungsi function sayHello(){ console.log("Hello World!"); } // memanggil fungsi sayHello() // maka akan menghasilkan -> Hello World!

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.

Apa itu Property JavaScript?

Properti JavaScript Properti adalah nilai yang berkaitan dengan objek pada JavaScript. Sedangkan objek JavaScript adalah kumpulan properti yang tidak berurutan. Properti biasanya dapat diubah, ditambahkan, dan dihapus, tetapi beberapa hanya dapat dibaca.

Apa itu constructor di JavaScript?

Constructor biasanya digunakan untuk inisialisasi nilai properti atau nilai variable tertentu. Constructor mempunyai parameter seperti juga fungsi. Nilai pada parameter tersebut diberikan pada waktu object dibuat dengan menggunakan keyword new.

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 Instance di JavaScript?

Instance merupakan objek yang memiliki properti dan method yang telah ditentukan oleh blueprint-nya (class), atau singkatnya adalah objek yang merupakan hasil realisasi dari sebuah blueprint. Sama seperti constructor function, untuk membuat instance dari class pada ES6 kita gunakan keyword new.