Saat Anda merasa nyaman menulis program JavaScript dasar, saatnya mempelajari beberapa sintaks tingkat lanjut untuk membersihkan kode Anda dan mempercepat pengkodean Anda.

JavaScript dan TypeScript adalah bahasa pemrograman yang sangat populer di bidang pengembangan web. Keduanya memiliki rangkaian fitur yang luas dan banyak pintasan sintaksis yang secara signifikan berkontribusi untuk meningkatkan efisiensi pengkodean.

Pelajari cara memperketat kode Anda dan memanfaatkan bahasa ini dengan beberapa pintasan yang bermanfaat.

1. Operator Terner

Operator ternary menawarkan sintaks yang ringkas dan efisien untuk mengekspresikan pernyataan bersyarat. Ini memiliki tiga bagian: kondisi, ekspresi untuk dijalankan jika kondisi bernilai true, dan ekspresi untuk dijalankan jika salah.

Operator ini terbukti sangat berguna saat membuat keputusan berdasarkan kondisi dan menetapkan nilai yang berbeda.

Pertimbangkan contoh berikut:

const umur = 20;
const ageType = umur >= 18? "Dewasa": "Anak";
menghibur.log (tipeusia); // Keluaran: "Dewasa"
instagram viewer

Contoh ini menggunakan operator ternary untuk memeriksa apakah variabelnya usia lebih besar atau sama dengan 18. Jika ya, kode memberikan nilai Dewasa ke variabel ageType, jika tidak, nilai "Anak" akan diberikan.

2. Templat Literal

Templat literal menawarkan cara yang ampuh dan efisien memformat string JavaScript dan menggabungkan variabel atau ekspresi di dalamnya. Tidak seperti penggabungan string tradisional yang menggunakan tanda kutip tunggal atau ganda, literal templat menggunakan backtick (`).

Sintaks unik ini memberikan beberapa keuntungan saat bekerja dengan string. Perhatikan contoh berikut yang menunjukkan penggunaan literal template:

const nama = "Alice";
const salam = `Halo, ${nama}!`;
menghibur.log (salam); // Output: "Halo, Alice!"

Contoh tersebut meliputi nama variabel dalam template literal menggunakan ${}. Ini memungkinkan Anda membuat string dinamis dengan mudah.

3. Operator Penggabungan Nullish

Operator penggabungan nullish (??) menyediakan cara mudah untuk menetapkan nilai default saat variabel salah satunya batal atau belum diartikan. Ini mengembalikan operan sisi kanan jika operan sisi kiri adalah batal atau belum diartikan.

Pertimbangkan contoh berikut:

const nama pengguna = batal;
const nama tampilan = nama pengguna?? "Tamu";
menghibur.log (namatampilan); // Keluaran: "Tamu"

Dalam contoh ini, sejak variabel nama belakang adalah batal, operator penggabungan nullish memberikan nilai default Tamu ke variabel nama tampilan.

4. Evaluasi Hubungan Singkat

Evaluasi hubung singkat memungkinkan Anda menulis ekspresi bersyarat singkat menggunakan operator logika seperti && Dan ||. Ini memanfaatkan fakta bahwa operator logis akan berhenti mengevaluasi ekspresi segera setelah dapat menentukan hasilnya.

Pertimbangkan contoh berikut:

const nama = "Yohanes";
const salam = nama && `Halo, ${nama}`;
menghibur.log (salam); // Keluaran: "Halo, John"

Contoh ini hanya akan mengevaluasi ekspresi `Halo, ${nama}` jika variabel nama memiliki nilai kebenaran. Kalau tidak, itu membuat hubungan pendek dan memberikan nilai nama sendiri ke variabel salam.

5. Singkatan Penugasan Properti Objek

Saat membuat objek, Anda memiliki opsi untuk menggunakan notasi steno yang menetapkan variabel sebagai properti dengan nama yang sama.

Notasi steno ini menghilangkan kebutuhan untuk menyatakan nama properti dan nama variabel secara berlebihan, menghasilkan kode yang lebih bersih dan ringkas.

Pertimbangkan contoh berikut:

const nama depan = "Yohanes";
const nama belakang = "Kelinci betina";
const orang = { nama depan, nama belakang };
menghibur.log (orang); // Output: { firstName: "John", lastName: "Doe" }

Contoh ini menetapkan properti nama depan Dan nama keluarga menggunakan notasi steno.

6. Rantai Opsional

Rangkaian opsional (?.) memungkinkan Anda untuk mengakses properti bersarang dari suatu objek tanpa khawatir tentang nilai null atau nilai yang tidak terdefinisi. Jika properti dalam rantai adalah null atau tidak terdefinisi, ekspresi akan mengalami hubungan pendek dan mengembalikan tidak terdefinisi.

Pertimbangkan contoh berikut:

const pengguna = { nama: "Alice", alamat: { kota: "New York", negara: "AMERIKA SERIKAT" }};
const negara = pengguna.alamat?.negara;
menghibur.log (negara); // Keluaran: "AS"

Dalam contoh di atas, operator rangkaian opsional memastikan bahwa kode tidak menimbulkan kesalahan jika alamat properti atau negara properti hilang.

7. Penghancuran Objek

Penghancuran objek adalah fitur canggih dalam JavaScript dan TypeScript yang memungkinkan Anda mengekstrak properti dari objek dan menetapkannya ke variabel menggunakan sintaks singkat.

Pendekatan ini menyederhanakan proses mengakses dan memanipulasi properti objek. Mari kita lihat lebih dekat bagaimana penghancuran objek bekerja dengan sebuah contoh:

const pengguna = { nama: "Yohanes", usia: 30 };
const { nama, umur } = pengguna;
menghibur.log (nama, umur); // Keluaran: "Yohanes" 30

Contoh ini mengekstrak variabel nama Dan usia dari pengguna objek melalui penghancuran objek.

8. Penyebar Operator

Operator penyebaran (...) memungkinkan Anda memperluas elemen iterable, seperti larik atau objek, menjadi elemen individual. Ini berguna untuk menggabungkan array atau membuat salinannya yang dangkal.

Pertimbangkan contoh berikut:

const angka = [1, 2, 3];
const bilanganBaru = [...angka, 4, 5];
menghibur.log (Nomor baru); // Keluaran: [1, 2, 3, 4, 5]

Pada contoh di atas, operator spread mengekspansi the angka array menjadi elemen individu, yang kemudian digabungkan dengan 4 Dan 5 untuk membuat larik baru, newNumbers.

9. Object Loop Singkatan

Saat melakukan iterasi pada objek, Anda dapat menggunakan the untuk...di loop dalam kombinasi dengan perusakan objek untuk dengan mudah beralih ke properti objek.

Pertimbangkan contoh ini:

const pengguna = { nama: "Yohanes", usia: 30 };

untuk (const [kunci, nilai] dariObyek.entries (pengguna)) {
menghibur.catatan(`${kunci}: ${nilai}`);
}

// Keluaran:
// nama: Yohanes
// usia: 30

Pada contoh di atas, Objek.entri (pengguna) mengembalikan array pasangan kunci-nilai, yang kemudian didestrukturisasi oleh setiap iterasi menjadi variabel kunci Dan nilai.

10. Array.indexOf Singkatan Menggunakan Operator Bitwise

Anda dapat mengganti panggilan ke Array.indeksDari metode dengan steno menggunakan operator bitwise ~ untuk memeriksa apakah suatu elemen ada dalam array. Singkatan mengembalikan indeks elemen jika ditemukan atau -1 jika tidak ditemukan.

Pertimbangkan contoh berikut:

const angka = [1, 2, 3];
const indeks = ~angka.indeksDari(2);
menghibur.log (indeks); // Keluaran: -2

Pada contoh di atas, ~angka.indeksDari (2) pengembalian -2 Karena 2 ada di indeks 1, dan operator bitwise meniadakan indeks.

11. Mentransmisikan Nilai ke Boolean Dengan!!

Ke secara eksplisit mengkonversi nilai ke boolean, Anda dapat menggunakan operator negasi ganda (!!). Ini secara efektif mengubah nilai kebenaran menjadi BENAR dan nilai palsu untuk PALSU.

Pertimbangkan contoh berikut:

const nilai1 = "Halo";
const nilai2 = "";
menghibur.log(!!nilai1); // Keluaran: benar
menghibur.log(!!nilai2); // Keluaran: salah

Pada contoh di atas, !! nilai1 pengembalian BENAR karena string Halo adalah kebenaran, sementara !!nilai2 pengembalian PALSU karena string kosong itu salah.

Membuka Kunci Efisiensi dan Keterbacaan Kode

Dengan memanfaatkan singkatan ini dalam JavaScript dan TypeScript, Anda dapat meningkatkan efisiensi pengkodean dan menghasilkan kode yang lebih ringkas dan mudah dibaca. Baik itu menggunakan operator ternary, evaluasi hubung singkat, atau memanfaatkan kekuatan literal template, steno ini menyediakan alat yang berharga untuk pengkodean yang efisien.

Selain itu, steno penugasan properti objek, rangkaian opsional, dan penghancuran objek menyederhanakan bekerja dengan objek, sedangkan operator spread dan singkatan array memungkinkan array yang efisien manipulasi. Menguasai singkatan ini akan membuat Anda menjadi pengembang JavaScript dan TypeScript yang lebih produktif dan efektif.