Farih.co.id
Home Programming 11 Singkatan JavaScript dan TypeScript yang Harus Diketahui untuk Pengodean yang Efisien

11 Singkatan JavaScript dan TypeScript yang Harus Diketahui untuk Pengodean yang Efisien

How to Set Up TypeScript in Node

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 berguna.


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 age = 20;
const ageType = age >= 18 ? "Adult" : "Child";
console.log(ageType);

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

2. Template Literal

Template literal menawarkan cara yang ampuh dan efisien untuk 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 backticks (`).

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

 const name = "Alice";
const greeting = `Hello, ${name}!`;
console.log(greeting);

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 username = null;
const displayName = username ?? "Guest";
console.log(displayName);

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

4. Evaluasi Hubungan Pendek

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 name = "John";
const greeting = name && `Hello, ${name}`;
console.log(greeting);

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 Penetapan Properti Obyek

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, sehingga menghasilkan kode yang lebih bersih dan ringkas.

Pertimbangkan contoh berikut:

 const firstName = "John";
const lastName = "Doe";
const person = { firstName, lastName };
console.log(person);

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 user = { name: "Alice", address: { city: "New York", country: "USA" }};
const country = user.address?.country;
console.log(country);

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 user = { name: "John", age: 30 };
const { name, age } = user;
console.log(name, age);

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

8. Sebarkan 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 numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers);

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 user = { name: "John", age: 30 };

for (const [key, value] of Object.entries(user)) {
    console.log(`${key}: ${value}`);
}

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 numbers = [1, 2, 3];
const index = ~numbers.indexOf(2);
console.log(index);

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

11. Mentransmisikan Nilai ke Boolean Dengan!!

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

Pertimbangkan contoh berikut:

 const value1 = "Hello";
const value2 = "";
console.log(!!value1);
console.log(!!value2);

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 penyebaran dan steno array memungkinkan manipulasi array yang efisien. Menguasai singkatan ini akan membuat Anda menjadi pengembang JavaScript dan TypeScript yang lebih produktif dan efektif.

Comment
Share:

Leave a Reply

Your email address will not be published. Required fields are marked *

Ad