Yeni bir sıfırdan Javascript konusuna hoş geldiniz. Hatırlarsanız fonksiyonları işlemiştik. Şimdi bu fonksiyonların biraz daha gelişmiş halini göreceğiz. Bu yüksek dereceli fonksiyonlar bir işlevi parametre olarak alıp değer olarak döndüren fonksiyonları diyebiliriz. Ok fonksiyonları en büyük örnek olabilir bu konuya.
Geri Dönüş İşlevi
Geri dönüşü aslında hepimiz fonksiyonlar konusundan biliyoruz. Bir fonksiyon sonucunu değere atarız ve o değere return diyerek fonksiyonun göstermesi gereken veri olduğunu tanımlarız.
Kod:
const yuksek = n => {
const islev = m => {
const fonksiyon = t => {
return 2 * n + 3 * m + t;
}
return fonksiyon;
}
return islev;
}
const sonuc = yuksek(2)(3)(4);
console.log(sonuc);
Burası her ne kadar karmaşık görünse bile tane tane bakınca basit olduğunu görebilirsiniz. İlk olarak yüksek fonksiyonunu tanımladık ve buna n değerini atadık. Daha sonra fonksiyon içine bir işlev ok fonksiyonu daha da tanımladık buna da m değeri atadık. İslev içine ise fonksiyon adlı bir fonksiyon tanımladık ve buna da t değeri döndürdük. Tüm içe içe fonksiyonlar karmaşasından sonra return olarak basit bir matematiksel işlemi döndürüyoruz. Bu işlemi hemen döndürdükten sonra bir piramit gibi önce yukarıdan aşağıya tanımladığımız fonksiyonları şimdi aşağıdan yukarıya doğru return olarak döndürdük ve en sonda konsola n,m,t değerlerini girip işlememizi yaptırdık.
setInterval ve setTimeout Fonksiyonları
Bu fonksiyonlar bazen bir şey yazdırmak için belli bir süre veya gecikmeli yazdırmak isteyebiliriz. O zamanlar bunları kullanırız.
setInterval = Belirlediğiniz sürede işlem yapar (4 saniyede 1 tht yazdır)
setTimeout = Belirdeğiniz süre sonra işlem yapıp sona erer ( 5 saniye sonra tht yazar ve işlem biter)
Ek olarak kodları göstermeden biz zaman belirleme işlemlerinde milisaniye cinsini kullanırız yani siz her 2 saniyede bir işlem yapmak istediniz ve 2 yazdınız. Bunu Javascript algılamayacaktır. 2000 milisaniye yaparsanız 2 saniye olarak algılayacaktır.
Kod:
function merhaba() {
console.log('merhaba')
}
setInterval(merhaba, 2000)
![sBHl8Ug-A.png](https://r.resimlink.com/sBHl8Ug-A.png)
![CnqR2EyveuN.png](https://r.resimlink.com/CnqR2EyveuN.png)
Her 1 saniyede bir konsola merhaba yazar.
Kod:
function merhaba() {
console.log('Merhaba')
}
setTimeout(merhaba, 2000)
![G4sLhJ.png](https://r.resimlink.com/G4sLhJ.png)
![kbSMKiPe.png](https://r.resimlink.com/kbSMKiPe.png)
2 saniye bekledikten sonra 1 kez merhaba yazıp işlemi sonladırır
ForEach Fonksiyonu
ForEach aynı for döngüsü gibi bir döngüdür tek farkı dizilerde kullanılır. Normal bir şekilde kullanamazsınız sadece dizilerin içindeki elemanlarla işlem yapacağınız zaman işinize yarar.
Kod:
const sayilar = [1, 2, 3, 4, 5];
sayilar.forEach(sayi => console.log(sayi))
const sayilar1= [1, 2, 3, 4, 5];
let toplam = 0;
sayilar.forEach(sayi => toplam += sayi)
console.log(toplam)
const ulkeler = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland', 'Turkiye']
ulkeler.forEach((ulke) => console.log(ulke.toUpperCase()))
![LB517i.png](https://r.resimlink.com/LB517i.png)
![MRazCLTy62Jp.png](https://r.resimlink.com/MRazCLTy62Jp.png)
İlk işlemde sayıları sırayla yazdırdık.
İkinci işlemde bu sayıları toplayıp sonucu yazdırdık.
Üçüncü işlemde ise ülkeler dizisindeki elemanların her birini (for each de zaten her biri, her eleman gibi bir anlamı var Türkçede) büyük harflere çevirip konsola yazdırdık.
Önemli Not : Kod okurken her zaman içten başlayın mesela ülkeler örneğine bakarsanız console.log(ulke.toUpperCase())) bunu okurken consolden okursanız biraz zorlanırsınız. Bu yüzden içerden okursanız daha anlamlı olacaktır. Mesela içten okuduk bu örneği ve şunu anladık : önce ülke elemanlarını büyük harfe çevir, daha sonra konsola bas. Daha kolay ve anlaşılabilir bir şekilde kodları böyle okursanız kolaylaşacaktır.
Map Fonksiyonu
Map fonksiyonu dizi elemanlarının özelliklerini değiştirmekte kullanılır. Tıpkı forEach gibi
Kod:
const sayilar = [1, 2, 3, 4, 5]
const kare = sayilar.map((sayi) => sayi * sayi)
console.log(kare)
const ulkeler = [
'Albania',
'Bolivia',
'Canada',
'Denmark',
'Ethiopia',
'Finland',
'Germany',
'Hungary',
'Ireland',
'Japan',
'Kenya',
]
const ulkeYaz = ulkeler.map((ulke) =>
ulke.toUpperCase().slice(0, 3)
)
console.log(ulkeYaz)
![F9x_hov.png](https://r.resimlink.com/F9x_hov.png)
![xbNTp.png](https://r.resimlink.com/xbNTp.png)
Filter Fonksiyonu
Filter fonksiyonu yaptığınız işleme göre filtreleme görevi yapar. En basitinden Google ana sekmesini düşünün. Arama yerine Türk yazınca Türk tarihi gibi şeyler çıkarken hack yazarsanız forum ile alakalı şeyleri filtreleme işi yapacaktır.
Kod:
const skorlar = [
{ name: 'DarkS0LDIER', score: 95 },
{ name: 'Bürküt', score: 78 },
{ name: 'Armin', score: 80 },
]
const filtrele = skorlar.filter((score) => score.score > 90 )
console.log(filtrele)
![X-57gmr.png](https://r.resimlink.com/X-57gmr.png)
![naFDINZ8o.png](https://r.resimlink.com/naFDINZ8o.png)
Filtreleme parametremize göre belli bir sonuç dönüldü gördüğünüz gibi
Reduce Fonksiyonu
Reduce, bir diziyi iki parametreye indirip işlem yapmaya olanak verir. İlk parametre işlemin yapılacağı fonksiyon iken ikincisi ise işlem yapılacak ilk değerdir.
Kod:
const sayilar = [1, 2, 3, 4, 5]
const topla = sayilar.reduce((acc, cur) => acc + cur, 0)
console.log(topla)
![H9pDjKgNEF.png](https://r.resimlink.com/H9pDjKgNEF.png)
![LdMIsyROiPY.png](https://r.resimlink.com/LdMIsyROiPY.png)
Every Fonksiyonu
Dizideki elemanların aynı türden olduğunu kontrol eder. Duruma göre true-false değeri döner.
Kod:
const meyveler = ['Elma', 'Karpuz', 'Muz', 'Kavun']
const kontrol = meyveler.every((ad) => typeof ad === 'string')
console.log(kontrol)
![xUepgKcO8Tw5.png](https://r.resimlink.com/xUepgKcO8Tw5.png)
![v2Bw8GXR.png](https://r.resimlink.com/v2Bw8GXR.png)
Bu değer true dönecektir çünkü hepsi string tipinde
Kod:
const meyveler = ['Elma', 'Karpuz', 'Muz', 'Kavun',1,2,3,4]
const kontrol = meyveler.every((ad) => typeof ad === 'string')
console.log(kontrol)
![w6JQH.png](https://r.resimlink.com/w6JQH.png)
Bu ise false döner çünkü hem sayı hem string değerler vardır.
Find Fonksiyonu
İf koşulu gibi çalışır. Koşulu sağlayan ilk değeri gösterir.
Kod:
const yaslar = [24, 22, 25, 32, 35, 18]
const yas = yaslar.find((yas) => yas < 20)
console.log(yas)
findIndex Fonksiyonu
Koşulu karşılayan ilk değerin indexini döner
Kod:
const yaslar = [24, 22, 25, 32, 35, 18]
const yas = yaslar.findIndex((yas) => yas < 20)
console.log(yas)
Some Fonksiyonu
Every ile aynı mantığa sahiptir. Sadece verdiğiniz koşul var mı yok mu diye bakar tüm dizinin aynı olması gerekmez.
Kod:
const meyveler = ['Elma', 'Karpuz', 'Muz', 'Kavun',1,2,3,4]
const kontrol = meyveler.some((ad) => typeof ad === 'string')
![1n6R5Z.png](https://r.resimlink.com/1n6R5Z.png)
Sort Fonksiyonu
A-Z sıralamaya işe yarar.
Kod:
const içecekler = ['Kola', 'Kahve', 'Çay', 'Süt', 'Su', 'Fanta']
console.log(içecekler.sort())
![Z75wYk8CXPKM.png](https://r.resimlink.com/Z75wYk8CXPKM.png)
![M_gvU1AI.png](https://r.resimlink.com/M_gvU1AI.png)
Bu yöntem sayılarda da kullanılabilir ama sayılarda direkt sort yaparsanız şöyle bir sorun alacaksınız.
Kod:
const sayilar = [9.81, 3.14, 100, 37]
console.log(sayilar.sort())
![cEQtaijrCZ.png](https://r.resimlink.com/cEQtaijrCZ.png)
![Ku14EfLi2.png](https://r.resimlink.com/Ku14EfLi2.png)
Sayının ilk rakamına göre sıralama yapıyor. Böyle olunca sonuç saçma oluyor. Bunu engellemek için küçük bir fonksiyon kullanarak a-b (büyükten küçüğe) veya b-a (küçükten büyüğe) olacak şekilde ayarlama yaparsanız sorun çözülecektir.
Kod:
const sayilar = [9.81, 3.14, 100, 37];
sayilar.sort(function(a, b) {
return a - b;
});
console.log('Artan Sıra:', sayilar);
const sayilar1 = [9.81, 3.14, 100, 37];
sayilar1.sort(function(a, b) {
return b - a;
});
console.log('Azalan Sıra:', sayilar);
console.log('Azalan Sıra:', sayilar1);
![0F4qJBhbf.png](https://r.resimlink.com/0F4qJBhbf.png)
![fgK4Vp.png](https://r.resimlink.com/fgK4Vp.png)
Obje Nesnelerini Sıralama
Objedeki nesneleri sıralamak aynı sayıları sıralamaya benziyor ama biraz farklı şimdi bunları görelim
Kod:
const users = [
{ name: 'Asabeneh', age: 150 },
{ name: 'Brook', age: 50 },
{ name: 'Eyob', age: 100 },
{ name: 'Elias', age: 22 },
]
console.log(users.sort((a, b) => {
if (a.age < b.age) return -1
if (a.age > b.age) return 1
return 0
}))
![NmuQZVHXasv.png](https://r.resimlink.com/NmuQZVHXasv.png)
![wnQxI0k.png](https://r.resimlink.com/wnQxI0k.png)
Hazır olarak aldığım bir objeyi görüyorsunuz. Burada a değerini age nesnesini b'nin age nesnesinden küçükse -1 return ediyor tam tersi durumu ise +1 return ediyor. Buna benzer isimlerin harflerine göre de sıralama yapabilirsiniz. Sort fonksiyonu harflerde sıkıntı çıkarmadığı için o ondan büyükmüş küçükmüş gibi işlemler yapmaya gerek yok direkt users.sort((a)=> a.name) yaparsanız a-z olarak dizilirler.
Tebrikler. Zor bir konuyu da bitirdin. Javascript'in kolay olacağını kimse söylememişti. Moralini yüksek tutup pratik yap. Bu tarz konular tek oturuşta anlanılaşacak konular değil 10 defa 100 defa 1000 defa okuyup + pratikler yapman lazım. Başka bir konuda görüşmek üzere.