Tutorial JS

JS RUMAH Pengenalan JS JS Dimana Keluaran JS Pernyataan JS Sintaks JS Komentar JS Variabel JS JS Let JS Const Operator JS JS Aritmatika Tugas JS Tipe Data JS Fungsi JS Objek JS Acara JS String JS Metode String JS Pencarian String JS Template String JS Nomor JS Metode Nomor JS JS Array Metode Array JS Sortir Array JS Iterasi Array JS JS Array Const Tanggal JS Format Tanggal JS Metode Dapatkan Tanggal JS Metode Penetapan Tanggal JS JS Matematika JS Acak JS Boolean Perbandingan JS Ketentuan JS Beralih JS JS Loop Untuk JS Loop Untuk Masuk JS Loop Untuk Of JS Loop Sementara Istirahat JS JS Iterable JS Set Peta JS Tipe JS Konversi Tipe JS JS Bitwise JS RegExp Kesalahan JS Lingkup JS Pengangkatan JS Mode Ketat JS JS Kata Kunci ini Fungsi Panah JS Kelas JS JS JSON Debug JS Panduan Gaya JS Praktik Terbaik JS Kesalahan JS Kinerja JS Kata-kata Cadangan JS

Versi JS

Versi JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Tepi Sejarah JS

Objek JS

Definisi Objek Properti Objek Metode Objek Tampilan Objek Aksesor Objek Konstruktor Objek Prototipe Objek Obyek Iterable Set Objek Peta Objek Referensi Objek

Fungsi JS

Definisi Fungsi Parameter Fungsi Panggilan Fungsi Panggilan Fungsi Fungsi Terapkan Penutupan Fungsi

Kelas JS

Perkenalan Kelas Warisan Kelas Kelas Statis

JS Asinkron

Panggilan Balik JS JS Asinkron JS Janji JS Async/Menunggu

JS HTML DOM

Pengenalan DOM Metode DOM Dokumen DOM Elemen DOM HTML DOM Formulir DOM CSS DOM Animasi DOM Acara DOM Pendengar Acara DOM Navigasi DOM Node DOM Koleksi DOM Daftar Node DOM

JS Browser BOM

Jendela JS Layar JS Lokasi JS Sejarah JS JS Navigator Peringatan Munculan JS Waktu JS JS Cookies

JS Web API

Pengantar API Web API Formulir Web API Riwayat Web API Penyimpanan Web API Pekerja Web API Pengambilan Web API Geolokasi Web

JS AJAX

Pengenalan AJAX AJAX XMLHttp Permintaan AJAX Tanggapan AJAX File XML AJAX AJAX PHP AJAX ASP Basis Data AJAX Aplikasi AJAX Contoh AJAX

JS JSON

Perkenalan JSON Sintaks JSON JSON vs XML Tipe Data JSON Penguraian JSON Stringify JSON Objek JSON Array JSON Server JSON JSON PHP JSON HTML JSON JSONP

JS vs jQuery

Pemilih jQuery jQuery HTML jQuery CSS jQuery DOM

Grafik JS

Grafik JS JS Kanvas JS Plotly JS Chart.js Bagan Google JS JS D3.js

Contoh JS

Contoh JS JS HTML DOM Masukan HTML JS Objek HTML JS Acara HTML JS JS Browser Editor JS Latihan JS kuis JS Sertifikat JS

Referensi JS

Objek JavaScript Objek DOM HTML


Praktik Terbaik JavaScript


Hindari variabel global, hindari new, hindari ==, hindarieval()


Hindari Variabel Global

Minimalkan penggunaan variabel global.

Ini mencakup semua tipe data, objek, dan fungsi.

Variabel dan fungsi global dapat ditimpa oleh skrip lain.

Gunakan variabel lokal sebagai gantinya, dan pelajari cara menggunakan closure .


Selalu Deklarasikan Variabel Lokal

Semua variabel yang digunakan dalam suatu fungsi harus dideklarasikan sebagai variabel lokal .

Variabel lokal harus dideklarasikan dengan var kata kunci atau letkata kunci, atau constkata kunci, jika tidak mereka akan menjadi variabel global.

Mode ketat tidak mengizinkan variabel yang tidak dideklarasikan.


Deklarasi di Atas

Ini adalah praktik pengkodean yang baik untuk meletakkan semua deklarasi di bagian atas setiap skrip atau fungsi.

Ini akan:

  • Berikan kode yang lebih bersih
  • Sediakan satu tempat untuk mencari variabel lokal
  • Permudah untuk menghindari variabel global (tersirat) yang tidak diinginkan
  • Kurangi kemungkinan deklarasi ulang yang tidak diinginkan
// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price - discount;

Ini juga berlaku untuk variabel loop:

for (let i = 0; i < 5; i++) {


Inisialisasi Variabel

Ini adalah praktik pengkodean yang baik untuk menginisialisasi variabel saat Anda mendeklarasikannya.

Ini akan:

  • Berikan kode yang lebih bersih
  • Sediakan satu tempat untuk menginisialisasi variabel
  • Hindari nilai yang tidak ditentukan
// Declare and initiate at the beginning
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};

Inisialisasi variabel memberikan gambaran tentang tujuan penggunaan (dan tipe data yang dimaksudkan).


Deklarasikan Objek dengan const

Mendeklarasikan objek dengan const akan mencegah perubahan tipe yang tidak disengaja:

Contoh

let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Changes object to string

const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Not possible

Deklarasikan Array dengan const

Mendeklarasikan array dengan const akan mencegah perubahan tipe yang tidak disengaja:

Contoh

let cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Changes array to number

const cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Not possible

Jangan Gunakan Objek baru()

  • Gunakan ""alih-alihnew String()
  • Gunakan 0alih-alihnew Number()
  • Gunakan falsealih-alihnew Boolean()
  • Gunakan {}alih-alihnew Object()
  • Gunakan []alih-alihnew Array()
  • Gunakan /()/alih-alihnew RegExp()
  • Gunakan function (){}alih-alihnew Function()

Contoh

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean
const x4 = {};           // new object
const x5 = [];           // new array object
const x6 = /()/;         // new regexp object
const x7 = function(){}; // new function object

Waspadalah terhadap Konversi Jenis Otomatis

JavaScript diketik dengan longgar.

Sebuah variabel dapat berisi semua tipe data.

Sebuah variabel dapat mengubah tipe datanya:

Contoh

let x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number

Hati-hati bahwa angka dapat secara tidak sengaja diubah menjadi string atau NaN(Bukan Angka).

Saat melakukan operasi matematika, JavaScript dapat mengonversi angka menjadi string:

Contoh

let x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
let x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
let x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
let x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
let x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
let x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
let x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number

Mengurangi string dari string, tidak menghasilkan kesalahan tetapi mengembalikan NaN(Bukan Angka):

Contoh

"Hello" - "Dolly"    // returns NaN

Gunakan === Perbandingan

Operator ==perbandingan selalu mengonversi (ke tipe yang cocok) sebelum perbandingan.

Operator ===memaksa perbandingan nilai dan tipe:

Contoh

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false

Gunakan Default Parameter

Jika suatu fungsi dipanggil dengan argumen yang hilang, nilai argumen yang hilang diatur ke undefined.

Nilai yang tidak ditentukan dapat merusak kode Anda. Merupakan kebiasaan yang baik untuk menetapkan nilai default ke argumen.

Contoh

function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }
}

ECMAScript 2015 memungkinkan parameter default dalam definisi fungsi:

function (a=1, b=1) { /*function code*/ }

Baca lebih lanjut tentang parameter fungsi dan argumen di Parameter Fungsi


Akhiri Sakelar Anda dengan Default

Selalu akhiri switchpernyataan Anda dengan default. Bahkan jika Anda berpikir tidak perlu untuk itu.

Contoh

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
  default:
    day = "Unknown";
}

Hindari Angka, String, dan Boolean sebagai Objek

Selalu perlakukan angka, string, atau boolean sebagai nilai primitif. Bukan sebagai objek.

Mendeklarasikan jenis ini sebagai objek, memperlambat kecepatan eksekusi, dan menghasilkan efek samping yang buruk:

Contoh

let x = "John";             
let y = new String("John");
(x === y) // is false because x is a string and y is an object.

Atau bahkan lebih buruk:

Contoh

let x = new String("John");             
let y = new String("John");
(x == y) // is false because you cannot compare objects.

Hindari Menggunakan eval()

Fungsi eval()ini digunakan untuk menjalankan teks sebagai kode. Dalam hampir semua kasus, seharusnya tidak perlu menggunakannya.

Karena memungkinkan kode arbitrer dijalankan, ini juga mewakili masalah keamanan.