TypeScript'te for Döngüleri için En İyi Uygulamalar
Bu makale, TypeScript'te for döngülerini kullanmak için en iyi uygulamaları açıklar.
YouTube Video
TypeScript'te for Döngüleri için En İyi Uygulamalar
for ifadeleri, tekrarlayan işlemleri gerçekleştirmek için temel ve güçlü bir sözdizimidir. TypeScript'te, tür güvenliğinden yararlanarak ve okunabilirlik ile sürdürülebilirliği göz önünde bulundurarak kod yazmak, daha az hatayla verimli kod yazmanıza olanak tanır.
Doğru Döngü Türünü Seçmek
TypeScript, her biri farklı kullanım durumları için uygun olan çeşitli döngü yapıları sunar. Uygun döngüyü seçmek, kodun netliği ve performansı için çok önemlidir.
Standart for Döngüsü
1for (let i = 0; i < 10; i++) {
2 console.log(i);
3}Standart for döngüsü, yineleme indeksini tam olarak kontrol etmeniz gerektiğinde idealdir.
En İyi Uygulamalar
1const maxIterations = 10;
2for (let i = 0; i < maxIterations; i++) {
3 console.log(i);
4}for ifadeleri yazarken, aşağıdaki noktaları akılda tutmak daha güvenli ve okunabilir kod yazmanıza yardımcı olabilir.
- Dizin değişkenleri için
letkullanınvaryerineletkullanmak kapsamı bloğa sınırlar ve istenmeyen davranışları önler.
- Döngü sınırlarını açık hale getirmek için sabitler ve açıklayıcı değişken adları kullanın
- Büyülü sayılardan kaçınmak ve anlamlı değişken adları kullanmak okunabilirliği artırır.
for...of Döngüsü
1const array = [1, 2, 3];
2for (let value of array) {
3 console.log(value);
4}for...of döngüsü, diziler ve stringler gibi iteratif nesneler üzerinde döngü yapmak için uygundur.
En İyi Uygulamalar
1const array = [1, 2, 3];
2for (const value of array) {
3 console.log(value);
4}for...of döngüleri yazarken aşağıdaki noktalara dikkat etmek daha güvenli kod yazmanıza yardımcı olabilir.
- Döngü değişkenleri için
constkullanın- Değerler döngü içinde değiştirilmezse,
constkullanmak kazayla yeniden atamayı önler.
- Değerler döngü içinde değiştirilmezse,
for...in Döngüsü
1const obj = { a: 1, b: 2, c: 3 };
2for (const key in obj) {
3 console.log(`${key}: ${obj[key]}`);
4}for...in döngüsü, bir nesnenin numaralandırılabilir özellikleri üzerinde döner.
En İyi Uygulamalar
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}for...in döngüsü yazarken aşağıdaki noktaları göz önünde bulundurabilirsiniz.
- Özellikleri filtreleyin
- Eğer miras alınan özelliklerden kaçınmanız gerekiyorsa,
hasOwnPropertykullanabilirsiniz.
- Eğer miras alınan özelliklerden kaçınmanız gerekiyorsa,
- Dizilerle birlikte
for...inkullanmayın Dizilerle birliktefor...inkullanmaktan kaçının. Bu, dizi dizinleri olmayanlar da dahil olmak üzere tüm numaralandırılabilir özellikler üzerinde döngü yapabilir.
forEach Metodu
1const array = [1, 2, 3];
2array.forEach((value, index) => {
3 console.log(`Index: ${index}, Value: ${value}`);
4});Dizilerde iterasyon yaparken forEach kısadır ve indeks yönetimine olan ihtiyacı ortadan kaldırır.
En İyi Uygulamalar
forEach yöntemini kullanırken aşağıdaki noktaları göz önünde bulundurabilirsiniz.
- Ok fonksiyonları kullanın
- Okunabilirliği artırmak için kısa ok fonksiyonlarını kullanın.
- Kesintilerden kaçının
forEach,breakveyacontinue'ü desteklemez. Gerekli olduğundafor...ofveyafordöngülerini kullanın:.
Tür Güvenliği ve Hata Önleme
TypeScript'in tür sistemini kullanarak yineleme sırasında çalışma zamanı hatalarını önleyebilirsiniz:.
Döngü Değişkenleri için Katı Türler Tanımlayın
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});Döngü değişkenleri için türleri açıkça belirterek, tür uyuşmazlıklarını erken tespit edebilirsiniz.
any Türünün Gizli Kullanımından Kaçının
1{
2 "compilerOptions": {
3 "noImplicitAny": true
4 }
5}tsconfig.json içinde noImplicitAny özelliğini etkinleştirerek, açık bir türe sahip olmayan değişkenlerin varsayılan olarak any türüne atanmasını engelleyebilirsiniz.
Gerekli Olduğunda ReadonlyArray Kullanın
1const numbers: ReadonlyArray<number> = [1, 2, 3];
2for (const value of numbers) {
3 console.log(value);
4}Eğer değiştirilmemesi gereken bir dizi üzerinde yineleme yapıyorsanız, ReadonlyArray kullanabilirsiniz.
Performans Açısından Dikkat Edilecekler
Büyük veri setlerini işleyen veya sıkça çalıştırılan döngülerde verimlilik kritiktir:.
Optimal döngü uygulama yöntemini seçin.
Döngüleri uygulamak için çeşitli yöntemler vardır, her biri okunabilirlik ve çalışma verimliliği açısından farklılık gösterir.
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');Verimlilik çalışma ortamına bağlı olarak değişir, ancak örneğin bir döngüyü bir milyon kez çalıştırırken fark oldukça belirgin hale gelebilir. Bakım kolaylığı ve performansı göz önünde bulundurarak en uygun döngü yöntemini seçin.
Yerel Yineleme Metotlarını Kullanın
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]
map ve filter gibi yöntemler bazı durumlarda daha okunabilir olabilir.
Okunabilirlik İçin for...of Tercih Edin
Performans yalnızca sınırlı durumlarda öncelikli olmalıdır; genelde okunabilir kod yazmak daha önemlidir. Örneğin, for...ofu önceliklendirmek okunabilirliği artırabilir.
1const fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4 console.log(`${i}: ${fruits[i]}`);
5}En İyi Uygulamalar
1const fruits = ["apple", "banana", "cherry"];
2
3for (const [index, fruit] of fruits.entries()) {
4 console.log(`${index}: ${fruit}`);
5}for...of döngülerini önceliklendirmek, daha okunabilir ve hata direnci yüksek kod yazmanıza olanak tanır. Bu örnekte gösterildiği gibi, dizi indekslerine de ihtiyacınız varsa, entries() ile for...of kombinasyonu etkili olur.
Yaygın Tuzaklardan Kaçınma
Yineleme Sırasında Koleksiyonları Değiştirme
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);Yineleme sırasında bir diziyi değiştirmek beklenmeyen davranışlara neden olabilir:. Gerekirse bir kopya kullanın.
Köşe durumlarını dikkate alın
1const array: number[] = [];
2for (const value of array) {
3 console.log(value); // No output, but no errors
4}Bu kod gayet iyi çalışıyor, ancak boş dizileri ele almanız gerekiyorsa, şu şekilde iyileştirebilirsiniz.
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}Köşe durumlarını dikkate almak, sonraki kodlarda hataları önlemeye yardımcı olabilir.
Sonuç
for ifadesini TypeScript'te ustalıkla kullanmak için çeşitli döngü yapılarını anlamak, tür güvenliği uygulamalarına uymak ve performansı optimize etmek önemlidir. Bu en iyi uygulamalar, daha temiz, daha güvenilir ve daha sürdürülebilir bir kod yazmanıza yardımcı olur.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.