JavaScript Ok Fonksiyonu

Bu eğitimde, örnekler yardımıyla JavaScript ok işlevi hakkında bilgi edineceksiniz.

Ok işlevi, JavaScript'in ES6 sürümünde sunulan özelliklerden biridir. Normal işlevlere kıyasla daha temiz bir şekilde işlevler oluşturmanıza olanak tanır. Örneğin,
Bu işlev

 // function expression let x = function(x, y) ( return x * y; )

olarak yazılabilir

 // using arrow functions let x = (x, y) => x * y;

bir ok işlevi kullanarak.

Ok Fonksiyonu Sözdizimi

Ok işlevinin sözdizimi şöyledir:

 let myFunction = (arg1, arg2,… argN) => ( statement(s) )

Buraya,

• myFunction işlevin adıdır
• arg1, arg2,… argN fonksiyon bağımsız değişkenleridir
• statement(s) işlev gövdesi

Gövdenin tek bir ifadesi veya ifadesi varsa, ok işlevini şu şekilde yazabilirsiniz:

 let myFunction = (arg1, arg2,… argN) => expression

Örnek 1: Bağımsız Değişken İçermeyen Ok İşlevi

Bir işlev herhangi bir argüman almıyorsa, boş parantezler kullanmalısınız. Örneğin,

 let greet = () => console.log('Hello'); greet(); // Hello

Örnek 2: Tek Bağımsız Değişkenli Ok Fonksiyonu

Bir işlevin yalnızca bir bağımsız değişkeni varsa, parantezleri atlayabilirsiniz. Örneğin,

 let greet = x => console.log(x); greet('Hello'); // Hello 

Örnek 3: İfade Olarak Ok Fonksiyonu

Ayrıca dinamik olarak bir işlev oluşturabilir ve bunu bir ifade olarak kullanabilirsiniz. Örneğin,

 let age = 5; let welcome = (age console.log('Baby') : () => console.log('Adult'); welcome(); // Baby

Örnek 4: Çok Satırlı Ok İşlevleri

Bir işlev gövdesinde birden çok deyim varsa, bunları küme parantezlerinin içine koymanız gerekir (). Örneğin,

 let sum = (a, b) => ( let result = a + b; return result; ) let result1 = sum(5,7); console.log(result1); // 12

Ok Fonksiyonu ile bunu

Normal bir işlevin içinde, bu anahtar sözcük çağrıldığı işlevi ifade eder.

Ancak thisok işlevleriyle ilişkili değildir. Ok işlevinin kendine ait bir özelliği yoktur this. Yani her aradığınızda this, ana kapsamını ifade eder. Örneğin,

Normal bir işlevin içinde

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( // this is accessible console.log(this.age); function innerFunc() ( // this refers to the global object console.log(this.age); console.log(this); ) innerFunc(); ) ) let x = new Person(); x.sayName();

Çıktı

 25 tanımsız Pencere ()

Burada, this.ageiçeriye this.sayName()erişilebilir çünkü this.sayName()bir nesnenin yöntemi.

Ancak, innerFunc()normal bir işlevdir ve this.ageerişilemez çünkü thisgenel nesneye atıfta bulunur (tarayıcıdaki Window nesnesi). Dolayısıyla fonksiyonun this.ageiçinde innerFunc()verir undefined.

Ok işlevinin içinde

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( console.log(this.age); let innerFunc = () => ( console.log(this.age); ) innerFunc(); ) ) const x = new Person(); x.sayName();

Çıktı

 25 25

Burada innerFunc()işlev, ok işlevi kullanılarak tanımlanır. Ve ok işlevinin içinde, thisebeveynin kapsamını ifade eder. Dolayısıyla 25this.age verir .

Bağımsız Değişken Bağlama

Normal işlevler, bağlayıcı argümanlara sahiptir. Bu nedenle, normal bir işleve argümanlar aktardığınızda, bunlara argumentsanahtar kelimeyi kullanarak erişebilirsiniz . Örneğin,

 let x = function () ( console.log(arguments); ) x(4,6,7); // Arguments (4, 6, 7)

Ok işlevlerinin bağımsız değişkenleri yoktur.

Ok işlevini kullanarak bir argümana erişmeye çalıştığınızda hata verecektir. Örneğin,

 let x = () => ( console.log(arguments); ) x(4,6,7); // ReferenceError: Can't find variable: arguments

Bu sorunu çözmek için yayılma sözdizimini kullanabilirsiniz. Örneğin,

 let x = (… n) => ( console.log(n); ) x(4,6,7); // (4, 6, 7)

Sözler ve Geri Çağrılar ile Ok Fonksiyonu

Ok işlevleri, sözler ve geri aramalar yazmak için daha iyi sözdizimi sağlar. Örneğin,

 // ES5 asyncFunction().then(function() ( return asyncFunction1(); )).then(function() ( return asyncFunction2(); )).then(function() ( finish; ));

olarak yazılabilir

 // ES6 asyncFunction() .then(() => asyncFunction1()) .then(() => asyncFunction2()) .then(() => finish);

Ok Fonksiyonlarıyla Kaçınmanız Gereken Şeyler

1. Nesnelerin içinde yöntemler oluşturmak için ok işlevlerini kullanmamalısınız.

 let person = ( name: 'Jack', age: 25, sayName: () => ( // this refers to the global… // console.log(this.age); ) ) person.sayName(); // undefined

2. Yapıcı olarak bir ok işlevini kullanamazsınız . Örneğin,

 let Foo = () => (); let foo = new Foo(); // TypeError: Foo is not a constructor

Not : Ok işlevleri ES6'da tanıtıldı . Bazı tarayıcılar ok işlevlerinin kullanımını desteklemeyebilir. Daha fazla bilgi edinmek için JavaScript Ok Fonksiyonu desteğini ziyaret edin.