Cara menggunakan apa itu function javascript?

Function pada JavaScript merupakan salah satu perkakas yang sangat powerful, paling fundamental, dan paling penting. Bisa saya bilang semua hal yang bisa dilakukan oleh JavaScript pasti didasari oleh function dan sifat-sifatnya. Jika Anda buka source code React, Vue, Redux, dan library JS lainnya, Anda bisa mengobservasi bahwa library-library tersebut ‘hanyalah’ kumpulan dari function-function.

Mari kita mulai dengan deklarasi fungsi. Deklarasi function di JavaScript sangat mudah, apalagi dengan menggunakan sintaks ES2015.

// ES5
function() {} // fungsi kosongfunction add(a, b) {
  return a + b;
}var add = function(a, b) {
  return a + b;
}// ES2015
const add2 = (a, b) => {
  return a + b;
}const add2 = (a, b) => a + b; // sama saja dengan add2 sebelumnya

Sintaks function ES5 tetap dapat digunakan pada ES2015.

6 ways to declare JavaScript functions | Dmitri Pavlutin

A function is a parametric block of code defined one time and called any number of times later.

dmitripavlutin.com

Function digunakan untuk melakukan serangkaian komputasi/prosedur yang dapat digunakan berulang kali. Misalkan function add diatas. Anda dapat memanggil function add beberapa kali pun dan mengekspektasikan hasil a + b dari parameter.

add(9, 1) // 10
add(14, 12) // 26
add(2, 11) // 13

Jika Anda memerlukan serangkaian prosedur yang sama dilakukan berulang-ulang pada program Anda maka mungkin Anda membutuhkan function.

Ketika Anda mendeklarasikan sebuah function, sebuah scope baru dibuat, yaitu scope didalam function Anda. Scope baru pada function berarti apapun yang terjadi didalam function Anda tidak bisa diketahui/diakses oleh expression/statement lain diluar function. Jika Anda mendeklarasikan variable atau pun function, inner function, di dalam function maka variable atau function tersebut tidak bisa diakses dari luar. Bisa dikatakan bahwa ketika function dibuat JavaScript akan membuat isolasi environment didalam function tersebut. Hal ini merupakan salah satu sifat JavaScript, yaitu Closure.

const a2plusb2 = (a, b) => {
  const secondPower = x => x * x;  return secondPower(a) + secondPower(b);
}a2plusb2(2, 3); // 4 + 9 = 13secondPower(3); // Anda tidak bisa melakukan ini!

Anda tidak bisa memanggil function secondPower dari luar scope function a2plusb2. Function secondPower hanya bisa diakses didalam scope a2plusb2. Satu contoh lagi.

const greeting = (name) => {
  const hello = () => `Hello ${name}!`; // ES2015 template literals  return hello();
}greeting('John') // 'Hello John!'

Perhatikan function hello. Function hello berada didalam scope function greeting. Oleh karena itu, function hello memiliki akses ke parameter name function greeting. Bagaimana dengan variable?

let name = 'John';const greeting = () => {
  let name = 'Adam';
  return `Hello ${name}!`;
}greeting(); // 'Hello Adam!'console.log(name); // John

Pada contoh diatas, variable name yang berada dalam scope function greeting berbeda dengan variable name pada scope global. Walaupun memiliki nama yang sama kedua variable tersebut dideklarasikan pada scope berbeda sehingga tidak masalah walaupun memiliki nama yang sama.

Selain itu Anda juga tidak bisa mengakses variable name yang memiliki value ‘John’ karena variabel tersebut shadowed oleh variable name dalam scope function yang bernilai ‘Adam’. Jika Anda ingin mengakses keduanya Anda perlu membedakan nama kedua variable tersebut.

let globalName = 'John';const greeting = () => {
  let name = 'Adam';
  return `Hello ${name} and ${globalName}!`;
}greeting(); // 'Hello Adam and John!'

Inner variable dan inner function memberikan keuntungan, yaitu private function atau private variable. Dengan private function dan private variable didalam function Anda bisa mengisolasi suatu variabel hanya bisa direfer dari dalam function itu saja. Hal ini juga mengurangi kemungkinan variabel Anda bentrok dengan global variable.

Jika Anda perhatikan pola diatas sama seperti object oriented programming dimana Anda memiliki sebuah class yang memiliki private variable atau function. Dengan JavaScript Anda dapat merperesentasikan object seperti class pada bahasa OOP dengan function.

const Orang = (nama, gender, tanggalLahir) => {
  let namaSaya = nama,
      tanggalLahirSaya = new Date(tanggalLahir);  const genderSaya = gender;  return {
    setNama: (namaBaru) => namaSaya = namaBaru,
    nama: () => namaSaya,
    gender: (genderSaya) ? 'Laki-laki' : 'Perempuan',
    usia: () =>
      (new Date()).getFullYear() - tanggalLahirSaya.getFullYear()
  }
}const agus = Orang('Agus', 1, '1995-10-21');console.log(agus.nama()); // Agus
console.log(agus.gender); // Laki-laki
console.log(agus.usia()); // 21
console.log(agus.setNama('Agustinus')); 
console.log(agus.nama()); // Agustinus

Konsep Closure diimplementasikan pada contoh function diatas untuk ‘membuat object’ Orang. Function Orang memiliki private variable berupa namaSaya, genderSaya, dan tanggalLahirSaya. Ketiga private variable tersebut tidak bisa diakses dari luar function Orang. Sementara itu function Orang mengembalikan sebuah object literal yang berisi kumpulan pasangan key value.

• Key nama memiliki value anonymous function yang mengembalikan private variable namaSaya.
• Key setNama memiliki value anonymous function yang mengganti value dari variable namaSaya dari parameter yang diberikan.
• Key gender mengembalikan string ‘Laki-laki’ atau string ‘Perempuan’ tergantung dari genderOrang.
• Key usia memiliki value anonymous function yang mengembalikan hasil kalkulasi umur Orang.

Ketika dikembalika ke sebuah variable Anda dapat memanggil fungsi yang di di-return seperti agus.nama() untuk mengembalikan nama. Property gender bukan merupakan function sehingga tidak butuh () pada akhirannya untuk mengembalikan value.

Implementasi konsep closure pada function sangat berguna untuk mengimplementasikan dessign pattern di JavaScript dan membentuk sebuah library JavaScript.

Closures

A closure is the combination of a function and the lexical environment within which that function was declared.

developer.mozilla.org

Semoga penjelasan singkat tentang function diatas bermanfaat untuk Anda :)

Kenal JavaScript merupakan salah satu seri tentang JavaScript. Seri ini memperkenalkan hal-hal dasar seputar JavaScript. Setiap minggu akan ada 1–2 artikel baru pada seri ini.

Function JavaScript untuk apa?

Javascript bisa digunakan untuk membuat fitur beragam seperti drag, drop komponen yang semuanya bisa bermanfaat untuk meningkatkan tampilan (interface) dan pengalaman menggunakan web. Selain itu, programmer juga bisa memperluas fungsi halaman web dengan menulis snippet Javascript untuk add-on pihak ketiga, contohnya ...

Bagaimana cara menuliskan sebuah fungsi dalam JavaScript *?

untuk membuat function, penulisannya harus di awali oleh syntax “function” dan kemudian di lanjutkan dengan nama function yang mau di buat. dan isi dari function di tuliskan di dalam tanda kurung kurawal pembuka “{” dan tanda kurung kurawal penutup “}”.

Bagaimana cara kerja JavaScript?

Cara kerja JavaScript bisa dilihat dari dua sisi, yaitu dari sisi client dan dari sisi server. Dari sisi client, JavaScript dapat berperan dalam mengubah tampilan website. Sedangkan dari sisi server, JavaScript dapat digunakan untuk kebutuhan database.

Bagaimana cara memanggil function dengan nama myFunction?

Fungsi dapat dipanggil dengan menyebutkan nama fungsi dan memberikan nilai-nilai parameternya..

function myFunction(a, b) { return a * b; } myFunction(10, 2); // Will return 20..

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

var x = myFunction(); // x will be the window object function myFunction() { return this; }.