JavaScript projelerinizde eski kodlar\u0131 temizlemek ve performans\u0131 art\u0131rmak m\u0131 istiyorsunuz? Bu kapsaml\u0131 rehberde, ger\u00e7ek d\u00fcnya senaryolar\u0131nda refaktoring tekniklerini, modern ara\u00e7lar\u0131 ve en iyi uygulamalar\u0131 \u00f6\u011frenerek kod kalitenizi nas\u0131l zirveye ta\u015f\u0131yaca\u011f\u0131n\u0131z\u0131 ke\u015ffedin. Projelerinizi daha s\u00fcrd\u00fcr\u00fclebilir, bak\u0131m\u0131 kolay ve \u00f6l\u00e7eklenebilir hale getirmek i\u00e7in ihtiyac\u0131n\u0131z olan her \u015fey burada!<\/p>\n
Geli\u015ftirme d\u00fcnyas\u0131nda hepimizin kar\u015f\u0131la\u015ft\u0131\u011f\u0131 o tan\u0131d\u0131k senaryo: H\u0131zla b\u00fcy\u00fcyen bir proje, s\u00fcrekli eklenen yeni \u00f6zellikler ve zamanla karma\u015f\u0131kla\u015fan bir kod taban\u0131. \u0130lk ba\u015fta harika \u00e7al\u0131\u015fan kodlar, aylar veya y\u0131llar sonra adeta bir \u201cteknik bor\u00e7\u201d y\u00fck\u00fcne d\u00f6n\u00fc\u015febilir. Bu bor\u00e7, yeni \u00f6zellik geli\u015ftirmeyi yava\u015flat\u0131r, hata ay\u0131klamay\u0131 k\u00e2busa \u00e7evirir ve en \u00f6nemlisi, ekibin motivasyonunu d\u00fc\u015f\u00fcr\u00fcr. Peki, bu d\u00f6ng\u00fcden kurtulmak m\u00fcmk\u00fcn m\u00fc? Kesinlikle evet! Bu rehberin yedinci ve son b\u00f6l\u00fcm\u00fcnde, JavaScript projelerinizde temiz kod felsefesini ger\u00e7ek d\u00fcnya refaktoring senaryolar\u0131yla nas\u0131l birle\u015ftirebilece\u011finizi derinlemesine inceleyece\u011fiz. Amac\u0131m\u0131z, sadece var olan\u0131 d\u00fczeltmek de\u011fil, ayn\u0131 zamanda gelecekteki geli\u015ftirmeler i\u00e7in sa\u011flam bir temel olu\u015fturmak.<\/p>\n
Refaktoring, yani kodun d\u0131\u015f davran\u0131\u015f\u0131n\u0131 de\u011fi\u015ftirmeden i\u00e7 yap\u0131s\u0131n\u0131 iyile\u015ftirme s\u00fcreci, yaz\u0131l\u0131m geli\u015ftirme d\u00f6ng\u00fcs\u00fcn\u00fcn ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r. Bunu, evinizin tesisat\u0131n\u0131 d\u0131\u015far\u0131dan g\u00f6r\u00fcn\u00fc\u015f\u00fcn\u00fc bozmadan modernize etmeye benzetebilirsiniz. \u0130lk bak\u0131\u015fta zaman kayb\u0131 gibi g\u00f6r\u00fcnse de, uzun vadede projenin \u00f6mr\u00fcn\u00fc uzatan, bak\u0131m maliyetlerini d\u00fc\u015f\u00fcren ve geli\u015ftirici verimlili\u011fini art\u0131ran kritik bir ad\u0131md\u0131r. Bu seri finalinde, refaktoringin neden bu kadar \u00f6nemli oldu\u011funu, hangi ara\u00e7larla bu s\u00fcreci kolayla\u015ft\u0131rabilece\u011fimizi ve ger\u00e7ek hayattaki karma\u015f\u0131k senaryolarda nas\u0131l ad\u0131mlar atabilece\u011fimizi ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Haz\u0131rsan\u0131z, kodunuzu \u015faha kald\u0131rma yolculu\u011funa ba\u015flayal\u0131m!<\/p>\n
\u201cTemiz kod,\u201d bir yaz\u0131l\u0131m projesinin okunabilir, anla\u015f\u0131l\u0131r, bak\u0131m\u0131 kolay ve geni\u015fletilebilir olmas\u0131n\u0131 sa\u011flayan temel prensipler b\u00fct\u00fcn\u00fcd\u00fcr. Bu, sadece do\u011fru \u00e7al\u0131\u015fan kod yazmaktan \u00f6te, ayn\u0131 zamanda di\u011fer geli\u015ftiricilerin (veya gelecekteki sizin) o kodu kolayca anlay\u0131p \u00fczerinde de\u011fi\u015fiklik yapabilmesini sa\u011flayan bir yakla\u015f\u0131md\u0131r. Temiz kod, anlaml\u0131 de\u011fi\u015fken ve fonksiyon isimleri kullanmaktan, her fonksiyonun tek bir sorumlulu\u011fu olmas\u0131n\u0131 sa\u011flamaya kadar bir\u00e7ok farkl\u0131 prensibi i\u00e7erir. \u00d6rne\u011fin, bir fonksiyonun hem veri getirme hem de UI’\u0131 g\u00fcncelleme gibi birden fazla i\u015f yapmas\u0131, temiz kod prensiplerine ayk\u0131r\u0131d\u0131r; bu durum genellikle “kod kokusu” olarak adland\u0131r\u0131l\u0131r.<\/p>\n
Refaktoring ise, var olan kodun i\u015flevselli\u011fini bozmadan, yani d\u0131\u015far\u0131dan g\u00f6r\u00fcnen davran\u0131\u015f\u0131n\u0131 de\u011fi\u015ftirmeden, i\u00e7 yap\u0131s\u0131n\u0131 iyile\u015ftirme s\u00fcrecidir. Bu s\u00fcre\u00e7, kod kokular\u0131n\u0131 gidermeyi, performans\u0131 art\u0131rmay\u0131, okunabilirli\u011fi geli\u015ftirmeyi ve daha mod\u00fcler bir yap\u0131 olu\u015fturmay\u0131 hedefler. Refaktoring yapmak, projenin sadece bug\u00fcnk\u00fc de\u011fil, ayn\u0131 zamanda gelecekteki ihtiya\u00e7lar\u0131na da cevap verebilmesini sa\u011flar. \u00d6rne\u011fin, s\u0131k\u00e7a tekrarlanan bir kod blo\u011funu ayr\u0131 bir fonksiyona ta\u015f\u0131mak, uzun bir if-else zincirini daha okunabilir bir switch veya strateji desenine \u00e7evirmek refaktoringe \u00f6rnek te\u015fkil eder. Bu sayede kod daha az hata bar\u0131nd\u0131r\u0131r, daha h\u0131zl\u0131 geli\u015ftirme imkan\u0131 sunar ve yeni \u00f6zellik eklemek \u00e7ok daha kolay hale gelir.<\/p>\n
Peki, refaktoring neden bu kadar \u00f6nemli? \u00d6ncelikle, bak\u0131m maliyetlerini \u00f6nemli \u00f6l\u00e7\u00fcde d\u00fc\u015f\u00fcr\u00fcr. Temiz ve refakt\u00f6r edilmi\u015f kod, hata ay\u0131klamay\u0131 kolayla\u015ft\u0131r\u0131r ve yeni \u00f6zellik ekleme s\u00fcrecini h\u0131zland\u0131r\u0131r. \u0130kinci olarak, projenin \u00f6l\u00e7eklenebilirli\u011fini art\u0131r\u0131r. Mod\u00fcler bir yap\u0131, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerinin ba\u011f\u0131ms\u0131z olarak geli\u015ftirilmesine ve test edilmesine olanak tan\u0131r. \u00dc\u00e7\u00fcnc\u00fc olarak, ekip i\u015fbirli\u011fini geli\u015ftirir. Anla\u015f\u0131l\u0131r kod, farkl\u0131 geli\u015ftiricilerin ayn\u0131 kod taban\u0131 \u00fczerinde daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Son olarak, geli\u015ftirici memnuniyetini art\u0131r\u0131r. Karma\u015f\u0131k, bak\u0131m\u0131 zor kodlarla u\u011fra\u015fmak yerine, d\u00fczenli ve temiz bir kod taban\u0131 \u00fczerinde \u00e7al\u0131\u015fmak, geli\u015ftiriciler i\u00e7in \u00e7ok daha tatmin edicidir. Bu faydalar, refaktoringin asla g\u00f6z ard\u0131 edilmemesi gereken kritik bir geli\u015ftirme prati\u011fi oldu\u011funu kan\u0131tlar.<\/p>\n
Ger\u00e7ek d\u00fcnya projelerinde refaktoringe ba\u015flamak, genellikle “nereden ba\u015flayaca\u011f\u0131m?” sorusuyla gelir. Mevcut bir projenin t\u00fcm kod taban\u0131n\u0131 ayn\u0131 anda elden ge\u00e7irmek hem riskli hem de imkans\u0131zd\u0131r. Bu nedenle, k\u00fc\u00e7\u00fck ve y\u00f6netilebilir ad\u0131mlarla ilerlemek esast\u0131r. En iyi yakla\u015f\u0131m, “kod kokular\u0131” olarak bilinen sorunlu b\u00f6lgeleri tespit etmek ve \u00f6nceliklendirmektir. \u00d6rne\u011fin, uzun fonksiyonlar, tekrarlayan kod bloklar\u0131, \u00e7ok say\u0131da ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olan s\u0131n\u0131flar veya okunmas\u0131 zor de\u011fi\u015fken isimleri refaktoring i\u00e7in ideal adaylard\u0131r. Bu b\u00f6l\u00fcmde, iki yayg\u0131n senaryo \u00fczerinden refaktoringin nas\u0131l uygulanaca\u011f\u0131n\u0131 inceleyece\u011fiz.<\/p>\n
B\u00fcy\u00fck ve karma\u015f\u0131k fonksiyonlar, tek bir sorumluluk prensibini ihlal eden, okunabilirli\u011fi d\u00fc\u015f\u00fcren ve test edilebilirli\u011fi zorla\u015ft\u0131ran en yayg\u0131n kod kokular\u0131ndan biridir. Bu t\u00fcr fonksiyonlar genellikle birden fazla i\u015fi ayn\u0131 anda yapar ve her biri farkl\u0131 alt g\u00f6revleri i\u00e7erir. \u00d6rne\u011fin, bir kullan\u0131c\u0131 verisini i\u015fleyen fonksiyonun hem veriyi do\u011frulama, hem veritaban\u0131na kaydetme hem de kullan\u0131c\u0131ya bildirim g\u00f6nderme gibi ad\u0131mlar\u0131 tek bir yerde toplad\u0131\u011f\u0131n\u0131 d\u00fc\u015f\u00fcnelim. \u0130\u015fte bu, bir “God Function” (Tanr\u0131 Fonksiyon) \u00f6rne\u011fidir.<\/p>\n
Bu t\u00fcr bir fonksiyonu basitle\u015ftirmek i\u00e7in ilk ad\u0131m, her bir alt g\u00f6revi ayr\u0131 bir fonksiyona ay\u0131rmakt\u0131r. Buna “Extract Method” (Metot \u00c7\u0131karma) refaktoring tekni\u011fi denir. Her yeni fonksiyonun anlaml\u0131 bir ad\u0131 olmal\u0131 ve sadece kendi sorumlulu\u011funu yerine getirmelidir. Bu sayede, ana fonksiyon daha k\u0131sa, daha okunabilir hale gelir ve her bir alt g\u00f6rev ba\u011f\u0131ms\u0131z olarak test edilebilir. Ayr\u0131ca, e\u011fer gelecekte bildirim g\u00f6nderme mant\u0131\u011f\u0131 de\u011fi\u015firse, sadece ilgili k\u00fc\u00e7\u00fck fonksiyonu g\u00fcncellemeniz yeterli olacakt\u0131r.<\/p>\n
A\u015fa\u011f\u0131daki \u00f6rnekte, karma\u015f\u0131k bir kullan\u0131c\u0131 kayd\u0131 fonksiyonunu refakt\u00f6r ederek nas\u0131l daha temiz ve y\u00f6netilebilir hale getirece\u011fimizi g\u00f6relim:<\/p>\n
\n\/\/ \u00d6nceki Durum: Karma\u015f\u0131k kullan\u0131c\u0131 kay\u0131t fonksiyonu\nfunction registerUser(username, email, password) {\n \/\/ 1. Girdi do\u011frulamas\u0131\n if (!username || !email || !password) {\n console.error(\"T\u00fcm alanlar doldurulmal\u0131d\u0131r.\");\n return false;\n }\n if (!email.includes('@')) {\n console.error(\"Ge\u00e7ersiz e-posta format\u0131.\");\n return false;\n }\n\n \/\/ 2. Kullan\u0131c\u0131 veritaban\u0131nda var m\u0131 kontrol\u00fc\n const existingUser = database.findUser({ email: email });\n if (existingUser) {\n console.error(\"Bu e-posta adresi zaten kullan\u0131l\u0131yor.\");\n return false;\n }\n\n \/\/ 3. \u015eifre hashleme\n const hashedPassword = hashPassword(password);\n\n \/\/ 4. Kullan\u0131c\u0131y\u0131 veritaban\u0131na kaydetme\n const newUser = { username, email, hashedPassword, createdAt: new Date() };\n database.saveUser(newUser);\n\n \/\/ 5. Kay\u0131t sonras\u0131 bildirim g\u00f6nderme\n sendWelcomeEmail(email, username);\n console.log(Kullan\u0131c\u0131 ${username} ba\u015far\u0131yla kaydedildi.<\/code>);\n return true;\n}\n\n\/\/ Refakt\u00f6r Edilmi\u015f Durum: Daha basit ve mod\u00fcler\nfunction isValidRegistrationInput(username, email, password) {\n if (!username || !email || !password) {\n throw new Error(\"T\u00fcm alanlar doldurulmal\u0131d\u0131r.\");\n }\n if (!email.includes('@')) {\n throw new Error(\"Ge\u00e7ersiz e-posta format\u0131.\");\n }\n return true;\n}\n\nasync function isEmailTaken(email) {\n const existingUser = await database.findUser({ email: email });\n return !!existingUser;\n}\n\nfunction hashPassword(password) {\n \/\/ Ger\u00e7ek bir uygulamada asenkron ve daha g\u00fcvenli bir y\u00f6ntem kullan\u0131l\u0131r.\n return hashed_${password}_${Date.now()}<\/code>; \n}\n\nasync function saveUserToDatabase(userData) {\n await database.saveUser(userData);\n}\n\nfunction sendWelcomeEmail(email, username) {\n console.log(Ho\u015f geldiniz e-postas\u0131 ${email} adresine g\u00f6nderildi.<\/code>);\n \/\/ Ger\u00e7ek e-posta g\u00f6nderme servisi entegrasyonu buraya gelir.\n}\n\nasync function registerUserClean(username, email, password) {\n try {\n isValidRegistrationInput(username, email, password);\n if (await isEmailTaken(email)) {\n throw new Error(\"Bu e-posta adresi zaten kullan\u0131l\u0131yor.\");\n }\n\n const hashedPassword = hashPassword(password);\n const newUser = { username, email, hashedPassword, createdAt: new Date() };\n await saveUserToDatabase(newUser);\n sendWelcomeEmail(email, username);\n\n console.log(Kullan\u0131c\u0131 ${username} ba\u015far\u0131yla kaydedildi.<\/code>);\n return { success: true, message: Kullan\u0131c\u0131 ${username} ba\u015far\u0131yla kaydedildi.<\/code> };\n } catch (error) {\n console.error(\"Kay\u0131t hatas\u0131:\", error.message);\n return { success: false, message: error.message };\n }\n}\n <\/pre>\n<\/code><\/p>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, registerUserClean<\/code> fonksiyonu art\u0131k sadece ad\u0131mlar\u0131 koordine ediyor. Her bir alt g\u00f6rev kendi k\u00fc\u00e7\u00fck, odaklanm\u0131\u015f fonksiyonunda yerine getiriliyor. Bu, okunabilirli\u011fi, test edilebilirli\u011fi ve bak\u0131m kolayl\u0131\u011f\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131yor.<\/p>\nMod\u00fcler Yap\u0131land\u0131rma: Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Y\u00f6netmek ve Test Edilebilirli\u011fi Art\u0131rmak M\u00fcmk\u00fcn m\u00fc?<\/h3>\n
JavaScript projeleri b\u00fcy\u00fcd\u00fck\u00e7e, farkl\u0131 mod\u00fcller ve bile\u015fenler aras\u0131nda ba\u011f\u0131ml\u0131l\u0131klar ka\u00e7\u0131n\u0131lmaz hale gelir. Ancak, bu ba\u011f\u0131ml\u0131l\u0131klar s\u0131k\u0131 ve do\u011frudan oldu\u011funda (yani bir bile\u015fen di\u011ferini do\u011frudan i\u00e7e aktar\u0131p kulland\u0131\u011f\u0131nda), kodun mod\u00fclerli\u011fi azal\u0131r ve test edilmesi zorla\u015f\u0131r. Bir mod\u00fclde yap\u0131lan de\u011fi\u015fiklikler, ondan ba\u011f\u0131ml\u0131 olan di\u011fer mod\u00fclleri de etkileyebilir ve \"ke\u015fif\" olarak bilinen hatalara yol a\u00e7abilir. Bu durum, \u00f6zellikle \"tightly coupled\" (s\u0131k\u0131ca ba\u011fl\u0131) bile\u015fenlerde belirginle\u015fir.<\/p>\n
Mod\u00fcler yap\u0131land\u0131rma ve ba\u011f\u0131ml\u0131l\u0131k y\u00f6netimi i\u00e7in en etkili refaktoring tekniklerinden biri \"Dependency Injection\" (Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu)'dur. Bu desen, bir bile\u015fenin ihtiya\u00e7 duydu\u011fu ba\u011f\u0131ml\u0131l\u0131klar\u0131 do\u011frudan olu\u015fturmak veya i\u00e7e aktarmak yerine, d\u0131\u015far\u0131dan kendisine \"enjekte edilmesini\" sa\u011flar. Bu, bile\u015fenlerin daha ba\u011f\u0131ms\u0131z olmas\u0131n\u0131, farkl\u0131 ba\u011f\u0131ml\u0131l\u0131klarla kolayca de\u011fi\u015ftirilebilmesini ve \u00f6zellikle birim testleri s\u0131ras\u0131nda \"mock\" (sahte) ba\u011f\u0131ml\u0131l\u0131klarla test edilmesini m\u00fcmk\u00fcn k\u0131lar.<\/p>\n
\u00d6rne\u011fin, bir UserService<\/code> s\u0131n\u0131f\u0131n\u0131n do\u011frudan bir Logger<\/code> s\u0131n\u0131f\u0131na ba\u011f\u0131ml\u0131 oldu\u011funu varsayal\u0131m. E\u011fer Logger<\/code> s\u0131n\u0131f\u0131 de\u011fi\u015firse veya farkl\u0131 bir g\u00fcnl\u00fckleme mekanizmas\u0131 kullanmak istersek, UserService<\/code> s\u0131n\u0131f\u0131n\u0131 da de\u011fi\u015ftirmemiz gerekir. Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu kullanarak, Logger<\/code>'\u0131 UserService<\/code>'e parametre olarak ge\u00e7irebiliriz. Bu, UserService<\/code>'i Logger<\/code>'dan ay\u0131r\u0131r ve her ikisini de daha esnek hale getirir.<\/p>\n\n\/\/ \u00d6nceki Durum: S\u0131k\u0131ca ba\u011fl\u0131 UserService\nclass Logger {\n log(message) {\n console.log([LOG]: ${message}<\/code>);\n }\n}\n\nclass UserServiceBad {\n constructor() {\n this.logger = new Logger(); \/\/ S\u0131k\u0131 ba\u011f\u0131ml\u0131l\u0131k\n }\n\n createUser(user) {\n this.logger.log(Kullan\u0131c\u0131 ${user.username} olu\u015fturuluyor.<\/code>);\n \/\/ ... kullan\u0131c\u0131 olu\u015fturma mant\u0131\u011f\u0131 ...\n }\n}\n\n\/\/ Refakt\u00f6r Edilmi\u015f Durum: Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu ile UserService\nclass DatabaseService {\n save(data) {\n console.log(\"Veritaban\u0131na kaydedildi:\", data);\n }\n}\n\nclass UserServiceClean {\n constructor(logger, databaseService) { \/\/ Ba\u011f\u0131ml\u0131l\u0131klar d\u0131\u015far\u0131dan enjekte edildi\n this.logger = logger;\n this.databaseService = databaseService;\n }\n\n createUser(user) {\n this.logger.log(Kullan\u0131c\u0131 ${user.username} olu\u015fturuluyor.<\/code>);\n this.databaseService.save(user);\n \/\/ ... kullan\u0131c\u0131 olu\u015fturma mant\u0131\u011f\u0131 ...\n }\n\n updateUser(userId, data) {\n this.logger.log(Kullan\u0131c\u0131 ${userId} g\u00fcncelleniyor.<\/code>);\n this.databaseService.save({ id: userId, ...data });\n }\n}\n\n\/\/ Kullan\u0131m:\nconst consoleLogger = new Logger();\nconst myDatabase = new DatabaseService();\nconst userService = new UserServiceClean(consoleLogger, myDatabase);\nuserService.createUser({ username: \"john.doe\", email: \"john@example.com\" });\n\n\/\/ Test Senaryosu: Sahte bir Logger ile test etme\nclass MockLogger {\n constructor() {\n this.logs = [];\n }\n log(message) {\n this.logs.push(message);\n }\n}\n\nconst mockLogger = new MockLogger();\nconst mockDatabase = {\n save: (data) => console.log(\"MOCK Veritaban\u0131na kaydedildi:\", data)\n};\nconst testUserService = new UserServiceClean(mockLogger, mockDatabase);\ntestUserService.createUser({ username: \"test.user\", email: \"test@example.com\" });\nconsole.log(\"Mock Logger kay\u0131tlar\u0131:\", mockLogger.logs); \/\/ ['[LOG]: Kullan\u0131c\u0131 test.user olu\u015fturuluyor.']<\/code> gibi bir \u00e7\u0131kt\u0131 bekleriz.\n <\/pre>\n<\/code><\/p>\n