Cara menggunakan FUNGSI dalam JavaScript

Fungsi dalam JavaScript menggunakan kata kunci fungsi. Ada dua jenis fungsi, yang pertama adalah fungsi yang dideklarasikan (deklarasi fungsi) dan yang kedua adalah fungsi sebagai perhitungan (fungsi ekspresi)

Tutorial sebelumnya. Istirahat JavaScript

Deklarasi Fungsi

Fungsi ini telah dibahas pada tutorial sebelumnya. Fungsi jenis ini harus dideklarasikan terlebih dahulu dan kemudian dipanggil oleh baris pengkodean lainnya

Materi Pembelajaran JavaScript Fungsional Lainnya

function functionName(parameters) {
  // code to be executed
}

Berikut adalah contoh deklarasi fungsi

function myFunction(a, b) {
  return a * b;
}

Ekspresi Fungsi

Fungsi juga dapat dibuat dengan ekspresi (perhitungan beberapa variabel atau nilai). Jenis fungsi ini dapat disimpan sebagai nilai variabel. Kemudian variabel ini dapat dipanggil pada baris pengkodean lainnya

Pada contoh di bawah ini, variabel x adalah nilai dari suatu fungsi dengan dua parameter (a dan b), fungsi ini mengembalikan nilai a dikalikan dengan b

var x = function (a, b) {return a * b};

Variabel x dapat dipanggil sebagai fungsi (ekspresi fungsi)

var x = function (a, b) {return a * b};
var z = x(4, 3);

Fungsi Sebagai Nilai

Fungsi dapat digunakan untuk menetapkan nilai ke variabel

function myFunction(a, b) {
  return a * b;
}

var x = myFunction(4, 3);

Contoh di atas menunjukkan fungsi myFunction memberikan nilai ke variabel x

Fungsi juga dapat dimasukkan dalam perhitungan

function myFunction(a, b) {
  return a * b;
}

var x = myFunction(4, 3) * 2;

Contoh di atas menunjukkan fungsi myFunction dikalikan 2 dan hasil perkalian tersebut menjadi nilai variabel x

Fungsi Panah

Fungsi Panah adalah cara singkat untuk menulis ekspresi fungsi. Kita tidak perlu menulis {} dan kata kunci function dan return

// ES5
var x = function(x, y) {
  return x * y;
}

// ES6
const x = (x, y) => x * y;

Kembalinya kata kunci dan {} tetap diperlukan bila fungsi ini berisi lebih dari satu baris kode. Sebaiknya biasakan untuk tetap menuliskan kata kunci return dan {} pada fungsi arrow

Tidak mungkin menulis kode JavaScript tanpa menggunakan fungsi. Fungsi JavaScript dapat didefinisikan sebagai prosedur yang ditentukan untuk melakukan tugas tertentu

Dalam pemrograman, fungsi dapat disamakan dengan mengemas program menjadi bagian-bagian yang lebih kecil. Logika program dalam fungsi dapat digunakan kembali dengan memanggilnya, jadi kita tidak perlu menulis ulang

Sebagian besar fungsi ditulis sesuai dengan standar yang ditetapkan. Ini menyatakan bahwa nama fungsi harus diidentifikasi bersama dengan parameternya yang diapit tanda kurung. Jika sebuah pernyataan digunakan dalam fungsi, pernyataan tersebut harus diapit oleh kurung kurawal

Pada artikel ini, Anda akan mempelajari javascript mulai dari bagaimana fungsi JavaScript dapat dibuat, cara memanggil fungsi javascript, deklarasi fungsi JavaScript dan ekspresi fungsi, yang juga mencakup hoisting

Daftar isi

Fungsi Dalam JavaScript

Kata kunci fungsi digunakan untuk definisi fungsi. Anda dapat mendefinisikan fungsi melalui deklarasi atau ekspresi fungsi. Deklarasi fungsi bertambah, sedangkan ekspresi fungsi tidak. Fungsi juga dapat didefinisikan dengan function constructor Function()

function testFunction() {
}

Artikel Terkait   Tutorial JavaScript 36. Ajax adalah?

1. Deklarasi Fungsi vs. Ekspresi

Dalam mempelajari javascript sebelumnya, kami telah menjelaskan sintaks yang harus diikuti saat mendeklarasikan suatu fungsi. Saat Anda melakukannya, fungsi tidak langsung berjalan. Anda harus membuatnya terlebih dahulu, untuk menggunakannya nanti. Agar suatu fungsi dapat berjalan, dan itu harus dipanggil terlebih dahulu

function testFunction(x, y) {
    return x + y;
}

Catatan. Titik koma digunakan untuk memisahkan pernyataan JavaScript yang dapat dieksekusi. Karena deklarasi fungsi JavaScript bukanlah pernyataan yang dapat dieksekusi, tidak umum untuk mengakhirinya dengan titik koma

Ekspresi fungsi adalah singkatan dari fungsi yang disimpan dalam variabel

var hasil = function (x, y) {return x + y}

Kemudian, variabel yang sama digunakan sebagai fungsi. Contoh di bawah ini berisi fungsi anonim. Karena tidak memiliki nama, maka disebut variabel

var hasil = function (x, y) {return x + y};
document.getElementById("nilai").innerHTML = hasil(5, 17);

2. Mengangkat

JavaScript memindahkan deklarasi ke atas kode di browser secara default. Ini disebut mengangkat. Artinya, jika Anda menggunakan deklarasi fungsi, Anda dapat memanggil fungsi javascript sebelum dan sesudah Anda mendeklarasikannya. Pada contoh di bawah ini, Anda dapat melihat bahwa fungsi berfungsi baik Anda memanggilnya sebelum atau setelah dideklarasikan. Itu karena deklarasi fungsi di hoisting

// Fungsi dipanggil sebelum dideklarasikan:
var hasil = testFunction(5, 17);
document.getElementById("nilai").innerHTML = hasil; // ini bekerja

function hitungFunction(x, y) {
    return x + y;
}

// Fungsi dipanggil setelah dideklarasikan
var hasil2 = hitungFunction(5, 17);
document.getElementById("nilai2").innerHTML = hasil2; // ini bekerja juga

Ini tidak terjadi jika Anda menggunakan ekspresi fungsi. Anda harus mendefinisikan fungsi terlebih dahulu sebelum Anda memanggilnya

Lihat contoh kami selanjutnya. Anda dapat melihat bahwa fungsi dijalankan dengan benar hanya jika dipanggil setelah disetel. Ini karena ekspresi fungsi tidak diangkat

// Fungsi dipanggil setelah dideklarasikan:
var hasil = function (x, y) {return x + y};
document.getElementById("nilai").innerHTML = hasil(5, 17); // ini bekerja

// Fungsi dipanggil sebelum dideklarasikan:
document.getElementById("test2").innerHTML = hasil2(5, 17); // Akan menghasilkan error. Console logs "Uncaught TypeError: hasil2 is not a function".
var hasil2 = function (x, y) {return x + y};

3. Fungsi dapat memanggil dirinya sendiri

Fungsi juga dapat memanggil dirinya sendiri. Dengan menggunakan sintaks tertentu, yang menyertakan tanda kurung tambahan, Anda dapat membuat fungsi yang tidak perlu dipanggil di tempat lain selain memanggil dirinya sendiri

(function () {
    document.getElementById("pesan").innerHTML = "Selamat Belajar Javascript!";
})();

Pada contoh di atas, Anda dapat melihat fungsi panggilan otomatis anonim. Namun, fungsi panggilan itu sendiri tidak harus anonim. Anda juga bisa menamainya

4. Menggunakan Konstruktor

Seperti yang sudah Anda ketahui, kami menggunakan kata kunci fungsi untuk mendefinisikan fungsi JavaScript. Namun, Anda juga dapat melakukannya dengan menggunakan konstruktor fungsi JavaScript bawaan, Function()

var hitungFunction = new Function("x", "y", "return x + y");
document.getElementById("hasil").innerHTML = hitungFunction(9, 17);

Namun, ini bukan praktik umum. Contoh di atas dapat dengan mudah ditulis ulang sebagai fungsi biasa tanpa konstruktor

var hitungFunction = function (x, y) {return x + y}
document.getElementById("hasil").innerHTML = sampleFunction(9, 17);

5. Objek, Nilai, Ekspresi

Jika kita menggunakan typeofoperator pada suatu fungsi, itu akan mengembalikan bahwa itu adalah fungsi. Namun, dalam JavaScript, fungsi adalah objek fungsi, karena memiliki properti dan metode. Pada contoh di bawah ini, kami menggunakan argumen. lengthproperty untuk mengetahui berapa banyak argumen yang diterima fungsi ini

function testFunction(num1, num2) {
    return arguments.length;
}

Dalam contoh kami berikutnya, kami menggunakan metode toString() sebagai fungsi pengembalian JavaScript untuk merender string, yang mewakili kode sumber fungsi

function testFunction(x, y) {
    return x + y;
}

Fungsi JavaScript juga dapat digunakan sebagai nilai

function testFunction(x, y) {
    return x + y;
}

Anda juga dapat menggunakan fungsi JavaScript dalam ekspresi

function testFunction(x, y) {
    return x + y;
}

Penutupan

Selain tipe data, seperti materi yang sudah kami jelaskan sebelumnya, mempelajari fungsi javascript juga merupakan hal yang harus anda pahami, karena kedepannya anda akan banyak bekerja dengan fungsi baik dalam membuat objek, memanipulasi HTML, melakukan ajax dan lain-lain.

Dalam fungsi Anda dapat mendefinisikan fungsi melalui deklarasi fungsi, mendefinisikan fungsi melalui ekspresi fungsi, mengidentifikasinya dengan konstruktor fungsi, memanggil fungsi javascript dan lainnya

Bagaimana cara membuat fungsi dalam JavaScript?

Apa yang dimaksud dengan fungsi dalam JavaScript?

Apa fungsi JavaScript dan berikan contohnya?

Bagaimana cara memanggil fungsi dengan nama myFunction?