Sıfırdan İleriye Javascript #10 Yüksek Dereceli Fonksiyonlar

DarkS0LDIER

Deneyimli Moderatör
5 Ara 2019
1,799
436
Sydney


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


CnqR2EyveuN.png


Her 1 saniyede bir konsola merhaba yazar.
Kod:
function merhaba() {
  console.log('Merhaba')
}
setTimeout(merhaba, 2000)

G4sLhJ.png


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


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


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


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


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


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


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

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


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


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


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


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.
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.