Cuplikan Kode JavaScript untuk Masalah Umum

Terakhir Diperbarui pada 27 Juli 2021

Setiap bahasa pemrograman memiliki kekurangan dan keunikannya masing-masing. Bahasa JavaScript dan bahkan potongan kode JavaScript yang digunakan tidak terkecuali. Bahasa skrip telah berperilaku aneh dalam beberapa tahun terakhir, tetapi ini adalah salah satu bahasa yang paling banyak digunakan saat ini. Sebagian besar karena ini adalah bahasa interaktif utama browser internet.

Ada kalanya, sebagai pemrogram dan pembuat kode, di mana kita memiliki masalah tugas sederhana yang berulang sehingga kita memerlukan cuplikan kode sederhana. Di blog ini, saya akan menyajikan beberapa masalah umum yang dapat diselesaikan dengan mudah menggunakan skrip ES6 sebagai bagian dari beberapa cuplikan kode JavaScript.

Tip Cuplikan Kode JavaScript: Gunakan 'let' Alih-alih 'var'

let seperti var tetapi let memiliki ruang lingkup. let hanya dapat diakses di tingkat cakupan blok yang dideklarasikan dan diberi nilai. var dapat diakses di level mana pun terkait cakupan blok yang ditentukan. Dalam contoh berikut, variabel 'num1' didefinisikan di dalam pernyataan If sehingga tidak dapat diakses di luar fungsi.

 jika benar) {
  misalkan angka1 = 40;
}

misalkan angka2 = 20;

console.log(angka2, angka1);
console.log(angka1);

Keluaran:
20
tidak terdefinisi

 misalkan a = 25;
misalkan b = 50;

jika benar) {
  misalkan a = 100;
  var c = 5;
  console.log(a/c);
  console.log(b/c);
}

console.log(c);
console.log(a);

Keluaran:
20
10
5
25

Gunakan 'const' Ketika Nilai Variabel Tidak Berubah

const memberikan nilai konstan ke variabel yang tidak dapat diubah. Setiap kali variabel const didefinisikan, JavaScript mereferensikan alamat nilai ke variabel.

Fungsi Panah Cuplikan Kode JavaScript, Sintaks Baru untuk Fungsi

Fungsi cuplikan kode JavaScript di ES6 telah diubah menjadi ekspresi yang lebih sederhana, '() => {}'.

 // Sintaks Lama
fungsi myHalo() {
  console.log("Halo Dunia..!");
}

// Sintaks Baru
var myHalo = () => {
  console.log("Halo Dunia..!");
}

Sintaks baru mungkin sedikit membingungkan pada awalnya. Ada dua bagian sintaks.

 var myHalo = ()

Bagian pertama dari Cuplikan Kode JavaScript mendeklarasikan variabel dan menetapkan fungsi () ke dalamnya. Itu hanya mengatakan variabel adalah fungsi.

 => { //lakukan sesuatu } 

Bagian kedua menyatakan bagian tubuh dari fungsi. Bagian panah dengan kurung kurawal mendefinisikan bagian tubuh.

Contoh lain tetapi dengan parameter.

 biarkan withParameters = (a, b) => {
  console.log(a+b);
}

denganParameter(10, 20);

Keluaran:
30

 misalkan sumOfNum = (a, b = 10) => {
  kembali a + b;
}

console.log(sumOfNum(20);
console.log(sumOfNum(20,30);

Keluaran:
30
50

Baru 'untuk...dari...' Loop

for…of sangat mirip dengan for…in dengan sedikit modifikasi. for…of mengulangi daftar elemen seperti Array dan mengembalikan elemen (bukan indeksnya) satu per satu. Perhatikan bahwa variabel 'num' menampilkan setiap elemen dalam array, bukan indeks.

 misalkan bilangan = [5,6,7,8];

for (biarkan jumlah angka) {
  console.log(nilai);
}

Keluaran:
5
6
7
8

 biarkan str = 'Arturo';

for (biarkan char dari str) {
  console.log(char);
}

Keluaran:
SEBUAH
r
t
kamu
r
Hai

Penghancuran Tugas Variabel

Menetapkan variabel dari array satu per satu memakan waktu dan konyol. Cukup gunakan tugas destruktor untuk menyelesaikan ini lebih cepat dan lebih mudah:

 let profile = ['John', 32, 'engineer'];

let [nama, umur, pekerjaan] = profil;

console.log(nama);

Keluaran:
John

Temukan Objek Tertentu dalam Array Objek

Salah satu tugas paling umum yang perlu Anda selesaikan dalam JavaScript adalah melakukan iterasi melalui array objek untuk menemukan objek tertentu. Metode find adalah solusi sederhana di sini. Anda cukup memasukkan kriteria pemilihan menggunakan fungsi anonim sebagai argumen, dan Anda telah menetapkan:

 biarkan staf = [
  { id: 0, nama: 'Nina' },
  { id: 1, nama: 'Kevin' },
  { id: 2, nama: 'John' }
]

let employee = staff.find(emp => emp.name === 'John');

console.log(klien);

Keluaran:
{ id: 2, nama: 'John' }

Memutar Kunci dan Nilai Objek

Struktur data kami mungkin merupakan objek kompleks yang berisi berbagai pasangan kunci/nilai. Iterasi setiap pasangan bisa menjadi sedikit aneh, tapi itu mudah setelah kita menggunakan fungsi Object.

Setelah kunci Obyek diambil, kita dapat mengulang kunci dan nilai secara bersamaan. Dalam solusi berikut, kami mengakses setiap pasangan menggunakan variabel kunci dan nilai selama loop.

 let myObject = { Peter: 15, John: 20, Anne: 35 };

Object.keys(myObject).forEach((kunci, nilai) => {
  //...lakukan sesuatu
  console.log(kunci, nilai);
});

Keluaran:
Petrus 15
Yohanes 20
Anne 35

Filter Array Objek Berdasarkan Kondisi

Terkadang kita memiliki array data yang besar yang ingin kita filter item berdasarkan kondisi tertentu. Kita dapat fungsi filter untuk mencapai hal ini. Solusi berikut memiliki larik jalur file. Beberapa file berada di direktori 'data1' sementara yang lain berada di direktori 'data2'. Anggap saja kita ingin memfilter hanya untuk direktori tertentu:

 misalkan lokasi = [
  "file/data1/file",
  "file/data1/file2",
  "file/data2/file",
  "file/data2/file2"
];

biarkan filter = location.filter(path => path.includes('data2'));

console.log(filter);

Keluaran:
[ 'file/dir2/file', 'file/dir2/file2']

Dengan menetapkan bahwa string jalur harus menyertakan data2 string, kami memfilter semua jalur yang tidak berisi 'data2' di dalamnya. Ingat, fungsi apa pun yang Anda berikan ke filter harus mengembalikan nilai true agar item disertakan dalam hasil.

Tetapkan Kunci ke Objek dengan Nama yang Sama

Saat Anda menetapkan kunci ke objek jika kuncinya adalah nama yang sama dengan variabel yang menyimpan nilai yang ingin Anda tetapkan, Anda bisa menghilangkan penetapan nilai sama sekali. Ini mencegah Anda dari keharusan mengulangi diri sendiri, sesuatu yang kita semua benci lakukan. Lihatlah contoh ini:

 biarkan nama = 'John';
misalkan umur = 32;
biarkan pekerjaan = 'insinyur';

// bukannya ini
let profile1 = { nama: nama, usia: usia, pekerjaan: pekerjaan };

// melakukan hal ini
biarkan profile2 = { nama, umur, pekerjaan };

console.log(profil2);

Keluaran:
{ nama: 'John', usia: 32, pekerjaan: 'engineer' }

Menggunakan Operator Spread ES6 '…'

Operator spread memungkinkan Anda untuk secara harfiah "menyebarkan" array. Ini dapat digunakan untuk mengubah array menjadi daftar argumen atau bahkan menggabungkan dua array. Anda juga bisa menggunakannya untuk membentuk daftar argumen ke suatu fungsi juga.

Pada contoh pertama, kami menunjukkan bagaimana operator spread bekerja pada array dan mengubah setiap item menjadi elemen individual.

 misalkan angka1 = [1,2,3,4,5];

console.log(...numbers1);

Keluaran:
1 2 3 4 5

Contoh kedua menggabungkan konten dua larik dengan membuat larik sementara baru yang berisi kedua konten.

 misalkan angka2 = [6,7,8,9,10];

biarkan gabungan = [...angka1, ...angka2];

console.log(...gabungan);

Keluaran:
1 2 3 4 5 6 7 8 9 10

Contoh terakhir mengilustrasikan bagaimana operator spread dapat mengubah array menjadi daftar argumen ke suatu fungsi. Math.max mengembalikan angka tertinggi dalam daftar argumen yang diteruskan ke sana. Salah satu argumen itu adalah 10, yang merupakan yang tertinggi.

 misalkan angka1 = [1,2,3,4,5];

misalkan angka2 = [6,7,8,9,10];

biarkan gabungan = [...angka1, ...angka2];

console.log(Math.max(...gabungan));

Keluaran:
10

Fungsi Getter dan Setter Baru

Getter dan setter adalah salah satu fitur berguna yang diperkenalkan di ES6. Ini berguna jika kita menggunakan kelas dalam JavaScript.

 kelas NamaOrang {
  konstruktor(nama) {
    this.nama = nama;
  }
  dapatkan Nama() {
    kembali this.name;
  }
  atur Nama(nama) {
    this.nama = nama;
  }
}

biarkan orang = new PersonName("Jon Snow");
console.log(orang.Nama); // (A)

person.Name = "Dany"; // (B)
console.log(orang.Nama);

Keluaran:
Jon Snow
Dany

Kita bisa melihat ada dua fungsi di dalam class PersonName dengan properti 'get' dan 'set'. Properti 'get' digunakan untuk mendapatkan nilai variabel, dan properti 'set' digunakan untuk menetapkan nilai ke variabel. Kita juga dapat melihat bahwa fungsi get Name (A) dipanggil tanpa tanda kurung, dan fungsi set Name (B) dipanggil tanpa tanda kurung, dan ini seperti memberikan nilai ke variabel.