JavaScript’teki Önemli Dizi Yineleyicileri: forEach(), map(), filter(), reduce() ve findIndex

JavaScript’te, “.forEach(), .map(), .filter(), .reduce() ve .findIndex()” gibi metatolar yaygın bir şekilde kullanılmaktadır. Yaygın kullanılmalarından ötürü gönül rahatlığıyla JavaScript’teki önemli dizi yineleyicileri başlığını atmakta bir beis görmedik.

Bu metotlar, JavaScript’te yineleme (iterate) işlerinde kullanılan yerleşik (built-in) dizi metotlarıdır ve yineleyiciler (iterators) olarak adlandırılır.

“Peki, bu yapıları niye kullanıyoruz ve bize ne gibi faydaları var?” Aslında bu yapılar, döngüler yerine kullanıldığı içi kodun daha okunaklı ve performanslı bir hale getirilmesine yardımcı olur. Zaten yaygın kullanılma sebebi de budur diyebiliriz.

Daha anlaşılır olması adına, bu metotların kullanımını anlatıp bunu açıklayacı örneklerle destekledik. Ayrıca hangi durumlarda kullanıldığını artılarını, kullanılma sebebi gibi durumlarını açıkladık. Bu arada, kafa karışıklığı olmaması adına, örneklerimizi arrow fonskiyonu kullanarak da kodladık).

forEach()

⭐ .forEach(): Bu metot, dizinin her bir elemanı üzerinde bir işlem yapmak için kullanılır.

// forEach - function
let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

/*
1
2
3
4
5
*/

// forEach - arrow function
const numbers = [1, 2, 3, 4, 5];

numbers.forEach((num) => {
  console.log(num * 2);
});

/*
2
4
6
8
10
*/

➕ Artısı: Döngüyü kendiniz oluşturmak yerine, bu yöntemi kullanarak dizideki her öğe üzerinde döngü yapabilirsiniz.
❓ Ne zaman kullanılmalı: Dizideki her öğe üzerinde işlem yapmak istediğinizde.
❗ .forEach() için dönüş değeri (return) her zaman undefined olur.

map()

⭐ .map(): Her bir eleman üzerinde işlem yaparak yeni bir dizi oluşturmak için kullanılır.

// map - function
let numbers = [1, 2, 3, 4, 5];

let doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]



// map - arrow function
const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((num) => {
  return num * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

➕ Artısı: Dizideki her öğenin üzerinde işlem yapar ve yeni bir dizi döndürür.
❓ Ne zaman kullanılmalı: Dizideki her öğenin üzerinde işlem yaparak yeni bir dizi oluşturmak istediğinizde. Ki, özelleştirilmiş bir işlem yapmak istediğinizde kullanışlı olacaktır.
❗ return olarak yeni bir dizi döndürür.

filter()

⭐ .filter(): Belirli bir koşulu sağlayan elemanları içeren yeni bir dizi oluşturmak için kullanılır.

// filter - function
let numbers = [1, 2, 3, 4, 5];

let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4]



// filter - arrow function
const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter((num) => {
  return num % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

➕ Artısı: Dizi içinde belirli bir koşulu karşılayan öğeleri seçer ve yeni bir dizi döndürür.
❓ Ne zaman kullanılmalı: Dizi içinde belirli bir koşulu karşılayan öğeleri seçmek istediğinizde.
❗ return olarak koşulu sağlayan dizi öğelerinden oluşan yeni bir dizi döndürür.

reduce()

⭐ .reduce(): Dizideki tüm elemanları tek bir değere indirgemek için kullanılır.

// reduce - function
let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function(total, number) {
  return total + number;
}, 0);

console.log(sum); // 15



// reduce  - arrow function
const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((acc, num) => {
  return acc + num;
}, 0);

console.log(sum); // 15

➕ Artısı: Dizi öğelerinin birleştirilmesi, sıralanması veya işlenmesi gibi daha karmaşık işlemleri yapabilir. Örneğin, sayıları toplamak veya dizideki en yüksek değeri bulmak için kullanılabilir.
❓ Ne zaman kullanılmalı: Dizi öğelerini birleştirmek, sıralamak veya işlemek istediğinizde.
❗ return olarak sonuç döndürür.

findIndex()

⭐ .findIndex(): Dizide belirli bir koşulu sağlayan öğenin index değerini döndürür.

// finIndex - function
let numbers = [1, 2, 3, 4, 5];

let index = numbers.findIndex(function(number) {
  return number === 3;
});

console.log(index); // 2



// finIndex - arrow function
const numbers = [1, 2, 3, 4, 5];

const index = numbers.findIndex((num) => {
  return num === 3;
});

console.log(index); // 2

➕ Artısı: Dizide belirli bir koşulu sağlayan öğenin dizindeki indeksini döndürür.
❓ Ne zaman kullanılmalı: Dizide belirli bir koşulu sağlayan öğenin dizindeki indeksini bulmak istediğinizde.
❗ return olarak index numarasını döndürür