JavaScript Dersleri

JavaScript’te Fonksiyon Alan Dizi Metotları

eminbasbayan

eminbasbayan

4 dk okuma
JavaScript’te Fonksiyon Alan Dizi Metotları
🔍 Büyütmek için tıklayın

JavaScript'te program yazarken en sık kullandığımız veri yapılarından biri dizilerdir (arrays). Diziler, birden fazla veriyi tek bir yerde saklamamıza olanak tanır. Örneğin, bir alışveriş sepetindeki ürünler, bir öğrencinin aldığı notlar ya da bir kitap listesindeki kitaplar bir dizide tutulabilir.

Bu dizilerle etkili şekilde çalışabilmek için JavaScript bize bazı hazır metotlar (yöntemler) sunar. Bu metotlardan bazıları, çalışmak için bir fonksiyona ihtiyaç duyar. Bu yazıda, dizi metotlarına fonksiyon geçmenin mantığını ve bu metotlarla birlikte sıklıkla kullanılan arrow function (ok fonksiyonu) yapısını adım adım öğreneceğiz. Ayrıca, diziyi doğrudan değiştiren ve değiştirmeyen metotlar arasındaki farkı da örneklerle inceleyeceğiz.

1. Neden Fonksiyon Veriyoruz?

JavaScript'te bazı metotlar, dizi elemanlarıyla ne yapılacağını sizin tanımlamanızı ister. Yani "her bir elemanla ne yapılacak?" sorusunun cevabını, bir fonksiyon yazarak metota verirsiniz. Bu fonksiyon, dizi içindeki her eleman için çalıştırılır.

Mantık şudur:

  1. Diziye ait bir metot çağrılır.
  2. Bu metot, her bir eleman için verdiğiniz fonksiyonu çalıştırır.
  3. Fonksiyonun dönüş değerine göre işlem yapılır (örneğin filtreleme, dönüştürme ya da kontrol etme).

2. Değiştirmeyen Metotlar

filter(), map() ve find() gibi metotlar, üzerinde işlem yaptıkları ana diziyi değiştirmez, bunun yerine her zaman yeni bir dizi veya değer döndürürler. Bu metotlar, orijinal veriyi koruyarak çalışmak için idealdir.

Örnek: filter() Metodu

filter() metodu, bir dizideki elemanları süzmek için kullanılır. Sadece belirli şartlara uyan elemanları almak istediğinizde bu metot devreye girer.

Senaryo:

Bir kütüphanede yüzlerce kitap var. Ama siz sadece 300 sayfadan fazla olanları listelemek istiyorsunuz.

const kitaplar = [ { ad: "Beyaz Diş", sayfa: 180 }, { ad: "1984", sayfa: 326 }, { ad: "Dönüşüm", sayfa: 150 }, { ad: "Suç ve Ceza", sayfa: 430 } ]; const uzunKitaplar = kitaplar.filter(function(kitap) { return kitap.sayfa > 300; }); console.log(uzunKitaplar); // Çıktı: // [ { ad: "1984", sayfa: 326 }, { ad: "Suç ve Ceza", sayfa: 430 } ] console.log(kitaplar); // Çıktı: /* [ { ad: "Beyaz Diş", sayfa: 180 }, { ad: "1984", sayfa: 326 }, { ad: "Dönüşüm", sayfa: 150 }, { ad: "Suç ve Ceza", sayfa: 430 } ] */

Bu örnekte, filter() metodu yeni bir dizi olan uzunKitaplar dizisini oluşturdu. Orijinal kitaplar dizisi ise değişmeden kaldı.

3. Arrow Function (Ok Fonksiyonu) ile Kısaltma

Yukarıdaki örnekte klasik function söz dizimini kullandık. Modern JavaScript'te bunu arrow function ile daha kısa ve anlaşılır yazabiliriz:

const uzunKitaplar = kitaplar.filter(kitap => kitap.sayfa > 300);

Arrow function'ın avantajları:

  • function kelimesine gerek yoktur.
  • Tek satırlık dönüşlerde return yazmanıza gerek yoktur.
  • Kod daha sade ve okunabilir olur.

4. Ana Diziyi Değiştiren Metotlar

Bazı dizi metotları ise, filter() gibi yeni bir dizi döndürmek yerine doğrudan ana diziyi değiştirir (mutate). Bu metotları kullanırken dikkatli olmalısınız çünkü orijinal veriniz kalıcı olarak değişebilir. push(), pop(), splice(), sort() ve reverse() gibi metotlar bu kategoriye girer.

Örnek: sort() Metodu

sort() metodu, bir dizinin elemanlarını sıralamak için kullanılır. Varsayılan olarak, elemanları string'e dönüştürerek alfabetik olarak sıralar. Sayısal sıralama için ise bir fonksiyon geçmeniz gerekir.

Senaryo:

Öğrenci notlarını küçükten büyüğe sıralamak istiyorsunuz.

const notlar = [45, 67, 30, 88, 54, 40]; // Klasik fonksiyon sözdizimi ile sıralama notlar.sort(function(a, b) { return a - b; }); console.log(notlar); // Çıktı: // [30, 40, 45, 54, 67, 88]

5. Fonksiyon Alan Dizi Metotları ve Özeti

JavaScript'te birçok dizi metodu fonksiyon parametresi alır. En sık kullanılanlar aşağıdaki tabloda özetlenmiştir:

MetotAçıklamaAna Diziyi Değiştirir mi?
forEach()Her elemanı tek tek dolaşır.Hayır
map()Her elemanı dönüştürerek yeni bir dizi döner.Hayır
filter()Şartı sağlayanları yeni bir dizi olarak döner.Hayır
find()İlk uygun elemanı döner.Hayır
some()En az bir eleman şartı sağlıyorsa true döner.Hayır
every()Tüm elemanlar şartı sağlıyorsa true döner.Hayır
reduce()Diziyi tek bir değere indirger.Hayır
sort()Diziyi yerinde sıralar.Evet
splice()Diziden eleman ekler/çıkarır.Evet
reverse()Dizinin sırasını tersine çevirir.Evet

6. Sonuç

Artık sadece klasik for döngülerine bağlı kalmanıza gerek yok. map, filter, reduce gibi modern dizi metotları sayesinde işlemleri çok daha kısa ve anlaşılır yazabilirsiniz. Bu metotları kullanırken, ana diziyi değiştirip değiştirmediklerini bilmek kritik öneme sahiptir.

  • Fonksiyonlar, dizi metotlarının kalbidir.
  • Arrow function, bu fonksiyonları daha pratik yazmanızı sağlar.
  • Diziyi değiştiren metotları kullanırken, orijinal veriyi korumak için dizinin bir kopyasıyla çalışmayı unutmayın.

Bu kavramları iyi kavradığınızda, JavaScript dizilerini çok daha güçlü ve etkili bir şekilde kullanabilirsiniz.

Etiketler

#Eğitimler#JavaScript Dersleri

İlgili Yazılar

Bu konuyla ilgili diğer yazılarımızı da inceleyebilirsiniz

Web Geliştirmede Neden JavaScript'e İhtiyacımız Var?
JavaScript Dersleri

Web Geliştirmede Neden JavaScript'e İhtiyacımız Var?

Web geliştirme, temel olarak üç ana yapı taşı üzerine kuruludur: **HTML, CSS ve JavaScript**. Bu üçlüden **HTML**, sayfanın iskeletini oluşturur, **CSS**, tasarımı ve görsel düzenlemeleri yapar

2 dk
JavaScript'e Giriş: JavaScript Nedir?
JavaScript Dersleri

JavaScript'e Giriş: JavaScript Nedir?

Web geliştirme yolculuğunuzda büyük bir adım atıyorsunuz! HTML ve CSS ile statik web sayfaları oluşturmayı öğrendiniz, ancak şimdi JavaScript ile sayfanıza hareket ve etkileşim katmanını eklemeye hazırsınız. JavaScript, web sayfalarını dinamik hale getiren ve kullanıcı etkileşimlerini yöneten

3 dk
JavaScript Değişkenler (Variables) Nedir?
JavaScript Dersleri

JavaScript Değişkenler (Variables) Nedir?

JavaScript, web geliştirme dünyasının en önemli dillerinden biridir. Dinamik web siteleri, interaktif uygulamalar, oyunlar ve animasyonlar gibi birçok alanda kullanılır. Ancak, bu tür gelişmiş uygulamalar oluşturabilmek için önce JavaScript'in temellerini anlamak gerekir. Bu

4 dk
JavaScript İlkel (Primitive) Veri Tipleri
JavaScript Dersleri

JavaScript İlkel (Primitive) Veri Tipleri

JavaScript, modern web geliştirmede vazgeçilmez bir programlama dilidir. Web sitelerini daha dinamik hale getirmek, etkileşim eklemek ve hatta oyunlar ve uygulamalar geliştirmek için kullanılır. Ancak, bu eğlenceli ve güçlü özelliklere ulaşmadan önce, JavaScript'in temellerin

4 dk
JavaScript'te Sayılar ve Matematiksel Operatörler
JavaScript Dersleri

JavaScript'te Sayılar ve Matematiksel Operatörler

JavaScript, modern web geliştirmede en yaygın kullanılan programlama dillerinden biridir. Bu dilde çalışırken sayılarla sıkça işlem yaparız. İster bir hesap makinesi uygulaması geliştiriyor olun, ister bir oyundaki puan sistemini kodluyor olun, sayılar kaçınılmaz bir parçadır. JavaScri

4 dk
JavaScript'te Boolean Veri Tipi
JavaScript Dersleri

JavaScript'te Boolean Veri Tipi

JavaScript'ı öğrenmeye yeni başlayanlar için veri tipleri oldukça önemlidir. Bu yazıda, en temel veri tiplerinden biri olan **Boolean (mantıksal) değerleri** inceleyeceğiz. Boolean değerleri, programlamada sıklıkla kullanılan ve kodlarımızın man

3 dk