Cara Menggunakan Argumen dan Parameter ES6
Diterbitkan: 2022-03-10ECMAScript 6 (atau ECMAScript 2015) adalah versi terbaru dari standar ECMAScript dan telah sangat meningkatkan penanganan parameter dalam JavaScript. Kami sekarang dapat menggunakan parameter istirahat, nilai default dan destrukturisasi, di antara fitur-fitur baru lainnya.
Dalam tutorial ini, kita akan mengeksplorasi argumen dan parameter secara detail dan melihat bagaimana ECMAScript 6 telah meningkatkannya.
Argumen Versus Parameter
Argumen dan parameter sering disebut secara bergantian. Namun demikian, untuk tujuan tutorial ini, kami akan membuat perbedaan. Dalam kebanyakan standar, parameter (atau parameter formal) adalah apa yang diberikan dalam deklarasi fungsi, dan argumen (atau parameter aktual) adalah apa yang diteruskan ke fungsi tersebut. Pertimbangkan fungsi ini:
function foo(param1, param2) { // do something } foo(10, 20);
Dalam fungsi ini, param1
dan param2
adalah parameter fungsi, dan nilai yang diteruskan ke fungsi ( 10
dan 20
) adalah argumen.
Operator Penyebaran (…)
Dalam ECMAScript 5, metode apply()
adalah alat yang mudah digunakan untuk melewatkan array sebagai argumen ke suatu fungsi. Misalnya, ini biasanya digunakan dengan metode Math.max()
untuk menemukan nilai tertinggi dalam array. Pertimbangkan fragmen kode ini:
var myArray = [5, 10, 50]; Math.max(myArray); // Error: NaN Math.max.apply(Math, myArray); // 50
Metode Math.max()
tidak mendukung array; itu hanya menerima angka. Ketika sebuah array dilewatkan ke fungsi Math.max()
, itu akan memunculkan kesalahan. Tetapi ketika metode apply()
digunakan, array dikirim sebagai nomor individual, sehingga metode Math.max()
dapat menanganinya.
Untungnya, dengan diperkenalkannya operator spread di ECMAScript 6, kita tidak perlu lagi menggunakan metode apply()
. Dengan operator spread, kita dapat dengan mudah memperluas ekspresi menjadi beberapa argumen:
var myArray = [5, 10, 50]; Math.max(...myArray); // 50
Di sini, operator spread memperluas myArray
untuk membuat nilai individual untuk fungsi tersebut. Meskipun simulasi operator spread menggunakan apply()
di ECMAScript 5 dimungkinkan, sintaksnya membingungkan dan tidak memiliki fleksibilitas operator spread. Operator spread tidak hanya lebih mudah digunakan, tetapi juga mengemas lebih banyak fitur. Misalnya, dapat digunakan beberapa kali dan dapat dicampur dengan argumen lain dalam pemanggilan function
:
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
Keuntungan lain dari operator spread adalah dapat dengan mudah digunakan dengan konstruktor:
new Date(...[2016, 5, 6]); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)
Tentu saja, kita dapat menulis ulang kode sebelumnya di ECMAScript 5, tetapi kita perlu menggunakan pola yang rumit untuk menghindari kesalahan ketik:
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)
Menyebarkan Dukungan Browser Operator Dalam Panggilan Fungsi
Peramban desktop:
Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari |
---|---|---|---|---|---|
46 | 27 | – | Didukung | – | 7.1 |
Browser seluler:
Chrome untuk Android | Firefox Seluler | Safari Seluler | Opera Seluler | IE Seluler |
---|---|---|---|---|
46 | 27 | 8 | – | – |
Parameter Istirahat
Parameter rest memiliki sintaks yang sama dengan operator spread, tetapi alih-alih memperluas array menjadi parameter, ia mengumpulkan parameter dan mengubahnya menjadi array.
function myFunction(...options) { return options; } myFunction('a', 'b', 'c'); // ["a", "b", "c"]
Jika tidak ada argumen, parameter sisanya akan disetel ke array kosong:
function myFunction(...options) { return options; } myFunction(); // []
Parameter istirahat sangat berguna saat membuat fungsi variadik (fungsi yang menerima sejumlah variabel argumen). Memiliki manfaat sebagai array, parameter rest dapat dengan mudah menggantikan objek arguments
(yang akan kami jelaskan nanti dalam tutorial ini). Pertimbangkan fungsi ini, yang ditulis dalam ECMAScript 5:
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
Fungsi ini memeriksa apakah string berisi sejumlah substring. Masalah pertama dengan fungsi ini adalah kita harus melihat ke dalam tubuh function
untuk melihat bahwa dibutuhkan banyak argumen. Masalah kedua adalah bahwa iterasi harus dimulai dari 1
bukannya 0
, karena arguments[0]
menunjuk ke argumen pertama. Jika nanti kami memutuskan untuk menambahkan parameter lain sebelum atau sesudah string, kami mungkin lupa memperbarui loop. Dengan parameter lainnya, kami dengan mudah menghindari masalah ini:
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
Output dari fungsi ini sama dengan yang sebelumnya. Di sini sekali lagi, string
parameter diisi dengan argumen yang dilewatkan terlebih dahulu, tetapi argumen lainnya dimasukkan ke dalam array dan ditetapkan ke keys
variabel .
Menggunakan parameter sisanya alih-alih objek arguments
meningkatkan keterbacaan kode dan menghindari masalah pengoptimalan dalam JavaScript. Namun demikian, parameter selebihnya bukan tanpa batasan. Misalnya, itu harus menjadi argumen terakhir; jika tidak, kesalahan sintaks akan terjadi:
function logArguments(a, ...params, b) { console.log(a, params, b); } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter
Batasan lainnya adalah hanya satu parameter istirahat yang diperbolehkan dalam deklarasi function
:
function logArguments(...param1, ...param2) { } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter
Dukungan Browser Parameter Istirahat
Peramban desktop:
Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari |
---|---|---|---|---|---|
47 | 15 | – | Didukung | 34 | – |
Browser seluler:
Chrome untuk Android | Firefox Seluler | Safari Seluler | Opera Seluler | IE Seluler |
---|---|---|---|---|
47 | 15 | – | – | – |
Parameter Default
Parameter Default Dalam ECMAScript 5
JavaScript tidak mendukung parameter default di ECMAScript 5, tetapi ada solusi yang mudah. Menggunakan operator logika OR
( ||
) di dalam fungsi, kita dapat dengan mudah mensimulasikan parameter default di ECMAScript 5. Pertimbangkan fungsi ini:
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
Fungsi ini mengharapkan dua argumen, tetapi ketika dipanggil tanpa argumen, fungsi ini akan menggunakan nilai default. Di dalam fungsi, argumen yang hilang secara otomatis disetel ke tidak terdefinisi; jadi, kami dapat mendeteksi argumen ini dan mendeklarasikan nilai default untuk mereka. Untuk mendeteksi argumen yang hilang dan menyetel nilai default, kami menggunakan operator logika OR
( ||
). Operator ini memeriksa argumen pertamanya: Jika benar, operator mengembalikannya; jika tidak, operator mengembalikan argumen kedua.
Pendekatan ini umumnya digunakan dalam fungsi, tetapi memiliki kekurangan. Melewati 0
atau null
akan memicu nilai default juga, karena ini dianggap sebagai nilai palsu. Jadi, jika kita benar-benar perlu meneruskan 0
atau null
ke fungsi ini, kita memerlukan cara alternatif untuk memeriksa apakah ada argumen yang hilang:
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
Di dalam fungsi ini, jenis argumen yang diteruskan diperiksa untuk memastikannya tidak ditentukan sebelum nilai default ditetapkan. Pendekatan ini hanya membutuhkan sedikit lebih banyak kode, tetapi ini adalah alternatif yang lebih aman dan memungkinkan kita untuk melewatkan 0
dan null
ke fungsi tersebut.
Parameter Default Dalam ECMAScript 6
Dengan ECMAScript 6, kita tidak perlu lagi memeriksa nilai yang tidak ditentukan untuk mensimulasikan parameter default. Kita sekarang dapat menempatkan nilai default tepat di deklarasi function
:
function foo(a = 10, b = 10) { console.log(a, b); } foo(5); // 5 10 foo(0, null); // 0 null
Seperti yang Anda lihat, menghilangkan argumen akan memicu nilai default, tetapi melewatkan 0
atau null
tidak. Kami bahkan dapat menggunakan fungsi untuk mengambil nilai untuk parameter default:
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)
Perhatikan bahwa fungsi getParam
dipanggil hanya jika argumen kedua dihilangkan. Jadi, ketika kita memanggil fungsi multiply()
dengan dua parameter, peringatan tidak akan ditampilkan.
Fitur menarik lainnya dari parameter default adalah kita dapat merujuk ke parameter dan variabel lain dalam deklarasi function
:
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
Anda bahkan dapat melakukan operasi dalam deklarasi function
:
function myFunction(a, b = ++a, c = a*b) { console.log(c); } myFunction(5); // 36
Perhatikan bahwa, tidak seperti beberapa bahasa lain, JavaScript mengevaluasi parameter default pada waktu panggilan:
function add(value, array = []) { array.push(value); return array; } add(5); // [5] add(6); // [6], not [5, 6]
Dukungan Browser Parameter Default
Peramban desktop:
Fitur | Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari |
---|---|---|---|---|---|---|
Dukungan dasar | 49 | 15 | – | 14 | – | – |
Parameter tanpa default setelah parameter default | 49 | 26 | – | 14 | – | – |
Browser seluler:
Fitur | Chrome untuk Android | Firefox Seluler | Safari Seluler | Opera Seluler | IE Seluler |
---|---|---|---|---|---|
Dukungan dasar | 49 | 15 | – | – | – |
Parameter tanpa default setelah parameter default | 46 | 26 | – | – | – |
Destrukturisasi
Destructuring adalah fitur baru di ECMAScript 6 yang memungkinkan kita mengekstrak nilai dari array dan objek dan menetapkannya ke variabel menggunakan sintaks yang mirip dengan literal objek dan array. Sintaksnya jelas dan mudah dimengerti dan sangat berguna saat meneruskan argumen ke suatu fungsi.
Dalam ECMAScript 5, objek konfigurasi sering digunakan untuk menangani sejumlah besar parameter opsional, terutama ketika urutan properti tidak penting. Pertimbangkan fungsi ini:
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);
Pola ini biasanya digunakan oleh pengembang JavaScript, dan berfungsi dengan baik, tetapi kita harus melihat ke dalam badan function
untuk melihat parameter apa yang diharapkan. Dengan parameter yang dirusak, kami dapat dengan jelas menunjukkan parameter dalam deklarasi function
:
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);
Dalam fungsi ini, kami telah menggunakan pola perusakan objek, bukan objek konfigurasi. Ini membuat fungsi kita tidak hanya lebih ringkas, tetapi lebih mudah dibaca.
Kami juga dapat menggabungkan parameter yang tidak terstruktur dengan yang biasa:
function initiateTransfer(param1, {protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer('some value', options);
Perhatikan bahwa kesalahan tipe akan muncul jika parameter dihilangkan dalam pemanggilan function
:
function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer(); // TypeError: Cannot match against 'undefined' or 'null'
Ini adalah perilaku yang diinginkan saat kita membutuhkan parameter, tetapi bagaimana jika kita ingin parameter tersebut opsional? Untuk mencegah kesalahan ini ketika parameter tidak ada, kita perlu menetapkan nilai default ke parameter yang didestruktur:
function initiateTransfer({protocol, port, delay, retries, timeout, log} = {}) { // code to initiate transfer } initiateTransfer(); // no error
Dalam fungsi ini, objek kosong disediakan sebagai nilai default untuk parameter yang dirusak. Sekarang, jika fungsi ini dipanggil tanpa parameter apa pun, tidak akan terjadi kesalahan.
Kami juga dapat menetapkan nilai default untuk setiap parameter yang dirusak:
function initiateTransfer({ protocol = 'http', port = 800, delay = 150, retries = 10, timeout = 500, log = true }) { // code to initiate transfer }
Dalam contoh ini, setiap properti memiliki parameter default, sehingga kita tidak perlu lagi memeriksa parameter yang tidak ditentukan secara manual dan menetapkan nilai default di dalam badan function
.
Merusak Dukungan Browser
Peramban desktop:
Fitur | Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari |
---|---|---|---|---|---|---|
Dukungan dasar | 49 | 2.0 | – | 14 | – | 7.1 |
Parameter yang dirusak dengan penetapan nilai default | 49 | 47 | – | 14 | – | – |
Browser seluler:
Fitur | Chrome untuk Android | Firefox Seluler | Safari Seluler | Opera Seluler | IE Seluler |
---|---|---|---|---|---|
Dukungan dasar | 49 | 1 | 8 | – | – |
Parameter tanpa default setelah parameter default | 49 | 47 | – | – | – |
Melewati Argumen
Ada dua cara untuk meneruskan argumen ke suatu fungsi: dengan referensi atau berdasarkan nilai. Memodifikasi argumen yang diteruskan dengan referensi direfleksikan secara global, tetapi memodifikasi argumen yang diteruskan dengan nilai hanya direfleksikan di dalam fungsi.
Dalam beberapa bahasa, seperti Visual Basic dan PowerShell, kami memiliki opsi untuk menentukan apakah akan meneruskan argumen dengan referensi atau berdasarkan nilai, tetapi tidak demikian halnya dengan JavaScript.
Melewati Argumen Dengan Nilai
Secara teknis, JavaScript hanya dapat melewati nilai. Saat kita meneruskan argumen ke fungsi berdasarkan nilai, salinan nilai itu dibuat dalam lingkup function
. Jadi, setiap perubahan nilai hanya tercermin di dalam function
. Pertimbangkan contoh ini:
var a = 5; function increment(a) { a = ++a; console.log(a); } increment(a); // 6 console.log(a); // 5
Di sini, memodifikasi argumen di dalam fungsi tidak berpengaruh pada nilai aslinya. Jadi, ketika variabel dilog dari luar fungsi, nilai yang tercetak masih 5
.
Melewati Argumen Dengan Referensi
Dalam JavaScript, semuanya dilewatkan oleh nilai, tetapi ketika kami melewatkan variabel yang merujuk ke objek (termasuk array), "nilai" adalah referensi ke objek, dan mengubah properti dari objek yang direferensikan oleh variabel tidak mengubah objek yang mendasari.
Pertimbangkan fungsi ini:
function foo(param){ param.bar = 'new value'; } obj = { bar : 'value' } console.log(obj.bar); // value foo(obj); console.log(obj.bar); // new value
Seperti yang Anda lihat, properti objek dimodifikasi di dalam fungsi, tetapi nilai yang dimodifikasi terlihat di luar fungsi.
Ketika kita melewatkan nilai non-primitif seperti array atau objek, di belakang layar sebuah variabel dibuat yang menunjuk ke lokasi objek asli dalam memori. Variabel ini kemudian diteruskan ke fungsi, dan memodifikasinya akan memengaruhi objek aslinya.
Ketik Memeriksa Dan Hilang Atau Parameter Ekstra
Dalam bahasa yang sangat diketik, kita harus menentukan jenis parameter dalam deklarasi function
, tetapi JavaScript tidak memiliki fitur ini. Dalam JavaScript, tidak masalah jenis data apa atau berapa banyak argumen yang kita berikan ke suatu fungsi.
Misalkan kita memiliki fungsi yang hanya menerima satu argumen. Saat kita memanggil fungsi itu, kita tidak dibatasi hanya untuk melewatkan satu argumen ke fungsi tersebut; kita bebas menyampaikan satu, dua atau lebih argumen! Kami bahkan dapat memilih untuk tidak melewatkan apa pun, dan tidak ada kesalahan yang akan terjadi.
Jumlah argumen dan parameter dapat berbeda dalam dua cara:
- Lebih sedikit argumen daripada parameter .
Parameter yang hilang akan sama denganundefined
. - Lebih banyak argumen daripada parameter .
Parameter tambahan akan diabaikan tetapi dapat diambil melalui argumen variabel seperti array khusus (dibahas selanjutnya).
Argumen Wajib
Jika argumen hilang dalam panggilan function
, itu akan disetel ke undefined
. Kita dapat memanfaatkan perilaku ini dan membuat kesalahan jika argumen dihilangkan:
function foo(mandatory, optional) { if (mandatory === undefined) { throw new Error('Missing parameter: mandatory'); } }
Dalam ECMAScript 6, kita dapat mengambil ini lebih jauh dan menggunakan parameter default untuk menetapkan argumen wajib:
function throwError() { throw new Error('Missing parameter'); } function foo(param1 = throwError(), param2 = throwError()) { // do something } foo(10, 20); // ok foo(10); // Error: missing parameter
Argumen Obyek
Dukungan untuk parameter istirahat ditambahkan ke ECMAScript 4 dengan maksud untuk mengganti objek arguments
, tetapi ECMAScript 4 tidak pernah membuahkan hasil. Dengan dirilisnya ECMAScript 6, JavaScript sekarang secara resmi mendukung parameter lainnya. Itu juga membatalkan rencana untuk menjatuhkan dukungan untuk objek arguments
.
Objek arguments
adalah objek seperti array yang tersedia dalam semua fungsi. Ini memungkinkan nilai argument
yang diteruskan ke fungsi untuk diambil dengan nomor, bukan dengan nama. Objek memungkinkan kita untuk melewatkan sejumlah argumen ke suatu fungsi. Perhatikan potongan kode berikut:
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);
Fungsi ini mengharapkan untuk menerima hanya satu argumen. Ketika kita memanggilnya dengan dua argumen, argumen pertama dapat diakses dalam fungsi dengan nama parameter param1
atau objek arguments[0]
, tetapi argumen kedua hanya dapat diakses sebagai arguments[1]
. Juga, perhatikan bahwa objek arguments
dapat digunakan bersama dengan argumen bernama.
Objek arguments
berisi entri untuk setiap argumen yang diteruskan ke fungsi, dan indeks entri pertama dimulai dari 0
. Jika kita ingin mengakses lebih banyak argumen dalam contoh di atas, kita akan menulis arguments[2]
, arguments[3]
dan seterusnya.
Kami bahkan dapat melewati pengaturan parameter bernama sama sekali dan hanya menggunakan objek arguments
:
function checkParams() { console.log(arguments[1], arguments[0], arguments[2]); } checkParams(2, 4, 6); // 4 2 6
Faktanya, parameter bernama adalah kenyamanan, bukan keharusan. Demikian pula, parameter lainnya dapat digunakan untuk mencerminkan argumen yang diteruskan:
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);
Objek arguments
adalah objek seperti array, tetapi tidak memiliki metode array seperti slice()
dan foreach()
. Untuk menggunakan metode array pada objek arguments
, objek harus diubah terlebih dahulu menjadi array nyata:
function sort() { var a = Array.prototype.slice.call(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]
Dalam fungsi ini, Array.prototype.slice.call()
digunakan sebagai cara cepat untuk mengubah objek arguments
menjadi array. Selanjutnya, metode sort()
mengurutkan item array dan mengembalikannya.
ECMAScript 6 memiliki cara yang lebih mudah. Array.from()
, tambahan baru di ECMAScript 6, membuat larik baru dari objek mirip larik apa pun:
function sort() { var a = Array.from(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]
Properti Panjang
Meskipun objek argumen secara teknis bukan array, ia memiliki properti length
yang dapat digunakan untuk memeriksa jumlah argumen yang diteruskan ke suatu fungsi:
function countArguments() { console.log(arguments.length); } countArguments(); // 0 countArguments(10, null, "string"); // 3
Dengan menggunakan properti length
, kami memiliki kontrol yang lebih baik atas jumlah argumen yang diteruskan ke suatu fungsi. Misalnya, jika suatu fungsi memerlukan dua argumen untuk bekerja, kita bisa menggunakan properti length
untuk memeriksa jumlah argumen yang diteruskan, dan membuat kesalahan jika jumlahnya lebih sedikit dari yang diharapkan:
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 } }
Parameter istirahat adalah array, jadi mereka memiliki properti length
. Dalam ECMAScript 6 kode sebelumnya dapat ditulis ulang dengan parameter istirahat:
function foo(...params) { if (params.length < 2) { throw new Error("This function expects at least two arguments"); } else if (params.length === 2) { // do something } }
Properti Penelepon Dan Penelepon
Properti callee
mengacu pada fungsi yang sedang berjalan, dan caller
mengacu pada fungsi yang memanggil fungsi yang sedang dieksekusi. Dalam mode ketat ECMAScript 5, properti ini tidak digunakan lagi, dan mencoba mengaksesnya menyebabkan TypeError.
Properti arguments.callee
berguna dalam fungsi rekursif (fungsi rekursif adalah fungsi reguler yang mengacu pada dirinya sendiri dengan namanya), terutama ketika nama fungsi tidak tersedia (fungsi anonim). Karena fungsi anonim tidak memiliki nama, satu-satunya cara untuk merujuknya adalah dengan arguments.callee
.
var result = (function(n) { if (n <= 1) { return 1; } else { return n * arguments.callee(n - 1); } })(4); // 24
Objek Argumen Dalam Mode Ketat Dan Tidak Ketat
Dalam mode non-ketat ECMAScript 5, objek arguments
memiliki fitur yang tidak biasa: Ini menjaga nilainya tetap sinkron dengan nilai parameter bernama yang sesuai.
Perhatikan potongan kode berikut:
function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // true return param } foo(200); // 500
Di dalam fungsi ini, nilai baru diberikan ke arguments[0]
. Karena nilai arguments
' selalu sinkron dengan nilai parameter bernama, perubahan ke arguments[0]
juga akan mengubah nilai param
. Faktanya, mereka seperti dua nama berbeda untuk variabel yang sama. Dalam mode ketat ECMAScript 5, perilaku objek arguments
yang membingungkan ini telah dihapus:
"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
Kali ini, mengubah arguments[0]
tidak memengaruhi param
, dan hasilnya seperti yang diharapkan. Output dari fungsi ini di ECMAScript 6 sama seperti di ECMAScript 5 mode ketat, tetapi perlu diingat bahwa ketika nilai default digunakan dalam deklarasi function
, objek arguments
tidak terpengaruh:
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');
Dalam fungsi ini, meskipun param3
memiliki nilai default, itu tidak sama dengan arguments[2]
karena hanya dua argumen yang diteruskan ke fungsi. Dengan kata lain, menyetel nilai default tidak berpengaruh pada objek arguments
.
Kesimpulan
ECMAScript 6 telah membawa ratusan perbaikan kecil dan besar untuk JavaScript. Semakin banyak, pengembang menggunakan fitur ECMAScript 6, dan segera fitur ini tidak dapat dihindari. Dalam tutorial ini, kita telah mempelajari bagaimana ECMAScript 6 telah meningkatkan penanganan parameter dalam JavaScript, tetapi kita baru saja menggores permukaan ECMAScript 6. Banyak fitur baru dan menarik lainnya dari bahasa ini yang layak untuk dicoba.
Tautan
- Tabel Kompatibilitas ECMAScript 6, Juriy Zaytsev
- “Spesifikasi Bahasa ECMAScript 2015,” ECMA International