JavaScript'te JSON: JSON.stringify ve JSON.parse Rehberi

JSON Bir Nesne Değil, Metindir

JSON (JavaScript Object Notation), veri alışverişi için kullanılan bir metin formatıdır. Görünüş olarak JavaScript nesne literaline benzer ama aslında bir string'dir — yani ağ üzerinden gönderebileceğiniz, dosyaya kaydedebileceğiniz ya da bir config dosyasına yapıştırabileceğiniz bir karakter dizisidir.

// Bir JavaScript nesnesi — bellekteki canlı bir değer.
const user = { name: "Rosa", age: 30 };

// JSON — aynı veriyi temsil eden bir metin dizesi.
const json = '{"name":"Rosa","age":30}';

İkisini birbirine karıştırmak çok kolay, çünkü gerçekten benziyorlar. Kafanda net tutman için şöyle düşün: nesneler (object) programının içinde yaşar; JSON ise o nesnelerin dışarı çıkarken aldığı hâldir. Aralarındaki dönüşümü iki fonksiyonla yaparsın: JSON.stringify (nesneden string'e) ve JSON.parse (string'ten nesneye).

JSON.stringify: Nesneyi JSON'a Çevirme

Herhangi bir JavaScript değerini JSON karşılığına dönüştürür:

Sonuç tek satırlık, boşluksuz bir string — kompakt ve ağ üzerinden göndermek için biçilmiş kaftan. typeof kontrolü de bunu doğruluyor: string, object değil.

Debug sırasında daha okunaklı bir çıktı istiyorsan iki ek argüman daha verebilirsin. İkincisi replacer (ona birazdan geliyoruz); null geçmek "her şeyi dahil et" anlamına gelir. Üçüncüsü ise girinti miktarı:

Standart pretty-print görünümü bu. 2 ya da 4 boşluk kullan — çoğu aracın ürettiği format da zaten böyle.

JSON.parse: String'i nesneye çevirme

Tam tersi yönde çalışır: elinde bir JSON string'i var, geriye JavaScript değeri alıyorsun.

Parse edildikten sonra elinde sıradan bir JS nesnesi var — nokta ile erişim, köşeli parantezle erişim, dizi metotları, hepsi çalışır.

JSON.parse oldukça titiz bir fonksiyondur. Aşağıdakilerin hepsi SyntaxError fırlatır:

JSON.parse("{name: 'Rosa'}");      // tırnaksız anahtar, tek tırnak
JSON.parse('{"name": "Rosa",}');   // sondaki virgül
JSON.parse("// a comment\n{}");    // yorumlara izin verilmez
JSON.parse("");                    // boş dize

Programınızın dışından gelen her veri için — bir fetch yanıtı, bir dosya ya da kullanıcı girdisi fark etmez — JSON.parse çağrısını mutlaka try/catch bloğuna sarın:

Round-Trip'te Hayatta Kalamayan Değerler

JSON yalnızca altı değer türünü destekler: string'ler, sayılar, boolean'lar, null, diziler ve düz nesneler. JavaScript'teki bunların dışında kalan her şey ya yok olur, ya başka bir şeye dönüşür ya da hata fırlatır.

Neler oluyor:

• Fonksiyonlar ve undefined değerleri, nesnelerden sessizce silinir. Diziler içindeyse null'a dönüşürler — çünkü JSON'da dizilerin boşluk barındırmasına izin yok.
• Date nesneleri, kendi toJSON metodu üzerinden ISO formatında bir string'e serileştirilir. Parse ettiğinizde ise elinize Date değil, o string geri döner.
• BigInt doğrudan TypeError fırlatır. JSON sayılarında karşılığı yok.
• Map, Set ve dairesel referanslar da kutudan çıktığı gibi çalışmaz.

Date nesnelerini kayıpsız geri döndürmenin yolu, JSON.parse'ın reviver fonksiyonundan geçiyor:

Reviver fonksiyonu her anahtar/değer çifti için çalışır ve gelen değerleri okuma sırasında dönüştürmenize olanak tanır.

Replacer: Serileştirilecek Alanları Filtrelemek

JSON.stringify fonksiyonunun ikinci parametresi, çıktıda nelerin yer alacağını kontrol etmenizi sağlar. Yalnızca belirli anahtarları dahil etmek için bir dizi geçirebilirsiniz:

Ya da rastgele bir mantık için fonksiyon verebilirsin — alanları ayıklamak, değerleri maskelemek, anlık dönüşüm yapmak için birebir:

undefined döndürürsen o anahtar tamamen silinir. Başka bir değer döndürürsen de anahtarın değeri onunla değiştirilir.

toJSON ile özelleştirme

Bir nesnenin toJSON metodu varsa, JSON.stringify önce onu çağırır ve serileştirme işlemini dönen değer üzerinden yapar. Date nesnesinin kendi formatını bu şekilde belirlediğini biliyor muydun? Aynı mekanizmayı sen de kendi nesnelerinde kullanabilirsin:

Genel API şekli kimin serialize ettiğinden bağımsız olarak tutarlı kalsın isteyen sınıflar için birebir.

Derin Kopyalama (Eski Numara ve Daha İyisi)

Yıllarca, sade bir nesneyi derin kopyalamanın tek satırlık yolu JSON.parse(JSON.stringify(obj)) oldu:

Bu yöntem işinizi görür — ama yalnızca nesnenin içinde JSON ile uyumlu değerler varsa. Tarihler, Map'ler ve fonksiyonlar bu yaklaşımı bozar (yukarıdaki gidiş-dönüş sorunlarına bakın).

Modern JavaScript'te structuredClone var; bu fonksiyon Date, Map, Set, tipli diziler ve hatta döngüsel referanslarla sorunsuz çalışır:

Mümkün olduğunda structuredClone'a başvurun. JSON.parse(JSON.stringify(...)) numarasını da düz verilerin hızlı ve pratik kopyaları için yedekte tutun.

Gerçek Bir Örnek: Veri Çekme ve Parse Etme

JSON ile en sık karşılaşacağınız yer HTTP istekleridir. fetch sizin için JSON'u otomatik parse etmez — response üzerinde .json() çağırmanız gerekir (ki bu da aslında response body üzerinde JSON.parse çalıştırır):

JSON göndermek ise tam tersi bir işlem: gövdeyi JSON.stringify ile string'e çevirip Content-Type header'ını ayarlıyoruz.

await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Rosa", age: 30 }),
});

Bu iki kalıp, gerçek hayatta karşılaşacağınız JSON işlerinin büyük çoğunluğunu kapsıyor.

Sırada: Optional Chaining

Parse edilmiş JSON'larda çoğu zaman opsiyonel alanlar bulunur — var olmayabilecek bir user.address.city, ya da eksik olabilecek bir response.data.items gibi. İç içe geçmiş özelliklere hata almadan erişmek tam olarak optional chaining (?.) operatörünün işi; bir sonraki sayfanın konusu da bu.