ES6 Argümanları ve Parametreleri Nasıl Kullanılır
Yayınlanan: 2022-03-10ECMAScript 6 (veya ECMAScript 2015), ECMAScript standardının en yeni sürümüdür ve JavaScript'te önemli ölçüde geliştirilmiş parametre işleme özelliğine sahiptir. Artık diğer yeni özelliklerin yanı sıra dinlenme parametrelerini, varsayılan değerleri ve yıkımı kullanabiliriz.
Bu öğreticide, argümanları ve parametreleri ayrıntılı olarak inceleyeceğiz ve ECMAScript 6'nın bunları nasıl yükselttiğini göreceğiz.
Argümanlar ve Parametreler
Argümanlar ve parametreler genellikle birbirinin yerine kullanılır. Bununla birlikte, bu eğitimin amacı için bir ayrım yapacağız. Çoğu standartta, parametreler (veya resmi parametreler) fonksiyon bildiriminde verilenlerdir ve argümanlar (veya gerçek parametreler) fonksiyona aktarılanlardır. Bu işlevi düşünün:
function foo(param1, param2) { // do something } foo(10, 20);
Bu fonksiyonda param1
ve param2
fonksiyon parametreleridir ve fonksiyona ( 10
ve 20
) iletilen değerler argümanlardır.
Yayılma Operatörü (…)
ECMAScript 5'te, application apply()
yöntemi, bir diziyi bir işleve argüman olarak iletmek için uygun bir araçtır. Örneğin, bir dizideki en yüksek değeri bulmak için yaygın olarak Math.max()
yöntemiyle birlikte kullanılır. Bu kod parçasını düşünün:
var myArray = [5, 10, 50]; Math.max(myArray); // Error: NaN Math.max.apply(Math, myArray); // 50
Math.max()
yöntemi dizileri desteklemez; sadece sayıları kabul eder. Math.max()
işlevine bir dizi iletildiğinde, bir hata verir. Ancak application() yöntemi kullanıldığında, dizi ayrı sayılar olarak gönderilir, böylece apply()
Math.max()
yöntemi onu işleyebilir.
Neyse ki, ECMAScript 6'da spread operatörünün tanıtılmasıyla, artık application apply()
yöntemini kullanmamıza gerek kalmadı. Spread operatörü ile bir ifadeyi kolayca birden çok argümana genişletebiliriz:
var myArray = [5, 10, 50]; Math.max(...myArray); // 50
Burada, yayılma operatörü, işlev için ayrı değerler oluşturmak üzere myArray
genişletir. ECMAScript 5'te application apply()
kullanarak spread operatörünü simüle etmek mümkün olsa da, sözdizimi kafa karıştırıcıdır ve spread operatörünün esnekliğinden yoksundur. Yayma operatörünün kullanımı daha kolay olmakla kalmaz, aynı zamanda daha fazla özellik içerir. Örneğin, birden çok kez kullanılabilir ve bir function
çağrısında diğer argümanlarla karıştırılabilir:
function myFunction() { for(var i in arguments){ console.log(arguments[i]); } } var params = [10, 15]; myFunction(5, ...params, 20, ...[25]); // 5 10 15 20 25
Yayma operatörünün bir başka avantajı, yapıcılarla kolayca kullanılabilmesidir:
new Date(...[2016, 5, 6]); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)
Elbette, ECMAScript 5'te önceki kodu yeniden yazabiliriz, ancak bir tür hatası almamak için karmaşık bir kalıp kullanmamız gerekir:
new Date.apply(null, [2016, 4, 24]); // TypeError: Date.apply is not a constructor new (Function.prototype.bind.apply(Date, [null].concat([2016, 5, 6]))); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)
Fonksiyon Çağrılarında Yaygın Operatör Tarayıcı Desteği
Masaüstü tarayıcılar:
Krom | Firefox | Internet Explorer | Microsoft Kenarı | Opera | Safari |
---|---|---|---|---|---|
46 | 27 | - | Desteklenen | - | 7.1 |
Mobil tarayıcılar:
Android için Chrome | Firefox Mobil | Safari Mobil | Opera Mobil | IE Mobil |
---|---|---|---|---|
46 | 27 | 8 | - | - |
Dinlenme parametreleri
rest parametresi, spread operatörüyle aynı sözdizimine sahiptir, ancak bir diziyi parametrelere genişletmek yerine parametreleri toplar ve bir diziye dönüştürür.
function myFunction(...options) { return options; } myFunction('a', 'b', 'c'); // ["a", "b", "c"]
Argüman yoksa, rest parametresi boş bir diziye ayarlanır:
function myFunction(...options) { return options; } myFunction(); // []
Bir rest parametresi, değişken bir işlev (değişken sayıda argüman kabul eden bir işlev) oluştururken özellikle yararlıdır. Dizi olma avantajına sahip olan rest parametreleri, kolayca arguments
nesnesinin yerini alabilir (ki bunu bu öğreticide daha sonra açıklayacağız). ECMAScript 5'te yazılmış bu işlevi göz önünde bulundurun:
function checkSubstrings(string) { for (var i = 1; i < arguments.length; i++) { if (string.indexOf(arguments[i]) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true
Bu işlev, bir dizenin birkaç alt dize içerip içermediğini kontrol eder. Bu işlevle ilgili ilk sorun, birden çok argüman aldığını görmek için function
gövdesinin içine bakmamız gerektiğidir. İkinci sorun, yinelemenin 0
yerine 1
başlaması gerektiğidir, çünkü arguments[0]
ilk argümana işaret eder. Daha sonra dizeden önce veya sonra başka bir parametre eklemeye karar verirsek, döngüyü güncellemeyi unutabiliriz. Geri kalan parametrelerle, bu sorunlardan kolayca kaçınırız:
function checkSubstrings(string, ...keys) { for (var key of keys) { if (string.indexOf(key) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true
Bu işlevin çıktısı öncekiyle aynıdır. Burada yine, parametre string
ilk iletilen argümanla doldurulur, ancak geri kalan argümanlar bir diziye konur ve keys
değişkenine atanır.
arguments
nesnesi yerine rest parametresinin kullanılması, kodun okunabilirliğini artırır ve JavaScript'teki optimizasyon sorunlarını önler. Bununla birlikte, dinlenme parametresinin sınırlamaları yoktur. Örneğin, son argüman olmalıdır; aksi takdirde, bir sözdizimi hatası oluşacaktır:
function logArguments(a, ...params, b) { console.log(a, params, b); } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter
Diğer bir sınırlama, function
bildiriminde yalnızca bir dinlenme parametresine izin verilmesidir:
function logArguments(...param1, ...param2) { } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter
Dinlenme Parametreleri Tarayıcı Desteği
Masaüstü tarayıcılar:
Krom | Firefox | Internet Explorer | Microsoft Kenarı | Opera | Safari |
---|---|---|---|---|---|
47 | 15 | - | Desteklenen | 34 | - |
Mobil tarayıcılar:
Android için Chrome | Firefox Mobil | Safari Mobil | Opera Mobil | IE Mobil |
---|---|---|---|---|
47 | 15 | - | - | - |
Varsayılan Parametreler
ECMAScript 5'te Varsayılan Parametreler
JavaScript, ECMAScript 5'teki varsayılan parametreleri desteklemez, ancak kolay bir geçici çözüm vardır. İşlev içinde mantıksal bir OR
operatörü ( ||
) kullanarak, ECMAScript 5'te varsayılan parametreleri kolayca simüle edebiliriz. Şu işlevi göz önünde bulundurun:
function foo(param1, param2) { param1 = param1 || 10; param2 = param2 || 10; console.log(param1, param2); } foo(5, 5); // 5 5 foo(5); // 5 10 foo(); // 10 10
Bu işlev iki bağımsız değişken bekler, ancak bağımsız değişkenler olmadan çağrıldığında varsayılan değerleri kullanır. İşlevin içinde, eksik bağımsız değişkenler otomatik olarak tanımsız olarak ayarlanır; böylece, bu argümanları tespit edebilir ve onlar için varsayılan değerler bildirebiliriz. Eksik argümanları tespit etmek ve varsayılan değerleri ayarlamak için mantıksal OR
operatörünü ( ||
) kullanırız. Bu operatör ilk argümanını inceler: Eğer doğruysa, operatör onu döndürür; değilse, operatör ikinci argümanını döndürür.
Bu yaklaşım, işlevlerde yaygın olarak kullanılır, ancak bir kusuru vardır. 0
veya null
değerini geçmek, bunlar sahte değerler olarak kabul edildiğinden, varsayılan bir değeri de tetikleyecektir. Dolayısıyla, bu fonksiyona gerçekten 0
veya null
gerekiyorsa, bir argümanın eksik olup olmadığını kontrol etmek için alternatif bir yola ihtiyacımız olacaktır:
function foo(param1, param2) { if(param1 === undefined){ param1 = 10; } if(param2 === undefined){ param2 = 10; } console.log(param1, param2); } foo(0, null); // 0, null foo(); // 10, 10
Bu işlevin içinde, varsayılan değerler atanmadan önce tanımsız olduklarından emin olmak için geçirilen argüman türleri kontrol edilir. Bu yaklaşım biraz daha fazla kod gerektirir, ancak daha güvenli bir alternatiftir ve fonksiyona 0
ve null
izin verir.
ECMAScript 6'da Varsayılan Parametreler
ECMAScript 6 ile artık varsayılan parametreleri simüle etmek için tanımsız değerleri kontrol etmemize gerek yok. Artık function
bildirimine varsayılan değerleri koyabiliriz:
function foo(a = 10, b = 10) { console.log(a, b); } foo(5); // 5 10 foo(0, null); // 0 null
Gördüğünüz gibi, bir bağımsız değişkeni atlamak varsayılan değeri tetikler, ancak 0
veya null
değeri geçmek olmaz. Varsayılan parametreler için değerleri almak için işlevleri bile kullanabiliriz:
function getParam() { alert("getParam was called"); return 3; } function multiply(param1, param2 = getParam()) { return param1 * param2; } multiply(2, 5); // 10 multiply(2); // 6 (also displays an alert dialog)
getParam
işlevinin yalnızca ikinci bağımsız değişken atlanırsa çağrıldığını unutmayın. Bu yüzden multiply()
fonksiyonunu iki parametre ile çağırdığımızda uyarı görüntülenmeyecektir.
Varsayılan parametrelerin bir başka ilginç özelliği, function
bildiriminde diğer parametrelere ve değişkenlere başvurabilmemizdir:
function myFunction(a=10, b=a) { console.log('a = ' + a + '; b = ' + b); } myFunction(); // a=10; b=10 myFunction(22); // a=22; b=22 myFunction(2, 4); // a=2; b=4
Hatta function
bildiriminde işlemler gerçekleştirebilirsiniz:
function myFunction(a, b = ++a, c = a*b) { console.log(c); } myFunction(5); // 36
Diğer bazı dillerden farklı olarak JavaScript'in varsayılan parametreleri arama zamanında değerlendirdiğini unutmayın:
function add(value, array = []) { array.push(value); return array; } add(5); // [5] add(6); // [6], not [5, 6]
Varsayılan Parametre Tarayıcı Desteği
Masaüstü tarayıcılar:
Özellik | Krom | Firefox | Internet Explorer | Microsoft Kenarı | Opera | Safari |
---|---|---|---|---|---|---|
Temel destek | 49 | 15 | - | 14 | - | - |
Varsayılan parametreden sonra varsayılan olmayan parametreler | 49 | 26 | - | 14 | - | - |
Mobil tarayıcılar:
Özellik | Android için Chrome | Firefox Mobil | Safari Mobil | Opera Mobil | IE Mobil |
---|---|---|---|---|---|
Temel destek | 49 | 15 | - | - | - |
Varsayılan parametreden sonra varsayılan olmayan parametreler | 46 | 26 | - | - | - |
Şeklini bozma
Yıkım, ECMAScript 6'da dizilerden ve nesneden değerler çıkarmamıza ve bunları nesne ve dizi değişmez değerlerine benzer bir sözdizimi kullanarak değişkenlere atamamıza olanak tanıyan yeni bir özelliktir. Sözdizimi açık ve anlaşılması kolaydır ve özellikle argümanları bir işleve iletirken kullanışlıdır.
ECMAScript 5'te, özellikle özelliklerin sırası önemli olmadığında, çok sayıda isteğe bağlı parametreyi işlemek için genellikle bir yapılandırma nesnesi kullanılır. Bu işlevi düşünün:
function initiateTransfer(options) { var protocol = options.protocol, port = options.port, delay = options.delay, retries = options.retries, timeout = options.timeout, log = options.log; // code to initiate transfer } options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true }; initiateTransfer(options);
Bu model JavaScript geliştiricileri tarafından yaygın olarak kullanılır ve iyi çalışır, ancak hangi parametreleri beklediğini görmek için function
gövdesinin içine bakmamız gerekir. Bozulmuş parametrelerle, function
bildirimindeki parametreleri açıkça belirtebiliriz:
function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer }; var options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true } initiateTransfer(options);
Bu fonksiyonda, bir konfigürasyon nesnesi yerine bir nesne yok etme modeli kullandık. Bu, işlevimizi yalnızca daha özlü kılmakla kalmaz, aynı zamanda okunmasını da kolaylaştırır.
Bozulmuş parametreleri normal olanlarla da birleştirebiliriz:
function initiateTransfer(param1, {protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer('some value', options);
function
çağrısında parametreler atlanırsa bir tür hatasının atılacağını unutmayın:
function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer(); // TypeError: Cannot match against 'undefined' or 'null'
Parametrelerin gerekli olmasına ihtiyacımız olduğunda istenen davranış budur, ancak bunların isteğe bağlı olmasını istiyorsak ne olur? Parametreler eksik olduğunda bu hatayı önlemek için, bozulan parametrelere varsayılan bir değer atamamız gerekiyor:
function initiateTransfer({protocol, port, delay, retries, timeout, log} = {}) { // code to initiate transfer } initiateTransfer(); // no error
Bu işlevde, yapısı bozulan parametreler için varsayılan değer olarak boş bir nesne sağlanır. Şimdi, bu fonksiyon herhangi bir parametre olmadan çağrılırsa, herhangi bir hata oluşmayacaktır.
Ayrıca her bir tahrip edilmiş parametreye bir varsayılan değer atayabiliriz:
function initiateTransfer({ protocol = 'http', port = 800, delay = 150, retries = 10, timeout = 500, log = true }) { // code to initiate transfer }
Bu örnekte, her özelliğin bir varsayılan parametresi vardır ve bu, tanımsız parametreleri manuel olarak kontrol etmemize ve function
gövdesi içinde varsayılan değerler atamamıza gerek kalmaz.
Tarayıcı Desteğini Yok Etme
Masaüstü tarayıcılar:
Özellik | Krom | Firefox | Internet Explorer | Microsoft Kenarı | Opera | Safari |
---|---|---|---|---|---|---|
Temel destek | 49 | 2.0 | - | 14 | - | 7.1 |
Varsayılan değer atamalı yapısı bozulmuş parametre | 49 | 47 | - | 14 | - | - |
Mobil tarayıcılar:
Özellik | Android için Chrome | Firefox Mobil | Safari Mobil | Opera Mobil | IE Mobil |
---|---|---|---|---|---|
Temel destek | 49 | 1 | 8 | - | - |
Varsayılan parametreden sonra varsayılan olmayan parametreler | 49 | 47 | - | - | - |
Argümanları Geçmek
Bir fonksiyona argüman iletmenin iki yolu vardır: referansa göre veya değere göre. Başvuruyla iletilen bir bağımsız değişkenin değiştirilmesi genel olarak yansıtılır, ancak değere göre iletilen bir bağımsız değişkenin değiştirilmesi yalnızca işlevin içinde yansıtılır.
Visual Basic ve PowerShell gibi bazı dillerde, bir argümanın referansa mı yoksa değere göre mi iletileceğini belirtme seçeneğimiz vardır, ancak JavaScript'te durum böyle değildir.
Değere Göre Argümanları Geçmek
Teknik olarak, JavaScript yalnızca değere göre geçebilir. Bir fonksiyona değerine göre bir argüman ilettiğimizde, function
kapsamında o değerin bir kopyası oluşturulur. Bu nedenle, değerdeki herhangi bir değişiklik yalnızca function
içine yansıtılır. Bu örneği düşünün:
var a = 5; function increment(a) { a = ++a; console.log(a); } increment(a); // 6 console.log(a); // 5
Burada, fonksiyon içindeki argümanı değiştirmenin orijinal değer üzerinde hiçbir etkisi yoktur. Bu nedenle, değişken fonksiyonun dışından günlüğe kaydedildiğinde, yazdırılan değer hala 5
.
Referansa Göre Argümanları Geçmek
JavaScript'te her şey değere göre iletilir, ancak bir nesneye (diziler dahil) başvuran bir değişken ilettiğimizde, "değer" nesneye bir başvurudur ve bir değişken tarafından başvurulan bir nesnenin özelliğini değiştirmek, nesneyi değiştirir. temel nesne.
Bu işlevi düşünün:
function foo(param){ param.bar = 'new value'; } obj = { bar : 'value' } console.log(obj.bar); // value foo(obj); console.log(obj.bar); // new value
Gördüğünüz gibi, nesnenin özelliği işlevin içinde değiştirilir, ancak değiştirilen değer işlevin dışında görünür.
Bir dizi veya nesne gibi ilkel olmayan bir değeri ilettiğimizde, sahnenin arkasında orijinal nesnenin bellekteki konumuna işaret eden bir değişken oluşturulur. Bu değişken daha sonra işleve iletilir ve değiştirilmesi orijinal nesneyi etkiler.
Tip Kontrolü ve Eksik veya Ekstra Parametreler
Kesin olarak yazılan bir dilde, function
bildiriminde parametre türünü belirtmemiz gerekir, ancak JavaScript'te bu özellik yoktur. JavaScript'te, bir işleve ne tür veri veya kaç argüman ilettiğimiz önemli değildir.
Sadece bir argümanı kabul eden bir fonksiyonumuz olduğunu varsayalım. Bu işlevi çağırdığımızda, işleve yalnızca bir argüman iletmekle sınırlı değiliz; bir, iki veya daha fazla argüman geçmekte özgürüz! Hatta hiçbir şey iletmemeyi seçebiliriz ve hiçbir hata oluşmaz.
Argüman ve parametre sayısı iki şekilde farklılık gösterebilir:
- Parametrelerden daha az argüman .
Eksik parametrelerundefined
değerine eşit olacaktır. - Parametrelerden daha fazla argüman .
Fazladan parametreler yok sayılır ancak özel dizi benzeri değişken argümanları aracılığıyla alınabilir (sırada ele alınacaktır).
Zorunlu Argümanlar
Bir function
çağrısında bir bağımsız değişken eksikse, undefined
olarak ayarlanır. Bu davranıştan yararlanabilir ve bir argüman atlanırsa bir hata verebiliriz:
function foo(mandatory, optional) { if (mandatory === undefined) { throw new Error('Missing parameter: mandatory'); } }
ECMAScript 6'da bunu daha ileri götürebilir ve zorunlu argümanları ayarlamak için varsayılan parametreleri kullanabiliriz:
function throwError() { throw new Error('Missing parameter'); } function foo(param1 = throwError(), param2 = throwError()) { // do something } foo(10, 20); // ok foo(10); // Error: missing parameter
Argümanlar Nesne
Dinlenme parametreleri desteği, arguments
nesnesini değiştirmek amacıyla ECMAScript 4'e eklendi, ancak ECMAScript 4 hiçbir zaman meyve vermedi. ECMAScript 6'nın piyasaya sürülmesiyle birlikte, JavaScript artık resmi olarak geri kalan parametreleri desteklemektedir. Ayrıca, arguments
nesnesi için desteği düşürme planını da karıştırdı.
arguments
nesnesi, tüm işlevlerde kullanılabilen dizi benzeri bir nesnedir. İşleve iletilen argument
değerlerinin ada göre değil sayıya göre alınmasına izin verir. Nesne, bir fonksiyona herhangi bir sayıda argüman iletmemize izin verir. Aşağıdaki kod parçasını göz önünde bulundurun:
function checkParams(param1) { console.log(param1); // 2 console.log(arguments[0], arguments[1]); // 2 3 console.log(param1 + arguments[0]); // 2 + 2 } checkParams(2, 3);
Bu işlev yalnızca bir bağımsız değişken almayı bekler. Onu iki argümanla çağırdığımızda, ilk argümana fonksiyonda param1
parametre ismi veya argümanlar nesne arguments[0]
ile erişilebilir, ancak ikinci argümana sadece arguments[1]
olarak erişilebilir. Ayrıca, arguments
nesnesinin adlandırılmış argümanlarla birlikte kullanılabileceğini unutmayın.
arguments
nesnesi, işleve iletilen her argüman için bir girdi içerir ve ilk girdinin dizini 0
başlar. Yukarıdaki örnekte daha fazla argümana erişmek isteseydik, arguments[2]
, arguments[3]
vb. yazardık.
Adlandırılmış parametreleri ayarlamayı tamamen atlayabilir ve yalnızca arguments
nesnesini kullanabiliriz:
function checkParams() { console.log(arguments[1], arguments[0], arguments[2]); } checkParams(2, 4, 6); // 4 2 6
Aslında, adlandırılmış parametreler bir zorunluluk değil kolaylıktır. Benzer şekilde, geri kalan parametreler, iletilen argümanları yansıtmak için kullanılabilir:
function checkParams(...params) { console.log(params[1], params[0], params[2]); // 4 2 6 console.log(arguments[1], arguments[0], arguments[2]); // 4 2 6 } checkParams(2, 4, 6);
arguments
nesnesi dizi benzeri bir nesnedir, ancak slice()
ve foreach()
gibi dizi yöntemlerinden yoksundur. arguments
nesnesinde dizi yöntemlerini kullanmak için, nesnenin önce gerçek bir diziye dönüştürülmesi gerekir:
function sort() { var a = Array.prototype.slice.call(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]
Bu işlevde, Array.prototype.slice.call()
, arguments
nesnesini bir diziye dönüştürmenin hızlı bir yolu olarak kullanılır. Ardından, sort()
yöntemi dizinin öğelerini sıralar ve döndürür.
ECMAScript 6'nın daha da basit bir yolu var. ECMAScript 6'daki yeni bir ekleme olan Array.from()
, herhangi bir dizi benzeri nesneden yeni bir dizi oluşturur:
function sort() { var a = Array.from(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]
Uzunluk Özelliği
Argümanlar nesnesi teknik olarak bir dizi olmasa da, bir işleve iletilen argüman sayısını kontrol etmek için kullanılabilecek bir length
özelliğine sahiptir:
function countArguments() { console.log(arguments.length); } countArguments(); // 0 countArguments(10, null, "string"); // 3
length
özelliğini kullanarak, bir işleve iletilen argümanların sayısı üzerinde daha iyi bir kontrole sahibiz. Örneğin, bir işlevin çalışması için iki argüman gerekiyorsa, geçirilen argümanların sayısını kontrol etmek için length
özelliğini kullanabilir ve beklenenden daha azsa bir hata verebiliriz:
function foo(param1, param2) { if (arguments.length < 2) { throw new Error("This function expects at least two arguments"); } else if (arguments.length === 2) { // do something } }
Dinlenme parametreleri dizilerdir, bu nedenle bir length
özelliğine sahiptirler. ECMAScript 6'da önceki kod, dinlenme parametreleriyle yeniden yazılabilir:
function foo(...params) { if (params.length < 2) { throw new Error("This function expects at least two arguments"); } else if (params.length === 2) { // do something } }
Arayan ve Arayan Özellikleri
callee
özelliği, o anda çalışmakta olan işleve başvurur ve caller
, o anda yürütülmekte olan işlevi çağırmış olan işleve başvurur. ECMAScript 5 katı modunda, bu özellikler kullanımdan kaldırılmıştır ve bunlara erişmeye çalışmak bir TypeError'a neden olur.
arguments.callee
özelliği, özyinelemeli işlevlerde (özyinelemeli bir işlev, kendisine adıyla başvuran normal bir işlevdir), özellikle işlev adı mevcut olmadığında (anonim bir işlev) yararlıdır. Anonim bir işlevin bir adı olmadığından, ona başvurmanın tek yolu arguments.callee
.
var result = (function(n) { if (n <= 1) { return 1; } else { return n * arguments.callee(n - 1); } })(4); // 24
Kesin ve Kesin Olmayan Modlarda Argümanlar Nesnesi
ECMAScript 5 katı olmayan modda, arguments
nesnesinin alışılmadık bir özelliği vardır: Değerlerini karşılık gelen adlandırılmış parametrelerin değerleriyle senkronize tutar.
Aşağıdaki kod parçasını göz önünde bulundurun:
function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // true return param } foo(200); // 500
Bu işlevin içinde, arguments[0]
yeni bir değer atanır. arguments
değerleri her zaman adlandırılmış parametrelerin değerleriyle senkronize kaldığından, arguments[0]
da yapılan değişiklik aynı zamanda param
değerini de değiştirecektir. Aslında, aynı değişken için iki farklı isim gibidirler. ECMAScript 5 katı modunda, arguments
nesnesinin bu kafa karıştırıcı davranışı kaldırıldı:
"use strict"; function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // false return param } foo(200); // 200
Bu sefer, arguments[0]
değiştirmek param
etkilemez ve çıktı beklendiği gibi olur. Bu işlevin ECMAScript 6'daki çıktısı, ECMAScript 5 katı modundakiyle aynıdır, ancak function
bildiriminde varsayılan değerler kullanıldığında, arguments
nesnesinin etkilenmediğini unutmayın:
function foo(param1, param2 = 10, param3 = 20) { console.log(param1 === arguments[0]); // true console.log(param2 === arguments[1]); // true console.log(param3 === arguments[2]); // false console.log(arguments[2]); // undefined console.log(param3); // 20 } foo('string1', 'string2');
Bu işlevde, param3
varsayılan bir değere sahip olsa da, işleve yalnızca iki argüman iletildiği için arguments[2]
eşit değildir. Başka bir deyişle, varsayılan değerlerin ayarlanması, arguments
nesnesi üzerinde hiçbir etkiye sahip değildir.
Çözüm
ECMAScript 6, JavaScript'e yüzlerce küçük ve büyük iyileştirme getirdi. Geliştiriciler giderek daha fazla ECMAScript 6 özelliklerini kullanıyor ve yakında bu özellikler kaçınılmaz olacak. Bu öğreticide, ECMAScript 6'nın JavaScript'te parametre işlemeyi nasıl yükselttiğini öğrendik, ancak ECMAScript 6'nın yüzeyini henüz çizdik. Dilin birçok başka yeni ve ilginç özelliği kontrol edilmeye değer.
Bağlantılar
- ECMAScript 6 Uyumluluk Tablosu, Juriy Zaytsev
- “ECMAScript 2015 Dil Belirtimi,” ECMA International