Web geli\u015ftirme d\u00fcnyas\u0131na ad\u0131m atan her JavaScript \u00f6\u011frencisi, bu heyecan verici yolculukta ka\u00e7\u0131n\u0131lmaz olarak baz\u0131 zorluklarla kar\u015f\u0131la\u015f\u0131r. Modern web uygulamalar\u0131n\u0131n kalbi olan JavaScript, dinamik ve interaktif deneyimler sunarken, ba\u015flang\u0131\u00e7 seviyesindeki geli\u015ftiriciler i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilecek bir\u00e7ok n\u00fcans\u0131 da beraberinde getirir. Bu makalede, yeni ba\u015flayanlar\u0131n en s\u0131k yapt\u0131\u011f\u0131 yedi hatay\u0131 detayl\u0131 bir \u015fekilde inceleyecek, bu hatalar\u0131n nedenlerini a\u00e7\u0131klayacak ve her birini a\u015fmak i\u00e7in pratik, ad\u0131m ad\u0131m \u00e7\u00f6z\u00fcmler sunaca\u011f\u0131z. B\u00f6ylece, web geli\u015ftirme ser\u00fcveninize daha sa\u011flam ad\u0131mlarla ba\u015flayabilir, potansiyel tuzaklardan ka\u00e7\u0131narak etkili ve performansl\u0131 uygulamalar geli\u015ftirebilirsiniz.<\/p>\n
JavaScript, g\u00fcn\u00fcm\u00fcz web sitelerinin ve uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Kullan\u0131c\u0131 aray\u00fczlerinin etkile\u015fimli olmas\u0131n\u0131 sa\u011flamaktan, sunucu tarafl\u0131 geli\u015ftirmeye (Node.js ile) kadar geni\u015f bir yelpazede kullan\u0131l\u0131r. Ancak bu kadar g\u00fc\u00e7l\u00fc ve esnek bir dilin yanl\u0131\u015f anla\u015f\u0131lmas\u0131, projenizin performans\u0131n\u0131 olumsuz etkileyebilir, hata ay\u0131klama s\u00fcre\u00e7lerini kabusa \u00e7evirebilir ve hatta g\u00fcvenlik a\u00e7\u0131klar\u0131na yol a\u00e7abilir. Ba\u015flang\u0131\u00e7ta edinilen yanl\u0131\u015f al\u0131\u015fkanl\u0131klar, ilerleyen zamanlarda daha karma\u015f\u0131k problemlerin temelini olu\u015fturabilirken, do\u011fru temellerle ba\u015flamak ise sizi h\u0131zl\u0131 ve verimli bir geli\u015ftiriciye d\u00f6n\u00fc\u015ft\u00fcrebilir. Bu nedenle, JavaScript \u00f6\u011frenirken kar\u015f\u0131la\u015f\u0131lan yayg\u0131n hatalar\u0131 anlamak ve bunlardan ka\u00e7\u0131nmak, sadece kod yazma becerilerinizi de\u011fil, ayn\u0131 zamanda problem \u00e7\u00f6zme yetene\u011finizi de geli\u015ftirecektir.<\/p>\n
JavaScript’in temellerini sa\u011flam bir \u015fekilde anlamak, gelecekteki React, Angular veya Vue.js gibi framework \u00f6\u011frenimleriniz i\u00e7in de hayati \u00f6nem ta\u015f\u0131r. \u00c7o\u011fu zaman, bir framework’teki bir sorunun k\u00f6keni, asl\u0131nda temel JavaScript bilgilerindeki bir eksiklikten kaynaklan\u0131r. Bu makalede ele alaca\u011f\u0131m\u0131z konular, sadece mevcut projelerinizde kar\u015f\u0131la\u015fabilece\u011finiz sorunlar\u0131 \u00e7\u00f6zmekle kalmayacak, ayn\u0131 zamanda gelecekteki teknolojik geli\u015fmelere daha h\u0131zl\u0131 adapte olman\u0131z\u0131 sa\u011flayacak g\u00fc\u00e7l\u00fc bir temel olu\u015fturacakt\u0131r. \u0130ster ilk web sitenizi yap\u0131yor olun, ister kariyer de\u011fi\u015ftirmeyi planlayan deneyimli bir geli\u015ftirici aday\u0131 olun, bu hatalar\u0131 anlamak ve d\u00fczeltmek, sizi do\u011fru yola y\u00f6nlendirecektir. \u015eimdi gelin, bu yayg\u0131n hatalara birlikte g\u00f6z atal\u0131m ve nas\u0131l daha iyi birer JavaScript geli\u015ftiricisi olabilece\u011fimizi ke\u015ffedelim.<\/p>\n
\u00d6rne\u011fin, bir e-ticaret sitesinde \u00fcr\u00fcn filtreleme \u00f6zelli\u011fini hayata ge\u00e7irmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131z\u0131 d\u00fc\u015f\u00fcn\u00fcn. E\u011fer asenkron i\u015flemleri veya DOM manip\u00fclasyonunu do\u011fru y\u00f6netemezseniz, kullan\u0131c\u0131 aray\u00fcz\u00fc tak\u0131labilir, filtre sonu\u00e7lar\u0131 ge\u00e7 y\u00fcklenebilir veya uygulamada beklenmedik hatalar olu\u015fabilir. Bu t\u00fcr senaryolar, sadece kullan\u0131c\u0131 deneyimini k\u00f6t\u00fcle\u015ftirmekle kalmaz, ayn\u0131 zamanda bir geli\u015ftiricinin zaman\u0131n\u0131 da bo\u015fa harcayabilir. Bu nedenle, a\u015fa\u011f\u0131da ele alaca\u011f\u0131m\u0131z hatalar\u0131 ba\u015ftan \u00f6nlemek, daha sa\u011flam, h\u0131zl\u0131 ve bak\u0131m\u0131 kolay web uygulamalar\u0131 olu\u015fturman\u0131z\u0131n anahtar\u0131d\u0131r. Bu konulara hakim olmak, sizi sadece “kod yazan” birinden “etkili problem \u00e7\u00f6zen” bir geli\u015ftiriciye d\u00f6n\u00fc\u015ft\u00fcrecektir. Unutmay\u0131n, iyi yaz\u0131lm\u0131\u015f kod, sadece \u00e7al\u0131\u015fmakla kalmaz, ayn\u0131 zamanda okunabilir, s\u00fcrd\u00fcr\u00fclebilir ve performansl\u0131d\u0131r.<\/p>\n
JavaScript’in ilk ad\u0131mlar\u0131nda kar\u015f\u0131la\u015f\u0131lan en b\u00fcy\u00fck zorluklardan baz\u0131lar\u0131, dilin temel yap\u0131 ta\u015flar\u0131n\u0131n do\u011fru anla\u015f\u0131lmamas\u0131ndan kaynaklan\u0131r. \u00d6zellikle de\u011fi\u015fken tan\u0131mlama, kapsam ve tip kar\u015f\u0131la\u015ft\u0131rmalar\u0131 gibi konular, ba\u015flang\u0131\u00e7ta kafa kar\u0131\u015ft\u0131r\u0131c\u0131 gelebilir. Ancak bu temel kavramlar \u00fczerinde sa\u011flam bir bilgi birikimi olu\u015fturmak, ilerleyen a\u015famalarda daha karma\u015f\u0131k sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in kritik \u00f6neme sahiptir. Bu b\u00f6l\u00fcmde, yeni ba\u015flayanlar\u0131n bu alanlarda yapt\u0131\u011f\u0131 yayg\u0131n hatalar\u0131 ve modern JavaScript pratikleriyle nas\u0131l daha iyi kod yazabilece\u011fimizi ele alaca\u011f\u0131z.<\/p>\n
JavaScript’in ilk versiyonlar\u0131ndan beri kullan\u0131lan \u00d6rne\u011fin, bir d\u00f6ng\u00fc i\u00e7inde <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, JavaScript'teki JavaScript'te \u00fc\u00e7 ana kapsam t\u00fcr\u00fc vard\u0131r: Global Kapsam (Global Scope), Fonksiyon Kapsam\u0131 (Function Scope) ve ES6 ile gelen Blok Kapsam\u0131 (Block Scope). Global kapsamdaki de\u011fi\u015fkenler uygulaman\u0131n her yerinden eri\u015filebilirken, fonksiyon kapsam\u0131ndaki de\u011fi\u015fkenler yaln\u0131zca o fonksiyon i\u00e7inde eri\u015filebilir. Blok kapsam\u0131 ( <\/code><\/p>\n Yukar\u0131daki JavaScript, esnek bir dildir ve bu esneklik, bazen \"tip zorlamas\u0131\" (type coercion) ad\u0131 verilen otomatik tip d\u00f6n\u00fc\u015f\u00fcmlerine yol a\u00e7ar. Bu \u00f6zellik, yeni ba\u015flayanlar i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir ve \u00f6zellikle Kesin e\u015fitlik operat\u00f6r\u00fc <\/code><\/p>\n Bu \u00f6rnekler, Tip zorlamas\u0131, sadece kar\u015f\u0131la\u015ft\u0131rma operat\u00f6rlerinde de\u011fil, ayn\u0131 zamanda matematiksel i\u015flemler veya mant\u0131ksal operat\u00f6rler ( Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in genellikle e\u015fzamans\u0131z (asynchronous) operasyonlara ve dinamik DOM manip\u00fclasyonlar\u0131na dayan\u0131r. Sunucuya veri g\u00f6nderme, API'lerden bilgi \u00e7ekme veya uzun s\u00fcreli hesaplamalar yapma gibi i\u015flemler, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) bloke etmeden arka planda y\u00fcr\u00fct\u00fclmelidir. Ancak, asenkron programlaman\u0131n karma\u015f\u0131kl\u0131\u011f\u0131 ve DOM ile etkile\u015fim kurman\u0131n incelikleri, yeni ba\u015flayan geli\u015ftiriciler i\u00e7in \u00f6nemli hatalara yol a\u00e7abilir. Bu b\u00f6l\u00fcm, bu kritik alanlardaki yayg\u0131n yanl\u0131\u015flar\u0131 ve bunlardan ka\u00e7\u0131nmak i\u00e7in modern JavaScript yakla\u015f\u0131mlar\u0131n\u0131 ele alacakt\u0131r.<\/p>\n JavaScript varsay\u0131lan olarak tek i\u015f par\u00e7ac\u0131kl\u0131 (single-threaded) bir dildir, ancak Node.js ve taray\u0131c\u0131 ortamlar\u0131 sayesinde asenkron operasyonlar\u0131 destekler. Sunucudan veri \u00e7ekme (fetch API), dosya okuma\/yazma veya kullan\u0131c\u0131dan gelen bir inputu bekleme gibi i\u015flemler, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke etmeden arka planda \u00e7al\u0131\u015f\u0131r. Yeni ba\u015flayanlar genellikle bu asenkron yap\u0131y\u0131 tam olarak anlamakta zorlan\u0131r ve \"callback hell\" (geri \u00e7a\u011f\u0131r\u0131m cehennemi) ad\u0131 verilen i\u00e7 i\u00e7e ge\u00e7mi\u015f fonksiyon yap\u0131lar\u0131na saplan\u0131r.<\/p>\n \u0130lk zamanlarda asenkron i\u015flemler callback fonksiyonlar\u0131 ile y\u00f6netilirdi. Birden fazla asenkron i\u015flemin art arda yap\u0131lmas\u0131 gerekti\u011finde, callback fonksiyonlar\u0131n\u0131n i\u00e7 i\u00e7e ge\u00e7mesi kodu okunmaz ve bak\u0131m\u0131 zor hale getirirdi:<\/p>\n <\/code><\/p>\n Bu t\u00fcr bir yap\u0131, kodun mant\u0131\u011f\u0131n\u0131 takip etmeyi olduk\u00e7a zorla\u015ft\u0131r\u0131r. Modern JavaScript, bu sorunu \u00e7\u00f6zmek i\u00e7in <\/code><\/p>\n Promise'ler, callback'lere g\u00f6re \u00e7ok daha okunabilir ve y\u00f6netilebilir bir yap\u0131 sunar. Ancak, ES2017 ile gelen <\/code><\/p>\n Belge Nesne Modeli (DOM), bir web sayfas\u0131n\u0131n HTML ve XML belgelerini temsil eden programlama aray\u00fcz\u00fcd\u00fcr. JavaScript, web sayfas\u0131ndaki elementleri dinamik olarak olu\u015fturmak, de\u011fi\u015ftirmek veya silmek i\u00e7in DOM API'lerini kullan\u0131r. Ancak, DOM manip\u00fclasyonu pahal\u0131 bir i\u015flemdir \u00e7\u00fcnk\u00fc her de\u011fi\u015fiklik taray\u0131c\u0131n\u0131n yeniden d\u00fczenleme (reflow) ve yeniden boyama (repaint) yapmas\u0131n\u0131 gerektirebilir. Yeni ba\u015flayanlar s\u0131kl\u0131kla DOM'u do\u011frudan ve verimsiz bir \u015fekilde manip\u00fcle ederek performans sorunlar\u0131na yol a\u00e7arlar.<\/p>\n \u00d6rne\u011fin, bir listeye birden fazla \u00f6\u011fe eklerken, her \u00f6\u011feyi teker teker DOM'a eklemek yerine, t\u00fcm \u00f6\u011feleri \u00f6nce bellekte olu\u015fturup tek bir i\u015flemle DOM'a eklemek \u00e7ok daha verimlidir. Bu i\u015flem i\u00e7in <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, Bir di\u011fer yayg\u0131n hata, CSS animasyonlar\u0131 yerine JavaScript ile s\u00fcrekli DOM \u00f6zelliklerini manip\u00fcle etmektir. Taray\u0131c\u0131lar, CSS animasyonlar\u0131n\u0131 genellikle daha verimli bir \u015fekilde i\u015fler ve ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 daha az me\u015fgul eder. JavaScript ile karma\u015f\u0131k animasyonlar yaparken, Her geli\u015ftirici hata yapar ve her yaz\u0131l\u0131mda beklenmedik durumlar ortaya \u00e7\u0131kabilir. JavaScript uygulamalar\u0131nda hata y\u00f6netimi, kullan\u0131c\u0131 deneyiminin kesintiye u\u011framamas\u0131n\u0131 ve uygulaman\u0131n kararl\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in hayati \u00f6neme sahiptir. Yeni ba\u015flayanlar genellikle hata y\u00f6netimini g\u00f6z ard\u0131 eder, bu da k\u00fc\u00e7\u00fck hatalar\u0131n t\u00fcm uygulaman\u0131n \u00e7\u00f6kmesine veya kritik fonksiyonlar\u0131n \u00e7al\u0131\u015fmamas\u0131na neden olabilir. <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, JavaScript ile web uygulamalar\u0131 geli\u015ftirirken, sadece kodun \u00e7al\u0131\u015fmas\u0131 yeterli de\u011fildir; ayn\u0131 zamanda verimli ve performansl\u0131 \u00e7al\u0131\u015fmas\u0131 da \u00f6nemlidir. Yeni ba\u015flayanlar genellikle kodlar\u0131n\u0131n performans \u00fczerindeki etkisini g\u00f6z ard\u0131 eder, bu da yava\u015f y\u00fcklenen sayfalar, tak\u0131lan aray\u00fczler ve hatta haf\u0131za s\u0131z\u0131nt\u0131lar\u0131 (memory leaks) gibi sorunlara yol a\u00e7abilir. Verimsiz d\u00f6ng\u00fcler, gereksiz global de\u011fi\u015fkenler veya kald\u0131r\u0131lmayan olay dinleyicileri, performans\u0131 olumsuz etkileyen ve haf\u0131za s\u0131z\u0131nt\u0131lar\u0131na neden olan yayg\u0131n hatalard\u0131r.<\/p>\n Haf\u0131za s\u0131z\u0131nt\u0131s\u0131, bir uygulaman\u0131n art\u0131k ihtiya\u00e7 duymad\u0131\u011f\u0131 belle\u011fi serbest b\u0131rakmamas\u0131 durumunda ortaya \u00e7\u0131kar. Bu durum, uygulaman\u0131n zamanla daha fazla bellek kullanmas\u0131na ve sonunda \u00e7\u00f6kmesine veya yava\u015flamas\u0131na neden olabilir. JavaScript'te en yayg\u0131n haf\u0131za s\u0131z\u0131nt\u0131s\u0131 nedenlerinden biri, DOM \u00f6\u011felerinden kald\u0131r\u0131lmas\u0131 unutulan olay dinleyicileridir. Bir \u00f6\u011fe DOM'dan kald\u0131r\u0131ld\u0131\u011f\u0131nda, ona ba\u011fl\u0131 olay dinleyicileri de kald\u0131r\u0131lmal\u0131d\u0131r, aksi takdirde bu dinleyiciler bellekte kalmaya devam edebilir ve gereksiz referanslar olu\u015fturarak \u00e7\u00f6p toplay\u0131c\u0131n\u0131n (garbage collector) ilgili \u00f6\u011feyi temizlemesini engelleyebilir.<\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rneklerde, Mobil uyumluluk da performans\u0131n \u00f6nemli bir par\u00e7as\u0131d\u0131r. Web sitenizin farkl\u0131 cihazlarda d\u00fczg\u00fcn g\u00f6r\u00fcnmesi ve h\u0131zl\u0131 \u00e7al\u0131\u015fmas\u0131 i\u00e7in mobil odakl\u0131 geli\u015ftirmeler yapmal\u0131s\u0131n\u0131z. \u00d6rne\u011fin, CSS media query'ler kullanarak responsif tasar\u0131mlar olu\u015fturmak temel bir gerekliliktir:<\/p>\n <\/code><\/p>\n Bu t\u00fcr mobil uyumlu tasar\u0131m pratikleri, JavaScript performans\u0131yla birle\u015fti\u011finde daha iyi bir kullan\u0131c\u0131 deneyimi sa\u011flar.<\/p>\n JavaScript d\u00fcnyas\u0131, s\u00fcrekli de\u011fi\u015fen ve geli\u015fen dinamik bir ekosistemdir. Bug\u00fcn \u00f6\u011frendi\u011finiz bir teknik, yar\u0131n yerini daha modern ve verimli bir yakla\u015f\u0131ma b\u0131rakabilir. Bu nedenle, bir JavaScript geli\u015ftiricisi olarak ba\u015far\u0131l\u0131 olmak i\u00e7in sadece temel hatalardan ka\u00e7\u0131nmak yeterli de\u011fildir; ayn\u0131 zamanda s\u00fcrekli \u00f6\u011frenmeye ve kendinizi g\u00fcncel tutmaya a\u00e7\u0131k olmal\u0131s\u0131n\u0131z. \u00d6\u011frenme yolculu\u011funuz, basit s\u00f6zdiziminden karma\u015f\u0131k mimarilere, farkl\u0131 framework'lere ve en iyi performans pratiklerine kadar uzanacakt\u0131r. Kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z her hata, bir \u00f6\u011frenme f\u0131rsat\u0131d\u0131r ve bu hatalar\u0131n \u00fcstesinden gelmek, sizi daha yetkin bir problem \u00e7\u00f6z\u00fcc\u00fc yapar.<\/p>\n Modern JavaScript standartlar\u0131n\u0131 (ES6+), yeni API'leri ve g\u00fcncel framework'leri takip etmek, sizi sekt\u00f6rde rekabet\u00e7i k\u0131lacakt\u0131r. A\u00e7\u0131k kaynak projelere katk\u0131da bulunmak, di\u011fer geli\u015ftiricilerin kodlar\u0131n\u0131 incelemek ve teknik topluluklara kat\u0131lmak da \u00f6\u011frenme s\u00fcrecinizi h\u0131zland\u0131racak de\u011ferli deneyimlerdir. Unutmay\u0131n, en deneyimli geli\u015ftiriciler bile hala \u00f6\u011frenmeye ve ke\u015ffetmeye devam etmektedir. Bu makalede ele ald\u0131\u011f\u0131m\u0131z yayg\u0131n hatalardan ders \u00e7\u0131kararak, JavaScript yolculu\u011funuza daha bilin\u00e7li ve sa\u011flam ad\u0131mlarla devam edebilirsiniz.<\/p>\n JavaScript \u00f6\u011frenme s\u00fcresi ki\u015fiden ki\u015fiye de\u011fi\u015fmekle birlikte, temel s\u00f6zdizimini ve ana kavramlar\u0131n\u0131 (de\u011fi\u015fkenler, fonksiyonlar, d\u00f6ng\u00fcler, ko\u015fullu ifadeler, DOM manip\u00fclasyonu, asenkron programlama) kavramak genellikle birka\u00e7 hafta ile birka\u00e7 ay aras\u0131nda s\u00fcrebilir. Ba\u015flang\u0131\u00e7 i\u00e7in \u00fccretsiz online kaynaklar (MDN Web Docs, freeCodeCamp, The Odin Project) veya interaktif platformlar (Codecademy, Scrimba) harika ba\u015flang\u0131\u00e7 noktalar\u0131d\u0131r. Temel bilgileri edinirken pratik yapmaya ve k\u00fc\u00e7\u00fck projeler geli\u015ftirmeye odaklanmal\u0131s\u0131n\u0131z.<\/p>\n<\/li>\n Ba\u015flang\u0131\u00e7 seviyesinde bir framework \u00f6\u011frenmek yerine, \u00f6ncelikle temel JavaScript bilginizi peki\u015ftirmenizi \u00f6neririz. Temeliniz sa\u011flam oldu\u011funda, bir framework se\u00e7imi daha kolay olacakt\u0131r. E\u011fer bir se\u00e7im yapman\u0131z gerekirse:<\/p>\n En iyi se\u00e7enek, ki\u015fisel tercihlerinize ve kariyer hedeflerinize ba\u011fl\u0131d\u0131r. Bir framework se\u00e7meden \u00f6nce her birini biraz ara\u015ft\u0131r\u0131p k\u00fc\u00e7\u00fck bir ba\u015flang\u0131\u00e7 projesi ile denemek faydal\u0131 olabilir.<\/p>\n<\/li>\n Taray\u0131c\u0131lar\u0131n geli\u015ftirici ara\u00e7lar\u0131 (Chrome DevTools, Firefox Developer Tools) hata ay\u0131klama i\u00e7in en g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. \u00d6zellikle \"Console\" sekmesi hata mesajlar\u0131n\u0131 ve konsol \u00e7\u0131kt\u0131lar\u0131n\u0131 g\u00f6sterirken, \"Sources\" sekmesi kodunuzda kesme noktalar\u0131 (breakpoints) ayarlaman\u0131za, de\u011fi\u015fken de\u011ferlerini izlemenize ve kodu ad\u0131m ad\u0131m \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r. Node.js uygulamalar\u0131 i\u00e7in de benzer \u015fekilde Visual Studio Code gibi IDE'lerin entegre hata ay\u0131klama ara\u00e7lar\u0131n\u0131 kullanabilirsiniz.<\/p>\n<\/li>\n Temiz kod yazmak, her geli\u015ftiricinin hedefi olmal\u0131d\u0131r. \u0130\u015fte baz\u0131 ipu\u00e7lar\u0131:<\/p>\n Hem K\u0131sacas\u0131, <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Web geli\u015ftirme d\u00fcnyas\u0131na ad\u0131m atan her JavaScript \u00f6\u011frencisi, bu heyecan verici yolculukta ka\u00e7\u0131n\u0131lmaz olarak baz\u0131 zorluklarla kar\u015f\u0131la\u015f\u0131r. Modern…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[129],"tags":[],"class_list":{"0":"post-31209","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nvar<\/code> anahtar kelimesi, de\u011fi\u015fken tan\u0131mlaman\u0131n geleneksel yoludur. Ancak ES6 (ECMAScript 2015) ile birlikte hayat\u0131m\u0131za giren let<\/code> ve const<\/code>, de\u011fi\u015fken tan\u0131mlama bi\u00e7iminde devrim yaratarak daha g\u00fcvenli ve \u00f6ng\u00f6r\u00fclebilir kod yazma imkan\u0131 sundu. Yeni ba\u015flayanlar genellikle eski al\u0131\u015fkanl\u0131klar\u0131na ba\u011fl\u0131 kalarak veya fark\u0131nda olmadan hala var<\/code> kullanmaya devam ederler, bu da beklenmedik hatalara ve kapsam sorunlar\u0131na yol a\u00e7abilir. var<\/code>, fonksiyon kapsam\u0131nda (function scope) \u00e7al\u0131\u015f\u0131rken, let<\/code> ve const<\/code> blok kapsam\u0131nda (block scope) \u00e7al\u0131\u015f\u0131r. Bu temel fark\u0131 anlamak, kodunuzun ak\u0131\u015f\u0131n\u0131 ve de\u011fi\u015fkenlerin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc \u00e7ok daha iyi y\u00f6netmenizi sa\u011flar.<\/p>\nvar<\/code> ile de\u011fi\u015fken tan\u0131mlad\u0131\u011f\u0131n\u0131zda, bu de\u011fi\u015fken d\u00f6ng\u00fc d\u0131\u015f\u0131ndan da eri\u015filebilir olur ve d\u00f6ng\u00fc tamamland\u0131\u011f\u0131nda son de\u011ferini korur. Bu durum, \u00f6zellikle asenkron i\u015flemlerde veya closure’lar kullan\u0131l\u0131rken mant\u0131k hatalar\u0131na neden olabilir. A\u015fa\u011f\u0131daki kod blo\u011funu inceleyelim:<\/p>\n\n \/\/ Hatal\u0131 Yakla\u015f\u0131m: 'var' kullan\u0131m\u0131\n for (var i = 0; i < 3; i++) {\n setTimeout(function() {\n console.log(i); \/\/ Her zaman 3 yazd\u0131r\u0131r\n }, 100 * i);\n }\n\n \/\/ Do\u011fru Yakla\u015f\u0131m: 'let' kullan\u0131m\u0131\n for (let j = 0; j < 3; j++) {\n setTimeout(function() {\n console.log(j); \/\/ 0, 1, 2 yazd\u0131r\u0131r\n }, 100 * j);\n }\n <\/pre>\nvar<\/code> ile tan\u0131mlanan i<\/code> de\u011fi\u015fkeni fonksiyon kapsam\u0131na sahip oldu\u011fu i\u00e7in, setTimeout<\/code> i\u00e7indeki anonim fonksiyonlar \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda d\u00f6ng\u00fc bitmi\u015f ve i<\/code>'nin de\u011feri 3<\/code> olmu\u015ftur. Oysa let<\/code> ile tan\u0131mlanan j<\/code>, her d\u00f6ng\u00fc iterasyonu i\u00e7in yeni bir blok kapsam\u0131 olu\u015fturdu\u011fundan, setTimeout<\/code> her seferinde do\u011fru j<\/code> de\u011ferini yakalar ve saklar. Bu durum, fonksiyon kapsam\u0131 ve blok kapsam\u0131 aras\u0131ndaki kritik fark\u0131 net bir \u015fekilde ortaya koymaktad\u0131r. const<\/code> ise, de\u011feri bir kez atand\u0131ktan sonra de\u011fi\u015ftirilemeyen de\u011fi\u015fkenler i\u00e7in kullan\u0131l\u0131r ve bu da kodunuzun daha g\u00fcvenli ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\nlet<\/code> ve const<\/code> kullan\u0131n. E\u011fer bir de\u011fi\u015fkenin de\u011feri de\u011fi\u015fmeyecekse const<\/code> tercih edin; aksi takdirde let<\/code> kullan\u0131n. Bu, kodunuzu daha okunabilir, bak\u0131m\u0131 kolay ve hata oran\u0131 d\u00fc\u015f\u00fck hale getirecektir. Bu pratik, haf\u0131za y\u00f6netiminde de iyile\u015fmeler sa\u011flayabilir, \u00e7\u00fcnk\u00fc taray\u0131c\u0131 motorlar\u0131 const<\/code> de\u011fi\u015fkenlerinin sabit oldu\u011funu bildi\u011fi i\u00e7in baz\u0131 optimizasyonlar yapabilir.<\/div>\nKapsam (Scope) ve 'this' Anahtar Kelimesini Kar\u0131\u015ft\u0131rmak<\/h3>\n
scope<\/code> (kapsam) ve this<\/code> anahtar kelimesi, yeni ba\u015flayanlar i\u00e7in en zorlay\u0131c\u0131 konulardan ikisidir. Kapsam, de\u011fi\u015fkenlerin ve fonksiyonlar\u0131n nerede eri\u015filebilir oldu\u011funu belirlerken, this<\/code> anahtar kelimesi, bir fonksiyonun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 ba\u011flam\u0131 (context) ifade eder ve de\u011feri dinamik olarak de\u011fi\u015febilir. Bu iki kavram\u0131n yanl\u0131\u015f anla\u015f\u0131lmas\u0131, beklenmedik sonu\u00e7lara ve saatlerce s\u00fcren hata ay\u0131klama seanslar\u0131na yol a\u00e7abilir.<\/p>\nif<\/code>, for<\/code>, while<\/code> bloklar\u0131 veya s\u00fcsl\u00fc parantezlerle tan\u0131mlanan her yer), let<\/code> ve const<\/code> ile tan\u0131mlanan de\u011fi\u015fkenlerin sadece o blok i\u00e7inde ge\u00e7erli olmas\u0131n\u0131 sa\u011flar. \u0130\u015fte this<\/code> ile ilgili bir \u00f6rnek:<\/p>\n\n const user = {\n name: \"Alice\",\n greet: function() {\n console.log(\"Merhaba, ben \" + this.name); \/\/ 'this' user objesini i\u015faret eder\n },\n sayLater: function() {\n setTimeout(function() {\n console.log(\"Merhaba, ben \" + this.name); \/\/ 'this' global objeyi (window) i\u015faret eder\n }, 1000);\n },\n sayLaterArrow: function() {\n setTimeout(() => {\n console.log(\"Merhaba, ben \" + this.name); \/\/ Ok fonksiyonlar 'this'i \u00fcst kapsamdan al\u0131r\n }, 1000);\n }\n };\n\n user.greet(); \/\/ Merhaba, ben Alice\n user.sayLater(); \/\/ Merhaba, ben undefined (veya taray\u0131c\u0131da bo\u015f string)\n user.sayLaterArrow(); \/\/ Merhaba, ben Alice\n <\/pre>\nsayLater<\/code> fonksiyonunda, setTimeout<\/code> i\u00e7indeki anonim fonksiyonun kendi this<\/code> ba\u011flam\u0131 vard\u0131r ve bu genellikle global objeye (taray\u0131c\u0131da window<\/code>, Node.js'de global<\/code>) i\u015faret eder. Bu nedenle this.name<\/code> tan\u0131ms\u0131z olur. Ancak, sayLaterArrow<\/code> fonksiyonunda ok (arrow) fonksiyonu kullan\u0131ld\u0131\u011f\u0131nda, ok fonksiyonlar\u0131 kendi this<\/code> ba\u011flam\u0131n\u0131 olu\u015fturmazlar; bunun yerine \u00fcst kapsamdaki this<\/code> de\u011ferini miras al\u0131rlar. Bu durumda user<\/code> objesinin this<\/code>'ini al\u0131r ve do\u011fru sonucu \u00fcretir. Bu \u00f6zellik, this<\/code> y\u00f6netiminde b\u00fcy\u00fck kolayl\u0131k sa\u011flar ve callback'ler ile \u00e7al\u0131\u015f\u0131rken s\u0131kl\u0131kla tercih edilir.<\/p>\nbind()<\/code>, call()<\/code> ve apply()<\/code> metotlar\u0131 da bir fonksiyonun this<\/code> ba\u011flam\u0131n\u0131 manuel olarak ayarlamak i\u00e7in kullan\u0131l\u0131r. Bu metotlar, \u00f6zellikle k\u00fct\u00fcphane veya framework geli\u015ftirirken veya belirli bir ba\u011flamda fonksiyon \u00e7al\u0131\u015ft\u0131rmak istedi\u011finizde olduk\u00e7a g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. \u00d6rne\u011fin, user.sayLater.bind(user)()<\/code> \u015feklinde \u00e7a\u011fr\u0131larak this<\/code> ba\u011flam\u0131n\u0131 user<\/code> objesine sabitleyebilirsiniz. Bu derinlemesine bilgi, JavaScript'in dinamik do\u011fas\u0131n\u0131 anlamak ve hatas\u0131z, \u00f6ng\u00f6r\u00fclebilir kod yazmak i\u00e7in elzemdir.<\/p>\nTip Zorlamas\u0131n\u0131 (Type Coercion) Yanl\u0131\u015f Anlamak ve == vs === Fark\u0131<\/h3>\n
==<\/code> (gev\u015fek e\u015fitlik) operat\u00f6r\u00fc kullan\u0131ld\u0131\u011f\u0131nda beklenmedik sonu\u00e7lara neden olabilir. Gev\u015fek e\u015fitlik operat\u00f6r\u00fc, iki de\u011feri kar\u015f\u0131la\u015ft\u0131rmadan \u00f6nce farkl\u0131 tiplerdeki de\u011ferleri ayn\u0131 tipe d\u00f6n\u00fc\u015ft\u00fcrmeye \u00e7al\u0131\u015f\u0131r. Bu durum, performans sorunlar\u0131na veya mant\u0131k hatalar\u0131na yol a\u00e7abilir. \u00c7o\u011fu zaman, kesin e\u015fitlik operat\u00f6r\u00fc olan ===<\/code>'nin kullan\u0131lmas\u0131 \u00f6nerilir.<\/p>\n===<\/code>, iki de\u011feri hem tip hem de de\u011fer olarak kar\u015f\u0131la\u015ft\u0131r\u0131r. E\u011fer tipler farkl\u0131ysa, otomatik olarak false<\/code> d\u00f6nd\u00fcr\u00fcr ve tip zorlamas\u0131 yapmaz. Bu, kodunuzu daha \u00f6ng\u00f6r\u00fclebilir ve hatas\u0131z hale getirir. \u0130\u015fte bir kar\u015f\u0131la\u015ft\u0131rma:<\/p>\n\n console.log(1 == \"1\"); \/\/ true (JavaScript \"1\" string'ini 1 say\u0131s\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr)\n console.log(1 === \"1\"); \/\/ false (Sayi tipi ile String tipi farkl\u0131d\u0131r)\n\n console.log(true == 1); \/\/ true (true, 1 say\u0131s\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr)\n console.log(true === 1); \/\/ false (Boolean tipi ile Sayi tipi farkl\u0131d\u0131r)\n\n console.log(null == undefined); \/\/ true (\u00d6zel bir kural)\n console.log(null === undefined); \/\/ false (Tipler farkl\u0131d\u0131r)\n\n const obj1 = { a: 1 };\n const obj2 = { a: 1 };\n console.log(obj1 == obj2); \/\/ false (Bellekte farkl\u0131 objeler)\n console.log(obj1 === obj2); \/\/ false (Bellekte farkl\u0131 objeler)\n\n const obj3 = obj1;\n console.log(obj1 == obj3); \/\/ true (Ayn\u0131 objeye referans veriyorlar)\n console.log(obj1 === obj3); \/\/ true (Ayn\u0131 objeye referans veriyorlar)\n <\/pre>\n==<\/code> operat\u00f6r\u00fcn\u00fcn bazen sezgisel olmayan sonu\u00e7lar verebilece\u011fini g\u00f6stermektedir. \u00d6zellikle say\u0131 ve string de\u011ferler aras\u0131nda kar\u015f\u0131la\u015ft\u0131rma yaparken veya true<\/code>\/false<\/code> de\u011ferlerini say\u0131larla kar\u015f\u0131la\u015ft\u0131r\u0131rken dikkatli olmak gerekir. En iyi uygulama, her zaman ===<\/code> kullanmakt\u0131r, \u00e7\u00fcnk\u00fc bu, kodunuzun ne yapaca\u011f\u0131n\u0131 tam olarak bilmenizi sa\u011flar ve beklenmedik tip d\u00f6n\u00fc\u015f\u00fcmlerinden kaynaklanan hatalar\u0131 \u00f6nler.<\/p>\n===<\/code> (kesin e\u015fitlik) operat\u00f6r\u00fcn\u00fc tercih edin. Bu, kodunuzun daha g\u00fcvenli, \u00f6ng\u00f6r\u00fclebilir ve hata ay\u0131klamas\u0131 daha kolay olmas\u0131n\u0131 sa\u011flar. ==<\/code> operat\u00f6r\u00fcn\u00fc kullanman\u0131z gereken istisnai durumlar \u00e7ok nadirdir ve genellikle belirli bir k\u00fct\u00fcphane veya eski kod taban\u0131 ile uyumluluk gerektirdi\u011finde ortaya \u00e7\u0131kar.<\/div>\n||<\/code>, &&<\/code>) gibi ba\u015fka yerlerde de kar\u015f\u0131m\u0131za \u00e7\u0131kabilir. \u00d6rne\u011fin, bir string'i bir say\u0131ya d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in +<\/code> operat\u00f6r\u00fcn\u00fc kullan\u0131rsan\u0131z (+\"10\"<\/code>), JavaScript otomatik olarak bunu bir say\u0131ya d\u00f6n\u00fc\u015ft\u00fcrecektir. Bu t\u00fcr implicit (\u00f6rt\u00fck) tip d\u00f6n\u00fc\u015f\u00fcmleri yerine, Number()<\/code>, String()<\/code> veya Boolean()<\/code> gibi explicit (a\u00e7\u0131k) tip d\u00f6n\u00fc\u015f\u00fcm fonksiyonlar\u0131n\u0131 kullanmak, kodunuzun daha a\u00e7\u0131k ve anla\u015f\u0131l\u0131r olmas\u0131n\u0131 sa\u011flar.<\/p>\nAsenkron ve Etkile\u015fimli Web Uygulamalar\u0131 Geli\u015ftirirken Yap\u0131lan Yayg\u0131n Yanl\u0131\u015flar Nelerdir?<\/h2>\n
Asenkron JavaScript'i Anlamamak: Callback Hell'den Promise'lere ve Async\/Await'e<\/h3>\n
\n \/\/ Callback Hell \u00d6rne\u011fi (Ka\u00e7\u0131n\u0131lmas\u0131 Gereken)\n getData(function(a) {\n processData(a, function(b) {\n displayData(b, function(c) {\n console.log(\"T\u00fcm i\u015flemler tamamland\u0131:\", c);\n }, function(err) {\n console.error(\"3. ad\u0131mda hata:\", err);\n });\n }, function(err) {\n console.error(\"2. ad\u0131mda hata:\", err);\n });\n }, function(err) {\n console.error(\"1. ad\u0131mda hata:\", err);\n });\n <\/pre>\nPromise<\/code>'leri ve daha da iyisi async\/await<\/code> s\u00f6zdizimini sunmu\u015ftur. Promise'ler, asenkron bir i\u015flemin nihai sonucunu (ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z) temsil eden objelerdir ve zincirleme (chaining) yap\u0131s\u0131yla callback hell'i engeller:<\/p>\n\n \/\/ Promise Kullan\u0131m\u0131\n function fetchData() {\n return new Promise((resolve) => {\n setTimeout(() => resolve(\"Veri \u00e7ekildi\"), 1000);\n });\n }\n\n function processFetchedData(data) {\n return new Promise((resolve) => {\n setTimeout(() => resolve(data + \" ve i\u015flendi\"), 1000);\n });\n }\n\n fetchData()\n .then(data => processFetchedData(data))\n .then(processedData => console.log(processedData))\n .catch(error => console.error(\"Bir hata olu\u015ftu:\", error));\n <\/pre>\nasync\/await<\/code>, asenkron kodu senkron kod gibi yazma imkan\u0131 sunarak Promise'leri daha da geli\u015ftirmi\u015ftir. Bu, asenkron kod yazman\u0131n en modern ve tercih edilen yoludur:<\/p>\n\n \/\/ Async\/Await Kullan\u0131m\u0131\n async function performAsyncOperations() {\n try {\n const data = await fetchData(); \/\/ fetchData promise'ini bekler\n const processedData = await processFetchedData(data); \/\/ processFetchedData promise'ini bekler\n console.log(processedData);\n } catch (error) {\n console.error(\"Bir hata olu\u015ftu:\", error);\n }\n }\n\n performAsyncOperations();\n <\/pre>\nasync<\/code> anahtar kelimesi bir fonksiyonun bir Promise d\u00f6nd\u00fcrece\u011fini belirtir, await<\/code> ise bir Promise'in tamamlanmas\u0131n\u0131 bekler. Bu yakla\u015f\u0131m, karma\u015f\u0131k asenkron ak\u0131\u015flar\u0131 bile d\u00fcz ve anla\u015f\u0131l\u0131r bir \u015fekilde yazman\u0131za olanak tan\u0131r. Hata y\u00f6netimi i\u00e7in ise try...catch<\/code> bloklar\u0131 kullan\u0131l\u0131r, bu da senkron kodda oldu\u011fu gibi hatalar\u0131 yakalamay\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\nasync\/await<\/code> kullanmay\u0131 tercih edin. Bu, kodunuzu en okunabilir ve s\u00fcrd\u00fcr\u00fclebilir hale getiren modern yakla\u015f\u0131md\u0131r. Gerekirse Promise'leri temel olarak anlay\u0131n, ancak pratikte async\/await<\/code>, asenkron karma\u015f\u0131kl\u0131\u011f\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azalt\u0131r.<\/div>\nDOM Manip\u00fclasyonunu Verimsiz Kullanmak<\/h3>\n
DocumentFragment<\/code> veya bir string'de HTML olu\u015fturup innerHTML<\/code> \u00f6zelli\u011fini kullanmak gibi y\u00f6ntemler mevcuttur:<\/p>\n\n \/\/ Verimsiz DOM Manip\u00fclasyonu\n const listVerimsiz = document.getElementById('myListVerimsiz');\n for (let i = 0; i < 1000; i++) {\n const li = document.createElement('li');\n li.textContent = \u00d6\u011fe ${i}<\/code>;\n listVerimsiz.appendChild(li); \/\/ Her eklemede DOM g\u00fcncellenir\n }\n\n \/\/ Verimli DOM Manip\u00fclasyonu: DocumentFragment ile\n const listVerimli = document.getElementById('myListVerimli');\n const fragment = document.createDocumentFragment();\n for (let i = 0; i < 1000; i++) {\n const li = document.createElement('li');\n li.textContent = \u00d6\u011fe ${i}<\/code>;\n fragment.appendChild(li);\n }\n listVerimli.appendChild(fragment); \/\/ Tek seferde DOM'a eklenir\n\n \/\/ Verimli DOM Manip\u00fclasyonu: innerHTML ile\n const listInnerHTML = document.getElementById('myListInnerHTML');\n let htmlString = '';\n for (let i = 0; i < 1000; i++) {\n htmlString += DocumentFragment<\/code> ve innerHTML<\/code> yakla\u015f\u0131mlar\u0131, binlerce \u00f6\u011feyi bile \u00e7ok daha h\u0131zl\u0131 bir \u015fekilde sayfaya ekleyebilir. Ayr\u0131ca, olay dinleyicilerini (event listeners) her \u00f6\u011feye tek tek eklemek yerine, ebeveyn bir \u00f6\u011feye ekleyip olay kabarc\u0131klanmas\u0131n\u0131 (event bubbling) kullanarak \"olay delegasyonu\" (event delegation) yapmak da performans\u0131 art\u0131ran ba\u015fka bir \u00f6nemli tekniktir. Bu, \u00f6zellikle dinamik olarak eklenen \u00f6\u011feler i\u00e7in ge\u00e7erlidir ve haf\u0131za kullan\u0131m\u0131n\u0131 optimize eder.<\/p>\nrequestAnimationFrame<\/code> kullanarak taray\u0131c\u0131n\u0131n ekran yenileme h\u0131z\u0131na uygun hareket etmek, daha ak\u0131c\u0131 animasyonlar elde etmenizi sa\u011flar.<\/p>\nHata Y\u00f6netimini \u0130hmal Etmek: try...catch Bloklar\u0131 Neden \u00d6nemli?<\/h3>\n
try...catch<\/code> bloklar\u0131, JavaScript'te senkron kod blo\u011fundaki hatalar\u0131 yakalaman\u0131n standart yoludur.<\/p>\ntry<\/code> blo\u011fu, potansiyel olarak hata olu\u015fturabilecek kodu i\u00e7erirken, catch<\/code> blo\u011fu bu hatalar\u0131 yakalar ve i\u015fler. Bu, uygulaman\u0131z\u0131n beklenmedik hatalara ra\u011fmen \u00e7al\u0131\u015fmaya devam etmesini sa\u011flar. \u00d6zellikle kullan\u0131c\u0131 girdisiyle etkile\u015fimde bulunan veya d\u0131\u015f API'lerle ileti\u015fim kuran kodlarda hata y\u00f6netimi vazge\u00e7ilmezdir:<\/p>\n\n function parseJSON(jsonString) {\n try {\n const data = JSON.parse(jsonString); \/\/ Hata olu\u015fturabilecek kod\n console.log(\"JSON ba\u015far\u0131yla ayr\u0131\u015ft\u0131r\u0131ld\u0131:\", data);\n return data;\n } catch (error) {\n console.error(\"JSON ayr\u0131\u015ft\u0131rma hatas\u0131:\", error.message);\n \/\/ Kullan\u0131c\u0131ya bir hata mesaj\u0131 g\u00f6sterebilir veya varsay\u0131lan de\u011fer d\u00f6nd\u00fcrebilirsiniz\n return null;\n } finally {\n console.log(\"JSON ayr\u0131\u015ft\u0131rma i\u015flemi tamamland\u0131.\"); \/\/ Hata olsa da olmasa da \u00e7al\u0131\u015f\u0131r\n }\n }\n\n parseJSON('{\"name\": \"Alice\", \"age\": 30}'); \/\/ Ba\u015far\u0131l\u0131\n parseJSON('bu ge\u00e7erli bir JSON de\u011fil'); \/\/ Hata yakalan\u0131r\n <\/pre>\nJSON.parse()<\/code> fonksiyonu ge\u00e7erli olmayan bir JSON string'i ald\u0131\u011f\u0131nda bir hata f\u0131rlat\u0131r. try...catch<\/code> blo\u011fu sayesinde bu hata yakalan\u0131r ve uygulama \u00e7\u00f6kmeden hata mesaj\u0131n\u0131 konsola yazd\u0131r\u0131r. finally<\/code> blo\u011fu ise, try<\/code> blo\u011funun ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131na veya bir hata f\u0131rlat\u0131p f\u0131rlatmad\u0131\u011f\u0131na bak\u0131lmaks\u0131z\u0131n her zaman \u00e7al\u0131\u015f\u0131r ve kaynaklar\u0131 temizlemek i\u00e7in kullan\u0131labilir. Asenkron kodlarda (Promise'ler ve async\/await) hatalar genellikle .catch()<\/code> metotlar\u0131 veya async\/await<\/code> ile try...catch<\/code> i\u00e7inde ele al\u0131n\u0131r. Bu nedenle, hata y\u00f6netimi stratejilerinizi geli\u015ftirirken her iki senaryoyu da g\u00f6z \u00f6n\u00fcnde bulundurmal\u0131s\u0131n\u0131z.<\/p>\nPerformans Odakl\u0131 D\u00fc\u015f\u00fcnmemek ve Haf\u0131za S\u0131z\u0131nt\u0131lar\u0131na Yol A\u00e7mak<\/h3>\n
\n \/\/ Haf\u0131za s\u0131z\u0131nt\u0131s\u0131na yol a\u00e7abilecek durum\n let globalData = [];\n function createLargeObject() {\n const largeObject = new Array(1000000).fill('some_data');\n globalData.push(largeObject); \/\/ Global bir referans olu\u015fturur\n }\n \/\/ createLargeObject() s\u0131k\u00e7a \u00e7a\u011fr\u0131l\u0131rsa bellek \u015fi\u015fer\n\n \/\/ Kald\u0131r\u0131lmayan olay dinleyicisi \u00f6rne\u011fi\n const button = document.getElementById('myButton');\n function handleClick() {\n \/\/ Bu fonksiyon \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda haf\u0131za tahsisi yap\u0131yor\n \/\/ ve e\u011fer buton DOM'dan kald\u0131r\u0131l\u0131rsa, bu dinleyici hala bellekte kalabilir.\n console.log('T\u0131kland\u0131!');\n }\n button.addEventListener('click', handleClick);\n\n \/\/ D\u00fc\u011fme DOM'dan kald\u0131r\u0131ld\u0131\u011f\u0131nda, dinleyicinin de kald\u0131r\u0131lmas\u0131 gerekir:\n \/\/ button.removeEventListener('click', handleClick);\n <\/pre>\nglobalData<\/code>'ya eklenen b\u00fcy\u00fck objeler veya kald\u0131r\u0131lmayan olay dinleyicileri, uygulaman\u0131n belle\u011fini t\u00fcketebilir. Performans\u0131 art\u0131rmak i\u00e7in ise:<\/p>\n\n
null<\/code> olarak ayarlayarak \u00e7\u00f6p toplay\u0131c\u0131n\u0131n bunlar\u0131 serbest b\u0131rakmas\u0131na yard\u0131mc\u0131 olun.<\/li>\n\n \/* Mobil cihazlar i\u00e7in \u00f6rnek CSS media query *\/\n @media (max-width: 768px) {\n .container {\n flex-direction: column;\n }\n .sidebar {\n display: none;\n }\n }\n <\/pre>\nJavaScript Ustal\u0131\u011f\u0131na Giden Yol: S\u00fcrekli \u00d6\u011frenmenin \u00d6nemi<\/h2>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\n
\n
\n
let<\/code>\/const<\/code>, ok fonksiyonlar\u0131, destructuring gibi modern \u00f6zellikleri kullan\u0131n.<\/li>\n<\/ul>\n<\/li>\nnull<\/code> ve undefined<\/code> aras\u0131ndaki fark nedir?<\/strong><\/p>\nnull<\/code> hem de undefined<\/code>, JavaScript'te bir de\u011ferin yoklu\u011funu ifade eder, ancak farkl\u0131 anlamlar\u0131 vard\u0131r:<\/p>\n\n
undefined<\/code>:<\/strong> Bir de\u011fi\u015fkenin tan\u0131mland\u0131\u011f\u0131 ancak hi\u00e7bir de\u011fer atanmad\u0131\u011f\u0131 veya bir fonksiyonun de\u011fer d\u00f6nd\u00fcrmedi\u011fi durumlarda otomatik olarak atanan tiptir. Bir objenin mevcut olmayan bir \u00f6zelli\u011fine eri\u015fmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131zda da undefined<\/code> al\u0131rs\u0131n\u0131z.<\/li>\nnull<\/code>:<\/strong> Bir de\u011ferin bilin\u00e7li olarak \"hi\u00e7bir de\u011fer\" veya \"bo\u015f\" olarak atand\u0131\u011f\u0131n\u0131 ifade eder. Bir geli\u015ftirici olarak, bir de\u011fi\u015fkenin de\u011ferini bilerek bo\u015faltmak istedi\u011finizde null<\/code> atars\u0131n\u0131z.<\/li>\n<\/ul>\nundefined<\/code> genellikle sistem taraf\u0131ndan atanan bir \"de\u011fer yok\" durumunu ifade ederken, null<\/code> programc\u0131 taraf\u0131ndan atanan \"bo\u015f de\u011fer\" durumunu ifade eder. typeof undefined<\/code> \"undefined\"<\/code> d\u00f6nd\u00fcr\u00fcrken, typeof null<\/code>'un \"object\"<\/code> d\u00f6nd\u00fcrmesi, JavaScript'in tarihsel bir hatas\u0131d\u0131r.<\/p>\n<\/li>\n<\/ol>\n