#1 Arrow Function Kavramı

Ecmascript6 ile Javascript dünyasına giren en önemli özelliklerden biri de, ilhamını CoffeScript’in arrow
fonksiyonlarından alan tabiri caizse ok fonksiyonu da diyebileceğimiz arrow functionlardır. Arrow functionlar
bizlere, klasik Javascripteki fonksiyon tanımı yaparken kullandığımız “function” komutunun yerine “=>” ibaresi ile daha yalın ve okunabilir fonksiyon tanımları yapmamıza olanak sağlar.

Basitçe her iki yapıyı inceleyecek olursak;

 // Regular Function
 function isimYazdir(isim) 
    {console.log("İsim:" + isim)}

 // Arrow Function
const isimYazdir = (isim) => {console.log("İsim:" + isim)};

 // Burada eğer parametre sayımız bir ve fonksiyonumuzun gövdesi tek satırdan oluşursa şu şekilde de yazabiliriz
const isimYazdir = isim => console.log("İsim:" + isim);

Burada arrow fonksiyonumuzu bir değişkene atadık. Normalde arrow fonksiyonlar anonim yani isimsiz fonksiyonlardır. Gerektiği zaman direkt kullanıldığı gibi (IIFE), bir değişkene atanarak da kullanabiliriz.

// IIFE fonksiyon yapısı ile arrow fonksiyonunun direkt kullanımı 
 (isim => console.log(isim))("Merhaba Arrow Function");

Verilen iki parametreyi birleştirip geri döndüren bir fonksiyonu arrow fonksiyon kullanarak yazalım;

const isimGetir = (isim,soyisim) => {
    return isim + " " + soyisim
}

// Kullanım: 
let gelenİsim = isimGetir("Güner","Bilgili");
console.log(gelenİsim)

//Console: Güner Bilgili

Arrow fonksiyonların regular fonksiyonlardan ayıran en önemli özelliklerden bir tanesi de kendi “this” değerine sahip olmamalarıdır. Yani daha açık bir ifade ile bir fonksiyondan nesne üreteceksek, ardından o nesneye ait bir metot tanımlamıssak ve bunu bir arrow fonksiyon ile yazdıysak, içinde kullanılan this anahtar sözcüğü o arrow fonksiyonunu kapsayan ana yürütücü fonksiyonun this değerini kullanır.

function fonk1() {
    this.isim = isim;
    const isimYaz = () => {console.log(this.isim)} // buradaki this, ana fonksiyondaki değişkeni işaret eder.
    isimYaz();
}
// Kullanım:
const isim = new fonk1("Güner Bilgili")
//Console: Güner Bilgili

Peki bu durum normalde regular fonksiyonlarda nasıl diye sorarsak, her bir fonksiyon oluşturulduğu an kendi this değerini tanımlar. Bu durumda aynı örnek üzerinden gidecek olursak “isimYaz” adlı fonksiyon arrow fonksiyon olmasaydı kendi this değerini tanımlayacak ve üstteki değişkene ulaşamayarak undefined döndürecekti.

function fonk1(isim) {
    this.isim = isim;
    function isimYaz() {
        console.log(this.isim); // Buradaki isimYaz fonksiyonu kendi this değerini üreteceği için fonk1'e ait isim değişkenini göremeyecektir.
    }
    isimYaz();
}
// Kullanım:
const isim = new fonk1("Güner Bilgili")
//Console: undefined

Daha fazlası için: - Arrow functions - JavaScript | MDN