Praktik Terbaik untuk Loop 'for' di TypeScript

Artikel ini menjelaskan praktik terbaik untuk menggunakan loop 'for' di TypeScript.

YouTube Video

Praktik Terbaik untuk Loop 'for' di TypeScript

Pernyataan for adalah sintaks yang mendasar dan sangat kuat untuk melakukan operasi berulang. Dalam TypeScript, memanfaatkan keamanan tipe dan menulis kode dengan mempertimbangkan keterbacaan dan kemudahan pemeliharaan memungkinkan Anda menulis kode yang efisien dengan lebih sedikit kesalahan.

Memilih Jenis Loop yang Tepat

TypeScript menawarkan beberapa konstruksi loop, masing-masing sesuai untuk kasus penggunaan yang berbeda. Memilih loop yang sesuai sangat penting untuk kejelasan kode dan kinerjanya.

Loop for Standar

1for (let i = 0; i < 10; i++) {
2    console.log(i);
3}

Perulangan for standar sangat ideal ketika Anda membutuhkan kendali yang tepat atas indeks iterasi.

Praktik Terbaik

1const maxIterations = 10;
2for (let i = 0; i < maxIterations; i++) {
3    console.log(i);
4}

Saat menulis pernyataan for, mengingat poin-poin berikut dapat membantu Anda menulis kode yang lebih aman dan lebih mudah dibaca.

• Gunakan let untuk variabel indeks
  • Menggunakan let daripada var membatasi cakupan ke blok, mencegah perilaku yang tidak diinginkan.
• Gunakan konstanta dan nama variabel yang deskriptif untuk membuat batasan perulangan lebih jelas.
  • Menghindari angka ajaib dan menggunakan nama variabel yang bermakna meningkatkan keterbacaan.

Loop for...of

1const array = [1, 2, 3];
2for (let value of array) {
3    console.log(value);
4}

Loop for...of cocok untuk iterasi pada objek yang dapat diiterasi seperti array dan string.

Praktik Terbaik

1const array = [1, 2, 3];
2for (const value of array) {
3    console.log(value);
4}

Ketika menulis perulangan for...of, memperhatikan poin-poin berikut dapat membantu Anda menulis kode yang lebih aman.

• Gunakan const untuk variabel loop
  • Jika nilai tidak dimodifikasi dalam perulangan, menggunakan const membantu mencegah pengubahan yang tidak disengaja.

Loop for...in

1const obj = { a: 1, b: 2, c: 3 };
2for (const key in obj) {
3    console.log(`${key}: ${obj[key]}`);
4}

Loop for...in melakukan iterasi pada properti yang dapat dienumerasi dari sebuah objek.

Praktik Terbaik

1const obj = { a: 1, b: 2, c: 3 };
2for (const key in obj) {
3    if (obj.hasOwnProperty(key)) {
4        console.log(`${key}: ${obj[key]}`);
5    }
6}

Saat menulis loop for...in, Anda dapat mempertimbangkan poin-poin berikut.

• Saring properti
  • Jika Anda perlu menghindari properti yang diwariskan, Anda dapat menggunakan hasOwnProperty.
• Jangan gunakan for...in pada array. Hindari menggunakan for...in dengan array. Ini dapat mengiterasi semua properti yang dapat dihitung, termasuk yang bukan indeks array.

Metode forEach

1const array = [1, 2, 3];
2array.forEach((value, index) => {
3    console.log(`Index: ${index}, Value: ${value}`);
4});

Saat melakukan iterasi pada array, forEach lebih ringkas dan menghilangkan kebutuhan untuk mengelola indeks.

Praktik Terbaik

Saat menggunakan metode forEach, Anda dapat mempertimbangkan poin-poin berikut.

• Gunakan fungsi panah
  • Gunakan fungsi panah yang ringkas untuk meningkatkan keterbacaan.
• Hindari gangguan
  • forEach tidak mendukung break atau continue. Gunakan perulangan for...of atau for jika diperlukan:.

Keamanan Tipe dan Pencegahan Kesalahan

Dengan memanfaatkan sistem tipe TypeScript, Anda dapat mencegah kesalahan saat runtime selama iterasi:.

Tentukan Tipe yang Ketat untuk Variabel Perulangan

1const items = [1, 2, 3];
2items.forEach(item => {
3    console.log(item * 2);
4});

1const items: number[] = [1, 2, 3];
2items.forEach((item: number) => {
3    console.log(item * 2);
4});

Dengan secara eksplisit menentukan tipe untuk variabel perulangan, Anda dapat mendeteksi ketidakcocokan tipe lebih awal.

Hindari any yang Implisit

1{
2  "compilerOptions": {
3    "noImplicitAny": true
4  }
5}

Selain itu, dengan mengaktifkan noImplicitAny di tsconfig.json, Anda dapat mencegah variabel tanpa tipe eksplisit secara implisit diberikan tipe any.

Gunakan ReadonlyArray Jika Diperlukan

1const numbers: ReadonlyArray<number> = [1, 2, 3];
2for (const value of numbers) {
3    console.log(value);
4}

Jika Anda sedang melakukan iterasi pada array yang tidak boleh diubah, Anda bisa menggunakan ReadonlyArray.

Pertimbangan Kinerja

Efisiensi sangat penting untuk perulangan yang memproses data besar atau perulangan yang sering dieksekusi:.

Pilih metode implementasi loop yang optimal.

Ada berbagai cara untuk mengimplementasikan loop, masing-masing memiliki perbedaan dalam keterbacaan dan efisiensi eksekusi.

 1// Prepare input data (an array from 1 to 1000000)
 2const input: number[] = Array.from({ length: 1000000 }, (_, i) => i + 1);
 3
 4// --- for ---
 5console.time('for loop');
 6const squaresFor: number[] = [];
 7for (let i = 0; i < input.length; i++) {
 8    squaresFor.push(input[i] * input[i]);
 9}
10console.timeEnd('for loop');
11
12// --- while ---
13console.time('while loop');
14const squaresWhile: number[] = [];
15let i: number = 0;
16while (i < input.length) {
17    squaresWhile.push(input[i] * input[i]);
18    i++;
19}
20console.timeEnd('while loop');
21
22// --- for-of ---
23console.time('for-of loop');
24const squaresForOf: number[] = [];
25for (const num of input) {
26    squaresForOf.push(num * num);
27}
28console.timeEnd('for-of loop');
29
30// --- forEach ---
31console.time('forEach loop');
32const squaresForEach: number[] = [];
33input.forEach((num: number): void => {
34    squaresForEach.push(num * num);
35});
36console.timeEnd('forEach loop');
37
38// --- map ---
39console.time('map');
40const squaresMap: number[] = input.map((value: number): number => value * value);
41console.timeEnd('map');

Efisiensi bervariasi tergantung pada lingkungan eksekusi, tetapi misalnya, saat menjalankan loop sejuta kali, perbedaannya dapat menjadi cukup terasa. Pilih metode perulangan yang optimal dengan mempertimbangkan pemeliharaan dan kinerja.

Gunakan Metode Iterasi Bawaan

 1const squares = [1, 2, 3].map(value => value * value);
 2console.log(squares);
 3
 4const numbers = [1, 2, 3, 4, 5, 6];
 5const evenNumbers = numbers.filter(value => value % 2 === 0);
 6console.log(evenNumbers); // [2, 4, 6]
 7
 8const squaredEvens = numbers
 9    .filter(value => value % 2 === 0) // Keep only even numbers
10    .map(value => value * value);     // Square the remaining values
11
12console.log(squaredEvens); // [4, 16, 36]

Metode seperti map dan filter dapat lebih mudah dibaca dalam beberapa kasus.

Pilih for...of untuk Keterbacaan

Kinerja sebaiknya diutamakan hanya dalam kasus terbatas; menulis kode yang dapat dibaca secara umum lebih penting. Sebagai contoh, memprioritaskan for...of dapat meningkatkan keterbacaan.

1const fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log(`${i}: ${fruits[i]}`);
5}

Praktik Terbaik

1const fruits = ["apple", "banana", "cherry"];
2
3for (const [index, fruit] of fruits.entries()) {
4    console.log(`${index}: ${fruit}`);
5}

Dengan memprioritaskan perulangan for...of, Anda dapat menulis kode yang lebih mudah dibaca dan tahan terhadap kesalahan. Seperti yang ditunjukkan dalam contoh ini, jika Anda juga membutuhkan indeks array, menggabungkan entries() dengan for...of adalah cara yang efektif.

Menghindari Kesalahan Umum

Memodifikasi Koleksi Selama Iterasi

1const array = [1, 2, 3];
2for (const value of [...array]) {
3    if (value === 2) {
4        array.push(4); // Avoid this!
5    }
6}
7console.log(array);

Memodifikasi array selama iterasi dapat menyebabkan perilaku yang tidak terduga:. Gunakan salinan jika diperlukan.

Pertimbangkan kasus khusus

1const array: number[] = [];
2for (const value of array) {
3    console.log(value); // No output, but no errors
4}

Kode ini berfungsi dengan baik, tetapi jika Anda perlu menangani array kosong, Anda dapat meningkatkannya seperti berikut.

1const array: number[] = [];
2if (array.length === 0) {
3    console.log("The array is empty.");
4} else {
5    for (const value of array) {
6        console.log(value);
7    }
8}

Mempertimbangkan kasus khusus dapat membantu mencegah kesalahan dalam kode berikutnya.

Kesimpulan

Untuk menguasai pernyataan for dalam TypeScript, penting untuk memahami berbagai konstruksi loop, mematuhi praktik yang aman secara tipe, dan mengoptimalkan kinerja. Praktik terbaik ini membantu Anda menulis kode yang lebih bersih, lebih andal, dan lebih mudah dipelihara.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video