JavaScript ve TypeScript Projelerinizi D\u00fczenleyin<\/p>\n
Karma\u015f\u0131k ve da\u011f\u0131n\u0131k bir JavaScript veya TypeScript projesi ile bo\u011fu\u015fuyorsan\u0131z, \u00fcretkenli\u011finiz d\u00fc\u015fer, hata ay\u0131klama zorla\u015f\u0131r ve kod s\u00fcrd\u00fcr\u00fclebilirli\u011fini kaybetmeye ba\u015flars\u0131n\u0131z. Bu makale, JavaScript ve TypeScript projelerinizi d\u00fczenleme, temizleme ve daha verimli hale getirme yolunda ad\u0131m ad\u0131m bir rehber sunmaktad\u0131r. Verimlili\u011finizi art\u0131racak, kod kalitenizi iyile\u015ftirecek ve uzun vadede size zaman kazand\u0131racak pratik teknikler ve ipu\u00e7lar\u0131 bulacaks\u0131n\u0131z.<\/p>\n
Bir JavaScript veya TypeScript projenizin d\u00fczensiz oldu\u011funun birka\u00e7 belirtisi vard\u0131r. Bunlardan baz\u0131lar\u0131; kodun okunabilirli\u011finin d\u00fc\u015f\u00fck olmas\u0131, fonksiyonlar\u0131n a\u015f\u0131r\u0131 uzun ve karma\u015f\u0131k olmas\u0131, kod tekrar\u0131n\u0131n fazla olmas\u0131, tutarl\u0131 bir kodlama stilinin olmamas\u0131, yetersiz yorum sat\u0131rlar\u0131n\u0131n kullan\u0131lmas\u0131, kodun farkl\u0131 k\u0131s\u0131mlar\u0131n\u0131n birbirine ba\u011f\u0131ml\u0131 olmas\u0131 ve projeyi anlamak ve g\u00fcncellemenin zor olmas\u0131d\u0131r. Bu belirtiler, projenizin s\u00fcrd\u00fcr\u00fclebilirli\u011fini tehdit eder ve hata ay\u0131klama s\u00fcrecini uzat\u0131r. Bu sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in, kod temizli\u011fi ve d\u00fczenleme stratejilerine odaklanmal\u0131s\u0131n\u0131z. \u00d6rne\u011fin, bir fonksiyonun 50 sat\u0131rdan fazla olmas\u0131, muhtemelen refactor edilmesi gerekti\u011fini g\u00f6sterir. Benzer i\u015flevleri yerine getiren kod par\u00e7alar\u0131ysa, fonksiyon veya s\u0131n\u0131flar halinde gruplanabilir ve tekrar kullan\u0131labilir hale getirilebilir. Bu makale, bu t\u00fcr sorunlar\u0131n \u00fcstesinden gelmenize yard\u0131mc\u0131 olacak pratik \u00e7\u00f6z\u00fcmler sunmaktad\u0131r.<\/p>\n
D\u00fczenli bir JavaScript veya TypeScript projesi olu\u015fturmak i\u00e7in birka\u00e7 temel prensibi anlamak \u00f6nemlidir. \u00d6ncelikle, DRY (Don’t Repeat Yourself)<\/strong> ilkesini uygulamak esast\u0131r. Kod tekrar\u0131n\u0131 azaltmak, s\u00fcrd\u00fcr\u00fclebilirli\u011fi art\u0131r\u0131r ve hatalar\u0131 \u00f6nler. Fonksiyonlar ve s\u0131n\u0131flar kullanarak kod bloklar\u0131n\u0131 tekrar kullanabilir, mod\u00fcler bir yap\u0131 olu\u015fturabilirsiniz. KISS (Keep It Simple, Stupid)<\/strong> prensibi de \u00f6nemlidir; kodunuzu m\u00fcmk\u00fcn oldu\u011funca basit ve anla\u015f\u0131l\u0131r tutun. Karma\u015f\u0131k yap\u0131lar\u0131 basitle\u015ftirmek, okunabilirli\u011fi ve bak\u0131m kolayl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. Son olarak, YAGNI (You Ain’t Gonna Need It)<\/strong> ilkesi gereksiz kod yazmaktan ka\u00e7\u0131nmay\u0131 savunur. Gelecekte kullan\u0131labilece\u011fini d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcn\u00fcz kodlar\u0131 ancak ger\u00e7ekten ihtiyac\u0131n\u0131z oldu\u011funda yaz\u0131n. Bu prensipleri uygulayarak, daha temiz, daha okunabilir ve daha s\u00fcrd\u00fcr\u00fclebilir bir kod taban\u0131 olu\u015fturabilirsiniz.<\/p>\n Kod d\u00fczenleme s\u00fcreci, \u00e7e\u015fitli teknikleri i\u00e7erir. Bunlardan biri, kod fakt\u00f6rizasyonu (refactoring)<\/strong>‘dur. Bu teknik, kodun i\u015flevselli\u011fini de\u011fi\u015ftirmeden, yap\u0131s\u0131n\u0131 iyile\u015ftirmeyi ama\u00e7lar. \u00d6rne\u011fin, uzun ve karma\u015f\u0131k bir fonksiyonu, daha k\u00fc\u00e7\u00fck ve daha y\u00f6netilebilir fonksiyonlara b\u00f6lebilirsiniz. Bu, kodun okunabilirli\u011fini ve test edilebilirli\u011fini art\u0131r\u0131r. Bir di\u011fer teknik ise, kod yorumlama (commenting)<\/strong>‘d\u0131r. Yorum sat\u0131rlar\u0131, kodunuzun amac\u0131n\u0131 ve nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 a\u00e7\u0131klar. \u0130yi yaz\u0131lm\u0131\u015f yorumlar, kodun anla\u015f\u0131lmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r ve bak\u0131m s\u00fcrecini h\u0131zland\u0131r\u0131r. Son olarak, kod formatlama (formatting)<\/strong>, kodunuzun tutarl\u0131 ve okunabilir olmas\u0131n\u0131 sa\u011flar. Bir kod formatlama arac\u0131 kullanarak, girinti, bo\u015fluk ve sat\u0131r sonlar\u0131 gibi unsurlar\u0131 otomatik olarak d\u00fczenleyebilirsiniz. Bu sayede, b\u00fct\u00fcn proje boyunca bir d\u00fczen sa\u011flars\u0131n\u0131z. A\u015fa\u011f\u0131da basit bir \u00f6rnek g\u00f6sterelim:<\/p>\n <\/code><\/p>\n TypeScript, JavaScript'e statik tip kontrol\u00fc ekleyerek kod kalitesini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131r\u0131r. Tip tan\u0131mlamalar\u0131, kodunuzun daha anla\u015f\u0131l\u0131r ve hataya daha az a\u00e7\u0131k olmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir fonksiyonun parametrelerinin ve d\u00f6n\u00fc\u015f de\u011ferinin tipini belirleyerek, derleme zaman\u0131nda tip hatalar\u0131n\u0131 yakalayabilirsiniz. TypeScript'in aray\u00fczleri (interfaces) ve s\u0131n\u0131flar\u0131 (classes) kullanarak, kodunuzun yap\u0131s\u0131n\u0131 daha iyi organize edebilirsiniz. Bunlar, kod tekrar\u0131n\u0131 azalt\u0131r ve mod\u00fclerli\u011fi art\u0131r\u0131r. A\u015fa\u011f\u0131da bir \u00f6rnek g\u00f6rebilirsiniz:<\/p>\n <\/code><\/p>\n B\u00fcy\u00fck JavaScript veya TypeScript projelerinde, mod\u00fclerlik \u00e7ok \u00f6nemlidir. Projenizi mant\u0131ksal olarak ba\u011f\u0131ms\u0131z par\u00e7alara (mod\u00fcllere) ay\u0131rarak, kodun y\u00f6netimini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini kolayla\u015ft\u0131r\u0131rs\u0131n\u0131z. Her mod\u00fcl, belirli bir i\u015flevi yerine getirir ve di\u011fer mod\u00fcllerden ba\u011f\u0131ms\u0131z olarak test edilebilir. Modern JavaScript'te, mod\u00fclleri Linting ara\u00e7lar\u0131, kod stilini denetler ve potansiyel hatalar\u0131 tespit eder. ESLint, TypeScript'te TSLint (art\u0131k ESLint ile entegre) gibi pop\u00fcler linting ara\u00e7lar\u0131, kodunuzda tutars\u0131zl\u0131klar\u0131, hatalar\u0131 ve stil ihlallerini tespit ederek kaliteyi art\u0131r\u0131r. Bu ara\u00e7lar, kodunuzun belirli standartlara (\u00f6rne\u011fin, Airbnb JavaScript Style Guide) uydu\u011fundan emin olmak i\u00e7in yap\u0131land\u0131r\u0131labilir. Linting, kodunuzun okunabilirli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131r\u0131r ve gelecekteki hatalar\u0131 \u00f6nler. Ayr\u0131ca, tak\u0131m \u00e7al\u0131\u015fmas\u0131 yapan geli\u015ftiriciler aras\u0131nda ortak bir kodlama stili sa\u011flamada \u00f6nemli rol oynar. Bir linter kullanarak, kod taban\u0131n\u0131z\u0131n b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc ve kalitesini koruyabilirsiniz. Bununla birlikte, linter'\u0131n her zaman do\u011fru olmad\u0131\u011f\u0131n\u0131 unutmay\u0131n, baz\u0131 uyar\u0131lar\u0131 g\u00f6z ard\u0131 etmeniz gerekebilir. Ancak genel olarak, linter'\u0131n sa\u011flad\u0131\u011f\u0131 yararlar, potansiyel sorunlar\u0131n \u00e7ok \u00f6tesindedir.<\/p>\n Kodunuzun temiz ve d\u00fczenli olmas\u0131, sadece okunabilirlik ve s\u00fcrd\u00fcr\u00fclebilirlikle ilgili de\u011fil, ayn\u0131 zamanda performansla da yak\u0131ndan ilgilidir. \u00d6rne\u011fin, gereksiz de\u011fi\u015fkenler veya fonksiyon \u00e7a\u011fr\u0131lar\u0131, gereksiz i\u015flem y\u00fck\u00fcne neden olabilir. Kod optimizasyonu i\u00e7in \u00e7e\u015fitli teknikler kullan\u0131labilir. Bunlardan biri, kod tekrar\u0131n\u0131 azaltmakt\u0131r<\/strong>. Benzer kod par\u00e7alar\u0131n\u0131 fonksiyonlara veya s\u0131n\u0131f y\u00f6ntemlerine ta\u015f\u0131yarak, hem performans\u0131 art\u0131rabilir hem de kodun okunabilirli\u011fini iyile\u015ftirebilirsiniz. Bir di\u011feri ise, gereksiz i\u015flem ad\u0131mlar\u0131n\u0131 azaltmakt\u0131r<\/strong>. Kodunuzda yap\u0131yorsan\u0131z l\u00fczumsuz hesaplamalar\u0131, d\u00f6ng\u00fcleri veya ko\u015fullu ifadeleri ortadan kald\u0131rarak performans iyile\u015ftirmesi sa\u011flayabilirsiniz. Ayr\u0131ca, verimli veri yap\u0131lar\u0131 ve algoritmalar kullanmak<\/strong> performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. \u00d6rne\u011fin, bir dizi \u00fczerinde arama yap\u0131yorsan\u0131z, do\u011fru veri yap\u0131s\u0131 ve algoritma se\u00e7imi, i\u015flem s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131saltabilir. Performans analiz ara\u00e7lar\u0131n\u0131 kullanarak, kodunuzda performans darbo\u011fazlar\u0131n\u0131 belirleyebilir ve iyile\u015ftirmeler yapabilirsiniz. B\u00f6ylece, hem daha temiz hem de daha h\u0131zl\u0131 \u00e7al\u0131\u015fan bir uygulama geli\u015ftirebilirsiniz.<\/p>\n Test odakl\u0131 geli\u015ftirme (TDD), kod yazmadan \u00f6nce testler yazmay\u0131 savunan bir yakla\u015f\u0131md\u0131r. Bu, kodunuzun do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olman\u0131za ve gelecekteki de\u011fi\u015fikliklerden kaynaklanan hatalar\u0131 \u00f6nlemenize yard\u0131mc\u0131 olur. TDD, daha temiz ve daha s\u00fcrd\u00fcr\u00fclebilir kod yazman\u0131za yard\u0131mc\u0131 olur \u00e7\u00fcnk\u00fc her bir kod par\u00e7as\u0131 i\u00e7in testler yazmak, kodun daha mod\u00fcler ve anla\u015f\u0131l\u0131r olmas\u0131n\u0131 gerektirir. Jasmine, Jest ve Mocha gibi bir\u00e7ok JavaScript ve TypeScript test \u00e7er\u00e7evesi bulunmaktad\u0131r. Bu \u00e7er\u00e7eveler, test yazmay\u0131 ve \u00e7al\u0131\u015ft\u0131rmay\u0131 kolayla\u015ft\u0131r\u0131r. Ayr\u0131ca, kod kapsam\u0131 analiz ara\u00e7lar\u0131, kodunuzun ne kadar\u0131n\u0131n test edildi\u011fini g\u00f6rmenize yard\u0131mc\u0131 olur. Y\u00fcksek kod kapsam\u0131, kodunuzun daha g\u00fcvenilir oldu\u011funu g\u00f6sterir.<\/p>\nKod D\u00fczenleme Teknikleri: Pratik \u00d6rnekler<\/h2>\n
\/\/ K\u00f6t\u00fc \u00f6rnek: Uzun ve karma\u015f\u0131k bir fonksiyon\nfunction calculateTotalPrice(items) {\n let totalPrice = 0;\n for (let i = 0; i < items.length; i++) {\n totalPrice += items[i].price * items[i].quantity;\n }\n return totalPrice;\n}\n\n\/\/ \u0130yi \u00f6rnek: Fakt\u00f6rize edilmi\u015f fonksiyonlar\nfunction calculateItemTotal(item) {\n return item.price * item.quantity;\n}\n\nfunction calculateTotalPrice(items) {\n return items.reduce((total, item) => total + calculateItemTotal(item), 0);\n}<\/pre>\nTypeScript'te Tip Kontrol\u00fc ve D\u00fczen<\/h2>\n
interface Product {\n id: number;\n name: string;\n price: number;\n}\n\nfunction calculateTotalPrice(products: Product[]): number {\n return products.reduce((total, product) => total + product.price, 0);\n}<\/pre>\nMod\u00fclerlik ve Kod Organizasyonu<\/h2>\n
import<\/code> ve export<\/code> anahtar kelimeleri kullanarak y\u00f6netebilirsiniz. Node.js veya webpack gibi ara\u00e7lar, mod\u00fcler kodun y\u00f6netimini daha da kolayla\u015ft\u0131r\u0131r. Mod\u00fcler bir yakla\u015f\u0131m, kod tekrar\u0131n\u0131 \u00f6nler, bak\u0131m kolayl\u0131\u011f\u0131 sa\u011flar ve ekip \u00e7al\u0131\u015fmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. Bu sayede, geli\u015ftirme s\u00fcreci daha verimli hale gelir ve olas\u0131 hatalar\u0131n tespiti daha kolayla\u015f\u0131r. \u0130yi organize edilmi\u015f bir projede, her dosya belirli bir i\u015flevi yerine getirir ve di\u011fer dosyalarla minimum d\u00fczeyde etkile\u015fim kurar. Bu, kodun anla\u015f\u0131lmas\u0131n\u0131 ve bak\u0131m\u0131n\u0131 olduk\u00e7a kolayla\u015ft\u0131r\u0131r.<\/p>\nLinting ve Kod Kalite Ara\u00e7lar\u0131<\/h2>\n
Performans Optimizasyonu ve Kod Temizli\u011fi<\/h2>\n
\u0130leri D\u00fczey Teknikler: Test Odakl\u0131 Geli\u015ftirme (TDD)<\/h2>\n
\u00d6\u011frenme Yol Haritas\u0131<\/h2>\n