javaScript ARROW(OK) FONKSİYONLAR

JavaScript fonksiyonları yazmak için ES6 ile Arrow(ok) fonksiyonları yeni bir sözdizimi olarak tanıtıldı.

CoffeeScript'in Arrow fonksiyonlarından ilham alan Arrow(Ok) fonksiyonları (Şişman Ok fonksiyonları olarak da bilinir) olarak bilinir .

Şüphesiz ES6'nın en popüler özelliklerinden biridir.

Ok fonksiyonları kodlarımızı daha özlü hale getirir ve fonksiyon kapsamında function anahtar kelimeyi basitleştirir.

Arrow function javascript’de fonksiyon tanımlamanın diğer bir yolu olmasına rağmen standart fonksiyon yazımına göre çok daha az satırda işimizi halletmemize olanak tanıyor. Buda bize javascript dosyalarında küçülme gibi faydaları vardır. Özellikle Framework kütüphanelerinde daha çok farkedilir.

Arrow fonksiyonları şişman ok diye bilinir. ( ->ince bir ok ve =>şişman bir ok olduğu için)

Öncelikle, bir fonksiyon, bir dizi işlevi yerine getirmek için kullanılan bir kod bloğudur. Arrow fonksiyonları, klasik JavaScript fonksiyonlarına alternatif olarak kullanılabilen bir tür fonksiyondur.

Arrow fonksiyonları, ok işareti (=>) kullanarak tanımlanır ve birkaç farklı biçime sahip olabilirler. Bu fonksiyonların en büyük avantajı, daha kısa ve okunması daha kolay bir sözdizimine sahip olmalarıdır.

Arrow fonksiyonlar C# veya Python gibi diğer dillerde Lambdas gibi çok çalışan tek satırlık mini fonksiyonlardır.

Sözdizimi:

Yeni öğrenenler için, JavaScript'teki ok işlevleri her zaman Anonim fonksiyondur. Arrow fonksiyonları öğrenmek için öncelikle Anonim fonksiyonları öğrenin.

Arrow fonksiyonları, aşağıdaki syntax ile tanımlanır:

  
(param1, param2, ..., paramN) => { 
  // Fonksiyon gövdesi 
}

Bu syntax, bir veya daha fazla parametre alan ve fonksiyon gövdesi içeren bir Arrow fonksiyonu tanımlar. Parametreler parantez içinde tanımlanır ve fonksiyon gövdesi süslü parantezler arasında yer alır.

JavaScript'te bildiğimiz gibi fonksiyon yazmak için function komutunu kullanıyorduk Artık onun yerine parametreler öne alınmış Şişman "=>" Ok kullanın.

Okun ( => ) solundaki kısım parantez içindeki parametreler , sağdaki ise süslü parantez "{ }" içindeki fonksiyon ifadeleridir . Fonksiyon hiçbir ifade içermediğinde undefined döndürür.

Fonksiyon yalnızca tek bir parametre içeriyorsa, onu çevreleyen parantezi atlayabilirsiniz. Aynı şekilde, gövde işlemleri için de geçerlidir - tek bir gövde ifadesi, çevresinde hiçbir süslü parantez "{ }" gerektirmez.

Ok fonksiyonu, gövdede tek bir deyim içeriyorsa ve değeri return olmadan döndürmek için süslü "{ }" parantezler kullanılmaz.

Ok fonksiyonlarda birden fazla parametre varsa bunları parantez "( )" içine alın.

Fonksiyonların Gövdesinde birden fazla ifade içeriyorsa, bu kodları süslü "{ }" parantezlerine sarın:

Süslü parantezler kullanımış fonksiyonun gövdesinde bir işlemi döndürmek için return ifadesini kullanın.

Ok fonksiyonunda bir hazır bilgi nesnesi döndüren (return) tek bir gövde deyimi içeriyorsa, hazır bilgi nesnesini çevreleyen süslü parantezlerin bir fonksiyon gövde sargısı olarak yorumlanmasını önlemek için gövde fonksiyonunu parantez içine sarmanız gerekir:

JavaScript Arrow fonksiyonlarının sözdizimi, aşağıdaki kurallarla hatırlanması çok faydalıdır:

• Tek parametreli ok fonksiyonları için, onu çevreleyen parantezi atlayabilirsiniz.
• Parametre olmayan veya çoklu parametre olan ok fonksiyonları için, parametreleri parantez içine alın.
• Tek bir gövde ifadesine sahip ok fonksiyonları için, ifadenin etrafındaki süslü "{}" parantezleri atlayabilirsiniz. İfadeden türetilen değer, parantez olmadan otomatik olarak (return) döndürülür.
• Birden fazla gövde ifadesine sahip ok fonksiyonları için bu değerleri süslü parantezler içine alın. Süslü parantezler varsa hiçbir değer otomatik olarak döndürülmez - değer döndürmek için return ifadeyi kullanın.
• Bir fonksiyonun gövdesi yalnızca tek bir nesne hazır bilgisini içeriyorsa, fonksiyonun gövdesinde belirtilen süslü "{ }" parantezlerden ayırmak için normal parantez "()" içine alın.

Şimdi, Arrow(ok) Fonksiyonları sözdizimini sağlam bir şekilde anladık, bunları gerçekten nasıl kullanacağımızı görmeye devam edelim ve ayrıca "this" değerine geldiğinde ok fonksiyonları ve normal fonksiyonlar arasındaki önemli bir fark üzerinde durmaya devam edelim.

Arrow fonksiyonlar Anonim(isimsiz) fonksiyonlardır. Bunları Anonim fonksiyonda olduğu gibi bir değişkene atayarak kullanabiliriz.

var hesap = sayi => sayi * 0.25

console.log(hesap(100)); // returns 25


	

Hemen Çağrılan Fonksiyon İfadeleri düzenini (IIFE'ler) kullanarak ok fonksiyon tanımlamaları üzerine hemen çalıştırabilirsiniz.

( sayi => sayi * 0.15 )(100) // returns 15

	

Başka bir örnek

var  Hesap = ( (b, h) => { // returns 50

	var islem = (b * h) / 2;

	return islem;

})(20, 5)

console.log(Hesap);

Bir hemen çağrılan(IIFE) fonksiyon ifadesi, oluşturulan en kısa sürede fonksiyonu hemen çalıştırmak için bir yoldur.

IIFE'ler çok kullanışlıdır; Çünkü küresel nesneyi kirletmezler ve değişken bildirimlerini izole etmenin basit bir yoludur.

Fonksiyonların Nesne olarak çağırma (This bağlamı)

---

javaScript'te this özel kelimesinin anlamı diğer programlama dillerinden farklıdır. this kelimesinin birbirinden farklı anlamlar yüklendiği tam beş durum vardır.

Genel kapsam

console.log(this) //window

this kelimesi genel kapsamda kullanıldığında global nesneye işaret eder.

Bir fonksiyon çağırma

function abc(){
    
 console.log(this) //window
}
abc();

Burada this yine global nesneye işaret eder.

İç İçe fonksiyonda This

function abc(){

  function a(){ 
      console.log(this)
  }
    a();
}
abc();

Buradada this yine global nesneye işaret eder.

Bir nesne oluşturucu çağırma

new foo(); 

Bir fonksiyon başında new anahtar kelimesi ile birlikte çağrılırsa bir nesne oluşturucu olarak davranır. Bu fonksiyonun içinde this kelimesi yeni oluşturulan Object'e işaret eder.

Sık düşülen yanılgılar

Foo.method = function() {
    function test() {
        // this genel nesneye işaret eder
    }
    test();
}

Burda ki yanılgı test fonksiyonunun içinde this'in Foo'ya işaret edeceğinin sanılmasıdır, ama bu doğru değildir. javascrip'tin proğramlama hatalarından Biri.

Arrow fonksiyonlara kadar her yeni fonksiyonlar kendi this değerini tanımlardı. Fonksiyonları Nesne olarak çağırma, Nesneye ait metot tanımlanırsa This işaret ettiği değişkenler undefined çıktısı verir. Bu yapının nesne yönelimli programlama tarzına uygun olmadığını kanıtladı.

function Person() {
  // The Person() fonksiyonu kendini temsil eden this değerini oluşturuyor
  this.age = 0;

  setInterval(function growUp() {
    // non-strict modda, growUp() fonksiyonuda her fonksiyon gibi 
    // kendi this değerini tanımlar
    // bu sayede bir üstteki this değerine artık ulaşamıyor oluruz
    this.age++; //bu işlem Person() fonksiyonundaki age değerine işlemez.

     console.log("person: " + this.age); //ÇIKTI:NAN
  }, 1000);
}


var p = new Person(); //fonksiyonu nesne olarak çağırıyoruz.	
	

ECMAScript 3/5'te bu this sorunu this değerinin başka bir değişkene atanarak aşılabilmekteydi. değişkenin ismi "That" ve "self" ve başka isim olması farketmez.

that kelimesinin dilde özel bir anlamı yoktur, ama sıklıkla dış kapsamdaki this'e işaret etmek için kullanılır. Bu yöntem closure kavramı ile birlikte kullanıldığında this değerini program içinde taşımaya da yarar.

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // 'that' bir üstteki this değerine etki eder.
    that.age++;

    console.log("person: " + that.age); //ÇIKTI:1...1000 kadar sayar
  }, 1000);
}


var p = new Person(); //fonksiyonu nesne olarak çağırıyoruz.

Fakat arrow fonksiyonlar kendi this değerine sahip değildir; kapsayıcı yürütme fonksiyonunun this değeri kullanılır. Böylelikle aşağıdaki örnekte olduğu gibi setInterval'e atanmış arrow fonksiyon kendi this değeri olmadığı için Person() fonksiyonunun this değerine etki eder.

function Person(){
  this.age = 0;

  setInterval(() => {
  this.age++; // |this| person objesine atıfta bulunur
  
  console.log("person: " + this.age); //ÇIKTI:1...1000 kadar sayar
  }, 1000);
}


var p = new Person();

Neslerde Method olarak kullanma

---

Arrow fonksiyonları bir nesnede Method olarak kullanalım.

    window.name = "global";

    var person = {
        name: "Ahmet",
    
        shout: function () {
            console.log("Benim adım...: ", this.name);
        },
        shout2: () => {
            console.log("Benim adım...: ", this.name);
        },
        // Shorter syntax
        shout3() {
            console.log("Benim adım...: ", this.name);
        }
    };
    person.shout();  // "Ahmet"
    person.shout2(); // "global"
    person.shout3(); // "Ahmet"

Yukarıda görüldüğü üzere nesnelerde ki This bağlamı Arrow fonksiyonlarda çalışmadı bu demek oluyo Arrow fonksiyonları, Nesnelerde Method olarak kullanmaya uygun değil.

Global Olayına Değinmek

Arrow fonksiyonları, normal fonksiyonlar gibi global objenin bir parçasıdır. Ancak arrow fonksiyonlarının this bağlamı normal fonksiyonlarla farklıdır.

Normal fonksiyonlarda, this bağlamı fonksiyonun çağrıldığı nesneye bağlıdır. Ancak arrow fonksiyonlarında, this bağlamı arrow fonksiyonunun tanımlandığı yerdeki bağlama bağlıdır.

  
const obj = {
  name: "John",
  sayHello: function() {
    console.log(`Merhaba, ben ${this.name}`);
  },
  sayHelloArrow: () => {
    console.log(`Merhaba, ben ${this.name}`);
  }
};
obj.sayHello(); // "Merhaba, ben John"

obj.sayHelloArrow(); // "Merhaba, ben undefined"

Burada, obj nesnesinde iki adet fonksiyon tanımlanmıştır. sayHello fonksiyonu normal bir fonksiyondur ve this bağlamı obj nesnesine bağlıdır. sayHelloArrow fonksiyonu ise arrow fonksiyonudur ve this bağlamı obj nesnesine değil, global objeye bağlıdır. Bu yüzden sayHelloArrow fonksiyonu içinde this.name ifadesi undefined değerini döndürür.

Arrow fonksiyonlarının bu özelliği, callback fonksiyonları gibi this bağlamının önemli olduğu durumlarda dikkatli olunması gerektiğini gösterir.

Parantez Kullanımı

Arrow fonksiyonları kullanırken parantezlerin kullanımı bazen karışıklık yaratabilir.

  
const sayiDondur = () => 42;
const sayiDondur2 = _ => 42;

const topla = (a, b) => a + b;
const topla2 = (a, b) => (a + b);

const hesapla = (a, b) => {
  const carpim = a * b;
  return carpim;
};

Yukarıdaki örneklerde, farklı parantez kullanımlarını görebilirsiniz. sayiDondur()fonksiyonu hiçbir parametre almaz ve sonuç olarak 42 döndürür. Bu fonksiyon için parametreleri göstermek için boş parantez kullanılabilir veya _ karakteri kullanılabilir.

topla() ve hesapla() fonksiyonları iki parametre alır ve işlemlerini süslü parantezler {} içinde yaparlar. topla2() fonksiyonu aynı işlemi yapar ama parantezleri kullanarak daha okunaklı hale getirilir.

Örnekler

Map Fonksiyonu

Map fonksiyonu, bir dizideki her bir öğe için bir işlem yapmamızı sağlar ve sonuçları yeni bir dizi olarak döndürür. Eski yöntemle yazılan bir map fonksiyonu şöyle olabilir:

  
const dizi = [1, 2, 3, 4, 5];
const katSayi = 2;
const sonuc = dizi.map(function(ogeler) {
  return ogeler * katSayi;
});

Arrow fonksiyonu kullanarak bu fonksiyonu daha kısa bir şekilde yazabiliriz:

  
const dizi = [1, 2, 3, 4, 5];
const katSayi = 2;
const sonuc = dizi.map(ogeler => ogeler * katSayi);

Filter Fonksiyonu

Filter fonksiyonu, bir dizideki öğeleri belirli bir koşula göre filtrelememizi sağlar. Eski yöntemle yazılan bir filter fonksiyonu şöyle olabilir:

  
const dizi = [1, 2, 3, 4, 5];
const sonuc = dizi.filter(function(ogeler) {
  return ogeler % 2 === 0;
});

Arrow fonksiyonu kullanarak bu fonksiyonu daha kısa bir şekilde yazabiliriz:

 
const dizi = [1, 2, 3, 4, 5];
const sonuc = dizi.filter(ogeler => ogeler % 2 === 0);

Reduce Fonksiyonu

Reduce fonksiyonu, bir dizideki öğeleri birleştirerek tek bir sonuç döndürmemizi sağlar. Eski yöntemle yazılan bir reduce fonksiyonu şöyle olabilir:

  
const dizi = [1, 2, 3, 4, 5];
const baslangicDegeri = 0;
const sonuc = dizi.reduce(function(oncekiDeger, suankiDeger) {
  return oncekiDeger + suankiDeger;
}, baslangicDegeri);

Arrow fonksiyonu kullanarak bu fonksiyonu daha kısa bir şekilde yazabiliriz:

  
const dizi = [1, 2, 3, 4, 5];
const baslangicDegeri = 0;
const sonuc = dizi.reduce((onDeger, suDeger) => onDeger + suDeger, basDegeri);

Argüman Özelliği

Arrow fonksiyonun argüman özelliği yok

  /* ES5 */
let func1 = function(){
     console.log(arguments);
}

func1(1,2,3,4); //function, Symbol(Symbol.iterator)

/* ES6 arrow func */
let func2 = () => {
     console.log(arguments);
}

func2(1,2,3,4); // Uncaught ReferenceError:arguments is not defined

New oparöter kullanımı

---

Ok işlevleri Nesneleri oluşturmak için kullanılamaz ve kullanıldıklarında hata atarlar.

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

prototype Özelliği Kullanımı

---

Ok fonksiyonlarının bir prototype özelliği yoktur.

var Foo = () => {};
console.log(Foo.prototype); // undefined

yield anahtar sözcüğünün kullanımı

---

yield Anahtar kelime bir ok fonksiyonun gövdesinde kullanılamaz. Sonuç olarak, ok fonksiyonları generatör olarak kullanılamaz.

Sonuç:

Arrow fonksiyonları, daha kısa ve okunaklı kod yazmamızı sağlar. Temel kullanımı () => {} şeklindedir ve gereksiz parantezleri kaldırarak daha kısa hale getirebiliriz. Parantezlerin kullanımı bazen karışıklık yaratabilir ama birkaç örnekle kolayca öğrenebilirsiniz. Arrow fonksiyonları, özellikle map, filter ve reduce gibi fonksiyonlarda daha okunaklı ve kısa kod yazmak için idealdir.

44

Gönder