JavaScript Nullish Coalescing (??): Varsayılan Değer Belirleme

Modern JavaScript geliştirmesinde, değişkenlerin beklenen bir değere sahip olup olmadığını kontrol etmek, özellikle de dış kaynaklardan gelen verilerle (API yanıtları, kullanıcı girdileri vb.) çalışırken kritik bir öneme sahiptir. Karşılaştığımız en yaygın problemlerden biri, bir değişkenin null veya undefined olması durumunda ne yapılacağıdır. Geliştiriciler olarak, genellikle bu tür boş değerler yerine anlamlı bir varsayılan değer atayarak uygulamalarımızın daha sağlam ve öngörülebilir olmasını isteriz. İşte tam bu noktada, ES2020 ile hayatımıza giren JavaScript Nullish Coalescing Operatörü (??) devreye girerek, bu yaygın soruna şık ve etkili bir çözüm sunar. Bu makalede, ?? operatörünün ne olduğunu, nasıl kullanıldığını, geleneksel yöntemlerden farklarını ve gerçek dünya senaryolarında nasıl bir kolaylık sağladığını derinlemesine inceleyeceğiz. Amacımız, ister tecrübeli bir JavaScript geliştiricisi olun ister yeni başlıyor olun, bu güçlü operatörü projelerinize entegre etmeniz için size kapsamlı bir rehber sunmaktır.

JavaScript ekosistemi sürekli evrim geçiriyor ve her yeni sürüm, geliştiricilerin hayatını kolaylaştıran yeni özellikler sunuyor. Nullish Coalescing Operatörü da bu yeniliklerden biri olarak, null veya undefined değerlerle başa çıkma şeklimizi temelden değiştiriyor. Eskiden, bu tür senaryolar için genellikle Mantıksal OR Operatörü (||) kullanılırdı. Ancak || operatörünün kendine has bazı yan etkileri vardı, özellikle de “falsy” (yanlışlık belirten) değerler söz konusu olduğunda istenmeyen sonuçlar doğurabiliyordu. Örneğin, bir değişkenin değeri 0 veya boş bir dize ('') olduğunda, || operatörü bu değerleri de boş kabul ederek varsayılan değeri döndürüyordu. Oysa biz bazen 0‘ın veya boş dizenin geçerli bir değer olduğunu varsayılana düşmek istemeyiz. İşte ?? operatörü, tam da bu hassasiyeti sağlayarak, yalnızca null ve undefined değerleri için varsayılan atamalar yapmamıza olanak tanır. Bu sayede, kodumuz daha okunaklı, daha mantıklı ve daha hatasız hale gelir. Gelin, bu önemli operatörün ayrıntılarına inelim ve JavaScript’teki varsayılan değer belirleme paradigmasını nasıl yeniden tanımladığını keşfedelim.

Bu bağlamda, boş değer kontrolü, bir uygulamanın güvenilirliği ve kullanıcı deneyimi açısından hayati öneme sahiptir. Kullanıcı formlarından gelen verilerde eksik alanlar olabileceği gibi, bir API’den gelen yanıtta bazı alanların beklenmedik bir şekilde boş veya tanımsız gelmesi de mümkündür. Bu durumlarda, uygulamamızın çökmemesi veya hatalı davranışlar sergilememesi için sağlam varsayılan mekanizmalar oluşturmamız gerekir. Nullish Coalescing Operatörü, bu gereksinimi sade bir söz dizimi ile karşılar. Gelecekteki JavaScript projelerinizde karşılaşacağınız veri işleme zorluklarını aşmak için bu operatörü anlamak, yazılım kalitenizi artırmanın anahtarı olacaktır. İlerleyen bölümlerde, bu operatörün temel prensiplerini, kullanım alanlarını ve diğer ilgili JavaScript özellikleriyle nasıl entegre edilebileceğini detaylandıracağız. Böylece, JavaScript’in modern yaklaşımlarından tam anlamıyla faydalanabilir ve daha temiz, daha anlaşılır ve daha dayanıklı kodlar yazabilirsiniz.

Temel Kavramlar: Nullish Ne Demek ve Neden Önemli?

JavaScript’te null ve undefined, genellikle “boş değerler” olarak adlandırılsa da, aralarında ince ama önemli farklar bulunur. undefined, bir değişkenin tanımlandığı ancak henüz bir değere sahip olmadığı durumu veya bir nesnenin var olmayan bir özelliğine erişildiğinde dönen değeri ifade eder. Örneğin, bir fonksiyonun parametre olarak beklediği bir argüman verilmediğinde veya bir değişken bildirilip başlangıç değeri atanmadığında undefined olur. Diğer yandan, null ise kasıtlı olarak bir değerin “hiçbir şeye” ayarlandığını belirtir. Yani, geliştiricinin bilinçli olarak bir değişkenin içinde boş bir değer saklamak istediğini ifade eder. Her iki değer de, bir değişkenin “değersiz” olduğunu belirtmek için kullanılır, ancak null daha çok atanmış bir boşluk, undefined ise atanmamış bir boşluk olarak düşünülebilir. Bu ayrım, Nullish Coalescing Operatörü‘nün çalışma prensibini anlamak için kritik bir temel oluşturur.

JavaScript’te boşluk kavramını incelerken, “falsy” değerler de önemli bir yer tutar. Falsy değerler, bir boolean bağlamında false olarak değerlendirilen değerlerdir. Bunlar arasında false‘ın kendisi, 0 (sayı sıfır), -0 (eksi sıfır), '' (boş string), null, undefined, NaN (Not-a-Number) ve son olarak document.all (eski bir tarayıcı özelliği) bulunur. Geleneksel olarak, JavaScript geliştiricileri bir değişkene varsayılan değer atamak için Mantıksal OR Operatörü (||) kullanmıştır. Bu operatör, sol tarafındaki değer falsy ise sağ tarafındaki değeri döndürür. Bu davranış, çoğu zaman işe yarar gibi görünse de, bazı senaryolarda istenmeyen sonuçlara yol açabilir. Örneğin, bir kullanıcının yaşını temsil eden değişkenin 0 olması, veya bir metin kutusunun boş string ('') olarak gelmesi durumunda, || operatörü bu değerleri de falsy kabul ederek varsayılan değeri döndürür. Ancak 0 yaş veya boş string, bazı bağlamlarda geçerli bir değer olabilir ve biz bu değerleri varsayılana düşürmek istemeyebiliriz. İşte ?? operatörü, tam da bu farkı ele alır.

Nullish Coalescing Operatörü (??) ile || operatörü arasındaki temel fark, ??‘nin sadece null veya undefined olduğunda varsayılan değeri döndürmesidir. Diğer bir deyişle, 0, boş string ('') veya false gibi diğer falsy değerler söz konusu olduğunda, ?? operatörü bu değerleri geçerli kabul eder ve varsayılan değere düşmez. Bu sayede, kodumuz daha hassas hale gelir ve değerlerin “gerçekten” boş olup olmadığına daha kesin bir şekilde karar verebiliriz. Bu, özellikle sayısal değerler, boolean bayrakları veya boş dizeler gibi, falsy olsalar bile geçerli sayılan verilerle çalışırken büyük bir avantaj sağlar. Aşağıdaki kod örnekleri, bu iki operatör arasındaki temel farkı net bir şekilde gözler önüne serecektir:

// Değer: 0 (falsy)
let sayi = 0;
let varsayilanSayi = sayi || 100; // || operatörü 0'ı falsy olarak kabul eder
console.log(|| ile varsayılan: ${varsayilanSayi}); // Çıktı: 100

let nullishSayi = sayi ?? 100; // ?? operatörü 0'ı geçerli kabul eder
console.log(?? ile varsayılan: ${nullishSayi}); // Çıktı: 0

// Değer: Boş string (falsy)
let isim = '';
let varsayilanIsim = isim || 'Misafir'; // || operatörü boş string'i falsy olarak kabul eder
console.log(|| ile varsayılan: ${varsayilanIsim}); // Çıktı: Misafir

let nullishIsim = isim ?? 'Misafir'; // ?? operatörü boş string'i geçerli kabul eder
console.log(?? ile varsayılan: ${nullishIsim}); // Çıktı: (boş string)

// Değer: null
let yas = null;
let varsayilanYas = yas || 18; // || null'ı falsy olarak kabul eder
console.log(|| ile varsayılan: ${varsayilanYas}); // Çıktı: 18

let nullishYas = yas ?? 18; // ?? null'ı nullish olarak kabul eder
console.log(?? ile varsayılan: ${nullishYas}); // Çıktı: 18

// Değer: undefined
let adres; // undefined
let varsayilanAdres = adres || 'Bilinmiyor'; // || undefined'ı falsy olarak kabul eder
console.log(|| ile varsayılan: ${varsayilanAdres}); // Çıktı: Bilinmiyor

let nullishAdres = adres ?? 'Bilinmiyor'; // ?? undefined'ı nullish olarak kabul eder
console.log(?? ile varsayılan: ${nullishAdres}); // Çıktı: Bilinmiyor

Yukarıdaki örnekler, ?? operatörünün özellikle 0, '' ve false gibi değerlerin geçerli olduğu senaryolarda ne kadar hassas ve doğru sonuçlar ürettiğini açıkça göstermektedir. Bu hassasiyet, uygulamanızın veri bütünlüğünü korumak ve beklenmedik hataları önlemek için vazgeçilmez bir araç haline getirir. Dolayısıyla, ne zaman bir değişkene varsayılan değer atamanız gerekirse, öncelikle bu değerin gerçekten boş (yani null veya undefined) olup olmadığını sorgulamak için ?? operatörünü düşünmelisiniz. Bu yaklaşım, daha robust ve anlaşılır kodlar yazmanıza yardımcı olacaktır.

Nullish Coalescing Operatörü (??) Nasıl Kullanılır? Uygulamalı Örnekler

Nullish Coalescing Operatörü (??), basit ve sezgisel bir söz dizimine sahiptir. Temel olarak, solTaraf ?? sağTaraf şeklinde kullanılır. Bu ifade, sol taraftaki değer (solTaraf) null veya undefined ise sağ taraftaki değeri (sağTaraf) döndürür; aksi takdirde, sol taraftaki değeri döndürür. Bu basit mantık, birçok farklı senaryoda varsayılan değer atamalarını çok daha temiz ve okunabilir hale getirir. Gelin, adım adım çeşitli uygulamalı örneklerle bu operatörün gücünü keşfedelim.

Basit Değişken Atamalarında ?? Kullanımı

En temel kullanım senaryosu, bir değişkenin değerinin null veya undefined olup olmadığını kontrol ederek ona bir varsayılan değer atamaktır. Örneğin, bir kullanıcının tercih ettiği bir tema rengi varsa bunu kullanmak, yoksa varsayılan bir renk belirlemek isteyebiliriz:

let kullaniciTemasi = null; // Veya undefined olabilir
let varsayilanTema = kullaniciTemasi ?? 'dark';
console.log(Kullanıcı Teması: ${varsayilanTema}); // Çıktı: dark

let kullaniciTemasi2 = 'light';
let varsayilanTema2 = kullaniciTemasi2 ?? 'dark';
console.log(Kullanıcı Teması 2: ${varsayilanTema2}); // Çıktı: light

let kullaniciTemasi3 = 0; // Geçerli bir sayısal değer
let varsayilanTema3 = kullaniciTemasi3 ?? 'dark';
console.log(Kullanıcı Teması 3: ${varsayilanTema3}); // Çıktı: 0 (0 değeri geçerli kabul edildi)

Bu örnekler, ?? operatörünün yalnızca null veya undefined olduğunda varsayılana düştüğünü açıkça göstermektedir. 0 gibi geçerli bir falsy değer geldiğinde bile, bu operatör onu korur.

Fonksiyon Parametreleri İçin Varsayılan Değer Belirleme

Fonksiyonlara geçirilen parametreler bazen eksik veya boş gelebilir. Bu durumda, fonksiyonun varsayılan değerlerle çalışmasını sağlamak için ?? operatörünü kullanabiliriz:

function selamlaKullanici(ad, yas) {
  const kullaniciAdi = ad ?? 'Anonim';
  const kullaniciYasi = yas ?? 30; // 0 yaşı geçerli kabul eder!
  console.log(Merhaba ${kullaniciAdi}, yaşınız ${kullaniciYasi}.);
}

selamlaKullanici('Ali', 25);     // Çıktı: Merhaba Ali, yaşınız 25.
selamlaKullanici(null, 0);       // Çıktı: Merhaba Anonim, yaşınız 0. (0 geçerli!)
selamlaKullanici(undefined, null); // Çıktı: Merhaba Anonim, yaşınız 30.
selamlaKullanici('Ayşe');        // Çıktı: Merhaba Ayşe, yaşınız 30.

Bu kullanım şekli, fonksiyon imzasındaki varsayılan parametrelerden (function (param = 'default')) farklı olarak, parametre açıkça null veya undefined olarak geçirildiğinde de varsayılan atamayı esnek bir şekilde yapmanızı sağlar. Özellikle birden fazla koşulun veya dinamik varsayılanların olduğu durumlarda daha fazla kontrol sunar.

API Yanıtlarından Gelen Verileri Güvenli Bir Şekilde İşleme

Gerçek dünya uygulamalarında, dış API'lerden gelen veriler her zaman beklediğimiz formatta veya eksiksiz olmayabilir. Bazı alanlar null veya undefined olarak gelebilir. Bu durumda, uygulamanızın çökmemesi için bu değerlere güvenli varsayılanlar atamak hayati önem taşır:

// API'den gelen örnek bir kullanıcı verisi
const apiKullaniciVerisi = {
  id: 101,
  isim: 'Can',
  email: 'can@example.com',
  ayarlar: {
    bildirimler: null, // API'den null geldi
    dil: undefined,    // API'den undefined geldi
    tema: 'dark'
  }
};

const kullaniciAyarlari = {
  id: apiKullaniciVerisi.id,
  ad: apiKullaniciVerisi.isim ?? 'Bilinmeyen Kullanıcı',
  eposta: apiKullaniciVerisi.email ?? 'yok@example.com',
  bildirimlerAcik: apiKullaniciVerisi.ayarlar.bildirimler ?? true, // null yerine true varsayılanı
  kullaniciDili: apiKullaniciVerisi.ayarlar.dil ?? 'tr-TR',       // undefined yerine 'tr-TR' varsayılanı
  seciliTema: apiKullaniciVerisi.ayarlar.tema ?? 'light'
};

console.log('İşlenmiş Kullanıcı Ayarları:', kullaniciAyarlari);
// Çıktı:
// İşlenmiş Kullanıcı Ayarları: {
//   id: 101,
//   ad: 'Can',
//   eposta: 'can@example.com',
//   bildirimlerAcik: true,
//   kullaniciDili: 'tr-TR',
//   seciliTema: 'dark'
// }

Bu vaka analizi, API'den gelen dinamik verileri işlerken ?? operatörünün ne kadar değerli olduğunu göstermektedir. Gelen verilerdeki eksiklikleri sorunsuz bir şekilde yöneterek, uygulamanızın kararlılığını artırır ve varsayılan davranışları net bir şekilde tanımlarız. Özellikle iç içe geçmiş nesnelerde veya opsiyonel özelliklerde bu kullanım oldukça yaygındır ve kodun karmaşıklığını azaltır.

Bu derinlemesine örnekler, Nullish Coalescing Operatörü'nün sadece bir söz dizimi kolaylığı olmadığını, aynı zamanda JavaScript uygulamalarınızın sağlamlığını ve okunabilirliğini önemli ölçüde artıran güçlü bir araç olduğunu ortaya koymaktadır. Kodunuzda varsayılan değer atamaları yaparken, || operatörünün potansiyel yan etkilerini göz önünde bulundurarak ??'yi tercih etmek, daha güvenilir ve bakımı kolay çözümler geliştirmenizi sağlayacaktır.

Derinlemesine Bakış: Nullish Coalescing ve Diğer Operatörlerle Etkileşim

JavaScript Nullish Coalescing Operatörü (??), tek başına oldukça güçlü olsa da, diğer modern JavaScript operatörleriyle birleştiğinde gerçek potansiyelini ortaya koyar. Özellikle Opsiyonel Zincirleme Operatörü (?.) ve Mantıksal Nullish Atama Operatörü (??=) ile birlikte kullanıldığında, karmaşık veri manipülasyonları ve güvenli varsayılan atamalar çok daha temiz ve etkili bir şekilde gerçekleştirilebilir. Bu bölümde, ?? operatörünün bu diğer operatörlerle olan etkileşimini ve bu kombinasyonların sunduğu avantajları detaylıca inceleyeceğiz.

Opsiyonel Zincirleme (?.) ile Birlikte Kullanım

Opsiyonel Zincirleme Operatörü (?.), bir nesne zincirindeki özelliklere güvenli bir şekilde erişmek için kullanılır. Eğer zincirdeki herhangi bir eleman null veya undefined ise, tüm ifade bir hata fırlatmak yerine undefined döndürür. Bu, derinlemesine iç içe geçmiş nesnelerle çalışırken oldukça kullanışlıdır. ?. operatöründen dönen undefined değeri, doğrudan ?? operatörünün sol tarafına gelerek, eğer bu değer undefined ise bir varsayılan atama yapma olanağı sunar. Bu kombinasyon, özellikle dinamik ve değişken veri yapılarıyla çalışırken kodumuzu çok daha dayanıklı hale getirir.

const kullaniciProfil = {
  id: 1,
  ad: 'Deniz',
  adres: {
    il: 'İstanbul',
    ilce: 'Kadıköy'
  },
  iletisim: null // İletişim bilgileri yok
};

// Senaryo 1: Var olan bir özelliğe erişim
const sehir = kullaniciProfil?.adres?.il ?? 'Bilinmiyor';
console.log(Kullanıcının Şehri: ${sehir}); // Çıktı: İstanbul

// Senaryo 2: Olmayan bir özelliğe erişim
const telefon = kullaniciProfil?.iletisim?.telefon ?? 'Telefon Numarası Yok';
console.log(Kullanıcının Telefonu: ${telefon}); // Çıktı: Telefon Numarası Yok (çünkü iletisim null idi)

// Senaryo 3: İç içe olmayan bir özelliğe erişim
const ePosta = kullaniciProfil?.eposta?.adres ?? 'e-Posta Adresi Yok';
console.log(Kullanıcının e-Postası: ${ePosta}); // Çıktı: e-Posta Adresi Yok (çünkü eposta özelliği bile yok)

const kullaniciAyarlari = {
  theme: 'dark',
  notifications: {
    email: true,
    sms: false
  }
};

// SMS bildirimi ayarını al, yoksa varsayılan olarak true yap
const smsBildirimleri = kullaniciAyarlari?.notifications?.sms ?? true;
console.log(SMS Bildirimleri: ${smsBildirimleri}); // Çıktı: false (çünkü var ve değeri false)

const pushBildirimleri = kullaniciAyarlari?.notifications?.push ?? true;
console.log(Push Bildirimleri: ${pushBildirimleri}); // Çıktı: true (çünkü push yok ve undefined döndü)

Bu örnekler, ?. ve ?? kombinasyonunun, karmaşık nesne hiyerarşilerinde boş değerleri güvenle ele alarak, kodunuzu daha az hata eğilimli ve daha okunaklı hale getirdiğini açıkça ortaya koymaktadır. Bu sayede, if-else bloklarıyla uzun ve tekrar eden boş kontrol zincirlerinden kurtulmuş oluruz.

Mantıksal Nullish Atama (??=) Operatörü

ES2021 ile birlikte tanıtılan Mantıksal Nullish Atama Operatörü (??=), bir değişkene yalnızca değeri null veya undefined ise atama yapmak için kısa bir söz dizimi sunar. Bu operatör, "eğer değişken boşsa, bu değeri ata" anlamına gelir ve genellikle bir değişkenin ilk kez varsayılan bir değerle başlatılması gereken durumlarda kullanılır.

let ayar = null;
ayar ??= 'varsayilanDeger'; // ayar null olduğu için 'varsayilanDeger' atanır
console.log(Ayar 1: ${ayar}); // Çıktı: varsayilanDeger

let kullaniciAdi = 'Mehmet';
kullaniciAdi ??= 'Misafir'; // kullaniciAdi boş değil, bu yüzden atama yapılmaz
console.log(Kullanıcı Adı: ${kullaniciAdi}); // Çıktı: Mehmet

let miktar = 0;
miktar ??= 100; // miktar 0 olduğu için (nullish değil), atama yapılmaz
console.log(Miktar: ${miktar}); // Çıktı: 0

let tercih; // undefined
tercih ??= 'Türkçe'; // tercih undefined olduğu için 'Türkçe' atanır
console.log(Tercih: ${tercih}); // Çıktı: Türkçe

??= operatörü, özellikle bir değişkenin yalnızca bir kez, başlangıçta ve yalnızca boş olması durumunda bir değer almasını istediğimiz senaryolarda son derece pratik bir çözümdür. Bu, kod tekrarını azaltır ve niyetimizi daha net bir şekilde ifade etmemizi sağlar.

Performans Etkileri ve Yaygın Hatalar

Nullish Coalescing Operatörü'nün performansa etkisi genellikle ihmal edilebilir düzeydedir. Modern JavaScript motorları bu tür operatörleri oldukça optimize edilmiş bir şekilde işler. Performans açısından ?? ve || arasında kayda değer bir fark yoktur; seçiminiz tamamen semantik doğruluğa ve kod okunabilirliğine dayanmalıdır. Yaygın hatalardan biri, ?? operatörünü && (Mantıksal VE) veya || (Mantıksal VEYA) operatörleriyle birlikte parantez olmadan kullanmaya çalışmaktır. JavaScript, operatör önceliği kurallarına sahiptir ve bu tür kombinasyonlarda beklenmedik sonuçlar almamak için parantez kullanmak en güvenli yaklaşımdır:

// Hatalı kullanım (çünkü operatör önceliği beklenmedik olabilir)
// const sonuc = a ?? b || c; // Hata fırlatır veya yanlış çalışır

// Doğru kullanım: parantezlerle önceliği belirtme
const sonucDogru = (a ?? b) || c;
const sonucDogru2 = a ?? (b || c);

Ayrıca, ?? operatörünün sadece null ve undefined değerlerini kontrol ettiğini, 0, '' veya false gibi değerleri varsayılana düşürmediğini unutmamak önemlidir. Eğer bu falsy değerleri de boş kabul etmek istiyorsanız, || operatörünü kullanmaya devam etmelisiniz. Niyetinize en uygun operatörü seçmek, kaliteli ve hatasız kod yazmanın anahtarıdır. Nullish Coalescing Operatörü, bu alanda geliştiricilere çok daha rafine bir kontrol mekanizması sunarak modern JavaScript uygulamalarının gereksinimlerini karşılamada önemli bir rol oynamaktadır.

Mobil Uyumluluk ve Duyarlı Tasarım: HTML Yapısının Önemi

Her ne kadar bu makale JavaScript'teki Nullish Coalescing Operatörü hakkında olsa da, modern web geliştirmesinde kullanıcı deneyimi ve erişilebilirlik, yazılan kodun çalıştığı platformdan bağımsız olarak büyük önem taşır. Bu bağlamda, oluşturduğumuz HTML içeriğinin mobil cihazlarda da düzgün görünmesi ve etkileşimli olması kritik bir gerekliliktir. JavaScript uygulamaları genellikle dinamik içerik üretir ve bu içeriğin duyarlı bir şekilde tasarlanmış olması, kullanıcıların farklı ekran boyutlarındaki cihazlarda sorunsuz bir deneyim yaşamasını sağlar. Nullish coalescing operatörü ile yönettiğimiz veriler, sonuç olarak HTML arayüzüne yansır ve bu arayüzün mobil dostu olması gerekir. İyi yapılandırılmış, anlamsal (semantic) HTML, duyarlı tasarım için temel bir başlangıç noktasıdır.

Öncelikle, mobil uyumluluğun en temel adımı, HTML belgesinin bölümüne viewport meta etiketini eklemektir. Bu etiket, tarayıcıya sayfanın cihazın genişliğine göre ölçeklenmesi gerektiğini bildirir:

Bu meta etiketi olmadan, mobil tarayıcılar sayfayı varsayılan olarak masaüstü görünümünde render edebilir ve bu da okunabilirlik ve kullanılabilirlik sorunlarına yol açar. İçerik oluştururken, başlıklar (H2, H3), paragraflar, listeler ve kod blokları gibi elementleri doğru HTML etiketleriyle işaretlemek, hem arama motorları hem de ekran okuyucular için içeriğin yapısını anlamayı kolaylaştırır. Örneğin, kod örneklerimizi

 etiketleri arasına alarak, kodun düzgün formatını koruruz ve okunabilirliğini artırırız.

Duyarlı tasarımın kalbi olan CSS Media Query'leri, farklı ekran boyutlarına ve çözünürlüklere göre stil kurallarını uyarlamamıza olanak tanır. JavaScript ile dinamik olarak oluşturulan içerikler için de aynı CSS kuralları geçerlidir. İşte basit bir media query örneği, bu makaledeki H2 başlıklarının mobil cihazlarda nasıl farklı görünebileceğini gösterir:

/* Genel stiller */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0 auto;
  padding: 20px;
  max-width: 960px;
  color: #333;
}

h2 {
  color: #2c3e50;
  font-size: 2.2em;
  margin-top: 40px;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

h3 {
  color: #34495e;
  font-size: 1.6em;
  margin-top: 30px;
}

/* Mobil cihazlar için stil uyarlamaları */
@media screen and (max-width: 768px) {
  body {
    padding: 15px;
  }

  h2 {
    font-size: 1.8em; /* Küçük ekranlarda H2 başlıklarını küçült */
    margin-top: 30px;
  }

  h3 {
    font-size: 1.4em; /* Küçük ekranlarda H3 başlıklarını küçült */
    margin-top: 20px;
  }

  pre {
    white-space: pre-wrap; /* Kod bloklarının küçük ekranda kaydırmadan sığmasını sağla */
    word-wrap: break-word;
  }
}


Bu CSS kodu, varsayılan olarak belirli bir boyuta sahip olan başlıkların ve genel metnin, ekran boyutu 768 pikselden daha küçük olduğunda (tipik bir tablet veya telefon ekranı) nasıl otomatik olarak küçültüldüğünü gösterir. Ayrıca, kod bloklarının (

) mobil cihazlarda yatay kaydırma çubukları oluşturmak yerine metni sarmalamasını (white-space: pre-wrap;) sağlayarak okunabilirliği artırır. Nullish coalescing operatörü ile ele aldığımız verilerin, bu tür duyarlı bir HTML/CSS yapısı içinde sunulması, tüm kullanıcılar için kapsayıcı ve keyifli bir deneyim sağlar. Dolayısıyla, JavaScript'in işlevsel gücünü kullanırken, son kullanıcıya ulaşan görsel katmanın da modern web standartlarına uygun olduğundan emin olmak önemlidir.

Sonuç: JavaScript Geliştirmenizin Vazgeçilmezi mi?
JavaScript Nullish Coalescing Operatörü (??), modern web geliştirme pratiklerinde vazgeçilmez bir araç haline gelmiştir. Bu operatör, null ve undefined değerlerle başa çıkma şeklimizi önemli ölçüde basitleştirerek, kodumuzu daha temiz, daha okunaklı ve daha az hata eğilimli hale getirir. Geleneksel Mantıksal OR Operatörü (||)'nün aksine, ?? operatörü 0, boş string ('') veya false gibi geçerli falsy değerleri göz ardı etmez; yalnızca kesinlikle "boş" olan (null veya undefined) değerler için varsayılan atama yapar. Bu hassasiyet, özellikle dinamik API yanıtları, kullanıcı girdileri veya karmaşık nesne yapılarıyla çalışırken veri bütünlüğünü korumak açısından kritik bir avantaj sunar.
Makale boyunca, ?? operatörünün temel kavramlarını, null ve undefined arasındaki farkları, falsy değerlerin önemini ve || operatörü ile arasındaki temel farklılıkları ele aldık. Adım adım uyguladığımız örneklerle, basit değişken atamalarından fonksiyon parametrelerine, API verisi işlemelerinden karmaşık nesne özelliklerine güvenli erişime kadar birçok senaryoda ??'nin nasıl kullanılabileceğini gösterdik. Ayrıca, Opsiyonel Zincirleme Operatörü (?.) ve Mantıksal Nullish Atama Operatörü (??=) gibi diğer güçlü JavaScript özellikleriyle kombinasyonlarını inceleyerek, bu operatörlerin birlikte nasıl daha etkili çözümler ürettiğini gözlemledik. Son olarak, bu operatörün performansa etkisinin genellikle ihmal edilebilir olduğunu ve doğru kullanımın, kodun anlaşılırlığı ve bakım kolaylığı açısından büyük faydalar sağladığını vurguladık.
Özetle, Nullish Coalescing Operatörü'nü ne zaman kullanmalıyız sorusunun cevabı oldukça nettir: Bir değişkene veya ifadeye, yalnızca değeri kesinlikle null veya undefined olduğunda bir varsayılan atamak istediğiniz her durumda kullanmalısınız. Eğer 0, '' veya false gibi falsy değerlerin de varsayılana düşmesini istiyorsanız, o zaman || operatörü daha uygun bir seçenek olabilir. Bu bilinçli seçim, uygulamanızın mantığını doğru bir şekilde yansıtacak ve gelecekteki olası hataların önüne geçecektir. Modern JavaScript geliştiricileri olarak, bu tür söz dizimsel kolaylıkları benimsemek, daha dayanıklı, okunabilir ve yönetilebilir kod tabanları oluşturmamıza yardımcı olacaktır. ?? operatörü, JavaScript'in sürekli gelişen ekosistemindeki önemli bir adımdır ve şüphesiz ki geliştirme süreçlerinizin ayrılmaz bir parçası olacaktır.
Sıkça Sorulan Sorular (SSS)

1. ?? operatörü ne zaman JavaScript'e eklendi?
Nullish Coalescing Operatörü (??), ES2020 (ECMAScript 2020) ile birlikte JavaScript'e eklenmiştir. Bu nedenle, eski tarayıcı veya Node.js ortamlarında doğrudan desteklenmeyebilir, ancak Babel gibi araçlarla derlenebilir.
2. ?? ile || arasındaki temel fark nedir?
Temel fark, hangi değerleri "boş" kabul ettikleridir. || (Mantıksal OR) operatörü, sol tarafındaki değer herhangi bir "falsy" değerse (false, 0, '', null, undefined, NaN) sağ tarafındaki değeri döndürür. ?? (Nullish Coalescing) operatörü ise yalnızca sol tarafındaki değer null veya undefined ise sağ tarafındaki değeri döndürür. Diğer falsy değerleri geçerli kabul eder.
3. ?? sadece değişkenler için mi geçerlidir?
Hayır, ?? operatörü sadece değişkenler için değil, herhangi bir ifadenin sonucuna uygulanabilir. Fonksiyon çağrılarının dönüş değerleri, nesne özelliklerine erişim (özellikle ?. ile birlikte), matematiksel işlemlerin sonuçları gibi her türlü ifadede kullanılabilir.
4. ?? operatörünün performans maliyeti var mı?
Modern JavaScript motorları, ?? operatörünü oldukça optimize bir şekilde işler. Performans açısından ?? ve || arasında genellikle kayda değer bir fark yoktur. Kullanım kararı, kodun semantik doğruluğuna ve okunabilirliğine dayanmalıdır.
5. ?? null ve undefined dışında başka değerleri de kontrol eder mi?
Hayır, ?? operatörü kesinlikle sadece null ve undefined değerlerini "boş" olarak kabul eder. false, 0, '' (boş string) veya NaN gibi diğer JavaScript falsy değerlerini geçerli (non-nullish) olarak görür ve bu değerler varsa sağ tarafındaki varsayılan değeri döndürmez.