Web sayfaları, tarayıcılar tarafından yüklenirken bir Belge Nesne Modeli (DOM) olarak yapılandırılır. Bu model, HTML belgesinin mantıksal yapısını temsil eder ve JavaScript'in web sayfasının içeriğine, yapısına ve stiline dinamik olarak erişmesini ve bunları değiştirmesini sağlayan bir API (Uygulama Programlama Arayüzü) sunar. Bu makale, JavaScript kullanarak HTML DOM ile nasıl etkileşim kuracağınızı, elementleri nasıl seçeceğinizi, içeriklerini ve stillerini nasıl değiştireceğinizi ve olayları nasıl yöneteceğinizi adım adım açıklayacaktır.

Temel Sözdizimi

JavaScript'in DOM ile etkileşim kurmasının temelinde, belgedeki HTML elementlerini seçmek ve ardından bu elementlerin özelliklerine veya metotlarına erişmek yatar. Aşağıdaki sözdizimleri, en yaygın DOM seçim ve manipülasyon yöntemlerini özetlemektedir:

// Element seçimi
document.getElementById("elementId");
document.getElementsByClassName("className");
document.getElementsByTagName("tagName");
document.querySelector("cssSelector");
document.querySelectorAll("cssSelector");

// Element özellikleri ve metotları
element.innerHTML;
element.textContent;
element.style.propertyName;
element.setAttribute("attributeName", "value");
element.classList.add("className");
element.addEventListener("eventName", functionHandler);
document.createElement("tagName");
parentElement.appendChild(childElement);
parentElement.removeChild(childElement);

Detaylı Açıklama

• document Nesnesi: DOM'a erişimin ana giriş noktasıdır. Tüm HTML belgesini temsil eder.

• Element Seçim Metotları:

  • document.getElementById("elementId"): Belirtilen id niteliğine sahip tek bir elementi döndürür. id'ler bir sayfada benzersiz olmalıdır.

  • document.getElementsByClassName("className"): Belirtilen sınıf adına sahip tüm elementleri içeren bir HTMLCollection döndürür. Canlı bir koleksiyondur, yani DOM'daki değişiklikler koleksiyonu otomatik olarak günceller.

  • document.getElementsByTagName("tagName"): Belirtilen etiket adına sahip tüm elementleri içeren bir HTMLCollection döndürür.

  • document.querySelector("cssSelector"): Belirtilen CSS seçici ile eşleşen belgedeki ilk elementi döndürür.

  • document.querySelectorAll("cssSelector"): Belirtilen CSS seçici ile eşleşen tüm elementleri içeren bir NodeList döndürür. Statik bir koleksiyondur.

• Element Özellikleri ve Metotları:

  • element.innerHTML: Bir elementin HTML içeriğini (alt elementler dahil) alır veya ayarlar. HTML etiketlerini yorumlar.

  • element.textContent: Bir elementin ve tüm alt elementlerinin metin içeriğini alır veya ayarlar. HTML etiketlerini metin olarak ele alır.

  • element.style.propertyName: Bir elementin CSS stil özelliklerine erişim sağlar. Örneğin, element.style.backgroundColor = "red";.

  • element.setAttribute("attributeName", "value"): Bir elementin belirtilen niteliğini ayarlar veya günceller. Örneğin, element.setAttribute("href", "https://example.com");.

  • element.classList: Bir elementin CSS sınıflarını yönetmek için bir dizi metot (add, remove, toggle, contains) sunar.

  • element.addEventListener("eventName", functionHandler): Bir elemente olay dinleyicisi ekler. Örneğin, bir butona tıklama olayını dinlemek için "click" kullanılır.

  • document.createElement("tagName"): Belirtilen etiket adıyla yeni bir HTML elementi oluşturur.

  • parentElement.appendChild(childElement): Belirtilen bir çocuğu, belirtilen ana elementin son çocuğu olarak ekler.

  • parentElement.removeChild(childElement): Belirtilen ana elementten belirtilen çocuğu kaldırır.

Pratik Kullanım Örnekleri

Aşağıdaki örnekler, JavaScript'in DOM ile nasıl etkileşim kurduğunu göstermektedir.

Örnek 1: Bir HTML Elementinin İçeriğini Güncelleme

Bu örnekte, bir paragraf elementinin metin içeriği JavaScript ile değiştirilmektedir.

Merhaba Dünya!

Örnek 2: Bir Elementin Stilini Değiştirme

Bu örnek, bir

    Bu bir kutu.

    
Mevcut Öğeler

Bana Tıkla
Henüz tıklanmadı.

Örnek 2: Giriş Alanı Değişikliği

Bir metin giriş alanındaki değer her değiştiğinde bu değişikliği yakalayan bir örnek.

Girilen Değer: 

Örnek 3: Fare Üzerine Gelme ve Ayrılma

Bir öğenin üzerine fare imleci geldiğinde ve ayrıldığında farklı işlevleri çalıştıran bir örnek.

    Fareyi Üzerime Getir

Önemli Notlar

• Dinleyiciyi Kaldırma: Performans ve bellek sızıntılarını önlemek için, özellikle tek seferlik olaylarda veya bileşenler kaldırıldığında EventTarget.removeEventListener() metodunu kullanarak olay dinleyicilerini kaldırmak önemlidir. addEventListener ile aynı argümanlar kullanılmalıdır (aynı fonksiyon referansı dahil).

• Olay Nesnesi: Olay dinleyici fonksiyonuna otomatik olarak geçirilen Event nesnesi, olayın türü (event.type), hedefi (event.target), tuş bilgisi (event.key, event.keyCode) gibi değerli bilgiler içerir.

• event.preventDefault(): Bazı olayların varsayılan tarayıcı davranışları vardır (örneğin, bir bağlantıya tıklamak sizi başka bir sayfaya götürür veya bir form göndermek sayfayı yeniler). Bu varsayılan davranışları durdurmak için olay nesnesi üzerindeki event.preventDefault() metodunu kullanabilirsiniz.

• Olay Kabarcıklanması ve Yakalama: Olaylar, DOM ağacında yukarı (kabarcıklanma) veya aşağı (yakalama) doğru yayılır. addEventListener metodunun üçüncü argümanı (veya options nesnesindeki capture özelliği) bu davranışı kontrol etmenizi sağlar. Çoğu durumda, varsayılan kabarcıklanma davranışı yeterlidir.

• this Anahtar Kelimesi: Bir olay dinleyicisi içinde this anahtar kelimesi, olayın gerçekleştiği DOM öğesini (event.currentTarget) ifade eder. Ancak, arrow fonksiyonlar kullanıldığında this, tanımlandığı kapsayıcı kapsamı korur.

Modern web uygulamalarının karmaşıklığı, beklenmedik durumların veya hataların ortaya çıkma olasılığını artırmaktadır. JavaScript, bu tür durumları yönetmek için yerleşik bir mekanizma sunar: Error nesnesi. Bu nesne, çalışma zamanı hatalarını temsil etmek, onları yakalamak ve uygun şekilde ele almak için kritik bir araçtır. Uygulama kararlılığını ve kullanıcı deneyimini sağlamak adına Error nesnesinin etkin kullanımı, her JavaScript geliştiricisinin sahip olması gereken temel bir yetkinliktir.

Hata Nesnesinin Sözdizimi

JavaScript'te bir hata nesnesi oluşturmak için Error yapıcısını (constructor) kullanırız. Bu, programatik olarak bir hata durumunu belirtmenin en yaygın yoludur.

new Error([message[, fileName[, lineNumber]]])

Detaylı Açıklama

Error yapıcısının aldığı parametreler ve Error nesnesinin temel özellikleri aşağıda detaylandırılmıştır:

• message: Hatanın kısa ve açıklayıcı bir metinle ifade edildiği bir String değeridir. Hata nesnesinin temel içeriğini oluşturur.

• fileName (İsteğe Bağlı): Hatanın meydana geldiği dosyanın yolunu belirten bir String değeridir. Genellikle hata yakalama mekanizmaları tarafından otomatik olarak doldurulur.

• lineNumber (İsteğe Bağlı): Hatanın meydana geldiği dosyadaki satır numarasını belirten bir Number değeridir. Bu da genellikle otomatik olarak atanır.

Error nesnesinin kendisi, bu parametrelere ek olarak iki önemli özelliğe sahiptir:

• name: Hata türünün adını belirten bir String değeridir (örneğin, 'Error', 'TypeError', 'ReferenceError'). Özel hata türleri oluşturulduğunda bu özellik özelleştirilebilir.

• stack: Hatanın çağrı yığınını (call stack) gösteren bir String değeridir. Hatanın nerede ve nasıl oluştuğunu anlamak için son derece faydalıdır.

Pratik Kullanım Örnekleri

Aşağıdaki örnekler, Error nesnesinin JavaScript uygulamalarında nasıl kullanılabileceğini göstermektedir.

Örnek 1: Temel Hata Fırlatma ve Yakalama

Bir fonksiyonun belirli bir koşulu karşılamadığı durumlarda programın akışını durdurmak ve bir hata durumu bildirmek için throw new Error() kullanılır. try...catch bloğu ile bu hatalar yakalanabilir.

function bolmeIslemi(sayi1, sayi2) {
  if (sayi2 === 0) {
    throw new Error("Sıfıra bölme hatası: Bölen sıfır olamaz.");
  }
  return sayi1 / sayi2;
}

try {
  console.log(bolmeIslemi(10, 2)); // Çıktı: 5
  console.log(bolmeIslemi(10, 0)); // Bu satır bir hata fırlatacak
} catch (e) {
  console.error("Bir hata oluştu:", e.message);
  console.error("Hata adı:", e.name);
  console.error("Hata yığını:", e.stack);
}

Örnek 2: Özel Hata Türü Oluşturma

Uygulamaya özgü hata durumlarını daha spesifik bir şekilde yönetmek için Error nesnesinden türetilmiş özel hata sınıfları oluşturulabilir. Bu, hata türlerinin daha kolay ayırt edilmesini ve işlenmesini sağlar.

class GecersizGirdiHatasi extends Error {
  constructor(message) {
    super(message);
    this.name = "GecersizGirdiHatasi"; // Hatanın adını özelleştiriyoruz
  }
}

function veriIsle(veri) {
  if (typeof veri !== 'number' || veri < 0) {
    throw new GecersizGirdiHatasi("Girdi pozitif bir sayı olmalıdır.");
  }
  return veri * 2;
}

try {
  console.log(veriIsle(5)); // Çıktı: 10
  console.log(veriIsle(-3)); // Bu satır özel bir hata fırlatacak
} catch (e) {
  if (e instanceof GecersizGirdiHatasi) {
    console.error("Geçersiz girdi hatası yakalandı:", e.message);
  } else {
    console.error("Beklenmeyen bir hata oluştu:", e.message);
  }
}

Örnek 3: try...catch...finally Kullanımı

try...catch...finally yapısı, hata oluşsa da oluşmasa da belirli kod bloklarının çalıştırılmasını garanti eder. Bu, kaynakları temizlemek veya bazı işlemleri tamamlamak için kullanışlıdır.

function dosyaOku(dosyaAdi) {
  let dosyaAcik = false;
  try {
    console.log(`${dosyaAdi} dosyası açılıyor...`);
    dosyaAcik = true;

    // Simulate an error
    if (dosyaAdi === "hatali.txt") {
      throw new Error("Dosya okunamadı: Erişim reddedildi.");
    }

    console.log(`${dosyaAdi} dosya içeriği işleniyor.`);
    return "Dosya içeriği...";
  } catch (e) {
    console.error("Hata:", e.message);
    return null;
  } finally {
    if (dosyaAcik) {
      console.log(`${dosyaAdi} dosyası kapatılıyor.`);
    }
  }
}

console.log(dosyaOku("veri.txt"));
console.log("\n--- Yeni İşlem ---\n");
console.log(dosyaOku("hatali.txt"));

Önemli Notlar ve İpuçları

• Spesifik Hata Türleri Kullanımı: JavaScript, TypeError, ReferenceError, RangeError gibi çeşitli yerleşik hata türleri sunar. Mümkün olduğunca hatanın doğasına uygun spesifik hata türlerini kullanmaya özen gösterin. Bu, hata ayıklamayı ve hata işleme mantığını basitleştirir.

• Hataları Bastırmayın: Bir try...catch bloğunda hatayı yakalayıp hiçbir işlem yapmamak (boş bırakmak), uygulamanızdaki sorunların gizlenmesine neden olur. Hataları her zaman uygun bir şekilde günlüğe kaydedin veya kullanıcıya bildirin.

• finally Bloğunun Önemi: Kaynakları (dosya bağlantıları, ağ istekleri vb.) serbest bırakmak veya belirli bir işlemi tamamlamak için finally bloğunu kullanın. Bu blok, hata oluşsa da oluşmasa da her zaman çalıştırılır.

• Geniş Kapsamlı try...catch Bloklarından Kaçının: Tüm uygulamanızı tek bir try...catch bloğuna sarmak, hangi hatanın nerede meydana geldiğini anlamayı zorlaştırır. Hata yakalama bloklarınızı, hata potansiyeli olan belirli işlevlere veya kod parçalarına odaklayın.

• Üretim Ortamında Hata İzleme: Canlı sistemlerde oluşan hataları izlemek için Sentry, Bugsnag gibi üçüncü taraf hata izleme hizmetlerini kullanmayı düşünün. Bu hizmetler, hata raporlarını toplar, analiz eder ve geliştiricilere anında bildirimler gönderir.

JavaScript'te düzenli ifadeler (Regular Expressions veya kısaca RegExp), metin içindeki desenleri eşleştirmek, aramak, değiştirmek ve doğrulamak için güçlü bir araçtır. Bu kılavuz, JavaScript ortamında RegExp'in nasıl tanımlandığını ve kullanıldığını, temel sözdiziminden başlayarak çeşitli metotlarla pratik uygulamalarına kadar adım adım açıklamaktadır.

Temel Sözdizimi

JavaScript'te düzenli ifadeler iki ana şekilde oluşturulabilir: bir RegExp literal'i veya RegExp kurucusu kullanılarak.

Bir RegExp literal'i, deseni iki eğik çizgi (/) arasına alarak oluşturulur ve isteğe bağlı olarak sonuna bayraklar eklenir:

/desen/bayraklar

Bir RegExp kurucusu ise, deseni ve bayrakları string olarak alır:

new RegExp("desen", "bayraklar")

Literal kullanımı genellikle daha basit ve performanttır, ancak desenin veya bayrakların çalışma zamanında dinamik olarak oluşturulması gerektiğinde kurucu yöntemi tercih edilir.

Detaylı Açıklama

Yukarıdaki sözdiziminde yer alan desen ve bayraklar bileşenleri aşağıdaki gibi açıklanabilir:

• Desen (Pattern): Eşleştirilmek istenen karakter dizilerini veya kalıpları tanımlar. Bu, sabit karakterler, özel karakterler (örneğin, . herhangi bir karakteri eşleştirmek için), niceleyiciler (örneğin, + bir veya daha fazla kez eşleştirmek için) ve karakter sınıfları (örneğin, [0-9] bir rakamı eşleştirmek için) içerebilir.

  
  

• Bayraklar (Flags): Düzenli ifadenin eşleştirme davranışını değiştiren isteğe bağlı tek karakterlerdir. En yaygın kullanılan bayraklar şunlardır:

  
  

  • g (global): Desenin tüm eşleşmelerini bulur, ilk eşleşmeden sonra durmaz.

    
    

  • i (case-insensitive): Büyük/küçük harf duyarsız eşleştirme yapar.

    
    

  • m (multiline): Çok satırlı giriş dizilerinde ^ ve $ karakterlerinin her satırın başında ve sonunda eşleşmesini sağlar.

    
    

  • u (unicode): Deseni Unicode kod noktaları dizisi olarak ele alır.

    
    

  • s (dotAll): . (nokta) karakterinin satır sonu karakterleri dahil herhangi bir karakterle eşleşmesini sağlar.

    
    

  • d (hasIndices): Eşleşen alt dizelerin başlangıç ve bitiş indekslerini içeren bir dizi döndürür.

    
    
  
  

Pratik Kullanım Örnekleri

JavaScript'teki string metotları, düzenli ifadelerle birlikte kullanılarak metin üzerinde çeşitli işlemler yapılmasına olanak tanır. İşte bazı temel metotlar ve örnek kullanımları:

1. RegExp.prototype.test(): Bir string'de bir desenin bulunup bulunmadığını kontrol eder ve bir boolean değer döndürür.

const desen = /elma/;
const metin1 = "Bugün elma yedim.";
const metin2 = "Bugün armut yedim.";

console.log(desen.test(metin1)); // true
console.log(desen.test(metin2)); // false

2. String.prototype.match(): Bir string'de deseni arar ve tüm eşleşmeleri içeren bir dizi döndürür. g bayrağı yoksa sadece ilk eşleşmeyi döndürür.

const desen = /elma/g;
const metin = "Yeşil elma, kırmızı elma ve sarı elma.";

const eslesmeler = metin.match(desen);
console.log(eslesmeler); // ["elma", "elma", "elma"]

const desenBuyukKucuk = /Elma/gi; // Büyük/küçük harf duyarsız ve global
const eslesmelerBuyukKucuk = metin.match(desenBuyukKucuk);
console.log(eslesmelerBuyukKucuk); // ["elma", "elma", "elma"]

3. String.prototype.replace(): Bir string'deki desene uyan kısımları başka bir string ile değiştirir.

const desen = /elma/g;
const metin = "Yeşil elma, kırmızı elma.";

const yeniMetin = metin.replace(desen, "armut");
console.log(yeniMetin); // "Yeşil armut, kırmızı armut."

const desenRakamlar = /\d+/g; // Bir veya daha fazla rakamı eşleştir
const metinRakamlar = "Toplam 123 adet ürün, fiyat 45.67 TL.";

const yeniMetinRakamlar = metinRakamlar.replace(desenRakamlar, "XXX");
console.log(yeniMetinRakamlar); // "Toplam XXX adet ürün, fiyat XXX.XX TL."

4. String.prototype.search(): Bir string'de deseni arar ve ilk eşleşmenin indeksini döndürür. Eşleşme bulunamazsa -1 döndürür. g bayrağı bu metot için anlamsızdır.

const desen = /kırmızı/;
const metin = "Yeşil elma, kırmızı elma.";

const indeks = metin.search(desen);
console.log(indeks); // 12 (k harfinin indeksi)

const desenYok = /mavi/;
const indeksYok = metin.search(desenYok);
console.log(indeksYok); // -1

5. String.prototype.split(): Bir string'i, belirtilen bir desen veya karakter dizisi kullanarak bir diziye böler.

const desen = /\s*,\s*/; // Virgül etrafındaki boşlukları da yakalar
const metin = "elma, armut , muz, kiraz";

const meyveler = metin.split(desen);
console.log(meyveler); // ["elma", "armut", "muz", "kiraz"]

const desenKarakter = /a/g; // Her 'a' karakterinden böl
const kelime = "banana";
const parcalar = kelime.split(desenKarakter);
console.log(parcalar); // ["b", "n", "n", ""] (son 'a'dan sonra boş string)

İpuçları ve Önemli Notlar

• Kaçış Karakterleri: Özel anlamı olan karakterleri (örneğin, ., *, +, ?, ^, $, (, ), [, ], {, }, |, \) desen içinde literal olarak kullanmak isterseniz, önüne ters eğik çizgi (\) ekleyerek kaçış yapmalısınız. Örneğin, bir noktayı (.) eşleştirmek için /\./ kullanın.

  
  

• Dinamik Desenler: Deseni bir string'den oluşturuyorsanız (new RegExp("desen")), bu string içindeki kaçış karakterlerini (\) iki kez kaçış yapmanız gerekebilir (örneğin, new RegExp("\\d+")).

  
  

• Performans: Çok karmaşık veya verimsiz düzenli ifadeler, özellikle büyük metinler üzerinde çalışırken performans sorunlarına neden olabilir. Deseninizi mümkün olduğunca spesifik ve basit tutmaya çalışın.

  
  

• Stateful RegExp: g bayrağına sahip bir RegExp nesnesi, lastIndex özelliğini günceller. Aynı RegExp nesnesini birden fazla kez test() veya exec() ile çağırırsanız, eşleşmeler bir önceki çağrının bittiği yerden devam eder. Bu durum, beklenmedik sonuçlara yol açabilir, bu yüzden dikkatli olun veya her kullanımda yeni bir RegExp literal'i oluşturmayı düşünün.

  
  

• Online Araçlar: Düzenli ifadeleri test etmek ve geliştirmek için Regex101 veya RegExr gibi çevrimiçi araçları kullanmak, karmaşık desenleri anlamanıza ve hata ayıklamanıza yardımcı olabilir.

  
  

JavaScript, web uygulamalarının dinamik etkileşimini sağlayan güçlü bir dil olmakla birlikte, karmaşık matematiksel hesaplamalar için de sağlam bir temel sunar. Bu bağlamda, JavaScript'in yerleşik Math nesnesi, standart matematiksel işlevleri ve sabitleri programcıların kullanımına sunarak, sayısal işlemlerin kolay ve verimli bir şekilde gerçekleştirilmesini sağlar. Bir sınıf olmamasına rağmen, Math nesnesi tüm özelliklerini ve metotlarını statik olarak sunar; bu da onun doğrudan erişilebilir olduğu ve örneklendirilmesinin gerekmediği anlamına gelir. Bu makalede, Math nesnesinin temel kullanımından gelişmiş uygulamalarına kadar uzanan çeşitli yönlerini inceleyeceğiz.

Sözdizimi

JavaScript'teki Math nesnesi, doğrudan erişilebilen statik metotlar ve özellikler içerir. Bu, Math nesnesini oluşturmanıza gerek olmadığı anlamına gelir; tüm metotlarına ve özelliklerine doğrudan Math. önekiyle erişilebilir.

Genel kullanım yapısı aşağıdaki gibidir:

Math.propertyName;
Math.methodName(arg1, arg2, ...);

Detaylı Açıklama

Math nesnesi bir yapıcıya (constructor) sahip değildir ve tüm metotları ile özellikleri statiktir. Bu, new Math() şeklinde bir kullanımın geçersiz olduğu ve hata döndüreceği anlamına gelir. Bunun yerine, Math.PI gibi bir sabite veya Math.random() gibi bir metoda doğrudan erişilir.

Aşağıda, Math nesnesinin sıkça kullanılan bazı metotları ve özellikleri detaylı olarak açıklanmıştır:

• Math.PI: Bir dairenin çevresinin çapına oranı olan pi (π) sayısının değerini döndürür.

• Math.abs(x): Bir sayının mutlak değerini döndürür.

• Math.round(x): Bir sayıyı en yakın tam sayıya yuvarlar. .5 durumunda yukarı yuvarlar.

• Math.floor(x): Bir sayıyı her zaman aşağıya, en yakın tam sayıya yuvarlar.

• Math.ceil(x): Bir sayıyı her zaman yukarıya, en yakın tam sayıya yuvarlar.

• Math.random(): 0 (dahil) ile 1 (hariç) arasında rastgele bir ondalık sayı döndürür.

• Math.max(x1, x2, ..., xn): Verilen sayılar arasındaki en büyük değeri döndürür.

• Math.min(x1, x2, ..., xn): Verilen sayılar arasındaki en küçük değeri döndürür.

• Math.pow(x, y): x sayısının y kuvvetini döndürür (x^y).

• Math.sqrt(x): Bir sayının karekökünü döndürür.

• Math.sin(x), Math.cos(x), Math.tan(x): Trigonometrik sinüs, kosinüs ve tanjant değerlerini radyan cinsinden verilen bir açı için döndürür.

Örnekler

Aşağıdaki örnekler, Math nesnesinin farklı metotlarının pratik uygulamalarını göstermektedir.

Örnek 1: Temel Yuvarlama İşlemleri ve Pi Sabiti Kullanımı

// Pi (π) değerini alma
const piValue = Math.PI;
console.log("Pi değeri:", piValue); // Çıktı: Pi değeri: 3.141592653589793

// Sayı yuvarlama örnekleri
let num1 = 4.7;
let num2 = 4.3;
let num3 = 4.5;
let num4 = -4.7;

console.log("Math.round(4.7):", Math.round(num1));   // Çıktı: 5
console.log("Math.round(4.3):", Math.round(num2));   // Çıktı: 4
console.log("Math.round(4.5):", Math.round(num3));   // Çıktı: 5
console.log("Math.floor(4.7):", Math.floor(num1));   // Çıktı: 4
console.log("Math.ceil(4.3):", Math.ceil(num2));     // Çıktı: 5
console.log("Math.abs(-4.7):", Math.abs(num4));     // Çıktı: 4.7

Örnek 2: Rastgele Sayı Üretimi

Math.random() metodu 0 (dahil) ile 1 (hariç) arasında bir sayı üretir. Belirli bir aralıkta rastgele tam sayı üretmek için bu metot Math.floor() ile birlikte kullanılabilir.

// 0 ile 1 arasında rastgele ondalık sayı
const randomDecimal = Math.random();
console.log("Rastgele ondalık:", randomDecimal); // Örn: 0.123456789

// 1 ile 10 arasında rastgele tam sayı (1 ve 10 dahil)
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const randomNum = getRandomInt(1, 10);
console.log("1-10 arası rastgele tam sayı:", randomNum); // Örn: 7

Örnek 3: Üs Alma ve Karekök Hesaplama

// Üs alma (2^3 = 8)
const powerResult = Math.pow(2, 3);
console.log("2 üzeri 3:", powerResult); // Çıktı: 8

// Karekök alma (karekök 81 = 9)
const sqrtResult = Math.sqrt(81);
console.log("81'in karekökü:", sqrtResult); // Çıktı: 9

Örnek 4: En Büyük ve En Küçük Değeri Bulma

const numbers = [10, 5, 20, 8, 15];

// Array'deki en büyük ve en küçük değeri bulmak için spread operatörü (...) kullanılır.
const maxVal = Math.max(...numbers);
const minVal = Math.min(...numbers);

console.log("En büyük değer:", maxVal); // Çıktı: 20
console.log("En küçük değer:", minVal); // Çıktı: 5

// Doğrudan sayılarla da kullanılabilir
console.log("max(1, 5, 2, 9):", Math.max(1, 5, 2, 9)); // Çıktı: 9

Önemli Notlar

• Statik Nesne: Math bir nesne olmasına rağmen, bir yapıcıya sahip değildir ve doğrudan new Math() ile örneklendirilemez. Tüm metotları ve özellikleri statiktir ve doğrudan Math.metotAdı() veya Math.özellikAdı şeklinde çağrılır.

• Radyan Kullanımı: Trigonometrik fonksiyonlar (Math.sin(), Math.cos(), Math.tan()) açıları derece yerine radyan cinsinden bekler. Dereceyi radyana çevirmek için derece * (Math.PI / 180) formülünü kullanabilirsiniz.

• Math.random() Aralığı: Math.random() her zaman 0 (dahil) ile 1 (hariç) arasında bir değer döndürür. Belirli bir aralıkta (min, max) tam sayı elde etmek için genellikle Math.floor(Math.random() * (max - min + 1)) + min formülü kullanılır.

• Floating-Point Hassasiyeti: JavaScript, diğer programlama dillerinde olduğu gibi, kayan noktalı sayılarla (floating-point numbers) çalışırken hassasiyet sorunları yaşayabilir. Bu durum, özellikle ondalık sayılarla yapılan karmaşık hesaplamalarda beklenmedik sonuçlara yol açabilir. Örneğin, 0.1 + 0.2 doğrudan 0.3 yerine 0.30000000000000004 sonucunu verebilir.

• Type Coercion: Math metotları, kendisine geçirilen argümanları otomatik olarak sayısal tiplere dönüştürmeye çalışır. Geçersiz bir değer (örneğin, bir string) geçirildiğinde NaN (Not-a-Number) döndürebilir.

Map nesnesi, JavaScript'te anahtar-değer çiftlerini saklamak için kullanılan güçlü bir veri yapısıdır. Geleneksel nesnelerin (Object) sınırlamalarını aşarak, anahtar olarak herhangi bir veri türünü (nesneler, fonksiyonlar, ilkel değerler) kullanılmasına olanak tanır ve elemanların eklenme sırasını korur. Bu özellikler, Map'i belirli senaryolarda Object'e göre daha esnek ve verimli bir alternatif haline getirir.

Sözdizimi

Map nesnesi, new Map() yapıcı fonksiyonu kullanılarak oluşturulur. Anahtar-değer çiftleri eklemek, almak ve yönetmek için çeşitli yöntemler sunar.

Yeni bir Map oluşturma:

const myMap = new Map();

Başlangıç değerleri ile Map oluşturma:

const initialMap = new Map([
  ['anahtar1', 'değer1'],
  ['anahtar2', 'değer2']
]);

Bir anahtar-değer çifti ekleme:

myMap.set('ad', 'Alice');

Bir anahtarın değerini alma:

const ad = myMap.get('ad'); // 'Alice'

Bir anahtarın varlığını kontrol etme:

const varMi = myMap.has('ad'); // true

Bir anahtar-değer çiftini silme:

myMap.delete('ad');

Map'teki eleman sayısını alma:

const boyut = myMap.size;

Tüm anahtar-değer çiftlerini temizleme:

myMap.clear();

Detaylı Açıklama

Map nesnesi, JavaScript'teki geleneksel Object'lere göre bazı önemli avantajlar sunar ve farklı kullanım senaryolarına hitap eder.

• Anahtar Türleri: Geleneksel nesnelerde anahtarlar yalnızca string veya Symbol olabilirken, Map nesneleri anahtar olarak herhangi bir veri türünü (nesneler, fonksiyonlar, diziler, ilkel değerler vb.) kabul edebilir. Bu, özellikle DOM elemanları veya diğer nesneleri doğrudan anahtar olarak kullanmak istediğinizde büyük bir avantaj sağlar.

• Eleman Sırası: Map nesneleri, anahtar-değer çiftlerinin eklenme sırasını korur. Bu, üzerinde iterasyon yaparken elemanların hangi sırayla eklendiğini bilmek veya bu sırayı kullanmak istediğinizde önemlidir. Geleneksel nesnelerde özelliklerin sırası garanti edilmez (ancak ES2015'ten sonra bazı durumlarda kısmen garanti edilmeye başlanmıştır, yine de Map kadar güçlü değildir).

• Boyut: Map nesnesinin size özelliği, içerdiği anahtar-değer çiftlerinin sayısını doğrudan ve verimli bir şekilde verir. Geleneksel nesnelerde bu bilgiye ulaşmak için genellikle Object.keys(obj).length gibi yöntemler kullanmak gerekir ki bu da her seferinde yeni bir dizi oluşturmayı gerektirir.

• Performans: Sık sık anahtar-değer çiftlerinin eklenip silindiği senaryolarda, Map genellikle geleneksel nesnelere göre daha iyi performans sergileyebilir. Özellikle anahtar sayısı arttıkça bu fark daha belirgin hale gelebilir.

• Iterasyon: Map nesneleri doğrudan iterable'dır. Bu, for...of döngüleri ile kolayca anahtarlar, değerler veya anahtar-değer çiftleri üzerinde döngü yapmanızı sağlar. map.keys(), map.values() ve map.entries() yöntemleri, ilgili iterable nesneleri döndürür.

Bir Map'e aynı anahtarla yeni bir değer atandığında, mevcut değerin üzerine yazılır. Bu, anahtarların benzersiz olmasını sağlar.

Pratik Kullanım Örnekleri

Aşağıdaki örnekler, Map nesnesinin çeşitli kullanım senaryolarını göstermektedir.

Örnek 1: Temel Map İşlemleri

Bu örnek, bir Map oluşturmayı, eleman eklemeyi, eleman almayı, varlığını kontrol etmeyi ve silmeyi gösterir.

const kullaniciBilgileri = new Map();

// Eleman ekleme
kullaniciBilgileri.set('id', 101);
kullaniciBilgileri.set('ad', 'Veli');
kullaniciBilgileri.set('soyad', 'Demir');
kullaniciBilgileri.set('aktif', true);

console.log('Kullanıcı Adı:', kullaniciBilgileri.get('ad')); // Çıktı: Kullanıcı Adı: Veli
console.log('ID mevcut mu?', kullaniciBilgileri.has('id')); // Çıktı: ID mevcut mu? true
console.log('Email mevcut mu?', kullaniciBilgileri.has('email')); // Çıktı: Email mevcut mu? false

// Bir elemanı silme
kullaniciBilgileri.delete('aktif');
console.log('Aktif durumu silindi mi?', !kullaniciBilgileri.has('aktif')); // Çıktı: Aktif durumu silindi mi? true

console.log('Map boyutu:', kullaniciBilgileri.size); // Çıktı: Map boyutu: 3

// Tüm elemanları temizleme
kullaniciBilgileri.clear();
console.log('Map temizlendikten sonra boyut:', kullaniciBilgileri.size); // Çıktı: Map temizlendikten sonra boyut: 0

Örnek 2: Nesneleri Anahtar Olarak Kullanma

Map'in en güçlü yönlerinden biri, anahtar olarak nesneleri kullanabilmesidir. Bu örnek, iki farklı nesneyi anahtar olarak nasıl kullanacağımızı gösterir.

const kullanici1 = { id: 1, ad: 'Ayşe' };
const kullanici2 = { id: 2, ad: 'Fatma' };

const kullaniciRolleri = new Map();

kullaniciRolleri.set(kullanici1, 'Yönetici');
kullaniciRolleri.set(kullanici2, 'Editör');

console.log(kullaniciRolleri.get(kullanici1)); // Çıktı: Yönetici
console.log(kullaniciRolleri.get(kullanici2)); // Çıktı: Editör

// Yeni bir nesne oluşturup aynı değerlere sahip olsa bile farklı bir anahtar olarak kabul edilir.
const kullanici3 = { id: 1, ad: 'Ayşe' };
console.log(kullaniciRolleri.get(kullanici3)); // Çıktı: undefined (çünkü bellekte farklı bir referanstır)

Örnek 3: Map Üzerinde Iterasyon

Map nesneleri, for...of döngüsü ile kolayca iterate edilebilir. Bu örnek, anahtarlar, değerler ve anahtar-değer çiftleri üzerinde nasıl döngü yapılacağını gösterir.

const urunFiyatlari = new Map([
  ['Laptop', 12000],
  ['Klavye', 500],
  ['Fare', 250]
]);

console.log('--- Anahtar-Değer Çiftleri ---');
for (const [urun, fiyat] of urunFiyatlari) {
  console.log(`${urun}: ${fiyat} TL`);
}
// Çıktı:
// Laptop: 12000 TL
// Klavye: 500 TL
// Fare: 250 TL

console.log('\n--- Sadece Anahtarlar ---');
for (const urun of urunFiyatlari.keys()) {
  console.log(urun);
}
// Çıktı:
// Laptop
// Klavye
// Fare

console.log('\n--- Sadece Değerler ---');
for (const fiyat of urunFiyatlari.values()) {
  console.log(fiyat);
}
// Çıktı:
// 12000
// 500
// 250

Örnek 4: Map'i Diziye ve Diziyi Map'e Dönüştürme

Map ve dizi arasında kolayca dönüşüm yapabilirsiniz.

// Diziden Map oluşturma
const diziVeri = [['a', 1], ['b', 2], ['c', 3]];
const harita = new Map(diziVeri);
console.log('Diziden Oluşturulan Map:', harita); // Çıktı: Diziden Oluşturulan Map: Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }

// Map'i diziye dönüştürme (entries olarak)
const haritaDizi = Array.from(harita);
console.log('Map\'in Diziye Dönüştürülmüş Hali (entries):', haritaDizi); // Çıktı: Map'in Diziye Dönüştürülmüş Hali (entries): [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

// Sadece anahtarları diziye dönüştürme
const anahtarlarDizi = [...harita.keys()];
console.log('Map Anahtarları Dizi Olarak:', anahtarlarDizi); // Çıktı: Map Anahtarları Dizi Olarak: [ 'a', 'b', 'c' ]

// Sadece değerleri diziye dönüştürme
const degerlerDizi = [...harita.values()];
console.log('Map Değerleri Dizi Olarak:', degerlerDizi); // Çıktı: Map Değerleri Dizi Olarak: [ 1, 2, 3 ]

Önemli Notlar

• Anahtar Karşılaştırması: Map'teki anahtarlar, SameValueZero algoritması kullanılarak karşılaştırılır. Bu, === operatörüne benzer ancak NaN değerinin kendisine eşit kabul edilmesi gibi bazı farklılıklar içerir (NaN === NaN false dönerken, Map içinde NaN anahtarı NaN ile eşleşir).

• Map vs. Object: Ne zaman hangisini kullanacağınızı iyi belirleyin. Eğer anahtarlarınız yalnızca string veya Symbol ise ve eleman sırası önemli değilse, basit bir Object yeterli olabilir. Ancak anahtarlarınız farklı veri tiplerinde olacaksa, eleman sırasını korumanız gerekiyorsa veya sık sık eleman ekleyip siliyorsanız, Map genellikle daha iyi bir seçimdir.

• Serileştirme: Map nesneleri doğrudan JSON.stringify() ile serileştirilemez. Bir Map'i JSON formatına dönüştürmek için önce onu bir diziye veya düz bir nesneye dönüştürmeniz gerekir.

• WeakMap: JavaScript ayrıca WeakMap adında bir veri yapısı sunar. WeakMap, yalnızca nesneleri anahtar olarak kabul eder ve anahtarların "zayıf" referanslarını tutar. Bu, anahtar nesneye başka hiçbir referans kalmadığında çöp toplayıcının anahtarı ve ilgili değeri otomatik olarak silmesine olanak tanır. Bellek yönetimi açısından önemlidir, ancak Map'ten farklı bir kullanım senaryosu vardır.

JavaScript'te Setler, benzersiz değerlerden oluşan bir koleksiyonu depolamak için kullanılan özel bir nesne türüdür.
Bu veri yapısı, tekrar eden öğelerin otomatik olarak elenmesini sağlayarak veri yönetimi ve manipülasyonunda önemli avantajlar sunar.
Bu makale, JavaScript Setlerinin temel kullanımını, sözdizimini ve pratik uygulamalarını detaylı bir şekilde açıklayacaktır.

Sözdizimi

Bir Set oluşturmak için new Set() kurucusu kullanılır.
Değerler, Set'in kurucusuna bir iterable (örneğin bir dizi) olarak geçirilebilir veya daha sonra add() metodu ile eklenebilir.

// Boş bir Set oluşturma
const mySet = new Set();

// Başlangıç değerleri ile Set oluşturma
const initialSet = new Set([1, 2, 3, 2, 4]); // initialSet: {1, 2, 3, 4}

// Metotlar
mySet.add(value);      // Bir değer ekler
mySet.delete(value);   // Bir değeri siler
mySet.has(value);      // Bir değerin varlığını kontrol eder
mySet.clear();         // Set'teki tüm öğeleri siler
mySet.size;            // Set'teki öğe sayısını döndürür

Detaylı Açıklama

• new Set([iterable]): Yeni bir Set nesnesi oluşturur. İsteğe bağlı olarak, iterable bir nesne (örneğin bir dizi) alabilir. Bu iterable içindeki tüm öğeler Set'e eklenir. Tekrar eden değerler otomatik olarak göz ardı edilir.

• Set.prototype.add(value): Set'e yeni bir değer ekler. Eğer değer zaten Set'te mevcutsa, Set değişmez. Zincirleme çağrılara izin vermek için Set nesnesini döndürür.

• Set.prototype.delete(value): Set'ten belirli bir değeri siler. Eğer değer Set'te mevcutsa true, aksi takdirde false döndürür.

• Set.prototype.has(value): Belirli bir değerin Set'te olup olmadığını kontrol eder. Varsa true, yoksa false döndürür.

• Set.prototype.clear(): Set'teki tüm öğeleri siler ve Set'i boşaltır.

• Set.prototype.size: Set'teki benzersiz öğelerin sayısını döndüren bir erişimci özelliğidir.

• Set.prototype.forEach(callbackFn[, thisArg]): Set'teki her öğe için bir callback fonksiyonu yürütür. Dizilerdeki forEach metoduna benzer.

• Set.prototype.values(), Set.prototype.keys(), Set.prototype.entries(): Set'teki değerleri, anahtarları (Set'lerde anahtarlar ve değerler aynıdır) veya anahtar/değer çiftlerini ([value, value] formatında) içeren yeni bir Iterator nesnesi döndürür.

Pratik Kullanım Örnekleri

Aşağıdaki örnekler, JavaScript Setlerinin çeşitli kullanım senaryolarını göstermektedir.

1. Benzersiz Öğeleri Toplama

Bir dizideki yinelenen öğeleri kaldırmak ve yalnızca benzersiz değerleri elde etmek için Setleri kullanmak oldukça etkilidir.

const numbers = [1, 2, 3, 4, 2, 1, 5, 6, 3];
const uniqueNumbers = new Set(numbers);

console.log(uniqueNumbers); // Set(6) {1, 2, 3, 4, 5, 6}

// Set'i tekrar bir diziye dönüştürme
const uniqueNumbersArray = [...uniqueNumbers];
console.log(uniqueNumbersArray); // [1, 2, 3, 4, 5, 6]

2. Öğelerin Varlığını Kontrol Etme

Bir öğenin bir koleksiyonda olup olmadığını hızlıca kontrol etmek için has() metodunu kullanabilirsiniz.

const fruits = new Set(['elma', 'armut', 'muz']);

console.log(fruits.has('elma'));   // true
console.log(fruits.has('çilek'));  // false

fruits.add('çilek');
console.log(fruits.has('çilek'));  // true

3. Set Üzerinde İterasyon

Set öğeleri üzerinde döngü yapmak için forEach() metodunu veya for...of döngüsünü kullanabilirsiniz.

const colors = new Set(['kırmızı', 'mavi', 'yeşil']);

// forEach ile iterasyon
colors.forEach(color => {
    console.log(color);
});
// Çıktı:
// kırmızı
// mavi
// yeşil

// for...of ile iterasyon
for (const color of colors) {
    console.log(color);
}
// Çıktı:
// kırmızı
// mavi
// yeşil

Önemli Notlar

• Değer Karşılaştırması: Setler, değerleri karşılaştırırken aynı algoritmayı kullanır. Bu, NaN değerlerinin Set içinde benzersiz olarak ele alındığı anlamına gelir (NaN === NaN false olmasına rağmen, Set içinde sadece bir adet NaN bulunabilir). Obje referansları için, farklı referanslara sahip aynı içeriğe sahip objeler farklı kabul edilir.

• Sırasız Yapı: Setler, öğeleri eklenme sırasına göre depolasa da, Setin birincil amacı benzersiz öğeleri tutmaktır, belirli bir sırayı garanti etmek değildir. Bazı durumlarda iterasyon sırası ekleme sırasına denk gelebilir, ancak buna güvenilmemelidir.

• Performans: Bir öğenin Set'te varlığını kontrol etmek (has() metodu) genellikle O(1) zaman karmaşıklığına sahiptir, bu da büyük veri kümeleri için dizilerdeki aramalara göre daha verimli olabilir.

• Zayıf Referanslar: Eğer objeler için zayıf referanslara ihtiyacınız varsa (yani objeye başka referans kalmadığında otomatik olarak belleğin serbest bırakılmasını istiyorsanız), WeakSet kullanmanız gerekebilir. Ancak WeakSet sadece objeleri depolayabilir ve iterable değildir.

• Anahtar-Değer Çiftleri İçin Setler: Eğer benzersiz anahtar-değer çiftleri depolamanız gerekiyorsa, Map nesnesi daha uygun bir seçenek olabilir.

JavaScript, web geliştirmede dinamik ve etkileşimli deneyimler oluşturmak için vazgeçilmez bir dildir. Bu dilin temel yapı taşlarından biri olan diziler (arrays), birden çok değeri tek bir değişken altında depolamamızı ve yönetmemizi sağlar. Diziler, veri koleksiyonlarını düzenli bir şekilde saklamak, üzerlerinde döngüler yapmak ve çeşitli manipülasyonlar gerçekleştirmek için kritik öneme sahiptir. Bu makalede, JavaScript dizilerinin temel sözdizimini, öğelere erişimi, yaygın kullanılan metotları ve pratik uygulama örneklerini detaylı bir şekilde inceleyeceğiz.

Sözdizimi

JavaScript'te dizi oluşturmanın ve kullanmanın iki temel yolu vardır:

1. Dizi Değişmezi (Array Literal) Kullanımı

Bu, en yaygın ve önerilen yöntemdir. Köşeli parantezler [] arasına, virgülle ayrılmış olarak dizi öğeleri yazılır.

const meyveler = ["Elma", "Muz", "Portakal"];
let sayilar = [1, 2, 3, 4, 5];
const karisikDizi = ["Metin", 123, true, null, {adi: "Nesne"}];

Yukarıdaki örneklerde görüldüğü gibi, bir dizi içinde farklı veri tiplerini barındırabiliriz. Diziler const, let veya var anahtar kelimeleri ile tanımlanabilir.

2. Array Kurucu Fonksiyonu (Constructor Function) Kullanımı

new Array() kurucu fonksiyonunu kullanarak da dizi oluşturulabilir. Bu yöntem daha az tercih edilse de, belirli senaryolarda kullanılabilir.

const meyveler = new Array("Elma", "Muz", "Portakal");
const bosDizi = new Array(); // Boş bir dizi oluşturur
const onElemanliDizi = new Array(10); // 10 boş öğe içeren bir dizi oluşturur

Tek bir sayısal argümanla çağrıldığında, new Array() o boyutta boş öğeler içeren bir dizi oluşturur. Birden fazla argümanla çağrıldığında ise, bu argümanlar dizinin öğeleri haline gelir.

Dizi Öğelerine Erişim ve Değiştirme

Dizilerdeki öğelere, sıfır tabanlı indeksleme kullanarak erişilir. Yani, ilk öğenin indeksi 0, ikincisinin 1 ve bu şekilde devam eder. Öğelere erişmek için dizi adından sonra köşeli parantez içinde indeks numarası belirtilir.

const renkler = ["Kırmızı", "Yeşil", "Mavi"];
console.log(renkler[0]); // Çıktı: Kırmızı
console.log(renkler[1]); // Çıktı: Yeşil

Dizi öğelerini değiştirmek de benzer şekilde yapılır. İstenen indeks belirtilerek yeni bir değer atanır:

renkler[2] = "Sarı";
console.log(renkler); // Çıktı: ["Kırmızı", "Yeşil", "Sarı"]

Bir dizinin toplam öğe sayısını öğrenmek için length özelliğini kullanırız:

console.log(renkler.length); // Çıktı: 3

Örnekler

1. Dizi Tanımlama ve Temel Erişim

Bu örnek, bir dizi tanımlamayı ve belirli indekslerdeki öğelere nasıl erişileceğini göstermektedir.

// Bir meyve dizisi tanımlama
const meyveler = ["Elma", "Armut", "Kiraz", "Çilek"];

// Dizinin ilk elemanına erişme (indeks 0)
console.log("İlk meyve:", meyveler[0]); // Çıktı: İlk meyve: Elma

// Dizinin üçüncü elemanına erişme (indeks 2)
console.log("Üçüncü meyve:", meyveler[2]); // Çıktı: Üçüncü meyve: Kiraz

// Dizinin son elemanına erişme (length - 1)
console.log("Son meyve:", meyveler[meyveler.length - 1]); // Çıktı: Son meyve: Çilek

2. Dizi Öğelerini Değiştirme ve Yeni Öğeler Ekleme/Çıkarma

Bu örnek, var olan bir dizi öğesinin nasıl değiştirileceğini ve dizinin sonuna/başına öğe ekleme/çıkarma işlemlerini göstermektedir.

let alisverisListesi = ["Süt", "Ekmek", "Yumurta"];

// İkinci öğeyi değiştirme (indeks 1)
alisverisListesi[1] = "Peynir";
console.log("Değişen liste:", alisverisListesi); // Çıktı: Değişen liste: ["Süt", "Peynir", "Yumurta"]

// Dizinin sonuna yeni bir öğe ekleme (push metodu)
alisverisListesi.push("Meyve Suyu");
console.log("Ekleme sonrası:", alisverisListesi); // Çıktı: Ekleme sonrası: ["Süt", "Peynir", "Yumurta", "Meyve Suyu"]

// Dizinin sonundaki öğeyi çıkarma (pop metodu)
const cikarilanOge = alisverisListesi.pop();
console.log("Çıkarılan öğe:", cikarilanOge); // Çıktı: Çıkarılan öğe: Meyve Suyu
console.log("Çıkarma sonrası:", alisverisListesi); // Çıktı: Çıkarma sonrası: ["Süt", "Peynir", "Yumurta"]

// Dizinin başına yeni bir öğe ekleme (unshift metodu)
alisverisListesi.unshift("Yoğurt");
console.log("Başına ekleme:", alisverisListesi); // Çıktı: Başına ekleme: ["Yoğurt", "Süt", "Peynir", "Yumurta"]

// Dizinin başındaki öğeyi çıkarma (shift metodu)
const cikarilanBasOge = alisverisListesi.shift();
console.log("Baştan çıkarılan öğe:", cikarilanBasOge); // Çıktı: Baştan çıkarılan öğe: Yoğurt
console.log("Baştan çıkarma sonrası:", alisverisListesi); // Çıktı: Baştan çıkarma sonrası: ["Süt", "Peynir", "Yumurta"]

3. Diziler Üzerinde Döngü Kullanımı

Dizi öğeleri üzerinde işlem yapmak için döngüler sıkça kullanılır. En yaygın yöntemlerden biri for döngüsü ve forEach() metodudur.

const ogrenciler = ["Ali", "Ayşe", "Mehmet", "Fatma"];

// For döngüsü ile dizi öğelerini listeleme
console.log("For döngüsü ile öğrenciler:");
for (let i = 0; i < ogrenciler.length; i++) {
  console.log(ogrenciler[i]);
}

// forEach() metodu ile dizi öğelerini listeleme
console.log("\nforEach() ile öğrenciler:");
ogrenciler.forEach(function(ogrenci, index) {
  console.log(`${index + 1}. ${ogrenci}`);
});

Önemli Notlar

• Dinamik Boyut: JavaScript dizileri dinamik yapıdadır. Oluşturulduktan sonra boyutları otomatik olarak büyüyüp küçülebilir. Önceden bir boyut belirtme zorunluluğu yoktur.

• Karışık Veri Tipleri: JavaScript dizileri, aynı anda string, number, boolean, object, null, undefined gibi farklı veri tiplerini barındırabilir.

• Referans Tipi: Diziler birer referans tipi (reference type) veri yapısıdır. Bir diziyi başka bir değişkene atadığınızda, aslında dizinin kendisi değil, bellekteki referansı kopyalanır. Bu nedenle, yeni değişken üzerinden yapılan değişiklikler orijinal diziyi de etkiler.

• const ile Dizi Tanımlama: const ile tanımlanan bir dizinin referansı değiştirilemez, yani başka bir dizi atanması mümkün değildir. Ancak, dizinin içindeki öğeler (indeksler üzerinden) değiştirilebilir veya dizi metotları (push, pop vb.) ile manipüle edilebilir.

  
  

  const sabitDizi = [1, 2, 3];
  sabitDizi.push(4); // Geçerli: [1, 2, 3, 4]
  // sabitDizi = [5, 6]; // Hata: Assignment to constant variable.

  softmush.com

• Dizi Metotları: JavaScript, dizilerle çalışmayı kolaylaştıran zengin bir dizi metotları setine sahiptir (map(), filter(), reduce(), find(), splice(), slice() vb.). Bu metotlar, diziler üzerinde daha gelişmiş işlemler yapmak için kullanılır ve modern JavaScript programlamasında kritik öneme sahiptir.