JavaScript Academy · Ders

Bildirimsel Veri Dönüşümü

Verileri map, filter ve reduce ile dönüştürün.

Bildirimsel Veri Dönüşümü, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Bildirimsel ve Buyrukçu Kod

Buyrukçu kod HOW der (döngüler, sayaçlar, değişiklikler). Bildirimsel kod WHAT der. map, filter ve reduce gibi dizi yöntemleri, elle döngü yazmadan dönüşümleri açıklamanızı sağlar.

const nums = [1, 2, 3, 4];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]

map: Her Öğeyi Dönüştürme

map, aynı uzunlukta yeni bir dizi döndürür; her öğe işleviniz tarafından dönüştürülür. Özgün diziye dokunulmaz.

const names = ["ada", "bob"];
const upper = names.map((n) => n.toUpperCase());
console.log(upper); // ["ADA", "BOB"]
console.log(names); // unchanged

filter: Bazı Öğeleri Tutma

filter, koşul işlevinizin doğru kabul edilen bir değer döndürdüğü öğeleri içeren yeni bir dizi döndürür.

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]

reduce: Tek Bir Değerde Birleştirme

reduce, biriktirme yoluyla bir diziyi tek bir değere indirger. Bir indirgeme işlevi ve başlangıç değeri sağlayın.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

İşlemleri Zincirleme

Her yöntem yeni bir dizi döndürdüğü için bunları, yukarıdan aşağıya okunan anlaşılır bir işlem hattında zincirleyebilirsiniz.

const nums = [1, 2, 3, 4, 5, 6];
const result = nums
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
console.log(result); // [20, 40, 60]

Gerçekçi Bir İşlem Hattı

Bir veri kümesiyle ilgili bir soruyu tek bir ifadede yanıtlamak için filter, map ve reduce işlemlerini birleştirin.

const orders = [
  { item: "pen", price: 3, paid: true },
  { item: "ink", price: 8, paid: false },
  { item: "pad", price: 5, paid: true }
];
const paidTotal = orders
  .filter((o) => o.paid)
  .map((o) => o.price)
  .reduce((a, p) => a + p, 0);
console.log(paidTotal); // 8

Yeni Biçimlere Eşleme

map yalnızca sayıları değil, nesneleri de yeniden biçimlendirebilir. Her kaydı, ihtiyacınız olan alanlara yansıtın.

const users = [{ id: 1, name: "Ada", age: 36 }];
const summary = users.map((u) => ({ id: u.id, label: u.name }));
console.log(summary); // [{ id: 1, label: "Ada" }]

reduce Her Şeyi Oluşturabilir

reduce yalnızca toplamlar için kullanılmaz. Nesneler oluşturabilir, verileri gruplayabilir veya hatta map ile filter işlemlerini yeniden uygulayabilir.

const words = ["a", "bb", "a", "ccc"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(counts); // { a: 2, bb: 1, ccc: 1 }

Sıra Önemlidir

Eşlemden önce süzme yapmak, atacağınız öğeleri dönüştürmenizi önler. Açıklık ve verimlilik için ucuz süzgeçleri zincirin başına koyun.

const data = [1, 2, 3, 4, 5];
const out = data
  .filter((n) => n > 2)   // shrink first
  .map((n) => n * n);     // then transform
console.log(out); // [9, 16, 25]

Hiçbir Yerde Değişiklik Yapmama

Bu yöntemler kaynak diziyi hiçbir zaman değiştirmez. Bu da işlem hatlarını güvenli ve öngörülebilir kılar; işlevsel üsluba tam olarak uyar.

const src = [3, 1, 2];
const sorted = [...src].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(src);    // [3, 1, 2] untouched

İç İçe Sonuçlar için flatMap

Bir map işlemi diziler ürettiğinde flatMap, tek adımda eşleme yapar ve bir düzeyi düzleştirir.

const pairs = [1, 2, 3].flatMap((n) => [n, n * 10]);
console.log(pairs); // [1, 10, 2, 20, 3, 30]

Hızlı Kontrol

Bildirimsel dönüşümler.

Özet

Bildirimsel dönüşüm HOW yerine WHAT'ı açıklar. map dönüştürür, filter seçer ve reduce tek bir değerde birleştirir; bunları anlaşılır işlem hatlarında zincirleyin. Hiçbiri kaynağı değiştirmez, erken süzme verimlidir ve reduce her türlü yapıyı oluşturabilir. Bir map işlemi diziler ürettiğinde flatMap kullanın.

Sıkça Sorulan Sorular

“Bildirimsel Veri Dönüşümü” dersi ücretsiz mi?

Evet — “Bildirimsel Veri Dönüşümü” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Bildirimsel Veri Dönüşümü” dersinde ne öğreneceğim?

Verileri map, filter ve reduce ile dönüştürün. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Bildirimsel Veri Dönüşümü” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön