Bir önceki blog yazımızda Javascript array metodları arasında en çok kullanılan metodlardan biri olan map metodunu öğrenmiştik. Bu yazımda ise array metodlarına devam ederek find array metodunu öğreniyor olacağız. Haydi başlayalım.
Javascript find() Metodu Nedir?
Find() metodu, Belirtilen koşula bağlı olarak dizi içinde aramayı yaptıktan sonra bulduğu ilk değeri geri döndüren bir javascript array metodudur. Eğer koşula uygun eleman bulunamaz ise geriye undefined değerini geri döndürecektir.
Şimdi ise find metodunun kullanım yapısına bakalım…
array.find(function(currentValue, index, array),thisValue)- currentValue : İşlemden geçen elemanın değeri değerini belirtir.
- index : İşlemden geçen elemanın indis değeri belirtir.
- array : İşleme alınan dizi değerini belirtir.
- thisValue : Belirtilen işlem çalışırken yani callback fonksiyonu çalıştırılırken kullanacağı this değerini belirtir.
Önemli Uyarılar
- Find() metodu varsayılan dizi üzerinde bir değişlik yapmaz. Dizi içerisinde arama işlemi yapar ve bulduğu ilk değeri geri döndürür.
- Elemanı olmayan dizilerde find() metodu çalışmayacaktır.
- Dizi içerisinde aranan eleman bulunamaz ise sonuç undefined olarak geri dönecektir.
ÖRNEKLER
Find Standart Bir Örnek
İçinde sayılar bulunan array’de, sayı değeri 17 den büyük olan ilk elemanı bulan kodu find() metodunu kullanarak yazalım.
const numberArray = [2, 5, 10,15,17,54,18,19];
const findElement = numberArray.find((element) => element > 17);
console.log(findElement); Çıktısı;
Evet, aşağıdaki çıktıda gözüktüğü gibi array içerisinde 17 den büyük olan ilk değeri aldı ve bize çıktı olarak 54 değerini gösterdi. Her değeri tek tek işleme tabi tutar eğer işlem sonucu true ise o değeri geri döndürür ve işlemi sonlandırır. Eğer false ise bir sonraki elemana geçer. Son elemanı da incelediğinde işlem true olmaz ise sonucu undefined olarak geri döndürecektir. Find metodunun ana işleyiş mantığı da bu şekildedir.
Şimdi bir de günlük iş hayatında frontend developerlar find() metodunu react projelerinde nasıl kullandıklarını bir örnekte görelim.
Find Metodu Örnek Proje Kullanımı
Bir blog yazılarının olduğu endpoint de içerisinde genel olarak kullanıcının gösterileceği fieldları da aynı endpoint içerisinde gönderilir. Ama jsonplaceholder da ise posts ve users olarak iki endpoint e ayrılmış ve aralarında bir ilişkilendirme yapılmış. Bir kullanıcının bir çok postu bulunabilir buda bire çok ilişkilendirme demektir. Burada find metodunu nasıl kullanacağız diyor iseniz hemen ona geçelim 😁
Önce aşağıdaki kodları anlayalım. Posts için bir data state i oluşturmuştuk. Bir de users için state oluşturuyoruz. Ardından fetch kullanarak “https://jsonplaceholder.typicode.com/users” endpoint’inden gelen verileri users state’ine aktarıyoruz. Şimdi elimizde hem posts verileri hem de users lara ait veriler bulunmakta.
const [data, setData] = useState([]);
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((resPost) => {
setData(resPost);
});
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((resUsers) => {
setUsers(resUsers);
});
}, []);Şimdi buradaki bire çok ilişkilendirme nasıl olacak. Dikkatinizi çektiyse posts datasının içerisinde her obje de userId adından bir field bulunmakta. İşte bu field i kullanarak users endpoind inden gelen users datası ile bir ilişkilendirme yapacağız. Şimdi ona geçiyoruz…
const usernameValue = (id) => {
return users.find((user) => user.id === id).username;
};
return (
<div id="content">
<h1>Map</h1>
<div className="card">
{data &&
data.map((item) => {
return (
<div className="card-item" key={item.id}>
<span className="card-username">{usernameValue(item.userId)}</span>
<h2 className="card-title">{item.title}</h2>
<p className="card-description">{item.body}</p>
</div>
);
})}
</div>
</div>
);Yukarıda bir usernameValue adında bir fonksiyon oluşturduk. Bu fonksiyon tam olarak ne işe yarayacak onu anlatayım. Return içerisinde posts datasını yazdırırken aynı zamanda o postu hazırlayan kullanıcının adını da yazdırmak istiyorum. usernameValue fonksiyonuna post içerisinde bulunan userId değerini gönderiyorum. Ardından usernameValue fonksiyonu benim için kullanıcılar içerisinde find metodunu kullanarak user.id si benim göndermiş olduğum id ye eşit olan ilk değeri döndürüyor.
Bu değer o kullanıcıya ait tüm data değeridir. Ama benim ihtiyacım olan sadece username field değeri bu yüzden find metodunun sonuna username değerini de ekliyorum. Bu sayede usernameValue fonksiyonu bana göndermiş id ye bağlı olarak o postu yazan kullanıcının username değerini geri döndürmüş oluyor. Anlatım biraz karmaşık oldu ama umarım anlaşılmıştır.
Birde kodun son halini sizler ile paylaşıyorum.
import { useEffect, useState } from "react";
const FindMethod = () => {
const [data, setData] = useState([]);
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((resPost) => {
setData(resPost);
});
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((resUsers) => {
setUsers(resUsers);
});
}, []);
const usernameValue= (id) => {
return users.find((user) => user.id === id).username;
};
return (
<div id="content">
<h1>Find</h1>
<div className="card">
{data &&
data.map((item) => {
return (
<div className="card-item" key={item.id}>
<span className="card-username">{usernameValue(item.userId)}</span>
<h2 className="card-title">{item.title}</h2>
<p className="card-description">{item.body}</p>
</div>
);
})}
</div>
</div>
);
};
export default FindMethod;
#content {
width: 100%;
height: 100%;
}
.card-item {
width: 700px;
min-height: 200px;
height: auto;
border: 2px solid #ccc;
box-shadow: 0 2px 10px 2px #ccc;
margin: 20px auto;
padding: 20px;
text-align: center;
border-radius: 10px;
}
.card-username {
font-size: 18px;
font-weight: 600;
color: #fff;
background-color: #e74c3c;
padding: 10px 20px;
border-radius: 10px;
}
.card-title {
font-size: 24px;
font-weight: 800;
color: ;
}
.card-description {
font-size: 18px;
line-height: 1.4;
font-weight: 500;
color: #333;
}
Unutmayın bir dizi içerisinde 1 tane yani benzersiz bir eleman ise arıyor iseniz find metodu en iyi metodlardan biridir. Ama arama sonucunda şarta bağlı olarak tüm değerleri görmek istiyorsanız , yani yukarıdaki standart örnekte olduğu gibi 17 den büyük tüm sayıları almak istiyorsanız bunun için filter metoduna bakmanızı öneririm.
Bir de bunun çıktısına bakalım.
SON
Bu yazımda sizlere Javascript array metodu olan find metodu hakkında bilgiler vermiş oldum. Aynı zamanda React kütüphanesini kullanarakta bu metodun projelerde nasıl kullanıldığını da öğrenmiş oldunuz. Projelerinizde find metodunu bolca kullanmanız dileyim ile bir sonraki blog yazımda görüşmek üzere. Hoşçakalın.
