Takip et

Object.values(): Nesne Değerlerine Erişmek

JavaScript’te nesneler, verileri anahtar-değer çiftleri halinde düzenlemek için temel yapı taşlarıdır. Uygulamalarımızda sıklıkla bu nes

JavaScript’te nesneler, verileri anahtar-değer çiftleri halinde düzenlemek için temel yapı taşlarıdır. Uygulamalarımızda sıklıkla bu nesnelerin içindeki verilere erişmemiz, onları işlememiz veya başka bir veri yapısına dönüştürmemiz gerekir. Geleneksel olarak, bu tür işlemler için for...in döngüsü veya Object.keys() gibi yöntemler kullanılırdı. Ancak ES2017 ile birlikte hayatımıza giren Object.values() ve Object.entries() yöntemleri, bu görevleri çok daha modern, okunabilir ve güvenli bir şekilde yapmamızı sağlayan güçlü araçlar sunar.

Bu rehberde, Object.values() ve Object.entries() yöntemlerinin ne işe yaradığını, nasıl kullanıldığını, pratik örneklerle senaryolarını ve ne zaman hangisini tercih etmeniz gerektiğini detaylı bir şekilde inceleyeceğiz. Ayrıca, bu yöntemlerin sağladığı avantajları ve JavaScript geliştirme sürecinizdeki yerini de ele alacağız.

Object.values(): Nesne Değerlerine Erişmek

Object.values() yöntemi, bir nesnenin kendi numaralandırılabilir (enumerable) string anahtarlı özelliklerinin değerlerinden oluşan bir dizi döndürür. Bu, bir nesnenin sadece değerlerine odaklanmanız gerektiğinde oldukça kullanışlıdır.

Kullanım ve Sözdizimi

Object.values() yöntemi, argüman olarak bir nesne alır ve bu nesnenin değerlerini içeren yeni bir dizi döndürür. Orijinal nesne üzerinde herhangi bir değişiklik yapmaz.


const user = {
    name: "Alice",
    age: 30,
    city: "New York"
};

const userValues = Object.values(user);
console.log(userValues); // Çıktı: ["Alice", 30, "New York"]

Gördüğünüz gibi, user nesnesinin anahtarları göz ardı edilerek sadece değerleri bir dizi olarak elde edildi.

Pratik Kullanım Senaryoları

Object.values(), özellikle aşağıdaki gibi durumlarda oldukça işe yarar:

1. Toplam Değer Hesaplama

Bir nesnenin içindeki sayısal değerlerin toplamını veya ortalamasını almak istediğinizde Object.values() ve reduce() yöntemlerini birleştirebilirsiniz.


const monthlySales = {
    january: 1200,
    february: 1500,
    march: 1000,
    april: 1800
};

const totalSales = Object.values(monthlySales).reduce((acc, current) => acc + current, 0);
console.log(Toplam Satış: ${totalSales} TL); // Çıktı: Toplam Satış: 5500 TL

2. Belirli Bir Değerin Var Olup Olmadığını Kontrol Etme

Bir nesnenin değerleri arasında belirli bir öğenin olup olmadığını kontrol etmek için Object.values() ile birlikte includes() veya some() gibi dizi yöntemlerini kullanabilirsiniz.


const productDetails = {
    id: "PROD123",
    name: "Akıllı Telefon",
    category: "Elektronik",
    inStock: true
};

const hasElectronicsCategory = Object.values(productDetails).includes("Elektronik");
console.log(Elektronik kategorisi mevcut mu? ${hasElectronicsCategory}); // Çıktı: Elektronik kategorisi mevcut mu? true

const hasFalseValue = Object.values(productDetails).some(value => value === false);
console.log(Nesnede 'false' değeri var mı? ${hasFalseValue}); // Çıktı: Nesnede 'false' değeri var mı? false

3. Değerleri Dönüştürme veya Filtreleme

Nesne değerlerini bir diziye dönüştürdükten sonra, map(), filter() gibi güçlü dizi yöntemlerini kullanarak üzerinde çeşitli işlemler yapabilirsiniz.


const studentScores = {
    math: 85,
    science: 92,
    history: 78,
    art: 95
};

// Sadece 90 ve üzeri puanları al
const highScores = Object.values(studentScores).filter(score => score >= 90);
console.log(Yüksek Puanlar: ${highScores}); // Çıktı: Yüksek Puanlar: 92,95

// Tüm puanları 5 puan artır
const updatedScores = Object.values(studentScores).map(score => score + 5);
console.log(Güncellenmiş Puanlar: ${updatedScores}); // Çıktı: Güncellenmiş Puanlar: 90,97,83,100

Object.entries(): Anahtar-Değer Çiftlerine Erişmek

Object.entries() yöntemi, bir nesnenin kendi numaralandırılabilir string anahtarlı özelliklerinin [anahtar, değer] çiftlerinden oluşan bir dizi döndürür. Bu yöntem, hem anahtarlara hem de değerlere aynı anda erişmeniz gerektiğinde vazgeçilmezdir.

Kullanım ve Sözdizimi

Object.entries() yöntemi, argüman olarak bir nesne alır ve her biri [anahtar, değer] şeklinde iki elemanlı bir dizi olan dizilerden oluşan yeni bir dizi döndürür.


const car = {
    brand: "Toyota",
    model: "Corolla",
    year: 2020
};

const carEntries = Object.entries(car);
console.log(carEntries);
/* Çıktı:
[
    ["brand", "Toyota"],
    ["model", "Corolla"],
    ["year", 2020]
]
*/

Object.entries()‘nin döndürdüğü bu yapı, for...of döngüsü ile birlikte dizi destructuring (yapı bozma) kullanarak kolayca iterate edilebilir.

Pratik Kullanım Senaryoları

Object.entries(), nesne verileri üzerinde daha karmaşık işlemler yapmak için idealdir:

1. Anahtar ve Değerleri Birlikte İşleme (for…of ile)

Nesnenin her bir anahtar-değer çiftini ayrı ayrı ele almanız gerektiğinde for...of döngüsü ile destructuring en zarif çözümü sunar.


const userInfo = {
    firstName: "John",
    lastName: "Doe",
    email: "john.doe@example.com"
};

for (const [key, value] of Object.entries(userInfo)) {
    console.log(${key}: ${value});
}
/* Çıktı:
firstName: John
lastName: Doe
email: john.doe@example.com
*/

2. Nesneyi Filtreleme veya Yeniden Oluşturma

Belirli koşullara uyan anahtar-değer çiftlerini seçerek yeni bir nesne oluşturmak için Object.entries(), filter() ve Object.fromEntries() yöntemlerini birleştirebilirsiniz.


const productConfig = {
    name: "Widget",
    version: "1.0.0",
    isActive: true,
    _internalId: "abc123xyz" // Dahili bir özellik
};

// Sadece görünen (public) özellikleri içeren yeni bir nesne oluştur
const publicConfig = Object.fromEntries(
    Object.entries(productConfig).filter(([key, value]) => !key.startsWith('_'))
);
console.log(publicConfig); // Çıktı: { name: "Widget", version: "1.0.0", isActive: true }

// Sadece string değerleri içeren yeni bir nesne oluştur
const stringValuesOnly = Object.fromEntries(
    Object.entries(productConfig).filter(([key, value]) => typeof value === 'string')
);
console.log(stringValuesOnly); // Çıktı: { name: "Widget", version: "1.0.0", _internalId: "abc123xyz" }

Object.fromEntries(), Object.entries()‘nin tersidir ve bir anahtar-değer çiftleri dizisinden yeni bir nesne oluşturur. Bu ikili, nesne dönüşümleri için çok güçlü bir kombinasyondur.

3. Nesneyi Map Yapısına Dönüştürme

JavaScript’in Map veri yapısı, anahtar-değer çiftlerini saklamak için tasarlanmıştır ve nesnelerden farklı olarak anahtarların sırasını garanti eder ve herhangi bir veri türünü anahtar olarak kullanabilir. Bir nesneyi kolayca Map‘e dönüştürmek için Object.entries()‘i kullanabilirsiniz.


const settings = {
    theme: "dark",
    notifications: true,
    language: "en"
};

const settingsMap = new Map(Object.entries(settings));
console.log(settingsMap); // Çıktı: Map(3) { 'theme' => 'dark', 'notifications' => true, 'language' => 'en' }
console.log(settingsMap.get('theme')); // Çıktı: dark

Object.values() ve Object.entries() Karşılaştırması: Ne Zaman Hangisini Kullanmalı?

Her iki yöntem de nesnelerle çalışmak için harika olsa da, farklı senaryolar için optimize edilmişlerdir. Doğru yöntemi seçmek, kodunuzun daha okunabilir ve verimli olmasını sağlar.

Object.values() ne zaman kullanılır?

  • Sadece nesnenin değerlerine ihtiyacınız olduğunda ve anahtarlar önemli olmadığında.
  • Değerler üzerinde toplama, ortalama alma, filtreleme, dönüştürme gibi dizi tabanlı işlemler yapmanız gerektiğinde.
  • Değerlerin belirli bir koşulu sağlayıp sağlamadığını hızlıca kontrol etmek istediğinizde.

Object.entries() ne zaman kullanılır?

  • Hem anahtarlara hem de değerlere aynı anda erişmeniz veya bunları birlikte işlemeniz gerektiğinde.
  • Nesneyi iterate ederken her bir anahtar-değer çifti üzerinde koşullu işlemler yapmanız gerektiğinde.
  • Nesneyi filtreleyerek veya değiştirerek yeni bir nesne oluşturmak istediğinizde (Object.fromEntries() ile birlikte).
  • Nesneyi başka bir anahtar-değer veri yapısına (örneğin Map) dönüştürmek istediğinizde.
  • HTML elementlerinin veri özelliklerini (data-*) dinamik olarak işlerken.

Diğer Nesne İterasyon Yöntemleriyle İlişkisi

Bu yöntemler, Object.keys() ile benzer bir amaca hizmet eder ancak farklı çıktılar sunar:

  • Object.keys(obj): Nesnenin anahtarlarını içeren bir dizi döndürür.
  • Object.values(obj): Nesnenin değerlerini içeren bir dizi döndürür.
  • Object.entries(obj): Nesnenin [anahtar, değer] çiftlerini içeren bir dizi döndürür.

Geleneksel for...in döngüsüne göre bu modern yöntemlerin avantajları şunlardır:

  • Güvenlik: Sadece nesnenin kendi özelliklerini (own properties) döndürürler, prototip zincirindeki özellikleri içermezler. for...in kullanırken hasOwnProperty() ile kontrol yapmak gerekebilir.
  • Sıra Garantisi: ES2015’ten itibaren, string anahtarlar için eklenme sırasına göre bir sıra garantisi sunarlar (sayısal anahtarlar önce gelir). for...in döngüsünde bu garanti daha zayıftır.
  • Dizi Yöntemleriyle Entegrasyon: Doğrudan dizi döndürdükleri için map(), filter(), reduce() gibi güçlü dizi yöntemleriyle zincirlenebilirler, bu da daha fonksiyonel ve okunabilir kod yazmayı sağlar.

Sonuç ve Sıkça Sorulan Sorular (SSS)

Object.values() ve Object.entries(), modern JavaScript geliştirmenin vazgeçilmez araçlarıdır. Nesnelerin içeriğini daha esnek, güvenli ve okunabilir bir şekilde manipüle etmemizi sağlarlar. Hangi yöntemi kullanacağınız, anahtarlara mı, değerlere mi yoksa her ikisine birden mi ihtiyacınız olduğuna bağlıdır. Bu yöntemleri etkin bir şekilde kullanarak, JavaScript kodunuzu daha fonksiyonel ve sürdürülebilir hale getirebilirsiniz.

Sıkça Sorulan Sorular (SSS)

H3 Object.values() ve Object.entries() hangi JavaScript versiyonunda tanıtıldı?

Bu yöntemler, ES2017 (ECMAScript 2017) ile tanıtılmıştır. Bu nedenle, eski tarayıcıları veya Node.js versiyonlarını hedefliyorsanız, uyumluluk için polyfill kullanmanız gerekebilir.

H3 Bu yöntemler sadece nesnenin kendi özelliklerini mi döndürür, yoksa prototip zincirindekileri de mi?

Her iki yöntem de sadece nesnenin kendi numaralandırılabilir (enumerable) string anahtarlı özelliklerini döndürür. Prototip zincirindeki özellikleri veya numaralandırılamayan (non-enumerable) özellikleri dikkate almazlar. Bu, for...in döngüsüne göre önemli bir güvenlik ve öngörülebilirlik avantajıdır.

H3 Döndürülen dizideki özelliklerin sırası garanti mi?

Evet, ES2015’ten itibaren JavaScript spesifikasyonu, string anahtarlı özelliklerin Object.keys(), Object.values() ve Object.entries() tarafından eklenme sırasına göre döndürüleceğini garanti eder. Sayısal anahtarlar her zaman önce, artan sırada gelir.

H3 Sembol anahtarlarını da döndürürler mi?

Hayır, Object.values() ve Object.entries() sadece string anahtarlı özellikleri döndürür. Sembol anahtarlı özellikleri almak için Object.getOwnPropertySymbols() yöntemini kullanmanız gerekir.

H3 Performans açısından Object.values()/entries() ile for…in arasında büyük bir fark var mı?

Çoğu durumda, tipik boyutlardaki nesneler için performans farkı ihmal edilebilir düzeydedir ve kodun okunabilirliği ile güvenliği daha önceliklidir. Çok büyük nesnelerle çalışırken veya performans kritik senaryolarda küçük farklar olabilir, ancak bu nadirdir ve genellikle mikro-optimizasyona girmeden önce başka darboğazlara bakmak daha mantıklıdır.

H3 Neden for…in yerine Object.values() veya Object.entries() kullanmalıyım?

Object.values() ve Object.entries(), for...in döngüsüne göre birkaç önemli avantaj sunar:

  • Sadece nesnenin kendi özelliklerini işler, prototip zincirindeki özellikleri atlar. Bu, istenmeyen yan etkileri önler.
  • Döndürdükleri diziler üzerinde map(), filter(), reduce() gibi dizi yöntemlerini doğrudan kullanabilirsiniz.
  • Özelliklerin sırası daha öngörülebilirdir.
  • Kodunuzu daha modern ve fonksiyonel bir stil ile yazmanıza olanak tanır.

Yorumlar
İçeriği beğendiniz mi? Bir tartışma başlatın veya görüşlerinizi paylaşın.
Yorum Yaz

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

E-posta Bülteni
Yazılım Topluluğuna Katılın
En son güncellemeleri, yaratıcı ipuçlarını ve özel kaynakları doğrudan e-posta kutunuza alın. Tasarım ve inovasyonun geleceğini birlikte keşfedelim.