JavaScript JSON ve Veri Yapıları

Web geliştirme serüveninizde sadece tekil değerleri (örneğin bir metin veya sayı) değişkenlerde tutmayı öğrendikten sonra, sıra daha büyük ve karmaşık verileri nasıl organize edeceğinize gelir. Modern bir web sitesinde veya uygulamasında yüzlerce kullanıcıyı, alışveriş sepetindeki onlarca ürünü veya sosyal medyadaki gönderileri tek tek değişkenlerde tutmak imkânsızdır. İşte bu noktada Veri Yapıları (Data Structures) ve bu verileri sunucularla paylaşmamızı sağlayan evrensel dil JSON devreye girer.

Bu kapsamlı ve SEO uyumlu rehberde, JavaScript’teki temel veri yapılarını (Diziler ve Nesneler) hatırlayacak, ardından modern webin veri alışveriş standardı olan JSON kavramını örneklerle pekiştirerek öğreneceğiz.

1. JavaScript’te Temel Veri Yapıları: Diziler ve Nesneler

JavaScript’te verileri gruplamak ve yapılandırmak için kullandığımız iki ana araç vardır: Diziler (Arrays) ve Nesneler (Objects). Bu yapıların her ikisi de, ileride göreceğimiz JSON formatının temelini oluşturur,.

Diziler (Arrays): Diziler, birden fazla veriyi sıralı bir liste halinde tutmanızı sağlar. Örneğin, bir market alışveriş listesi veya bir sınıftaki öğrencilerin isimleri dizi kullanılarak tutulur. Köşeli parantezler [ ] kullanılarak oluşturulurlar.

Nesneler (Objects): Nesneler, gerçek hayattaki kavramları özellikler (properties) halinde gruplandırmak için kullanılır,. JavaScript’te bir nesne, aslında ilişkisel bir dizi (associative array) olarak düşünülebilir. Veriler otomatik bir sıra numarası yerine, bizim belirlediğimiz “anahtar-değer” (key-value) çiftleriyle tutulur. Süslü parantezler { } kullanılarak oluşturulurlar.

let kullanici = {
    ad: "Ahmet",
    yas: 25,
    meslek: "Geliştirici"
};

Yukarıdaki örnekte kullanici nesnesi, bir kişiye ait özellikleri tanımlayıcı isimlerle (anahtarlarla) bir arada tutmaktadır.

2. JSON (JavaScript Object Notation) Nedir?

JSON’un açılımı JavaScript Object Notation (JavaScript Nesne Gösterimi)’dir. Ancak isminde JavaScript geçmesine aldanmayın; JSON sadece bir veri formatıdır ve JavaScript nesnelerine çok benzeyen bir yapıyla verileri temsil etmemizi sağlar.

Günümüzde JSON, internet üzerindeki API’ler (Uygulama Programlama Arayüzleri) ile iletişim kurmak için kullanılan evrensel bir standarttır. Hatta bu API’ler JavaScript ile yazılmamış olsa bile (örneğin C#, Python veya Java ile yazılmış olsalar da) veri alışverişini JSON formatında yaparlar.

Örneğin, bir e-ticaret sitesine girdiğinizde ürünlerin listesi, veritabanına bağlanan bir API üzerinden çağrılır. Bu API, veritabanındaki ürünleri alır, onları bir JSON metnine dönüştürür ve web sitesine (kullanıcının tarayıcısına) geri gönderir.

3. JSON Yazım Kuralları ve Sözdizimi (Syntax)

JSON, dışarıdan bakıldığında klasik bir JavaScript nesnesine çok benzer, ancak uyulması gereken çok daha katı ve belirli kuralları vardır:

1. Anahtarlar (Keys) Çift Tırnak İçinde Olmalıdır: JavaScript nesnelerinde özellik isimlerini tırnaksız yazabilirsiniz, ancak JSON’da tüm anahtarlar mutlaka çift tırnak ("") içinde yazılmalıdır.
2. Değerler (Values) İçin Tırnak Kullanımı: Sadece metin (string) türündeki değerler çift tırnak içine alınır. Sayılar veya Boolean (true/false) gibi değerler tırnaksız yazılır.
3. Kabul Edilen Veri Tipleri: Bir JSON yapısının içinde yalnızca belirli veri tipleri kullanılabilir: Metin (string), Sayı (number), Boolean (true/false), null, listeler (diziler) ve diğer JSON nesneleri. JSON içerisinde bir JavaScript fonksiyonu (metot) barındıramazsınız.

Geçerli bir JSON örneği:

{
    "isim": "Malika",
    "yas": 50,
    "meslek": "Programcı",
    "diller": ["JavaScript", "C#", "Python"],
    "adres": {
        "sokak": "Gül Caddesi",
        "kapiNo": 123,
        "sehir": "İstanbul"
    }
}

Yukarıdaki örnekte görebileceğiniz gibi, JSON yapısı son derece esnektir. Nesneler (objects) ve listeler (arrays) birbiri içine sınırsız defa içi içe geçecek şekilde (nested) yerleştirilebilir,. Bir nesne başka bir nesneyi barındırabilir veya bir liste diğer listeleri/nesneleri içerebilir.

4. JavaScript ile JSON İşlemleri: parse() ve stringify()

İnternet ortamında iki sistem (örneğin sizin tarayıcınız ve uzak bir sunucu) birbiriyle konuşurken verileri her zaman bir metin (string) olarak gönderip alırlar. Elinizde harika yapılandırılmış bir JavaScript nesnesi olsa bile, bunu bir API’ye veya veritabanına göndermeden önce düz bir metne çevirmeniz gerekir. Aynı şekilde, karşıdan gelen bir metni de JavaScript kodunuzda kullanabilmek için tekrar nesneye dönüştürmeniz şarttır.

Bunun için JavaScript bize iki harika yerleşik metot sunar:

Veriyi JavaScript Nesnesine Çevirmek: JSON.parse()

Başka bir yerden (örneğin bir API’den) bir JSON dizgisi (string) aldığınızda, bunu kodunuzda işleyebilmek için JSON.parse() fonksiyonunu kullanırsınız. Bu metot, metin formatındaki JSON’u alır ve gerçek bir JavaScript nesnesine dönüştürür.

// Sunucudan metin olarak gelmiş bir JSON verisi
let gelenMetin = '{"isim": "Maaike", "yas": 30}';

// Metni JavaScript nesnesine dönüştürüyoruz
let kullaniciObjesi = JSON.parse(gelenMetin);

console.log(kullaniciObjesi.isim + " " + kullaniciObjesi.yas + " yaşındadır.");
// Çıktı: Maaike 30 yaşındadır.

Yukarıdaki örnekte dönüştürme işlemi (parse) yapıldıktan sonra, veri artık bir metin olmaktan çıkmış ve özellikleri okunabilen, değiştirilebilen (kullaniciObjesi.isim gibi) bir nesneye dönüşmüştür.

Veriyi Metne Çevirmek: JSON.stringify()

Kodumuzun içinde üzerinde çalıştığımız, güncellediğimiz bir nesnemiz olduğunu ve bunu sunucuya kaydetmek istediğimizi düşünelim. Göndermeden önce bu nesneyi bir JSON metnine çevirmeliyiz. Bu işlem için JSON.stringify() metodunu kullanırız.

let kopek = {
    "isim": "Wiesje",
    "cins": "Dachshund"
};

// JavaScript nesnesini JSON metnine çeviriyoruz
let metinKopek = JSON.stringify(kopek);

console.log(typeof metinKopek); // Çıktı: string
console.log(metinKopek); // Çıktı: {"isim":"Wiesje","cins":"Dachshund"}

Gördüğünüz gibi, JSON.stringify() işlemi nesnenin türünü bir metne (string) çevirir. Artık bu metni bir veritabanına kaydedebilir veya internet üzerinden bir API’ye güvenle gönderebilirsiniz.

5. Gerçek Hayattan Bir Uygulama: JSON ve LocalStorage

JSON dönüştürme metotlarının en çok kullanıldığı yerlerden biri, tarayıcının yerel hafızası olan LocalStorage‘dır. Kullanıcının web sitenizde yaptığı seçimleri veya alışveriş sepetini, sayfayı yenilese bile kaybetmemesi için LocalStorage kullanılır.

Ancak LocalStorage’ın bir kısıtlaması vardır: İçerisine sadece düz metin (string) kabul eder. Eğer siz bir görev listesini (görevlerden oluşan bir dizi veya nesneyi) doğrudan LocalStorage’a kaydetmeye çalışırsanız hata alırsınız.

İşte JSON tam bu noktada günü kurtarır:

1. Kaydetmek istediğiniz JavaScript dizisini (örneğin bir yapılacaklar listesi – tasks array) alırsınız.
2. JSON.stringify(tasks) komutunu kullanarak bu diziyi JSON metnine çevirip localStorage.setItem() ile tarayıcıya kaydedersiniz,.
3. Kullanıcı siteye tekrar girdiğinde, localStorage.getItem() ile bu metni geri okursunuz.
4. Okuduğunuz metni JSON.parse() komutuyla tekrar JavaScript dizisine (objesine) dönüştürerek ekrana kaldığı yerden basarsınız.

Sonuç

Veri yapıları ve JSON, modern web geliştirmenin tartışmasız temel taşlarıdır. Cihazlar, tarayıcılar ve devasa sunucular, dünyadaki tüm işlemleri bu hafif ve standart metin formatı (JSON) üzerinden birbirlerine iletirler. JavaScript’in yerleşik parse() ve stringify() metotlarının nasıl çalıştığını kavramak, sunuculardan (API’lerden) canlı veriler çekip kullanıcı arayüzünüzü besleyen tam donanımlı uygulamalar (Web Apps) yazabilmeniz için atmanız gereken en büyük ve en önemli adımdır. Kendi tarayıcı konsolunuzda veya yazdığınız HTML dosyalarında küçük nesneler yaratıp bunları JSON formatına dönüştürerek ilk denemelerinizi rahatlıkla yapabilirsiniz!