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)

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.

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.


js arrow funtion

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.


js arrow funtion

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


js arrow funtion

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


js arrow funtion

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


js arrow funtion

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


js arrow funtion

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:


js arrow funtion

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

Ş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.

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.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

4065

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.