{"id":33303,"date":"2025-11-01T08:31:07","date_gmt":"2025-11-01T05:31:07","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/"},"modified":"2025-11-01T08:31:07","modified_gmt":"2025-11-01T05:31:07","slug":"javascript-nullish-coalescing-varsayilan-deger-belirleme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/","title":{"rendered":"JavaScript Nullish Coalescing (??): Varsay\u0131lan De\u011fer Belirleme"},"content":{"rendered":"

Modern JavaScript geli\u015ftirmesinde, de\u011fi\u015fkenlerin beklenen bir de\u011fere sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek, \u00f6zellikle de d\u0131\u015f kaynaklardan gelen verilerle (API yan\u0131tlar\u0131, kullan\u0131c\u0131 girdileri vb.) \u00e7al\u0131\u015f\u0131rken kritik bir \u00f6neme sahiptir. Kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z en yayg\u0131n problemlerden biri, bir de\u011fi\u015fkenin null<\/code> veya undefined<\/code> olmas\u0131 durumunda ne yap\u0131laca\u011f\u0131d\u0131r. Geli\u015ftiriciler olarak, genellikle bu t\u00fcr bo\u015f de\u011ferler yerine anlaml\u0131 bir varsay\u0131lan de\u011fer atayarak uygulamalar\u0131m\u0131z\u0131n daha sa\u011flam ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 isteriz. \u0130\u015fte tam bu noktada, ES2020 ile hayat\u0131m\u0131za giren JavaScript Nullish Coalescing Operat\u00f6r\u00fc (??<\/code>) devreye girerek, bu yayg\u0131n soruna \u015f\u0131k ve etkili bir \u00e7\u00f6z\u00fcm sunar. Bu makalede, ??<\/code> operat\u00f6r\u00fcn\u00fcn ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, geleneksel y\u00f6ntemlerden farklar\u0131n\u0131 ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l bir kolayl\u0131k sa\u011flad\u0131\u011f\u0131n\u0131 derinlemesine inceleyece\u011fiz. Amac\u0131m\u0131z, ister tecr\u00fcbeli bir JavaScript geli\u015ftiricisi olun ister yeni ba\u015fl\u0131yor olun, bu g\u00fc\u00e7l\u00fc operat\u00f6r\u00fc projelerinize entegre etmeniz i\u00e7in size kapsaml\u0131 bir rehber sunmakt\u0131r.<\/p>\n

JavaScript ekosistemi s\u00fcrekli evrim ge\u00e7iriyor ve her yeni s\u00fcr\u00fcm, geli\u015ftiricilerin hayat\u0131n\u0131 kolayla\u015ft\u0131ran yeni \u00f6zellikler sunuyor. Nullish Coalescing Operat\u00f6r\u00fc<\/code> da bu yeniliklerden biri olarak, null<\/code> veya undefined<\/code> de\u011ferlerle ba\u015fa \u00e7\u0131kma \u015feklimizi temelden de\u011fi\u015ftiriyor. Eskiden, bu t\u00fcr senaryolar i\u00e7in genellikle Mant\u0131ksal OR Operat\u00f6r\u00fc (||<\/code>) kullan\u0131l\u0131rd\u0131. Ancak ||<\/code> operat\u00f6r\u00fcn\u00fcn kendine has baz\u0131 yan etkileri vard\u0131, \u00f6zellikle de “falsy” (yanl\u0131\u015fl\u0131k belirten) de\u011ferler s\u00f6z konusu oldu\u011funda istenmeyen sonu\u00e7lar do\u011furabiliyordu. \u00d6rne\u011fin, bir de\u011fi\u015fkenin de\u011feri 0<\/code> veya bo\u015f bir dize (''<\/code>) oldu\u011funda, ||<\/code> operat\u00f6r\u00fc bu de\u011ferleri de bo\u015f kabul ederek varsay\u0131lan de\u011feri d\u00f6nd\u00fcr\u00fcyordu. Oysa biz bazen 0<\/code>‘\u0131n veya bo\u015f dizenin ge\u00e7erli bir de\u011fer oldu\u011funu varsay\u0131lana d\u00fc\u015fmek istemeyiz. \u0130\u015fte ??<\/code> operat\u00f6r\u00fc, tam da bu hassasiyeti sa\u011flayarak, yaln\u0131zca null<\/code> ve undefined<\/code> de\u011ferleri i\u00e7in varsay\u0131lan atamalar yapmam\u0131za olanak tan\u0131r. Bu sayede, kodumuz daha okunakl\u0131, daha mant\u0131kl\u0131 ve daha hatas\u0131z hale gelir. Gelin, bu \u00f6nemli operat\u00f6r\u00fcn ayr\u0131nt\u0131lar\u0131na inelim ve JavaScript’teki varsay\u0131lan de\u011fer belirleme paradigmas\u0131n\u0131 nas\u0131l yeniden tan\u0131mlad\u0131\u011f\u0131n\u0131 ke\u015ffedelim.<\/p>\n

Bu ba\u011flamda, bo\u015f de\u011fer kontrol\u00fc, bir uygulaman\u0131n g\u00fcvenilirli\u011fi ve kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan hayati \u00f6neme sahiptir. Kullan\u0131c\u0131 formlar\u0131ndan gelen verilerde eksik alanlar olabilece\u011fi gibi, bir API’den gelen yan\u0131tta baz\u0131 alanlar\u0131n beklenmedik bir \u015fekilde bo\u015f veya tan\u0131ms\u0131z gelmesi de m\u00fcmk\u00fcnd\u00fcr. Bu durumlarda, uygulamam\u0131z\u0131n \u00e7\u00f6kmemesi veya hatal\u0131 davran\u0131\u015flar sergilememesi i\u00e7in sa\u011flam varsay\u0131lan mekanizmalar olu\u015fturmam\u0131z gerekir. Nullish Coalescing Operat\u00f6r\u00fc<\/code>, bu gereksinimi sade bir s\u00f6z dizimi ile kar\u015f\u0131lar. Gelecekteki JavaScript projelerinizde kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z veri i\u015fleme zorluklar\u0131n\u0131 a\u015fmak i\u00e7in bu operat\u00f6r\u00fc anlamak, yaz\u0131l\u0131m kalitenizi art\u0131rman\u0131n anahtar\u0131 olacakt\u0131r. \u0130lerleyen b\u00f6l\u00fcmlerde, bu operat\u00f6r\u00fcn temel prensiplerini, kullan\u0131m alanlar\u0131n\u0131 ve di\u011fer ilgili JavaScript \u00f6zellikleriyle nas\u0131l entegre edilebilece\u011fini detayland\u0131raca\u011f\u0131z. B\u00f6ylece, JavaScript’in modern yakla\u015f\u0131mlar\u0131ndan tam anlam\u0131yla faydalanabilir ve daha temiz, daha anla\u015f\u0131l\u0131r ve daha dayan\u0131kl\u0131 kodlar yazabilirsiniz.<\/p>\n

Temel Kavramlar: Nullish Ne Demek ve Neden \u00d6nemli?<\/h2>\n

JavaScript’te null<\/code> ve undefined<\/code>, genellikle “bo\u015f de\u011ferler” olarak adland\u0131r\u0131lsa da, aralar\u0131nda ince ama \u00f6nemli farklar bulunur. undefined<\/code>, bir de\u011fi\u015fkenin tan\u0131mland\u0131\u011f\u0131 ancak hen\u00fcz bir de\u011fere sahip olmad\u0131\u011f\u0131 durumu veya bir nesnenin var olmayan bir \u00f6zelli\u011fine eri\u015fildi\u011finde d\u00f6nen de\u011feri ifade eder. \u00d6rne\u011fin, bir fonksiyonun parametre olarak bekledi\u011fi bir arg\u00fcman verilmedi\u011finde veya bir de\u011fi\u015fken bildirilip ba\u015flang\u0131\u00e7 de\u011feri atanmad\u0131\u011f\u0131nda undefined<\/code> olur. Di\u011fer yandan, null<\/code> ise kas\u0131tl\u0131 olarak bir de\u011ferin “hi\u00e7bir \u015feye” ayarland\u0131\u011f\u0131n\u0131 belirtir. Yani, geli\u015ftiricinin bilin\u00e7li olarak bir de\u011fi\u015fkenin i\u00e7inde bo\u015f bir de\u011fer saklamak istedi\u011fini ifade eder. Her iki de\u011fer de, bir de\u011fi\u015fkenin “de\u011fersiz” oldu\u011funu belirtmek i\u00e7in kullan\u0131l\u0131r, ancak null<\/code> daha \u00e7ok atanm\u0131\u015f bir bo\u015fluk, undefined<\/code> ise atanmam\u0131\u015f bir bo\u015fluk olarak d\u00fc\u015f\u00fcn\u00fclebilir. Bu ayr\u0131m, Nullish Coalescing Operat\u00f6r\u00fc<\/code>‘n\u00fcn \u00e7al\u0131\u015fma prensibini anlamak i\u00e7in kritik bir temel olu\u015fturur.<\/p>\n

JavaScript’te bo\u015fluk kavram\u0131n\u0131 incelerken, “falsy” de\u011ferler de \u00f6nemli bir yer tutar. Falsy de\u011ferler, bir boolean ba\u011flam\u0131nda false<\/code> olarak de\u011ferlendirilen de\u011ferlerdir. Bunlar aras\u0131nda false<\/code>‘\u0131n kendisi, 0<\/code> (say\u0131 s\u0131f\u0131r), -0<\/code> (eksi s\u0131f\u0131r), ''<\/code> (bo\u015f string), null<\/code>, undefined<\/code>, NaN<\/code> (Not-a-Number) ve son olarak document.all<\/code> (eski bir taray\u0131c\u0131 \u00f6zelli\u011fi) bulunur. Geleneksel olarak, JavaScript geli\u015ftiricileri bir de\u011fi\u015fkene varsay\u0131lan de\u011fer atamak i\u00e7in Mant\u0131ksal OR Operat\u00f6r\u00fc (||<\/code>) kullanm\u0131\u015ft\u0131r. Bu operat\u00f6r, sol taraf\u0131ndaki de\u011fer falsy ise sa\u011f taraf\u0131ndaki de\u011feri d\u00f6nd\u00fcr\u00fcr. Bu davran\u0131\u015f, \u00e7o\u011fu zaman i\u015fe yarar gibi g\u00f6r\u00fcnse de, baz\u0131 senaryolarda istenmeyen sonu\u00e7lara yol a\u00e7abilir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n ya\u015f\u0131n\u0131 temsil eden de\u011fi\u015fkenin 0<\/code> olmas\u0131, veya bir metin kutusunun bo\u015f string (''<\/code>) olarak gelmesi durumunda, ||<\/code> operat\u00f6r\u00fc bu de\u011ferleri de falsy kabul ederek varsay\u0131lan de\u011feri d\u00f6nd\u00fcr\u00fcr. Ancak 0<\/code> ya\u015f veya bo\u015f string, baz\u0131 ba\u011flamlarda ge\u00e7erli bir de\u011fer olabilir ve biz bu de\u011ferleri varsay\u0131lana d\u00fc\u015f\u00fcrmek istemeyebiliriz. \u0130\u015fte ??<\/code> operat\u00f6r\u00fc, tam da bu fark\u0131 ele al\u0131r.<\/p>\n

Nullish Coalescing Operat\u00f6r\u00fc (??)<\/code> ile ||<\/code> operat\u00f6r\u00fc aras\u0131ndaki temel fark, ??<\/code>‘nin sadece null<\/code> veya undefined<\/code> oldu\u011funda varsay\u0131lan de\u011feri d\u00f6nd\u00fcrmesidir. Di\u011fer bir deyi\u015fle, 0<\/code>, bo\u015f string (''<\/code>) veya false<\/code> gibi di\u011fer falsy de\u011ferler s\u00f6z konusu oldu\u011funda, ??<\/code> operat\u00f6r\u00fc bu de\u011ferleri ge\u00e7erli kabul eder ve varsay\u0131lan de\u011fere d\u00fc\u015fmez. Bu sayede, kodumuz daha hassas hale gelir ve de\u011ferlerin “ger\u00e7ekten” bo\u015f olup olmad\u0131\u011f\u0131na daha kesin bir \u015fekilde karar verebiliriz. Bu, \u00f6zellikle say\u0131sal de\u011ferler, boolean bayraklar\u0131 veya bo\u015f dizeler gibi, falsy olsalar bile ge\u00e7erli say\u0131lan verilerle \u00e7al\u0131\u015f\u0131rken b\u00fcy\u00fck bir avantaj sa\u011flar. A\u015fa\u011f\u0131daki kod \u00f6rnekleri, bu iki operat\u00f6r aras\u0131ndaki temel fark\u0131 net bir \u015fekilde g\u00f6zler \u00f6n\u00fcne serecektir:<\/p>\n

\n\/\/ De\u011fer: 0 (falsy)\nlet sayi = 0;\nlet varsayilanSayi = sayi || 100; \/\/ || operat\u00f6r\u00fc 0'\u0131 falsy olarak kabul eder\nconsole.log(|| ile varsay\u0131lan: ${varsayilanSayi}<\/code>); \/\/ \u00c7\u0131kt\u0131: 100\n\nlet nullishSayi = sayi ?? 100; \/\/ ?? operat\u00f6r\u00fc 0'\u0131 ge\u00e7erli kabul eder\nconsole.log(?? ile varsay\u0131lan: ${nullishSayi}<\/code>); \/\/ \u00c7\u0131kt\u0131: 0\n\n\/\/ De\u011fer: Bo\u015f string (falsy)\nlet isim = '';\nlet varsayilanIsim = isim || 'Misafir'; \/\/ || operat\u00f6r\u00fc bo\u015f string'i falsy olarak kabul eder\nconsole.log(|| ile varsay\u0131lan: ${varsayilanIsim}<\/code>); \/\/ \u00c7\u0131kt\u0131: Misafir\n\nlet nullishIsim = isim ?? 'Misafir'; \/\/ ?? operat\u00f6r\u00fc bo\u015f string'i ge\u00e7erli kabul eder\nconsole.log(?? ile varsay\u0131lan: ${nullishIsim}<\/code>); \/\/ \u00c7\u0131kt\u0131: (bo\u015f string)\n\n\/\/ De\u011fer: null\nlet yas = null;\nlet varsayilanYas = yas || 18; \/\/ || null'\u0131 falsy olarak kabul eder\nconsole.log(|| ile varsay\u0131lan: ${varsayilanYas}<\/code>); \/\/ \u00c7\u0131kt\u0131: 18\n\nlet nullishYas = yas ?? 18; \/\/ ?? null'\u0131 nullish olarak kabul eder\nconsole.log(?? ile varsay\u0131lan: ${nullishYas}<\/code>); \/\/ \u00c7\u0131kt\u0131: 18\n\n\/\/ De\u011fer: undefined\nlet adres; \/\/ undefined\nlet varsayilanAdres = adres || 'Bilinmiyor'; \/\/ || undefined'\u0131 falsy olarak kabul eder\nconsole.log(|| ile varsay\u0131lan: ${varsayilanAdres}<\/code>); \/\/ \u00c7\u0131kt\u0131: Bilinmiyor\n\nlet nullishAdres = adres ?? 'Bilinmiyor'; \/\/ ?? undefined'\u0131 nullish olarak kabul eder\nconsole.log(?? ile varsay\u0131lan: ${nullishAdres}<\/code>); \/\/ \u00c7\u0131kt\u0131: Bilinmiyor\n<\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekler, ??<\/code> operat\u00f6r\u00fcn\u00fcn \u00f6zellikle 0<\/code>, ''<\/code> ve false<\/code> gibi de\u011ferlerin ge\u00e7erli oldu\u011fu senaryolarda ne kadar hassas ve do\u011fru sonu\u00e7lar \u00fcretti\u011fini a\u00e7\u0131k\u00e7a g\u00f6stermektedir. Bu hassasiyet, uygulaman\u0131z\u0131n veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc korumak ve beklenmedik hatalar\u0131 \u00f6nlemek i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline getirir. Dolay\u0131s\u0131yla, ne zaman bir de\u011fi\u015fkene varsay\u0131lan de\u011fer ataman\u0131z gerekirse, \u00f6ncelikle bu de\u011ferin ger\u00e7ekten bo\u015f (yani null<\/code> veya undefined<\/code>) olup olmad\u0131\u011f\u0131n\u0131 sorgulamak i\u00e7in ??<\/code> operat\u00f6r\u00fcn\u00fc d\u00fc\u015f\u00fcnmelisiniz. Bu yakla\u015f\u0131m, daha robust ve anla\u015f\u0131l\u0131r kodlar yazman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n
Nullish Coalescing Operat\u00f6r\u00fc (??) Nas\u0131l Kullan\u0131l\u0131r? Uygulamal\u0131 \u00d6rnekler<\/h2>\n
Nullish Coalescing Operat\u00f6r\u00fc (??)<\/code>, basit ve sezgisel bir s\u00f6z dizimine sahiptir. Temel olarak, solTaraf ?? sa\u011fTaraf<\/code> \u015feklinde kullan\u0131l\u0131r. Bu ifade, sol taraftaki de\u011fer (solTaraf<\/code>) null<\/code> veya undefined<\/code> ise sa\u011f taraftaki de\u011feri (sa\u011fTaraf<\/code>) d\u00f6nd\u00fcr\u00fcr; aksi takdirde, sol taraftaki de\u011feri d\u00f6nd\u00fcr\u00fcr. Bu basit mant\u0131k, bir\u00e7ok farkl\u0131 senaryoda varsay\u0131lan de\u011fer atamalar\u0131n\u0131 \u00e7ok daha temiz ve okunabilir hale getirir. Gelin, ad\u0131m ad\u0131m \u00e7e\u015fitli uygulamal\u0131 \u00f6rneklerle bu operat\u00f6r\u00fcn g\u00fcc\u00fcn\u00fc ke\u015ffedelim.<\/p>\n
Basit De\u011fi\u015fken Atamalar\u0131nda ?? Kullan\u0131m\u0131<\/h3>\n
En temel kullan\u0131m senaryosu, bir de\u011fi\u015fkenin de\u011ferinin null<\/code> veya undefined<\/code> olup olmad\u0131\u011f\u0131n\u0131 kontrol ederek ona bir varsay\u0131lan de\u011fer atamakt\u0131r. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n tercih etti\u011fi bir tema rengi varsa bunu kullanmak, yoksa varsay\u0131lan bir renk belirlemek isteyebiliriz:<\/p>\n
\nlet kullaniciTemasi = null; \/\/ Veya undefined olabilir\nlet varsayilanTema = kullaniciTemasi ?? 'dark';\nconsole.log(Kullan\u0131c\u0131 Temas\u0131: ${varsayilanTema}<\/code>); \/\/ \u00c7\u0131kt\u0131: dark\n\nlet kullaniciTemasi2 = 'light';\nlet varsayilanTema2 = kullaniciTemasi2 ?? 'dark';\nconsole.log(Kullan\u0131c\u0131 Temas\u0131 2: ${varsayilanTema2}<\/code>); \/\/ \u00c7\u0131kt\u0131: light\n\nlet kullaniciTemasi3 = 0; \/\/ Ge\u00e7erli bir say\u0131sal de\u011fer\nlet varsayilanTema3 = kullaniciTemasi3 ?? 'dark';\nconsole.log(Kullan\u0131c\u0131 Temas\u0131 3: ${varsayilanTema3}<\/code>); \/\/ \u00c7\u0131kt\u0131: 0 (0 de\u011feri ge\u00e7erli kabul edildi)\n<\/pre>\n
<\/code><\/p>\n
Bu \u00f6rnekler, ??<\/code> operat\u00f6r\u00fcn\u00fcn yaln\u0131zca null<\/code> veya undefined<\/code> oldu\u011funda varsay\u0131lana d\u00fc\u015ft\u00fc\u011f\u00fcn\u00fc a\u00e7\u0131k\u00e7a g\u00f6stermektedir. 0<\/code> gibi ge\u00e7erli bir falsy de\u011fer geldi\u011finde bile, bu operat\u00f6r onu korur.<\/p>\n
Fonksiyon Parametreleri \u0130\u00e7in Varsay\u0131lan De\u011fer Belirleme<\/h3>\n
Fonksiyonlara ge\u00e7irilen parametreler bazen eksik veya bo\u015f gelebilir. Bu durumda, fonksiyonun varsay\u0131lan de\u011ferlerle \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in ??<\/code> operat\u00f6r\u00fcn\u00fc kullanabiliriz:<\/p>\n
\nfunction selamlaKullanici(ad, yas) {\n  const kullaniciAdi = ad ?? 'Anonim';\n  const kullaniciYasi = yas ?? 30; \/\/ 0 ya\u015f\u0131 ge\u00e7erli kabul eder!\n  console.log(Merhaba ${kullaniciAdi}, ya\u015f\u0131n\u0131z ${kullaniciYasi}.<\/code>);\n}\n\nselamlaKullanici('Ali', 25);     \/\/ \u00c7\u0131kt\u0131: Merhaba Ali, ya\u015f\u0131n\u0131z 25.\nselamlaKullanici(null, 0);       \/\/ \u00c7\u0131kt\u0131: Merhaba Anonim, ya\u015f\u0131n\u0131z 0. (0 ge\u00e7erli!)\nselamlaKullanici(undefined, null); \/\/ \u00c7\u0131kt\u0131: Merhaba Anonim, ya\u015f\u0131n\u0131z 30.\nselamlaKullanici('Ay\u015fe');        \/\/ \u00c7\u0131kt\u0131: Merhaba Ay\u015fe, ya\u015f\u0131n\u0131z 30.\n<\/pre>\n
<\/code><\/p>\n
Bu kullan\u0131m \u015fekli, fonksiyon imzas\u0131ndaki varsay\u0131lan parametrelerden (function (param = 'default')<\/code>) farkl\u0131 olarak, parametre a\u00e7\u0131k\u00e7a null<\/code> veya undefined<\/code> olarak ge\u00e7irildi\u011finde de varsay\u0131lan atamay\u0131 esnek bir \u015fekilde yapman\u0131z\u0131 sa\u011flar. \u00d6zellikle birden fazla ko\u015fulun veya dinamik varsay\u0131lanlar\u0131n oldu\u011fu durumlarda daha fazla kontrol sunar.<\/p>\n
API Yan\u0131tlar\u0131ndan Gelen Verileri G\u00fcvenli Bir \u015eekilde \u0130\u015fleme<\/h3>\n
Ger\u00e7ek d\u00fcnya uygulamalar\u0131nda, d\u0131\u015f API'lerden gelen veriler her zaman bekledi\u011fimiz formatta veya eksiksiz olmayabilir. Baz\u0131 alanlar null<\/code> veya undefined<\/code> olarak gelebilir. Bu durumda, uygulaman\u0131z\u0131n \u00e7\u00f6kmemesi i\u00e7in bu de\u011ferlere g\u00fcvenli varsay\u0131lanlar atamak hayati \u00f6nem ta\u015f\u0131r:<\/p>\n
\n\/\/ API'den gelen \u00f6rnek bir kullan\u0131c\u0131 verisi\nconst apiKullaniciVerisi = {\n  id: 101,\n  isim: 'Can',\n  email: 'can@example.com',\n  ayarlar: {\n    bildirimler: null, \/\/ API'den null geldi\n    dil: undefined,    \/\/ API'den undefined geldi\n    tema: 'dark'\n  }\n};\n\nconst kullaniciAyarlari = {\n  id: apiKullaniciVerisi.id,\n  ad: apiKullaniciVerisi.isim ?? 'Bilinmeyen Kullan\u0131c\u0131',\n  eposta: apiKullaniciVerisi.email ?? 'yok@example.com',\n  bildirimlerAcik: apiKullaniciVerisi.ayarlar.bildirimler ?? true, \/\/ null yerine true varsay\u0131lan\u0131\n  kullaniciDili: apiKullaniciVerisi.ayarlar.dil ?? 'tr-TR',       \/\/ undefined yerine 'tr-TR' varsay\u0131lan\u0131\n  seciliTema: apiKullaniciVerisi.ayarlar.tema ?? 'light'\n};\n\nconsole.log('\u0130\u015flenmi\u015f Kullan\u0131c\u0131 Ayarlar\u0131:', kullaniciAyarlari);\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ \u0130\u015flenmi\u015f Kullan\u0131c\u0131 Ayarlar\u0131: {\n\/\/   id: 101,\n\/\/   ad: 'Can',\n\/\/   eposta: 'can@example.com',\n\/\/   bildirimlerAcik: true,\n\/\/   kullaniciDili: 'tr-TR',\n\/\/   seciliTema: 'dark'\n\/\/ }\n<\/pre>\n
<\/code><\/p>\n
Bu vaka analizi, API'den gelen dinamik verileri i\u015flerken ??<\/code> operat\u00f6r\u00fcn\u00fcn ne kadar de\u011ferli oldu\u011funu g\u00f6stermektedir. Gelen verilerdeki eksiklikleri sorunsuz bir \u015fekilde y\u00f6neterek, uygulaman\u0131z\u0131n kararl\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r ve varsay\u0131lan davran\u0131\u015flar\u0131 net bir \u015fekilde tan\u0131mlar\u0131z. \u00d6zellikle i\u00e7 i\u00e7e ge\u00e7mi\u015f nesnelerde veya opsiyonel \u00f6zelliklerde bu kullan\u0131m olduk\u00e7a yayg\u0131nd\u0131r ve kodun karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azalt\u0131r.<\/p>\n
\n  Uzman \u0130pucu: Nesne \u00f6zelliklerine eri\u015firken hem opsiyonel zincirleme (?.<\/code>) hem de nullish coalescing (??<\/code>) operat\u00f6rlerini birlikte kullanmak, daha karma\u015f\u0131k veri yap\u0131lar\u0131n\u0131 g\u00fcvenle i\u015flemenin anahtar\u0131d\u0131r. \u00d6rne\u011fin, veri.kullanici?.profil?.resimUrl ?? '\/default-avatar.png'<\/code> ifadesi, kullanici<\/code> veya profil<\/code> tan\u0131ml\u0131 olmasa bile bir hata f\u0131rlat\u0131lmas\u0131n\u0131 engeller ve uygun bir varsay\u0131lan de\u011fer atar.\n<\/div>\n
Bu derinlemesine \u00f6rnekler, Nullish Coalescing Operat\u00f6r\u00fc<\/code>'n\u00fcn sadece bir s\u00f6z dizimi kolayl\u0131\u011f\u0131 olmad\u0131\u011f\u0131n\u0131, ayn\u0131 zamanda JavaScript uygulamalar\u0131n\u0131z\u0131n sa\u011flaml\u0131\u011f\u0131n\u0131 ve okunabilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131ran g\u00fc\u00e7l\u00fc bir ara\u00e7 oldu\u011funu ortaya koymaktad\u0131r. Kodunuzda varsay\u0131lan de\u011fer atamalar\u0131 yaparken, ||<\/code> operat\u00f6r\u00fcn\u00fcn potansiyel yan etkilerini g\u00f6z \u00f6n\u00fcnde bulundurarak ??<\/code>'yi tercih etmek, daha g\u00fcvenilir ve bak\u0131m\u0131 kolay \u00e7\u00f6z\u00fcmler geli\u015ftirmenizi sa\u011flayacakt\u0131r.<\/p>\n
Derinlemesine Bak\u0131\u015f: Nullish Coalescing ve Di\u011fer Operat\u00f6rlerle Etkile\u015fim<\/h2>\n
JavaScript Nullish Coalescing Operat\u00f6r\u00fc (??<\/code>), tek ba\u015f\u0131na olduk\u00e7a g\u00fc\u00e7l\u00fc olsa da, di\u011fer modern JavaScript operat\u00f6rleriyle birle\u015fti\u011finde ger\u00e7ek potansiyelini ortaya koyar. \u00d6zellikle Opsiyonel Zincirleme Operat\u00f6r\u00fc (?.<\/code>) ve Mant\u0131ksal Nullish Atama Operat\u00f6r\u00fc (??=<\/code>) ile birlikte kullan\u0131ld\u0131\u011f\u0131nda, karma\u015f\u0131k veri manip\u00fclasyonlar\u0131 ve g\u00fcvenli varsay\u0131lan atamalar \u00e7ok daha temiz ve etkili bir \u015fekilde ger\u00e7ekle\u015ftirilebilir. Bu b\u00f6l\u00fcmde, ??<\/code> operat\u00f6r\u00fcn\u00fcn bu di\u011fer operat\u00f6rlerle olan etkile\u015fimini ve bu kombinasyonlar\u0131n sundu\u011fu avantajlar\u0131 detayl\u0131ca inceleyece\u011fiz.<\/p>\n
Opsiyonel Zincirleme (?.<\/code>) ile Birlikte Kullan\u0131m<\/h3>\n
Opsiyonel Zincirleme Operat\u00f6r\u00fc (?.<\/code>), bir nesne zincirindeki \u00f6zelliklere g\u00fcvenli bir \u015fekilde eri\u015fmek i\u00e7in kullan\u0131l\u0131r. E\u011fer zincirdeki herhangi bir eleman null<\/code> veya undefined<\/code> ise, t\u00fcm ifade bir hata f\u0131rlatmak yerine undefined<\/code> d\u00f6nd\u00fcr\u00fcr. Bu, derinlemesine i\u00e7 i\u00e7e ge\u00e7mi\u015f nesnelerle \u00e7al\u0131\u015f\u0131rken olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r. ?.<\/code> operat\u00f6r\u00fcnden d\u00f6nen undefined<\/code> de\u011feri, do\u011frudan ??<\/code> operat\u00f6r\u00fcn\u00fcn sol taraf\u0131na gelerek, e\u011fer bu de\u011fer undefined<\/code> ise bir varsay\u0131lan atama yapma olana\u011f\u0131 sunar. Bu kombinasyon, \u00f6zellikle dinamik ve de\u011fi\u015fken veri yap\u0131lar\u0131yla \u00e7al\u0131\u015f\u0131rken kodumuzu \u00e7ok daha dayan\u0131kl\u0131 hale getirir.<\/p>\n
\nconst kullaniciProfil = {\n  id: 1,\n  ad: 'Deniz',\n  adres: {\n    il: '\u0130stanbul',\n    ilce: 'Kad\u0131k\u00f6y'\n  },\n  iletisim: null \/\/ \u0130leti\u015fim bilgileri yok\n};\n\n\/\/ Senaryo 1: Var olan bir \u00f6zelli\u011fe eri\u015fim\nconst sehir = kullaniciProfil?.adres?.il ?? 'Bilinmiyor';\nconsole.log(Kullan\u0131c\u0131n\u0131n \u015eehri: ${sehir}<\/code>); \/\/ \u00c7\u0131kt\u0131: \u0130stanbul\n\n\/\/ Senaryo 2: Olmayan bir \u00f6zelli\u011fe eri\u015fim\nconst telefon = kullaniciProfil?.iletisim?.telefon ?? 'Telefon Numaras\u0131 Yok';\nconsole.log(Kullan\u0131c\u0131n\u0131n Telefonu: ${telefon}<\/code>); \/\/ \u00c7\u0131kt\u0131: Telefon Numaras\u0131 Yok (\u00e7\u00fcnk\u00fc iletisim null idi)\n\n\/\/ Senaryo 3: \u0130\u00e7 i\u00e7e olmayan bir \u00f6zelli\u011fe eri\u015fim\nconst ePosta = kullaniciProfil?.eposta?.adres ?? 'e-Posta Adresi Yok';\nconsole.log(Kullan\u0131c\u0131n\u0131n e-Postas\u0131: ${ePosta}<\/code>); \/\/ \u00c7\u0131kt\u0131: e-Posta Adresi Yok (\u00e7\u00fcnk\u00fc eposta \u00f6zelli\u011fi bile yok)\n\nconst kullaniciAyarlari = {\n  theme: 'dark',\n  notifications: {\n    email: true,\n    sms: false\n  }\n};\n\n\/\/ SMS bildirimi ayar\u0131n\u0131 al, yoksa varsay\u0131lan olarak true yap\nconst smsBildirimleri = kullaniciAyarlari?.notifications?.sms ?? true;\nconsole.log(SMS Bildirimleri: ${smsBildirimleri}<\/code>); \/\/ \u00c7\u0131kt\u0131: false (\u00e7\u00fcnk\u00fc var ve de\u011feri false)\n\nconst pushBildirimleri = kullaniciAyarlari?.notifications?.push ?? true;\nconsole.log(Push Bildirimleri: ${pushBildirimleri}<\/code>); \/\/ \u00c7\u0131kt\u0131: true (\u00e7\u00fcnk\u00fc push yok ve undefined d\u00f6nd\u00fc)\n<\/pre>\n
<\/code><\/p>\n
Bu \u00f6rnekler, ?.<\/code> ve ??<\/code> kombinasyonunun, karma\u015f\u0131k nesne hiyerar\u015filerinde bo\u015f de\u011ferleri g\u00fcvenle ele alarak, kodunuzu daha az hata e\u011filimli ve daha okunakl\u0131 hale getirdi\u011fini a\u00e7\u0131k\u00e7a ortaya koymaktad\u0131r. Bu sayede, if-else bloklar\u0131yla uzun ve tekrar eden bo\u015f kontrol zincirlerinden kurtulmu\u015f oluruz.<\/p>\n
Mant\u0131ksal Nullish Atama (??=<\/code>) Operat\u00f6r\u00fc<\/h3>\n
ES2021 ile birlikte tan\u0131t\u0131lan Mant\u0131ksal Nullish Atama Operat\u00f6r\u00fc (??=<\/code>), bir de\u011fi\u015fkene yaln\u0131zca de\u011feri null<\/code> veya undefined<\/code> ise atama yapmak i\u00e7in k\u0131sa bir s\u00f6z dizimi sunar. Bu operat\u00f6r, \"e\u011fer de\u011fi\u015fken bo\u015fsa, bu de\u011feri ata\" anlam\u0131na gelir ve genellikle bir de\u011fi\u015fkenin ilk kez varsay\u0131lan bir de\u011ferle ba\u015flat\u0131lmas\u0131 gereken durumlarda kullan\u0131l\u0131r.<\/p>\n
\nlet ayar = null;\nayar ??= 'varsayilanDeger'; \/\/ ayar null oldu\u011fu i\u00e7in 'varsayilanDeger' atan\u0131r\nconsole.log(Ayar 1: ${ayar}<\/code>); \/\/ \u00c7\u0131kt\u0131: varsayilanDeger\n\nlet kullaniciAdi = 'Mehmet';\nkullaniciAdi ??= 'Misafir'; \/\/ kullaniciAdi bo\u015f de\u011fil, bu y\u00fczden atama yap\u0131lmaz\nconsole.log(Kullan\u0131c\u0131 Ad\u0131: ${kullaniciAdi}<\/code>); \/\/ \u00c7\u0131kt\u0131: Mehmet\n\nlet miktar = 0;\nmiktar ??= 100; \/\/ miktar 0 oldu\u011fu i\u00e7in (nullish de\u011fil), atama yap\u0131lmaz\nconsole.log(Miktar: ${miktar}<\/code>); \/\/ \u00c7\u0131kt\u0131: 0\n\nlet tercih; \/\/ undefined\ntercih ??= 'T\u00fcrk\u00e7e'; \/\/ tercih undefined oldu\u011fu i\u00e7in 'T\u00fcrk\u00e7e' atan\u0131r\nconsole.log(Tercih: ${tercih}<\/code>); \/\/ \u00c7\u0131kt\u0131: T\u00fcrk\u00e7e\n<\/pre>\n
<\/code><\/p>\n
??=<\/code> operat\u00f6r\u00fc, \u00f6zellikle bir de\u011fi\u015fkenin yaln\u0131zca bir kez, ba\u015flang\u0131\u00e7ta ve yaln\u0131zca bo\u015f olmas\u0131 durumunda bir de\u011fer almas\u0131n\u0131 istedi\u011fimiz senaryolarda son derece pratik bir \u00e7\u00f6z\u00fcmd\u00fcr. Bu, kod tekrar\u0131n\u0131 azalt\u0131r ve niyetimizi daha net bir \u015fekilde ifade etmemizi sa\u011flar.<\/p>\n
Performans Etkileri ve Yayg\u0131n Hatalar<\/h3>\n
Nullish Coalescing Operat\u00f6r\u00fc<\/code>'n\u00fcn performansa etkisi genellikle ihmal edilebilir d\u00fczeydedir. Modern JavaScript motorlar\u0131 bu t\u00fcr operat\u00f6rleri olduk\u00e7a optimize edilmi\u015f bir \u015fekilde i\u015fler. Performans a\u00e7\u0131s\u0131ndan ??<\/code> ve ||<\/code> aras\u0131nda kayda de\u011fer bir fark yoktur; se\u00e7iminiz tamamen semantik do\u011frulu\u011fa ve kod okunabilirli\u011fine dayanmal\u0131d\u0131r. Yayg\u0131n hatalardan biri, ??<\/code> operat\u00f6r\u00fcn\u00fc &&<\/code> (Mant\u0131ksal VE) veya ||<\/code> (Mant\u0131ksal VEYA) operat\u00f6rleriyle birlikte parantez olmadan kullanmaya \u00e7al\u0131\u015fmakt\u0131r. JavaScript, operat\u00f6r \u00f6nceli\u011fi kurallar\u0131na sahiptir ve bu t\u00fcr kombinasyonlarda beklenmedik sonu\u00e7lar almamak i\u00e7in parantez kullanmak en g\u00fcvenli yakla\u015f\u0131md\u0131r:<\/p>\n
\n\/\/ Hatal\u0131 kullan\u0131m (\u00e7\u00fcnk\u00fc operat\u00f6r \u00f6nceli\u011fi beklenmedik olabilir)\n\/\/ const sonuc = a ?? b || c; \/\/ Hata f\u0131rlat\u0131r veya yanl\u0131\u015f \u00e7al\u0131\u015f\u0131r\n\n\/\/ Do\u011fru kullan\u0131m: parantezlerle \u00f6nceli\u011fi belirtme\nconst sonucDogru = (a ?? b) || c;\nconst sonucDogru2 = a ?? (b || c);\n<\/pre>\n
<\/code><\/p>\n
Ayr\u0131ca, ??<\/code> operat\u00f6r\u00fcn\u00fcn sadece null<\/code> ve undefined<\/code> de\u011ferlerini kontrol etti\u011fini, 0<\/code>, ''<\/code> veya false<\/code> gibi de\u011ferleri varsay\u0131lana d\u00fc\u015f\u00fcrmedi\u011fini unutmamak \u00f6nemlidir. E\u011fer bu falsy de\u011ferleri de bo\u015f kabul etmek istiyorsan\u0131z, ||<\/code> operat\u00f6r\u00fcn\u00fc kullanmaya devam etmelisiniz. Niyetinize en uygun operat\u00f6r\u00fc se\u00e7mek, kaliteli ve hatas\u0131z kod yazman\u0131n anahtar\u0131d\u0131r. Nullish Coalescing Operat\u00f6r\u00fc<\/code>, bu alanda geli\u015ftiricilere \u00e7ok daha rafine bir kontrol mekanizmas\u0131 sunarak modern JavaScript uygulamalar\u0131n\u0131n gereksinimlerini kar\u015f\u0131lamada \u00f6nemli bir rol oynamaktad\u0131r.<\/p>\n
Mobil Uyumluluk ve Duyarl\u0131 Tasar\u0131m: HTML Yap\u0131s\u0131n\u0131n \u00d6nemi<\/h3>\n
Her ne kadar bu makale JavaScript'teki Nullish Coalescing Operat\u00f6r\u00fc hakk\u0131nda olsa da, modern web geli\u015ftirmesinde kullan\u0131c\u0131 deneyimi ve eri\u015filebilirlik, yaz\u0131lan kodun \u00e7al\u0131\u015ft\u0131\u011f\u0131 platformdan ba\u011f\u0131ms\u0131z olarak b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Bu ba\u011flamda, olu\u015fturdu\u011fumuz HTML i\u00e7eri\u011finin mobil cihazlarda da d\u00fczg\u00fcn g\u00f6r\u00fcnmesi ve etkile\u015fimli olmas\u0131 kritik bir gerekliliktir. JavaScript uygulamalar\u0131 genellikle dinamik i\u00e7erik \u00fcretir ve bu i\u00e7eri\u011fin duyarl\u0131 bir \u015fekilde tasarlanm\u0131\u015f olmas\u0131, kullan\u0131c\u0131lar\u0131n farkl\u0131 ekran boyutlar\u0131ndaki cihazlarda sorunsuz bir deneyim ya\u015famas\u0131n\u0131 sa\u011flar. Nullish coalescing operat\u00f6r\u00fc ile y\u00f6netti\u011fimiz veriler, sonu\u00e7 olarak HTML aray\u00fcz\u00fcne yans\u0131r ve bu aray\u00fcz\u00fcn mobil dostu olmas\u0131 gerekir. \u0130yi yap\u0131land\u0131r\u0131lm\u0131\u015f, anlamsal (semantic) HTML, duyarl\u0131 tasar\u0131m i\u00e7in temel bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.<\/p>\n
\u00d6ncelikle, mobil uyumlulu\u011fun en temel ad\u0131m\u0131, HTML belgesinin <\/code> b\u00f6l\u00fcm\u00fcne viewport<\/code> meta etiketini eklemektir. Bu etiket, taray\u0131c\u0131ya sayfan\u0131n cihaz\u0131n geni\u015fli\u011fine g\u00f6re \u00f6l\u00e7eklenmesi gerekti\u011fini bildirir:<\/p>\n
\n\n<\/pre>\n
<\/code><\/p>\n
Bu meta etiketi olmadan, mobil taray\u0131c\u0131lar sayfay\u0131 varsay\u0131lan olarak masa\u00fcst\u00fc g\u00f6r\u00fcn\u00fcm\u00fcnde render edebilir ve bu da okunabilirlik ve kullan\u0131labilirlik sorunlar\u0131na yol a\u00e7ar. \u0130\u00e7erik olu\u015ftururken, ba\u015fl\u0131klar (H2, H3), paragraflar, listeler ve kod bloklar\u0131 gibi elementleri do\u011fru HTML etiketleriyle i\u015faretlemek, hem arama motorlar\u0131 hem de ekran okuyucular i\u00e7in i\u00e7eri\u011fin yap\u0131s\u0131n\u0131 anlamay\u0131 kolayla\u015ft\u0131r\u0131r. \u00d6rne\u011fin, kod \u00f6rneklerimizi <\/p>\n
<\/code> etiketleri aras\u0131na alarak, kodun d\u00fczg\u00fcn format\u0131n\u0131 koruruz ve okunabilirli\u011fini art\u0131r\u0131r\u0131z.<\/p>\n
Duyarl\u0131 tasar\u0131m\u0131n kalbi olan CSS Media Query'leri, farkl\u0131 ekran boyutlar\u0131na ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklere g\u00f6re stil kurallar\u0131n\u0131 uyarlamam\u0131za olanak tan\u0131r. JavaScript ile dinamik olarak olu\u015fturulan i\u00e7erikler i\u00e7in de ayn\u0131 CSS kurallar\u0131 ge\u00e7erlidir. \u0130\u015fte basit bir media query \u00f6rne\u011fi, bu makaledeki H2 ba\u015fl\u0131klar\u0131n\u0131n mobil cihazlarda nas\u0131l farkl\u0131 g\u00f6r\u00fcnebilece\u011fini g\u00f6sterir:<\/p>\n
\n\/* Genel stiller *\/\nbody {\n  font-family: Arial, sans-serif;\n  line-height: 1.6;\n  margin: 0 auto;\n  padding: 20px;\n  max-width: 960px;\n  color: #333;\n}\n\nh2 {\n  color: #2c3e50;\n  font-size: 2.2em;\n  margin-top: 40px;\n  border-bottom: 2px solid #3498db;\n  padding-bottom: 10px;\n}\n\nh3 {\n  color: #34495e;\n  font-size: 1.6em;\n  margin-top: 30px;\n}\n\n\/* Mobil cihazlar i\u00e7in stil uyarlamalar\u0131 *\/\n@media screen and (max-width: 768px) {\n  body {\n    padding: 15px;\n  }\n\n  h2 {\n    font-size: 1.8em; \/* K\u00fc\u00e7\u00fck ekranlarda H2 ba\u015fl\u0131klar\u0131n\u0131 k\u00fc\u00e7\u00fclt *\/\n    margin-top: 30px;\n  }\n\n  h3 {\n    font-size: 1.4em; \/* K\u00fc\u00e7\u00fck ekranlarda H3 ba\u015fl\u0131klar\u0131n\u0131 k\u00fc\u00e7\u00fclt *\/\n    margin-top: 20px;\n  }\n\n  pre {\n    white-space: pre-wrap; \/* Kod bloklar\u0131n\u0131n k\u00fc\u00e7\u00fck ekranda kayd\u0131rmadan s\u0131\u011fmas\u0131n\u0131 sa\u011fla *\/\n    word-wrap: break-word;\n  }\n}\n<\/pre>\n
<\/code><\/p>\n
Bu CSS kodu, varsay\u0131lan olarak belirli bir boyuta sahip olan ba\u015fl\u0131klar\u0131n ve genel metnin, ekran boyutu 768 pikselden daha k\u00fc\u00e7\u00fck oldu\u011funda (tipik bir tablet veya telefon ekran\u0131) nas\u0131l otomatik olarak k\u00fc\u00e7\u00fclt\u00fcld\u00fc\u011f\u00fcn\u00fc g\u00f6sterir. Ayr\u0131ca, kod bloklar\u0131n\u0131n (<\/p>\n
<\/code>) mobil cihazlarda yatay kayd\u0131rma \u00e7ubuklar\u0131 olu\u015fturmak yerine metni sarmalamas\u0131n\u0131 (white-space: pre-wrap;<\/code>) sa\u011flayarak okunabilirli\u011fi art\u0131r\u0131r. Nullish coalescing operat\u00f6r\u00fc ile ele ald\u0131\u011f\u0131m\u0131z verilerin, bu t\u00fcr duyarl\u0131 bir HTML\/CSS yap\u0131s\u0131 i\u00e7inde sunulmas\u0131, t\u00fcm kullan\u0131c\u0131lar i\u00e7in kapsay\u0131c\u0131 ve keyifli bir deneyim sa\u011flar. Dolay\u0131s\u0131yla, JavaScript'in i\u015flevsel g\u00fcc\u00fcn\u00fc kullan\u0131rken, son kullan\u0131c\u0131ya ula\u015fan g\u00f6rsel katman\u0131n da modern web standartlar\u0131na uygun oldu\u011fundan emin olmak \u00f6nemlidir.<\/p>\n
Sonu\u00e7: JavaScript Geli\u015ftirmenizin Vazge\u00e7ilmezi mi?<\/h2>\n
JavaScript Nullish Coalescing Operat\u00f6r\u00fc (??<\/code>), modern web geli\u015ftirme pratiklerinde vazge\u00e7ilmez bir ara\u00e7 haline gelmi\u015ftir. Bu operat\u00f6r, null<\/code> ve undefined<\/code> de\u011ferlerle ba\u015fa \u00e7\u0131kma \u015feklimizi \u00f6nemli \u00f6l\u00e7\u00fcde basitle\u015ftirerek, kodumuzu daha temiz, daha okunakl\u0131 ve daha az hata e\u011filimli hale getirir. Geleneksel Mant\u0131ksal OR Operat\u00f6r\u00fc (||<\/code>)'n\u00fcn aksine, ??<\/code> operat\u00f6r\u00fc 0<\/code>, bo\u015f string (''<\/code>) veya false<\/code> gibi ge\u00e7erli falsy de\u011ferleri g\u00f6z ard\u0131 etmez; yaln\u0131zca kesinlikle \"bo\u015f\" olan (null<\/code> veya undefined<\/code>) de\u011ferler i\u00e7in varsay\u0131lan atama yapar. Bu hassasiyet, \u00f6zellikle dinamik API yan\u0131tlar\u0131, kullan\u0131c\u0131 girdileri veya karma\u015f\u0131k nesne yap\u0131lar\u0131yla \u00e7al\u0131\u015f\u0131rken veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc korumak a\u00e7\u0131s\u0131ndan kritik bir avantaj sunar.<\/p>\n
Makale boyunca, ??<\/code> operat\u00f6r\u00fcn\u00fcn temel kavramlar\u0131n\u0131, null<\/code> ve undefined<\/code> aras\u0131ndaki farklar\u0131, falsy de\u011ferlerin \u00f6nemini ve ||<\/code> operat\u00f6r\u00fc ile aras\u0131ndaki temel farkl\u0131l\u0131klar\u0131 ele ald\u0131k. Ad\u0131m ad\u0131m uygulad\u0131\u011f\u0131m\u0131z \u00f6rneklerle, basit de\u011fi\u015fken atamalar\u0131ndan fonksiyon parametrelerine, API verisi i\u015flemelerinden karma\u015f\u0131k nesne \u00f6zelliklerine g\u00fcvenli eri\u015fime kadar bir\u00e7ok senaryoda ??<\/code>'nin nas\u0131l kullan\u0131labilece\u011fini g\u00f6sterdik. Ayr\u0131ca, Opsiyonel Zincirleme Operat\u00f6r\u00fc (?.<\/code>) ve Mant\u0131ksal Nullish Atama Operat\u00f6r\u00fc (??=<\/code>) gibi di\u011fer g\u00fc\u00e7l\u00fc JavaScript \u00f6zellikleriyle kombinasyonlar\u0131n\u0131 inceleyerek, bu operat\u00f6rlerin birlikte nas\u0131l daha etkili \u00e7\u00f6z\u00fcmler \u00fcretti\u011fini g\u00f6zlemledik. Son olarak, bu operat\u00f6r\u00fcn performansa etkisinin genellikle ihmal edilebilir oldu\u011funu ve do\u011fru kullan\u0131m\u0131n, kodun anla\u015f\u0131l\u0131rl\u0131\u011f\u0131 ve bak\u0131m kolayl\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck faydalar sa\u011flad\u0131\u011f\u0131n\u0131 vurgulad\u0131k.<\/p>\n
\u00d6zetle, Nullish Coalescing Operat\u00f6r\u00fc<\/code>'n\u00fc ne zaman kullanmal\u0131y\u0131z sorusunun cevab\u0131 olduk\u00e7a nettir: Bir de\u011fi\u015fkene veya ifadeye, yaln\u0131zca de\u011feri kesinlikle null<\/code> veya undefined<\/code> oldu\u011funda bir varsay\u0131lan atamak istedi\u011finiz her durumda kullanmal\u0131s\u0131n\u0131z. E\u011fer 0<\/code>, ''<\/code> veya false<\/code> gibi falsy de\u011ferlerin de varsay\u0131lana d\u00fc\u015fmesini istiyorsan\u0131z, o zaman ||<\/code> operat\u00f6r\u00fc daha uygun bir se\u00e7enek olabilir. Bu bilin\u00e7li se\u00e7im, uygulaman\u0131z\u0131n mant\u0131\u011f\u0131n\u0131 do\u011fru bir \u015fekilde yans\u0131tacak ve gelecekteki olas\u0131 hatalar\u0131n \u00f6n\u00fcne ge\u00e7ecektir. Modern JavaScript geli\u015ftiricileri olarak, bu t\u00fcr s\u00f6z dizimsel kolayl\u0131klar\u0131 benimsemek, daha dayan\u0131kl\u0131, okunabilir ve y\u00f6netilebilir kod tabanlar\u0131 olu\u015fturmam\u0131za yard\u0131mc\u0131 olacakt\u0131r. ??<\/code> operat\u00f6r\u00fc, JavaScript'in s\u00fcrekli geli\u015fen ekosistemindeki \u00f6nemli bir ad\u0131md\u0131r ve \u015f\u00fcphesiz ki geli\u015ftirme s\u00fcre\u00e7lerinizin ayr\u0131lmaz bir par\u00e7as\u0131 olacakt\u0131r.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\n
1. ??<\/code> operat\u00f6r\u00fc ne zaman JavaScript'e eklendi?<\/dt>\n
Nullish Coalescing Operat\u00f6r\u00fc (??)<\/code>, ES2020 (ECMAScript 2020) ile birlikte JavaScript'e eklenmi\u015ftir. Bu nedenle, eski taray\u0131c\u0131 veya Node.js ortamlar\u0131nda do\u011frudan desteklenmeyebilir, ancak Babel gibi ara\u00e7larla derlenebilir.<\/dd>\n
2. ??<\/code> ile ||<\/code> aras\u0131ndaki temel fark nedir?<\/dt>\n
Temel fark, hangi de\u011ferleri \"bo\u015f\" kabul ettikleridir. ||<\/code> (Mant\u0131ksal OR) operat\u00f6r\u00fc, sol taraf\u0131ndaki de\u011fer herhangi bir \"falsy\" de\u011ferse (false<\/code>, 0<\/code>, ''<\/code>, null<\/code>, undefined<\/code>, NaN<\/code>) sa\u011f taraf\u0131ndaki de\u011feri d\u00f6nd\u00fcr\u00fcr. ??<\/code> (Nullish Coalescing) operat\u00f6r\u00fc ise yaln\u0131zca sol taraf\u0131ndaki de\u011fer null<\/code> veya undefined<\/code> ise sa\u011f taraf\u0131ndaki de\u011feri d\u00f6nd\u00fcr\u00fcr. Di\u011fer falsy de\u011ferleri ge\u00e7erli kabul eder.<\/dd>\n
3. ??<\/code> sadece de\u011fi\u015fkenler i\u00e7in mi ge\u00e7erlidir?<\/dt>\n
Hay\u0131r, ??<\/code> operat\u00f6r\u00fc sadece de\u011fi\u015fkenler i\u00e7in de\u011fil, herhangi bir ifadenin sonucuna uygulanabilir. Fonksiyon \u00e7a\u011fr\u0131lar\u0131n\u0131n d\u00f6n\u00fc\u015f de\u011ferleri, nesne \u00f6zelliklerine eri\u015fim (\u00f6zellikle ?.<\/code> ile birlikte), matematiksel i\u015flemlerin sonu\u00e7lar\u0131 gibi her t\u00fcrl\u00fc ifadede kullan\u0131labilir.<\/dd>\n
4. ??<\/code> operat\u00f6r\u00fcn\u00fcn performans maliyeti var m\u0131?<\/dt>\n
Modern JavaScript motorlar\u0131, ??<\/code> operat\u00f6r\u00fcn\u00fc olduk\u00e7a optimize bir \u015fekilde i\u015fler. Performans a\u00e7\u0131s\u0131ndan ??<\/code> ve ||<\/code> aras\u0131nda genellikle kayda de\u011fer bir fark yoktur. Kullan\u0131m karar\u0131, kodun semantik do\u011frulu\u011funa ve okunabilirli\u011fine dayanmal\u0131d\u0131r.<\/dd>\n
5. ??<\/code> null ve undefined d\u0131\u015f\u0131nda ba\u015fka de\u011ferleri de kontrol eder mi?<\/dt>\n
Hay\u0131r, ??<\/code> operat\u00f6r\u00fc kesinlikle sadece null<\/code> ve undefined<\/code> de\u011ferlerini \"bo\u015f\" olarak kabul eder. false<\/code>, 0<\/code>, ''<\/code> (bo\u015f string) veya NaN<\/code> gibi di\u011fer JavaScript falsy de\u011ferlerini ge\u00e7erli (non-nullish) olarak g\u00f6r\u00fcr ve bu de\u011ferler varsa sa\u011f taraf\u0131ndaki varsay\u0131lan de\u011feri d\u00f6nd\u00fcrmez.<\/dd>\n<\/dl>\n","protected":false},"excerpt":{"rendered":"Modern JavaScript geli\u015ftirmesinde, de\u011fi\u015fkenlerin beklenen bir de\u011fere sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek, \u00f6zellikle de d\u0131\u015f kaynaklardan gelen verilerle…","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-33303","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nJavaScript Nullish Coalescing (??): Varsay\u0131lan De\u011fer Belirleme<\/title>\n<meta name=\"description\" content=\"Modern JavaScript geli\u015ftirmesinde, de\u011fi\u015fkenlerin beklenen bir de\u011fere sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek, \u00f6zellikle de d\u0131\u015f kaynaklardan gelen verilerle (API yan\u0131tlar\u0131, kullan\u0131c\u0131 girdileri vb.) \u00e7al\u0131\u015f\u0131rken kritik bir \u00f6neme sahiptir. Kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z en yayg\u0131n problemlerden biri, bir de\u011fi\u015fkenin null veya undefined olmas\u0131 durumunda ne yap\u0131laca\u011f\u0131d\u0131r. Geli\u015ftiriciler olarak, genellikle bu t\u00fcr bo\u015f de\u011ferler yerine anlaml\u0131 bir varsay\u0131lan de\u011fer atayarak uygulamalar\u0131m\u0131z\u0131n daha sa\u011flam ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 isteriz. \u0130\u015fte tam bu noktada, ES2020 ile hayat\u0131m\u0131za giren JavaScript Nullish Coalescing Operat\u00f6r\u00fc (??) devreye girerek, bu yayg\u0131n soruna \u015f\u0131k ve etkili bir \u00e7\u00f6z\u00fcm sunar. Bu makalede, ?? operat\u00f6r\u00fcn\u00fcn ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, geleneksel y\u00f6ntemlerden farklar\u0131n\u0131 ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l bir kolayl\u0131k sa\u011flad\u0131\u011f\u0131n\u0131 derinlemesine inceleyece\u011fiz. Amac\u0131m\u0131z, ister tecr\u00fcbeli bir JavaScript geli\u015ftiricisi olun ister yeni ba\u015fl\u0131yor olun, bu g\u00fc\u00e7l\u00fc operat\u00f6r\u00fc projelerinize entegre etmeniz i\u00e7in size kapsaml\u0131 bir rehber sunmakt\u0131r.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Nullish Coalescing (??): Varsay\u0131lan De\u011fer Belirleme\" \/>\n<meta property=\"og:description\" content=\"Modern JavaScript geli\u015ftirmesinde, de\u011fi\u015fkenlerin beklenen bir de\u011fere sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek, \u00f6zellikle de d\u0131\u015f kaynaklardan gelen verilerle (API yan\u0131tlar\u0131, kullan\u0131c\u0131 girdileri vb.) \u00e7al\u0131\u015f\u0131rken kritik bir \u00f6neme sahiptir. Kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z en yayg\u0131n problemlerden biri, bir de\u011fi\u015fkenin null veya undefined olmas\u0131 durumunda ne yap\u0131laca\u011f\u0131d\u0131r. Geli\u015ftiriciler olarak, genellikle bu t\u00fcr bo\u015f de\u011ferler yerine anlaml\u0131 bir varsay\u0131lan de\u011fer atayarak uygulamalar\u0131m\u0131z\u0131n daha sa\u011flam ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 isteriz. \u0130\u015fte tam bu noktada, ES2020 ile hayat\u0131m\u0131za giren JavaScript Nullish Coalescing Operat\u00f6r\u00fc (??) devreye girerek, bu yayg\u0131n soruna \u015f\u0131k ve etkili bir \u00e7\u00f6z\u00fcm sunar. Bu makalede, ?? operat\u00f6r\u00fcn\u00fcn ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, geleneksel y\u00f6ntemlerden farklar\u0131n\u0131 ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l bir kolayl\u0131k sa\u011flad\u0131\u011f\u0131n\u0131 derinlemesine inceleyece\u011fiz. Amac\u0131m\u0131z, ister tecr\u00fcbeli bir JavaScript geli\u015ftiricisi olun ister yeni ba\u015fl\u0131yor olun, bu g\u00fc\u00e7l\u00fc operat\u00f6r\u00fc projelerinize entegre etmeniz i\u00e7in size kapsaml\u0131 bir rehber sunmakt\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-01T05:31:07+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"22 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"JavaScript Nullish Coalescing (??): Varsay\u0131lan De\u011fer Belirleme\",\"datePublished\":\"2025-11-01T05:31:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/\"},\"wordCount\":3450,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Javascript\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/\",\"name\":\"JavaScript Nullish Coalescing (??): Varsay\u0131lan De\u011fer Belirleme\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-01T05:31:07+00:00\",\"description\":\"Modern JavaScript geli\u015ftirmesinde, de\u011fi\u015fkenlerin beklenen bir de\u011fere sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek, \u00f6zellikle de d\u0131\u015f kaynaklardan gelen verilerle (API yan\u0131tlar\u0131, kullan\u0131c\u0131 girdileri vb.) \u00e7al\u0131\u015f\u0131rken kritik bir \u00f6neme sahiptir. Kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z en yayg\u0131n problemlerden biri, bir de\u011fi\u015fkenin null veya undefined olmas\u0131 durumunda ne yap\u0131laca\u011f\u0131d\u0131r. Geli\u015ftiriciler olarak, genellikle bu t\u00fcr bo\u015f de\u011ferler yerine anlaml\u0131 bir varsay\u0131lan de\u011fer atayarak uygulamalar\u0131m\u0131z\u0131n daha sa\u011flam ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 isteriz. \u0130\u015fte tam bu noktada, ES2020 ile hayat\u0131m\u0131za giren JavaScript Nullish Coalescing Operat\u00f6r\u00fc (??) devreye girerek, bu yayg\u0131n soruna \u015f\u0131k ve etkili bir \u00e7\u00f6z\u00fcm sunar. Bu makalede, ?? operat\u00f6r\u00fcn\u00fcn ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, geleneksel y\u00f6ntemlerden farklar\u0131n\u0131 ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l bir kolayl\u0131k sa\u011flad\u0131\u011f\u0131n\u0131 derinlemesine inceleyece\u011fiz. Amac\u0131m\u0131z, ister tecr\u00fcbeli bir JavaScript geli\u015ftiricisi olun ister yeni ba\u015fl\u0131yor olun, bu g\u00fc\u00e7l\u00fc operat\u00f6r\u00fc projelerinize entegre etmeniz i\u00e7in size kapsaml\u0131 bir rehber sunmakt\u0131r.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Nullish Coalescing (??): Varsay\u0131lan De\u011fer Belirleme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Nullish Coalescing (??): Varsay\u0131lan De\u011fer Belirleme","description":"Modern JavaScript geli\u015ftirmesinde, de\u011fi\u015fkenlerin beklenen bir de\u011fere sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek, \u00f6zellikle de d\u0131\u015f kaynaklardan gelen verilerle (API yan\u0131tlar\u0131, kullan\u0131c\u0131 girdileri vb.) \u00e7al\u0131\u015f\u0131rken kritik bir \u00f6neme sahiptir. Kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z en yayg\u0131n problemlerden biri, bir de\u011fi\u015fkenin null veya undefined olmas\u0131 durumunda ne yap\u0131laca\u011f\u0131d\u0131r. Geli\u015ftiriciler olarak, genellikle bu t\u00fcr bo\u015f de\u011ferler yerine anlaml\u0131 bir varsay\u0131lan de\u011fer atayarak uygulamalar\u0131m\u0131z\u0131n daha sa\u011flam ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 isteriz. \u0130\u015fte tam bu noktada, ES2020 ile hayat\u0131m\u0131za giren JavaScript Nullish Coalescing Operat\u00f6r\u00fc (??) devreye girerek, bu yayg\u0131n soruna \u015f\u0131k ve etkili bir \u00e7\u00f6z\u00fcm sunar. Bu makalede, ?? operat\u00f6r\u00fcn\u00fcn ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, geleneksel y\u00f6ntemlerden farklar\u0131n\u0131 ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l bir kolayl\u0131k sa\u011flad\u0131\u011f\u0131n\u0131 derinlemesine inceleyece\u011fiz. Amac\u0131m\u0131z, ister tecr\u00fcbeli bir JavaScript geli\u015ftiricisi olun ister yeni ba\u015fl\u0131yor olun, bu g\u00fc\u00e7l\u00fc operat\u00f6r\u00fc projelerinize entegre etmeniz i\u00e7in size kapsaml\u0131 bir rehber sunmakt\u0131r.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/","og_locale":"tr_TR","og_type":"article","og_title":"JavaScript Nullish Coalescing (??): Varsay\u0131lan De\u011fer Belirleme","og_description":"Modern JavaScript geli\u015ftirmesinde, de\u011fi\u015fkenlerin beklenen bir de\u011fere sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek, \u00f6zellikle de d\u0131\u015f kaynaklardan gelen verilerle (API yan\u0131tlar\u0131, kullan\u0131c\u0131 girdileri vb.) \u00e7al\u0131\u015f\u0131rken kritik bir \u00f6neme sahiptir. Kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z en yayg\u0131n problemlerden biri, bir de\u011fi\u015fkenin null veya undefined olmas\u0131 durumunda ne yap\u0131laca\u011f\u0131d\u0131r. Geli\u015ftiriciler olarak, genellikle bu t\u00fcr bo\u015f de\u011ferler yerine anlaml\u0131 bir varsay\u0131lan de\u011fer atayarak uygulamalar\u0131m\u0131z\u0131n daha sa\u011flam ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 isteriz. \u0130\u015fte tam bu noktada, ES2020 ile hayat\u0131m\u0131za giren JavaScript Nullish Coalescing Operat\u00f6r\u00fc (??) devreye girerek, bu yayg\u0131n soruna \u015f\u0131k ve etkili bir \u00e7\u00f6z\u00fcm sunar. Bu makalede, ?? operat\u00f6r\u00fcn\u00fcn ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, geleneksel y\u00f6ntemlerden farklar\u0131n\u0131 ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l bir kolayl\u0131k sa\u011flad\u0131\u011f\u0131n\u0131 derinlemesine inceleyece\u011fiz. Amac\u0131m\u0131z, ister tecr\u00fcbeli bir JavaScript geli\u015ftiricisi olun ister yeni ba\u015fl\u0131yor olun, bu g\u00fc\u00e7l\u00fc operat\u00f6r\u00fc projelerinize entegre etmeniz i\u00e7in size kapsaml\u0131 bir rehber sunmakt\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-01T05:31:07+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"22 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"JavaScript Nullish Coalescing (??): Varsay\u0131lan De\u011fer Belirleme","datePublished":"2025-11-01T05:31:07+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/"},"wordCount":3450,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Javascript"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/","url":"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/","name":"JavaScript Nullish Coalescing (??): Varsay\u0131lan De\u011fer Belirleme","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-01T05:31:07+00:00","description":"Modern JavaScript geli\u015ftirmesinde, de\u011fi\u015fkenlerin beklenen bir de\u011fere sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek, \u00f6zellikle de d\u0131\u015f kaynaklardan gelen verilerle (API yan\u0131tlar\u0131, kullan\u0131c\u0131 girdileri vb.) \u00e7al\u0131\u015f\u0131rken kritik bir \u00f6neme sahiptir. Kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z en yayg\u0131n problemlerden biri, bir de\u011fi\u015fkenin null veya undefined olmas\u0131 durumunda ne yap\u0131laca\u011f\u0131d\u0131r. Geli\u015ftiriciler olarak, genellikle bu t\u00fcr bo\u015f de\u011ferler yerine anlaml\u0131 bir varsay\u0131lan de\u011fer atayarak uygulamalar\u0131m\u0131z\u0131n daha sa\u011flam ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 isteriz. \u0130\u015fte tam bu noktada, ES2020 ile hayat\u0131m\u0131za giren JavaScript Nullish Coalescing Operat\u00f6r\u00fc (??) devreye girerek, bu yayg\u0131n soruna \u015f\u0131k ve etkili bir \u00e7\u00f6z\u00fcm sunar. Bu makalede, ?? operat\u00f6r\u00fcn\u00fcn ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, geleneksel y\u00f6ntemlerden farklar\u0131n\u0131 ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l bir kolayl\u0131k sa\u011flad\u0131\u011f\u0131n\u0131 derinlemesine inceleyece\u011fiz. Amac\u0131m\u0131z, ister tecr\u00fcbeli bir JavaScript geli\u015ftiricisi olun ister yeni ba\u015fl\u0131yor olun, bu g\u00fc\u00e7l\u00fc operat\u00f6r\u00fc projelerinize entegre etmeniz i\u00e7in size kapsaml\u0131 bir rehber sunmakt\u0131r.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/javascript-nullish-coalescing-varsayilan-deger-belirleme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Nullish Coalescing (??): Varsay\u0131lan De\u011fer Belirleme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33303"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33303\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}