{"id":17481,"date":"2025-04-07T23:15:16","date_gmt":"2025-04-07T20:15:16","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/javascriptte-nullish-coalescing-ve-istege-bagli-zincirleme\/"},"modified":"2025-04-07T23:15:16","modified_gmt":"2025-04-07T20:15:16","slug":"javascriptte-nullish-coalescing-ve-istege-bagli-zincirleme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascriptte-nullish-coalescing-ve-istege-bagli-zincirleme\/","title":{"rendered":"JavaScript’te Nullish Coalescing ve \u0130ste\u011fe Ba\u011fl\u0131 Zincirleme"},"content":{"rendered":"

<\/p>\n

JavaScript’te Nullish Coalescing ve \u0130ste\u011fe Ba\u011fl\u0131 Zincirleme<\/p>\n

JavaScript, modern web geli\u015ftirmede en yayg\u0131n kullan\u0131lan dillerden biridir. Bu g\u00fcc\u00fcne ra\u011fmen, bazen null veya undefined de\u011ferlerle \u00e7al\u0131\u015fma zorluklar\u0131 ya\u015fayabiliriz. Neyse ki, JavaScript’in son s\u00fcr\u00fcmleri bu sorunlar\u0131 azaltmak i\u00e7in iki g\u00fc\u00e7l\u00fc operat\u00f6r sunuyor: Nullish Coalescing (??)<\/strong> ve \u0130ste\u011fe Ba\u011fl\u0131 Zincirleme (?.)<\/strong>. Bu makalede, bu operat\u00f6rleri detayl\u0131 bir \u015fekilde inceleyece\u011fiz ve kullan\u0131m \u00f6rnekleriyle a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n

Nullish Coalescing (??) Operat\u00f6r\u00fc<\/h2>\n

Nullish Coalescing operat\u00f6r\u00fc (??), bir de\u011ferin null<\/code> veya undefined<\/code> olup olmad\u0131\u011f\u0131n\u0131 kontrol eder. E\u011fer de\u011fer null<\/code> veya undefined<\/code> ise, operat\u00f6r\u00fcn sa\u011f taraf\u0131ndaki de\u011feri d\u00f6nd\u00fcr\u00fcr. Aksi takdirde, sol taraf\u0131ndaki de\u011feri d\u00f6nd\u00fcr\u00fcr. Bu, ||<\/code> operat\u00f6r\u00fcnden farkl\u0131d\u0131r; \u00e7\u00fcnk\u00fc ||<\/code> operat\u00f6r\u00fc, 0<\/code>, false<\/code>, ve bo\u015f diziler gibi “falsy” de\u011ferleri de kontrol eder.<\/p>\n

\nlet kullan\u0131c\u0131Ad\u0131 = null;\nlet varsay\u0131lanAd = \"Misafir\";\n\nlet g\u00f6sterilecekAd = kullan\u0131c\u0131Ad\u0131 ?? varsay\u0131lanAd; \/\/ g\u00f6sterilecekAd = \"Misafir\"\n\nkullan\u0131c\u0131Ad\u0131 = \"Fatih\";\ng\u00f6sterilecekAd = kullan\u0131c\u0131Ad\u0131 ?? varsay\u0131lanAd; \/\/ g\u00f6sterilecekAd = \"Fatih\"\n\nlet ya\u015f = 0;\nlet varsay\u0131lanYa\u015f = 18;\nlet g\u00f6sterilecekYa\u015f = ya\u015f ?? varsay\u0131lanYa\u015f; \/\/ g\u00f6sterilecekYa\u015f = 0 (\u00e7\u00fcnk\u00fc 0 nullish de\u011fildir)\n\n<\/code><\/pre>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi,  ??<\/code> operat\u00f6r\u00fc sadece null<\/code> veya undefined<\/code> de\u011ferleri i\u00e7in varsay\u0131lan de\u011feri kullan\u0131r.  Di\u011fer falsy de\u011ferler,  sol taraftaki de\u011fer olarak kabul edilir.<\/p>\n
\u0130ste\u011fe Ba\u011fl\u0131 Zincirleme (?.) Operat\u00f6r\u00fc<\/h2>\n
\u0130ste\u011fe Ba\u011fl\u0131 Zincirleme operat\u00f6r\u00fc (?.) nesnelerin \u00f6zelliklerine eri\u015firken null veya undefined de\u011ferlerle kar\u015f\u0131la\u015fma durumunda hata vermeyi \u00f6nler.  E\u011fer bir nesne veya nesne \u00f6zelli\u011fi null<\/code> veya undefined<\/code> ise,  operat\u00f6r undefined<\/code> d\u00f6nd\u00fcr\u00fcr ve hata f\u0131rlatmaz. Bu,  uzun ve karma\u015f\u0131k nesne yap\u0131lar\u0131na eri\u015fimde hata ay\u0131klama s\u00fcrecini \u00f6nemli \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r.<\/p>\n
\nlet kullan\u0131c\u0131 = {\n  adres: {\n    \u015fehir: \"\u0130stanbul\"\n  }\n};\n\nlet \u015fehir = kullan\u0131c\u0131?.adres?.\u015fehir; \/\/ \u015fehir = \"\u0130stanbul\"\n\nkullan\u0131c\u0131 = null;\n\u015fehir = kullan\u0131c\u0131?.adres?.\u015fehir; \/\/ \u015fehir = undefined (hata f\u0131rlatmaz)\n<\/code><\/pre>\n
Yukar\u0131daki \u00f6rnekte, e\u011fer kullan\u0131c\u0131<\/code> veya kullan\u0131c\u0131.adres<\/code> null<\/code> veya undefined<\/code> olsayd\u0131,  kullan\u0131c\u0131.adres.\u015fehir<\/code> eri\u015fiminde hata al\u0131rd\u0131k.  Ancak,  ?.<\/code> operat\u00f6r\u00fc sayesinde,  undefined<\/code> de\u011feri d\u00f6nd\u00fcr\u00fcl\u00fcr ve program\u0131n \u00e7al\u0131\u015fmas\u0131 devam eder.<\/p>\n
Nullish Coalescing ve \u0130ste\u011fe Ba\u011fl\u0131 Zincirleme Birlikte Kullan\u0131m\u0131<\/h2>\n
Bu iki operat\u00f6r, birlikte kullan\u0131ld\u0131\u011f\u0131nda \u00e7ok g\u00fc\u00e7l\u00fc bir kombinasyon olu\u015fturur. \u00d6rne\u011fin, bir kullan\u0131c\u0131 profilinden \u015fehir bilgisini almak ve varsay\u0131lan bir de\u011fer atamak istedi\u011fimizi d\u00fc\u015f\u00fcnelim:<\/p>\n
\nlet kullan\u0131c\u0131 = { adres: { } };\nlet \u015fehir = kullan\u0131c\u0131?.adres?.\u015fehir ?? \"Bilinmiyor\"; \/\/ \u015fehir = \"Bilinmiyor\"\n\nkullan\u0131c\u0131 = { adres: { \u015fehir: \"Ankara\" } };\n\u015fehir = kullan\u0131c\u0131?.adres?.\u015fehir ?? \"Bilinmiyor\"; \/\/ \u015fehir = \"Ankara\"\n<\/code><\/pre>\n
Bu \u00f6rnekte, \u00f6ncelikle iste\u011fe ba\u011fl\u0131 zincirleme ile \u015fehrin olup olmad\u0131\u011f\u0131n\u0131 kontrol ediyoruz. E\u011fer \u015fehir bilgisi yoksa veya kullan\u0131c\u0131 nesnesi eksikse,  Nullish Coalescing ile varsay\u0131lan “Bilinmiyor” de\u011ferini at\u0131yoruz.<\/p>\n
Sonu\u00e7<\/h2>\n
Nullish Coalescing ve \u0130ste\u011fe Ba\u011fl\u0131 Zincirleme operat\u00f6rleri, JavaScript kodunuzu daha temiz, daha okunabilir ve hata ay\u0131klamay\u0131 daha kolay hale getirir.  Bu operat\u00f6rleri kullanarak,  null veya undefined de\u011ferlerle ilgili hatalar\u0131 \u00f6nleyebilir ve kodunuzun daha g\u00fcvenilir olmas\u0131n\u0131 sa\u011flayabilirsiniz.  Daha fazla JavaScript geli\u015ftirme ipucu ve kayna\u011f\u0131 i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.<\/p>\n
Umar\u0131m bu makale faydal\u0131 olmu\u015ftur.  Sorular\u0131n\u0131z varsa l\u00fctfen yorumlarda belirtin!<\/p>\n
Faydal\u0131 Kaynaklar:<\/strong><\/p>\n