İşlev ifadeleri

İşlev ifadeleri, bir ifadenin beklendiği yerlerde oluşturulan işlevlerdir. İşlev ifadeleriyle sık sık bir değişkene atanmış değerler görürsünüz. İşlev bildirimi her zaman ad gerektirse de, tanımlayıcıyı atlayıp function anahtar kelimesinin ardından isteğe bağlı parametreler içeren bir parantez çifti ekleyerek anonim işlevler oluşturmak için işlev ifadelerini kullanabilirsiniz:

const myVariable = function() { };

Daha sonra değişkenin tanımlayıcısını kullanarak bu işlev ifadelerini çağırabilirsiniz:

const myVariable = function() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

İşlev ifadelerini, işlev bildirimlerine benzer bir söz dizimi kullanarak adlandırılmış işlevler oluşturmak için de kullanabilirsiniz:

const myVariable = function myFunction() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

Bununla birlikte, işlev bildirimlerinin aksine, adlandırılmış bir işlev ifadesine yalnızca işlevin kendi içinden işlev adı tarafından erişilebilir:

const myVariable = function myFunction() {
  console.log( `I'm a ${ typeof myFunction }.`);
};

typeof myFunction;
> "undefined"

typeof myVariable;
> "function"

myVariable();
> "I'm a function."

İşlev ifadeleriyle ilişkilendirilen adlar, temel olarak hata ayıklama açısından yararlıdır. Adlandırılmış işlev ifadesi, kendini yinelemeli olarak da çağırabilir ancak bu, modern geliştirmede çok yaygın bir kullanım alanı değildir:

const myVariable = function myFunction() {
    console.log( "One second elapsed." );
    setTimeout( myFunction, 1000 );
};

setTimeout( myVariable, 1000 );
> "One second elapsed."
> "One second elapsed."
> "One second elapsed."
…

Ok işlevi ifadeleri

Ok işlevi ifadeleri (genellikle "ok işlevleri" veya nadiren "lambda işlevleri" olarak adlandırılır), bazı benzersiz davranışlara sahip anonim işlev ifadeleri oluşturmak için kısa bir söz dizimi sağlamak amacıyla ES6'da kullanıma sunulmuştur.

Bir ifadenin beklendiği her yerde (örneğin, bir değişkene atanmış değer olarak) bir ok işlevi oluşturabilirsiniz. Bir ok işlevi, sıfır veya daha fazla parametre içeren eşleşen parantez çiftinden, tek bir eşittir işareti ile büyüktür karakterinden (=>) oluşan bir ok ve işlev gövdesini içeren bir çift küme parantezinden oluşur:

const myFunction = () => {};

Belirli koşullar altında, söz dizimini daha da kompakt hale getirebilirsiniz. Yalnızca tek bir parametre kullanıyorsanız başlangıç parantezlerini boş bırakabilirsiniz:

const myFunction = myParameter => {};

İşlev gövdesinin tek bir ifadenin değerini döndürmesini istediğinizde, işlev gövdesini süslü ayraç içine almanız veya return anahtar kelimesini almanız gerekir:

const myFunction = () => 2 + 2

myFunction()
> 4

Ok işlevleri, arguments veya this değerleri için kendi bağlamlarının olmaması açısından benzersizdir. Bunun yerine, her iki değeri de ok işlevinin sözlük olarak sarmalayan ortamından (bu bağlamları sağlayan en yakın işlev) devralır.

function myParentFunction() {
    this.myProperty = true;
    let myFunction = () => {
            console.log( this );
    }
    myFunction();
};

let myInstance = new myParentFunction();
> Object { myProperty: true }

Ok işlevlerini çağırın

Ok işlevleri, bağımsız değişkenleri diğer işlev türleriyle aynı şekilde bağlamaz. Bir ok işlevinin gövdesindeki arguments nesnesi, değerini o ok işlevinin en yakın sözlük olarak çevreleyen ortamından devralır:

function myFunction() {
    let myArrowFunction = () => {
            console.log( arguments[ 0 ] );
    }
    myArrowFunction( true );
};

myFunction( false );
> false

Bu örnekte, false bağımsız değişkeniyle çağrılan bir dış işlev, true bağımsız değişkeniyle bir iç ok işlevi çağırır. Ok işlevinin içindeki arguments nesnesi dış işlevdeki bağlamaya çözümlendiğinden, iç işlev dış işlevin false değerini günlüğe kaydeder.

Üst bağlamdan devralınacak bir arguments nesnesi yoksa ok işlevinin arguments nesnesi tanımlanmaz ve buna erişmeye çalışmak bir hataya neden olur:

let myArrowFunction = () => {
    console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined

Hemen Çağrılan İşlev İfadeleri (IIFE)

Bazen "kendi kendine çalışan anonim işlev" olarak da adlandırılan Hemen Çağrılan İşlev İfadesi (IIFE), tanımlandığında hemen çağrılan bir işlev ifadesidir. IIFE, işlevi bir gruplandırma operatörü içine alarak oluşturulan işlev ifadesini kullanır. Daha sonra, eşleşen ikinci bir parantez çifti, işlev tanımının hemen ardından veya gruplandırma operatöründen hemen sonra işlevi çağırır. Standart bir işlev kullanıyorsanız iki yaklaşım arasında pratikte hiçbir fark yoktur:

(function() {
    console.log( "IIFE.")
    }
)();
> "IIFE."

(function() {
    console.log( "IIFE.")
    }
());
> "IIFE."

İlk örnek, gruplandırılmış işlev ifadesini çağırır. İkinci örnek, gruplama operatörleri içinde bir işlev bildirimi çağırır ve nihai sonuç, gruplandırılmış bir ifade olarak değerlendirilir. Sonuç her iki durumda da aynıdır.

Ancak, IIFE'nizin bir ok işlevi olması arasında bir fark vardır. Bu durumda, işlevi çağırmak için kullanılan parantezler, gruplandırma operatörlerinin dışında olmalıdır. Çünkü ok işlevi kendi başına bir ifade değildir ancak ifadenin beklendiği bir bağlamda oluşturulması gerekir. Ok işlevini gruplama operatörlerinin kapsamı içinden çağırmaya çalışmak, bir ifade bağlamında henüz oluşturulmamış bir ok işlevinin çağrılması anlamına gelir:

( () => {
    console.log( "IIFE." );
}() );
> Uncaught SyntaxError: missing ) in parenthetical

Gruplandırma operatörleri bir ifade beklediğinden, bunların içindeki ok işlevi tanımlanır ve böylece onları takip eden parantezlerin gruplandırılmış ifadeyi çağırmasına izin verilir:

( () => {
    console.log( "IIFE." );
} )();
> "IIFE."

Kapsamı yönetmek, özellikle de işlev kapsamlı değişkenler ve işlev bildirimleri ile global kapsamın kirletilmesini önlemek için sıklıkla kullanılan IIFE'ler eski uygulamalar. ES6'da blok kapsamı kullanıma sunulmadan önce, küresel kapsamın kazara kirlenmesini önlemek için bir komut dosyasının tamamını IIFE içine sarmalamak yaygın bir uygulamaydı.

Öğrendiklerinizi sınayın