DEV Community: ali

Javascript'te map ve reduce metodlarının kullanımı

ali — Mon, 01 Sep 2025 14:43:17 +0000

Herkese selamlar,
Bugün tüm projelerde çok sık kullanılan iki fonksiyondan bahsedeceğim. Dizi elemanlarını erişip elemanlarla işlemler yapıp veri üretmemizi kolaylaştıran fonksiyonlardır. Nasıl kullanıldığını, aralarında ne gibi farklılıklar olduğunu bu yazımda anlatacağım.

map()
Dizideki her eleman için yazılan fonksiyonu uygulayıp geriye yeni bir dizi döndüren metotdur.
Hızlıca bir örnek vermek gerekirse;

const arr = [1, 2, 3, 4];

const newArr = arr.map((x) => x * 2);

console.log(newArr);

Kodun çıktısında [ 2, 4, 6, 8 ] dizisini görürüz. Burada olan şey map fonksiyonu ile arr dizisindeki her eleman için (x)=> x * 2 fonksiyonu uygulanır ve newArr dizisine atanır. x burada arr dizisinin her bir elemanını ifade eden parametredir.

Bu noktada farklı bir örnekle side effect(yan etki) durumlarını inceleyebiliriz.

const products = [{ name: "sports car" }, { name: "laptop" }, { name: "phone" }];

products.map((product) => {
  product.price = 100;
});

console.log(products);

products üzerine map() fonksiyonu uyguladık fakat yeni bir değişkene atamadık. Ama products dizisini logladığımızda içeriğinin değiştiğini görebiliriz.

[
  { name: 'sports car', price: 100 },
  { name: 'laptop', price: 100 },
  { name: 'phone', price: 100 }
]

Burada products dizisi içindeki elemanların obje yani referans tipte oldukları için map fonksiyonu her elemanın referansını alıp işlem yapıyor. Bu ayrıca bir side effect'e neden oluyor.

Yukarıdaki gibi bir kullanım yerine forEach metodu daha doğru bir tercih olur. Hem yeni bir değer döndürmez hem dizi içeriğini sideeffect yaratarak değiştirmiş oluruz.

Şu örnekte ise dizi içindeki elemanlar primitive(ilkel) tip olduğu için diziyi logladığımızda herhangi bir değişiklik gözlemlemeyiz :

const arr = [1, 2, 3, 4];

arr.map((val) => val * 2);

console.log(arr);

[ 1, 2, 3, 4 ]

Ancak newArr = arr.map((val) => val * 2); yaparsak newArr içerisinde yeni değerleri görebiliriz.

reduce()
Bu metodun temel amacı dizi içindeki değerleri tek bir değere indirgemek olarak söylenebilir. Zaten kelime anlamı olarak reduce "indirmek, azaltmak, kısmak" anlamına gelir.
Metod bir callback fonksiyonu ve opsiyonel olarak initialvalue değeri alır.

Aşağıdaki örnekte dizi içindeki elemanların toplamını veren bir reduce metodu uygulamasını inceleyelim:

const array = [10, 11, 12, 13, 14];

function reducer(accumulator, currentValue, index) {
  const total = accumulator + currentValue;
  console.log(`accumulator: ${accumulator}, currentValue: ${currentValue}, index: ${index}, total: ${total}`);
  return total;
}

array.reduce(reducer);

Çıktı:

accumulator: 10, currentValue: 11, index: 1, total: 21
accumulator: 21, currentValue: 12, index: 2, total: 33
accumulator: 33, currentValue: 13, index: 3, total: 46
accumulator: 46, currentValue: 14, index: 4, total: 60

accumulator ara sonuç veya biriktirici diyebiliriz. Her iterasyondan sonra çıkan sonuç accumulator'e atanır. Örnekte bir başlangıç değeri olmadığı için accumulator array[0] olur.
currentValue o an ki iterasyonda işlenen elemandır. Initialvalue değeri yoksa array[1] tersi durumda array[0] olur.
index ise currentValue değerinin dizideki konumu olur.

Eğer initialValue değeri array.reduce(reducer, 10) şeklinde verilirse aynı örnek için çıktı şu şekilde olur:

accumulator: 10, currentValue: 10, index: 0, total: 20
accumulator: 20, currentValue: 11, index: 1, total: 31
accumulator: 31, currentValue: 12, index: 2, total: 43
accumulator: 43, currentValue: 13, index: 3, total: 56
accumulator: 56, currentValue: 14, index: 4, total: 70

accumulator initialValue değerini, currentValue array[0] ve index 0 değerlerini aldığına dikkat edelim.

Bir başka örnekte gerçek dünyaya daha yakın bir senaryoda reduce metodu şu şekilde kullanılabilir:

const cart = [
  { product: "Laptop", price: 15000, quantity: 1 },
  { product: "Mouse", price: 500, quantity: 2 },
  { product: "Keyboard", price: 1200, quantity: 1 }
];

const total = cart.reduce((acc, item) => {
  return acc + item.price * item.quantity;
}, 0);

console.log(total); // --> 17200

Promise & Async-Await nedir ?

ali — Tue, 12 Aug 2025 02:03:17 +0000

Herkese selamlar,
Başlıktaki iki kavramı açıklamadan önce senkron ve asenkron programlama kavramlarını anlamak promise ve async-await yapılarını anlamamızı kolaylaştıracaktır.

Senkron programlama çoğu yazılım dilinde varsayılan davranıştır.Kodlar satır satır okunur ve bir işlem bitmeden başka biri başlamaz.
Asenkron programlama ise zaman alan işlemlerin (API istekleri, dosya okuma-yazma, veritabanı sorguları, zamanlayıcılar) arka planda sürdürülmesini ve programın geri kalanının bu işlemler nedeniyle bloklanmadan çalışmasını sağlar. Bu şekilde, özellikle kullanıcı arayüzlerinin donmadan çalışması ve yüksek performanslı uygulamalar geliştirilmesi açısından büyük önem taşır.

Javascript'te asenkron işlemleri kontrollü biçimde ele alıp doğru şekilde hata yönetimi yapabilmek için promise, async-await yapıları kullanılır.

Promise
Asenkron işlemleri kontrollü şekilde yönetmek için promise nesnesi kullanılır.
Örneğin bir endpointe get metodu ile istek atıp kullanıcının gönderisini getirmek istiyoruz.

function getPost() {
  return new Promise((resolve, reject) => {
    https
      .get("https://jsonplaceholder.typicode.com/posts/1", (res) => {
        let data = "";

        res.on("data", (chunk) => {
          data += chunk;
        });

        res.on("end", () => {
          if (res.statusCode >= 200 && res.statusCode < 300) {
            try {
              resolve(JSON.parse(data));
            } catch (e) {
              reject("JSON parse hatası: " + e.message);
            }
          } else {
            reject(`Sunucu hatası: ${res.statusCode}`);
          }
        });
      })
      .on("error", (err) => {
        reject("İstek başarısız: " + err.message);
      });
  });
}

getPost()
  .then((post) => console.log("Post verisi:", post))
  .catch((err) => console.error("Hata:", err));

Promise constructor bir executor fonksiyonu bekler. (resolve,reject)=>{}
resolve işlem başarıyla çağrılacak fonksiyon ve reject işlem başarısızsa çağrılacak fonksiyondur.
then() işlem bittiğinde verdiğimiz callback fonksiyonunu çalıştırır.
resolve(parametre) başarılı işlemde resolve içine verdiğimiz parametre
then(function(result){}) metodundaki callback fonksiyonuna parametre olarak verilir.
catch() işlem sırasında veya bittiğinde sonuçta hata varsa callback fonksiyonunu çalıştırır. reject(parametre) metodu içindeki parametre catch(function(error){}) metodundaki callback fonksiyonuna parametre olarak verilir.
finally promise başarılı, başarısız, hatalı gibi her durumdan bağımsız çalıştırmak istediğimiz zaman kullanılır. finally(() => console.log("İstek tamamlandı")); gibi kullanıcıyı bilgilendirmek için kullanılabilir.

Promise durumları (state) şunlardır:

pending Henüz sonuçlanmadı, beklemede.
fulfilled İşlem başarıyla tamamlandı, resolve() çağrıldı.
rejected İşlem başarısız oldu, reject() çağrıldı.

Async - Await
Bu kullanım ES8 (ECMAScript 2017) standartıyla ile javascript'e eklenmiştir.
Promise ile verdiğimiz örneği async-await ile kullanmak istersek:

async function fetchPost() {
  try {
    const post = await getPost();
    console.log("Post verisi:", post);
  } catch (err) {
    console.error("Hata:", err);
  }
}

fetchPost();

async anahtar kelimesiyle tanımlanan fonskyion Promise nesnesi döner.
await sadece async ile işaretlenen fonksiyon içinde kullanılır. Promise'in çözülmesini (resolve) bekler. Kod bloğu kendi scope'u içerisinde bloklanır.
try-catch yapısıyla hata yönetimi reject durumu yönetilir.

Zincirleme then kullanımı ve async-await ile karşılaştırması

function getData() {
  return new Promise(resolve => {
    setTimeout(() => resolve({ users: [{ id: 42, name: "Ayşe" }] }), 500);
  });
}

function getUserId(data) {
  return new Promise(resolve => {
    setTimeout(() => resolve(data.users[0].id), 500);
  });
}

function getUserPost(userId) {
  return new Promise(resolve => {
    setTimeout(() => resolve([{ id: 1, userId, title: "Post Başlığı" }]), 500);
  });
}

getData()
  .then(getUserId)
  .then(getUserPost)
  .then(posts => console.log("Postlar:", posts))
  .catch(err => console.error("Hata:", err))
  .finally(() => console.log("Tamamlandı"));

async function fetchUserPosts() {
  try {
    const data = await getData();
    const userId = await getUserId(data);
    const posts = await getUserPost(userId);
    console.log("Postlar:", posts);
  } catch (err) {
    console.error("Hata:", err);
  } finally {
    console.log("Tamamlandı");
  }
}

fetchUserPosts();

Event Bubbling & Capturing nedir ?

ali — Tue, 29 Jul 2025 21:01:06 +0000

Herkese selamlar,
Event bubbling ve event capturing terim olarak biraz yabancı gelebilir ancak kodumuzda sürekli olan iki yaygın javascript davranışıdır.

1. Event Bubbling
Sayfa tasarımlarında çoğunlukla iç içe geçen birden fazla HTML elementi kullanırız ve çoğunluklada bu elementlere eventler ekleyip ne olup bitiyor haberdar olmak isteriz.
Bu noktada event bubbling davranışıyla karşılaşırız. Örneğin bir parent elementimiz var ve içerisinde bir adet butonumuz var. (Bu herhangi iki elementte olabilir.)

<div id="container">
  <button>Click me!</button>
</div>
<pre id="output"></pre>

function handleClick(e) {
  output.textContent += `You clicked on a ${e.currentTarget.tagName} element\n`;
}
const container = document.querySelector("#container");
container.addEventListener("click", handleClick);

Kod örneğini çalıştırdığımızda butona tıklandığında aldığımız output;

You clicked on a DIV element

Burada buton elementine tıklıyoruz ama div elementi için yazdığımız event tetikleniyor.
Başka bir örnekle bubbling olayını inceleyelim.

<div class="parent" onclick="alert('parent div')">
   <div class="child" onclick="alert('child div')">
     <p class="text" id="output" onclick="alert('text')">text</p>
   </div>
</div>

P etiketine tıklandığında önce text sonra child div en son parent div uyarı mesajlarını ekranda görürüz. Bubbling olayı en içteki elementten en dıştakine doğru gerçekleşir.

Bu durumu durdurmak için stopPropagation() metodu eklememiz yeterli olur.

function handleClick(e) {
  ...
  e.stopPropagation();
}

2. Capturing
Kısaca bubbling davranışının tersi diyebiliriz. Daha ayrıntılı anlatmak gerekirse DOM eventleri 3 aşamada gerçekleşir.

Capturing aşaması - Event, elementler arasında ilerler.
Target aşaması - Event, hedefe ulaşır.
Bubbling aşaması - Event, öğeden yukarı doğru kabarcıklanır.

<div id="parent">
  <p id="container">
    <button>Click me</button>
  </p>
</div>
<pre id="output"></pre>

function handleClick(e) {
  output.textContent += `You clicked on a ${e.currentTarget.tagName} element\n`;
  e.stopPropagation();
}

const parent = document.querySelector("#parent");
const container = document.querySelector("#container");
const button = document.querySelector("button");

parent.addEventListener("click", handleClick, { capture: true });
container.addEventListener("click", { capture: true });
button.addEventListener("click", handleClick);

Çıktıda gördüğümüz;

You clicked on a DIV element
You clicked on a P element
You clicked on a BUTTON element

{capture:true} veya addEventListener içinde parametre olarak true ifadesiyle bubbling davranışını tersine çevirebiliriz.

Peki javascript'te neden bu tür bir davranış var ?
Örneğin onlarca elemanı olan bir listemiz var ve her elemanının bir event ile kontrol etmek istiyoruz. Burada sadece listemize event ekleyerek tüm alt elemanlarına event.target ile ulaşabiliriz. Burada event.currentTarget ile eventi ele alan öğeye erişebiliriz. Hem bir standart hem daha tutarlı bir model geliştirilmiştir.

Node.js Event Loop

ali — Tue, 10 Dec 2024 17:35:31 +0000

Herkese merhaba,
Bu ilk yazımda Javascript'i gerçekten anlamak isteyenlerin kafa yorduğu konulardan biri olan Event Loop(main loop, main thread, event thread,vb...) hakkında yazacağım. Şunuda eklemek istiyorum bu yazı profesyonel şekilde değil, kendim için aldığım notların bir derlemesi niteliğinde olacak. Hatalarım için şimdiden özür dilerim.
Aşağıdaki görselde nodejs içerisinde bulunan javascript v8 engine, event loop mekanizması ve libuv kütüphanesini görüyorsunuz. Javascript' in sağlayamadığı bir takım işleri yürüten libuv kütüphanesidir. Tarayıcıda javascript çalıştırırsak burada tarayıcıların sunduğu web api ile işleri yürütürüz.

Event loop bir mimari dizayn modelidir(architectural design pattern). Bu yaklaşımın tercih edilme sebebi javascriptin çalışma prensibiyle doğrudan alakalıdır. Javascript single threaded ve Non-Blocking I/O çalışır. Yani tek bir iş parçacığı üzerinde çalışmasına rağmen vakit alan işleri yürütürken bloklanmaz, çalışmaya devam eder. Bunu event loop mimarisiyle çözümler.

Program çalıştırıldığında Global Execution Context oluşturulur ve call stack'e eklenir. Bu program akışı tamamlanana kadar call stack'ten kaldırılmaz. Aslında her bir fonsksiyon için bir execution context oluşturulur. Fonksiyon işlevi tamamlandığında call stack'ten kaldırılır. Ama her zaman bu şekilde çalışmaz.

Bazı durumlarda fonksiyon işlevini tamamlaması zaman alır. Örneğin bir ağ isteği veya bir dosyadan veri okuma-yazma işlemi, DOM olayları (tamamı değil) gibi. Bu durumda fonksiyon thread pool veya Web API' lar tarafından işleme alınır. İşlem bittiğinda callback fonksiyonu callback queue (task queue) eklenir. Sırası geldiğinde(call stack boşaltıldığında) call stack'e aktarılır ve işlenir. İşlendikten sonra call stack'ten kaldırılır. Microtask queue' daki işler, callback queue' dakilerden önce işlenir. Bunlara örnek Promise, Mutation Observer, queueMicrotask

Node.js içinde thread pool, tarayıcılar içinde Web Workers asenkron işlemleri, yoğun CPU gücü gerektiren işleri yürütmek için kullanılır. Kullanımda ve kapsamlarında farklılıklarına burada değinmeyeceğim. Anlatmak istediğim şudur ki; javascript ile üstesinden gelemediğimiz işleri farklı mekanizmalar ile üstesinden gelebilir hale getiriyoruz.

Node.js EventEmitter

ali — Tue, 10 Dec 2024 17:34:45 +0000

Bugün sizlere EventEmitter sınıfından bahsedeceğim. Bildiğiniz gibi Node.js event-driven yani olay tabanlı bir programlama paradigmasına sahiptir. Bu demek oluyor ki biz bir takım eventler ve callbackler tanımlayacağız, program akışımızda eventlerimiz tetiklenecek ve işleme alınacak. Neden böyle bir yaklaşım benimsenmiş diye sorarsanız bu bir önceki yazımda daha detaylı anlattığım javascript' in single thread çalıştığı için asenkron işlemlerin bir şekilde bloklanmadan ele alınması gerektiği için.

Peki tüm bunların EventEmitter sınıfıyla ne alakası var diye sorarsanız, bu sınıf bizlere asenkron işlemleri kolayca ele alabileceğimiz bir yapı sunuyor. Aslında bu Observer Design Pattern uygulamasıdır.

const EventEmitter = require("events");
class Emitter extends EventEmitter {}

const myE = new Emitter();

myE.on("test", () => {
  console.log("event meydana geldi.");
});
myE.on("test", () => {
  console.log("event meydana geldi.");
});
myE.on("test", () => {
  console.log("event meydana geldi.");
});

console.log(myE.eventNames());

myE.emit("test");

Yukarıda bir event nasıl tanımlanır ve çağrılır basit bir örneğini yazdım. Burada "on" metodu aslında boş bir objeye (master object) "test" adında bir dizi oluşturulur.

{
  test: [
    [Function (anonymous)],
    [Function (anonymous)],
    [Function (anonymous)]
  ]
}

Burada eventName adıyla üç defa "on" metodu çağırılmış ve oluşan yapı yukarıdaki gibidir.
Tahmin edebileceğiniz gibi "emit" metodu ile "test" isimli event çağrılır. Burada bir foreach metodu test dizisini döner ve içindeki fonksiyonları çağırır.

Peki bu yapı nerelerde kullanıyor ?
Örneğin bir DOM eventinde;

const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
  console.log("clicked");
});

Örneğin Node.js uygulamasında bir Ağ isteğinde;

const http = require("http");
const req = http
  .request(
    {
      method: "GET",
      hostname: "jsonplaceholder.typicode.com",
      path: "/todos/1"
    },
    (res) => {
      res.on("data", (chunk) => {
        console.log(chunk.toString());
      });

      res.on("end", () => {
        console.log("response ended.");
      });
    }
  )
  .end();