Pada Artikel ini kita akan membahas cara membuat fungsi kosong hanya menggunakan satu baris kode dalam JavaScript. Ini adalah cuplikan kode JavaScript satu baris yang menggunakan salah satu fitur ES6 paling populer => Arrow Function
Mari kita definisikan fungsi singkat ini
const noop = () => {};Ekspresi fungsi panah adalah alternatif ringkas untuk ekspresi fungsi tradisional, dengan beberapa perbedaan semantik dan batasan penggunaan yang disengaja
- Fungsi panah tidak memiliki pengikatannya sendiri ke async param => expression async (param1, param2, ...paramN) => { statements } 6, async param => expression async (param1, param2, ...paramN) => { statements } 7, atau async param => expression async (param1, param2, ...paramN) => { statements } 8, dan tidak boleh digunakan sebagai metode
- Fungsi panah tidak dapat digunakan sebagai konstruktor. Memanggil mereka dengan async param => expression async (param1, param2, ...paramN) => { statements } _9 melempar // Traditional anonymous function (function (a) { return a + 100; }); // 1. Remove the word "function" and place arrow between the argument and opening body bracket (a) => { return a + 100; }; // 2. Remove the body braces and word "return" — the return is implied. (a) => a + 100; // 3. Remove the parameter parentheses a => a + 100; 0. Mereka juga tidak memiliki akses ke kata kunci // Traditional anonymous function (function (a) { return a + 100; }); // 1. Remove the word "function" and place arrow between the argument and opening body bracket (a) => { return a + 100; }; // 2. Remove the body braces and word "return" — the return is implied. (a) => a + 100; // 3. Remove the parameter parentheses a => a + 100; 1
- Fungsi panah tidak dapat menggunakan // Traditional anonymous function (function (a) { return a + 100; }); // 1. Remove the word "function" and place arrow between the argument and opening body bracket (a) => { return a + 100; }; // 2. Remove the body braces and word "return" — the return is implied. (a) => a + 100; // 3. Remove the parameter parentheses a => a + 100; 2 di dalam tubuhnya dan tidak dapat dibuat sebagai fungsi generator
param => expression (param) => expression (param1, paramN) => expression param => { statements } (param1, paramN) => { statements } _
Parameter istirahat, parameter default, dan destrukturisasi dalam params didukung, dan selalu membutuhkan tanda kurung
(a, b, ...r) => expression (a = 400, b = 20, c) => expression ([a, b] = [10, 20]) => expression ({ a, b } = { a: 10, b: 20 }) => expression _
Fungsi panah dapat berupa // Traditional anonymous function (function (a) { return a + 100; }); // 1. Remove the word "function" and place arrow between the argument and opening body bracket (a) => { return a + 100; }; // 2. Remove the body braces and word "return" — the return is implied. (a) => a + 100; // 3. Remove the parameter parentheses a => a + 100; 3 dengan mengawali ekspresi dengan kata kunci // Traditional anonymous function (function (a) { return a + 100; }); // 1. Remove the word "function" and place arrow between the argument and opening body bracket (a) => { return a + 100; }; // 2. Remove the body braces and word "return" — the return is implied. (a) => a + 100; // 3. Remove the parameter parentheses a => a + 100; 3
async param => expression async (param1, param2, ...paramN) => { statements } _
Mari uraikan fungsi anonim tradisional menjadi fungsi panah paling sederhana langkah demi langkah. Setiap langkah di sepanjang jalan adalah fungsi panah yang valid
Catatan. Ekspresi fungsi tradisional dan fungsi panah memiliki lebih banyak perbedaan daripada sintaksisnya. Kami akan memperkenalkan perbedaan perilaku mereka secara lebih rinci dalam beberapa subbagian berikutnya
// Traditional anonymous function (function (a) { return a + 100; }); // 1. Remove the word "function" and place arrow between the argument and opening body bracket (a) => { return a + 100; }; // 2. Remove the body braces and word "return" — the return is implied. (a) => a + 100; // 3. Remove the parameter parentheses a => a + 100;
Dalam contoh di atas, tanda kurung di sekitar parameter dan tanda kurung di sekitar badan fungsi dapat dihilangkan. Namun, mereka hanya dapat dihilangkan dalam kasus-kasus tertentu
Tanda kurung hanya dapat dihilangkan jika fungsi memiliki satu parameter sederhana. Jika memiliki beberapa parameter, tidak ada parameter, atau default, destrukturisasi, atau parameter lainnya, tanda kurung di sekitar daftar parameter diperlukan
// Traditional anonymous function (function (a, b) { return a + b + 100; }); // Arrow function (a, b) => a + b + 100; const a = 4; const b = 2; // Traditional anonymous function (no parameters) (function () { return a + b + 100; }); // Arrow function (no arguments) () => a + b + 100;
Kurung hanya dapat dihilangkan jika fungsi mengembalikan ekspresi secara langsung. Jika badan memiliki jalur pemrosesan tambahan, kawat gigi diperlukan — demikian juga kata kunci // Traditional anonymous function (function (a) { return a + 100; }); // 1. Remove the word "function" and place arrow between the argument and opening body bracket (a) => { return a + 100; }; // 2. Remove the body braces and word "return" — the return is implied. (a) => a + 100; // 3. Remove the parameter parentheses a => a + 100; 5. Fungsi panah tidak dapat menebak apa atau kapan Anda ingin kembali
// Traditional anonymous function (function (a, b) { const chuck = 42; return a + b + chuck; }); // Arrow function (a, b) => { const chuck = 42; return a + b + chuck; };
Fungsi panah selalu tidak disebutkan namanya. Jika fungsi panah perlu memanggil dirinya sendiri, gunakan ekspresi fungsi bernama sebagai gantinya. Anda juga dapat menetapkan fungsi panah ke variabel sehingga memiliki nama
// Traditional Function function bob(a) { return a + 100; } // Arrow Function const bob2 = (a) => a + 100;
Fungsi panah dapat memiliki badan yang ringkas atau badan blok biasa
Dalam tubuh yang ringkas, hanya satu ekspresi yang ditentukan, yang menjadi nilai kembalian implisit. Dalam badan blok, Anda harus menggunakan pernyataan // Traditional anonymous function (function (a) { return a + 100; }); // 1. Remove the word "function" and place arrow between the argument and opening body bracket (a) => { return a + 100; }; // 2. Remove the body braces and word "return" — the return is implied. (a) => a + 100; // 3. Remove the parameter parentheses a => a + 100; 5 yang eksplisit
const func = (x) => x * x; // concise body syntax, implied "return" const func2 = (x, y) => { return x + y; }; // with block body, explicit "return" needed
Mengembalikan literal objek menggunakan sintaks tubuh ringkas // Traditional anonymous function (function (a) { return a + 100; }); // 1. Remove the word "function" and place arrow between the argument and opening body bracket (a) => { return a + 100; }; // 2. Remove the body braces and word "return" — the return is implied. (a) => a + 100; // 3. Remove the parameter parentheses a => a + 100; 7 tidak berfungsi seperti yang diharapkan
const func = () => { foo: 1 }; // Calling func() returns undefined! const func2 = () => { foo: function () {} }; // SyntaxError: function statement requires a name const func3 = () => { foo() {} }; // SyntaxError: Unexpected token '{'
Ini karena JavaScript hanya melihat fungsi panah memiliki badan yang ringkas jika token yang mengikuti panah bukan kurung kurawal, jadi kode di dalam kurung kurawal ({}) diurai sebagai urutan pernyataan, di mana // Traditional anonymous function (function (a) { return a + 100; }); // 1. Remove the word "function" and place arrow between the argument and opening body bracket (a) => { return a + 100; }; // 2. Remove the body braces and word "return" — the return is implied. (a) => a + 100; // 3. Remove the parameter parentheses a => a + 100; 8 adalah label, bukan
Untuk memperbaikinya, bungkus literal objek dalam tanda kurung
const func = () => ({ foo: 1 });
Ekspresi fungsi panah hanya boleh digunakan untuk fungsi non-metode karena mereka tidak memiliki async param => expression async (param1, param2, ...paramN) => { statements } 6 sendiri. Mari kita lihat apa yang terjadi ketika kita mencoba menggunakannya sebagai metode
(a, b, ...r) => expression (a = 400, b = 20, c) => expression ([a, b] = [10, 20]) => expression ({ a, b } = { a: 10, b: 20 }) => expression _0
Contoh lain yang melibatkan // Traditional anonymous function (function (a, b) { return a + b + 100; }); // Arrow function (a, b) => a + b + 100; const a = 4; const b = 2; // Traditional anonymous function (no parameters) (function () { return a + b + 100; }); // Arrow function (no arguments) () => a + b + 100; 0
(a, b, ...r) => expression (a = 400, b = 20, c) => expression ([a, b] = [10, 20]) => expression ({ a, b } = { a: 10, b: 20 }) => expression _1
Karena badan kelas memiliki konteks async param => expression async (param1, param2, ...paramN) => { statements } _6, panah berfungsi sebagai bidang kelas yang menutup konteks async param => expression async (param1, param2, ...paramN) => { statements } 6 kelas, dan async param => expression async (param1, param2, ...paramN) => { statements } 6 di dalam badan fungsi panah akan menunjuk dengan benar ke instance (atau kelas itu sendiri, untuk bidang statis). Namun, karena ini adalah penutupan, bukan pengikatan fungsi itu sendiri, nilai async param => expression async (param1, param2, ...paramN) => { statements } 6 tidak akan berubah berdasarkan konteks eksekusi
(a, b, ...r) => expression (a = 400, b = 20, c) => expression ([a, b] = [10, 20]) => expression ({ a, b } = { a: 10, b: 20 }) => expression _2
Properti fungsi panah sering dikatakan sebagai "metode terikat otomatis", karena setara dengan metode normal
(a, b, ...r) => expression (a = 400, b = 20, c) => expression ([a, b] = [10, 20]) => expression ({ a, b } = { a: 10, b: 20 }) => expression _3
Catatan. Bidang kelas ditentukan pada instans, bukan pada prototipe, jadi setiap pembuatan instans akan membuat referensi fungsi baru dan mengalokasikan penutupan baru, yang berpotensi menyebabkan lebih banyak penggunaan memori daripada metode tidak terikat normal
Untuk alasan serupa, metode // Traditional anonymous function (function (a, b) { return a + b + 100; }); // Arrow function (a, b) => a + b + 100; const a = 4; const b = 2; // Traditional anonymous function (no parameters) (function () { return a + b + 100; }); // Arrow function (no arguments) () => a + b + 100; 5, // Traditional anonymous function (function (a, b) { return a + b + 100; }); // Arrow function (a, b) => a + b + 100; const a = 4; const b = 2; // Traditional anonymous function (no parameters) (function () { return a + b + 100; }); // Arrow function (no arguments) () => a + b + 100; 6, dan // Traditional anonymous function (function (a, b) { return a + b + 100; }); // Arrow function (a, b) => a + b + 100; const a = 4; const b = 2; // Traditional anonymous function (no parameters) (function () { return a + b + 100; }); // Arrow function (no arguments) () => a + b + 100; 7 tidak berguna saat dipanggil pada fungsi panah, karena fungsi panah dibuat async param => expression async (param1, param2, ...paramN) => { statements } 6 berdasarkan cakupan fungsi panah didefinisikan di dalamnya, dan nilai async param => expression async (param1, param2, ...paramN) => { statements } 6 tidak berubah berdasarkan bagaimana fungsinya
Fungsi panah tidak memiliki objek async param => expression async (param1, param2, ...paramN) => { statements } _7 mereka sendiri. Jadi, dalam contoh ini, async param => expression async (param1, param2, ...paramN) => { statements } _7 adalah referensi untuk argumen dari cakupan terlampir
(a, b, ...r) => expression (a = 400, b = 20, c) => expression ([a, b] = [10, 20]) => expression ({ a, b } = { a: 10, b: 20 }) => expression _4
Catatan. Anda tidak dapat mendeklarasikan variabel bernama async param => expression async (param1, param2, ...paramN) => { statements } _7 di , jadi kode di atas akan menjadi kesalahan sintaksis. Ini membuat efek pelingkupan async param => expression async (param1, param2, ...paramN) => { statements } _7 jauh lebih mudah untuk dipahami
Dalam kebanyakan kasus, menggunakan parameter istirahat adalah alternatif yang baik untuk menggunakan objek async param => expression async (param1, param2, ...paramN) => { statements } 7
(a, b, ...r) => expression (a = 400, b = 20, c) => expression ([a, b] = [10, 20]) => expression ({ a, b } = { a: 10, b: 20 }) => expression _5
Fungsi panah tidak dapat digunakan sebagai konstruktor dan akan memunculkan kesalahan saat dipanggil dengan async param => expression async (param1, param2, ...paramN) => { statements } 9. Mereka juga tidak memiliki properti // Traditional anonymous function (function (a, b) { const chuck = 42; return a + b + chuck; }); // Arrow function (a, b) => { const chuck = 42; return a + b + chuck; }; _6
(a, b, ...r) => expression (a = 400, b = 20, c) => expression ([a, b] = [10, 20]) => expression ({ a, b } = { a: 10, b: 20 }) => expression _6
Kata kunci // Traditional anonymous function (function (a) { return a + 100; }); // 1. Remove the word "function" and place arrow between the argument and opening body bracket (a) => { return a + 100; }; // 2. Remove the body braces and word "return" — the return is implied. (a) => a + 100; // 3. Remove the parameter parentheses a => a + 100; _2 tidak dapat digunakan dalam badan fungsi panah (kecuali jika digunakan dalam fungsi generator yang bersarang lebih lanjut dalam fungsi panah). Akibatnya, fungsi panah tidak dapat digunakan sebagai generator
Fungsi panah tidak boleh berisi jeda baris antara parameternya dan panahnya
(a, b, ...r) => expression (a = 400, b = 20, c) => expression ([a, b] = [10, 20]) => expression ({ a, b } = { a: 10, b: 20 }) => expression _7
Untuk tujuan pemformatan, Anda dapat meletakkan jeda baris setelah tanda panah atau menggunakan tanda kurung/kurung kurung di sekitar badan fungsi, seperti yang ditunjukkan di bawah ini. Anda juga dapat menempatkan jeda baris di antara parameter
(a, b, ...r) => expression (a = 400, b = 20, c) => expression ([a, b] = [10, 20]) => expression ({ a, b } = { a: 10, b: 20 }) => expression _8
Meskipun panah dalam fungsi panah bukanlah operator, fungsi panah memiliki aturan penguraian khusus yang berinteraksi secara berbeda dengan prioritas operator dibandingkan dengan fungsi biasa
(a, b, ...r) => expression (a = 400, b = 20, c) => expression ([a, b] = [10, 20]) => expression ({ a, b } = { a: 10, b: 20 }) => expression _9
Karena // Traditional anonymous function (function (a, b) { const chuck = 42; return a + b + chuck; }); // Arrow function (a, b) => { const chuck = 42; return a + b + chuck; }; _8 memiliki prioritas lebih rendah daripada kebanyakan operator, tanda kurung diperlukan untuk menghindari // Traditional anonymous function (function (a, b) { const chuck = 42; return a + b + chuck; }); // Arrow function (a, b) => { const chuck = 42; return a + b + chuck; }; 9 diuraikan sebagai daftar argumen dari fungsi panah
async param => expression async (param1, param2, ...paramN) => { statements } _0
async param => expression async (param1, param2, ...paramN) => { statements } _1
Metode // Traditional anonymous function (function (a, b) { return a + b + 100; }); // Arrow function (a, b) => a + b + 100; const a = 4; const b = 2; // Traditional anonymous function (no parameters) (function () { return a + b + 100; }); // Arrow function (no arguments) () => a + b + 100; 5, // Traditional anonymous function (function (a, b) { return a + b + 100; }); // Arrow function (a, b) => a + b + 100; const a = 4; const b = 2; // Traditional anonymous function (no parameters) (function () { return a + b + 100; }); // Arrow function (no arguments) () => a + b + 100; 6, dan // Traditional anonymous function (function (a, b) { return a + b + 100; }); // Arrow function (a, b) => a + b + 100; const a = 4; const b = 2; // Traditional anonymous function (no parameters) (function () { return a + b + 100; }); // Arrow function (no arguments) () => a + b + 100; 7 berfungsi seperti yang diharapkan dengan fungsi tradisional, karena kami menetapkan ruang lingkup untuk setiap metode
async param => expression async (param1, param2, ...paramN) => { statements } _2
Dengan fungsi panah, karena fungsi // Traditional Function function bob(a) { return a + 100; } // Arrow Function const bob2 = (a) => a + 100; _3 kita pada dasarnya dibuat pada cakupan // Traditional Function function bob(a) { return a + 100; } // Arrow Function const bob2 = (a) => a + 100; 4 (global), fungsi ini akan menganggap async param => expression async (param1, param2, ...paramN) => { statements } 6 adalah // Traditional Function function bob(a) { return a + 100; } // Arrow Function const bob2 = (a) => a + 100; 4
async param => expression async (param1, param2, ...paramN) => { statements } _3
Mungkin manfaat terbesar menggunakan fungsi panah adalah dengan metode seperti // Traditional Function function bob(a) { return a + 100; } // Arrow Function const bob2 = (a) => a + 100; 7 dan // Traditional Function function bob(a) { return a + 100; } // Arrow Function const bob2 = (a) => a + 100; 8 yang biasanya memerlukan semacam penutupan, // Traditional anonymous function (function (a, b) { return a + b + 100; }); // Arrow function (a, b) => a + b + 100; const a = 4; const b = 2; // Traditional anonymous function (no parameters) (function () { return a + b + 100; }); // Arrow function (no arguments) () => a + b + 100; 5, // Traditional anonymous function (function (a, b) { return a + b + 100; }); // Arrow function (a, b) => a + b + 100; const a = 4; const b = 2; // Traditional anonymous function (no parameters) (function () { return a + b + 100; }); // Arrow function (no arguments) () => a + b + 100; 6, atau // Traditional anonymous function (function (a, b) { return a + b + 100; }); // Arrow function (a, b) => a + b + 100; const a = 4; const b = 2; // Traditional anonymous function (no parameters) (function () { return a + b + 100; }); // Arrow function (no arguments) () => a + b + 100; 7 untuk memastikan bahwa fungsi dijalankan dalam lingkup yang tepat