Cara menggunakan contoh function javascript

Table of Contents

• Function Scope
• Bagaimana Cara Membuat function di JS?
• Function JavaScript untuk apa?
• Bagaimana Cara Menggunakan memanggil sebuah fungsi dengan nama myFunction di JavaScript?
• Bagaimana mendeklarasikan variabel pada 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.

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.

Function Scope

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 shadowedoleh 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!'

Closure

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.

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.

Bagaimana Cara Membuat function di JS?

Berikut ini contoh cara membuat function di javascript dalam bentu pseudo-code..

function namaFungsi(parameter1, parameter2) { // Kode yang ingin dieksekusi } ... .

<html> <head> <script type="text/javascript"> function hitung(p1, p2) { return p1+p2; } console.log(hitung(5,5)); </script> </head> </html>.

Function JavaScript untuk apa?

Fungsi pada JavaScript adalah sekumpulan kode yang dirancang untuk melakukan tugas tertentu. Sebuah fungsi JavaScript dijalankan ketika ada yang memanggilnya.

Bagaimana Cara Menggunakan memanggil sebuah fungsi dengan nama myFunction di JavaScript?

Memanggil Fungsi JavaScript.

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; }.

Bagaimana mendeklarasikan variabel pada JavaScript?

Cara membuat variabel yang umum digunakan di javascript adalah menggunakan kata kunci var lalu diikuti dengan nama variabel dan nilainya. Contoh: var title = "Belajar Pemrograman Javascript"; Pada contoh di atas, kita membuat variabel bernama title dengan nilai berupa teks (string): "Belajar Pemrograman Javascript" .

Bagaimana Cara Membuat function di JS?

Apa yang dimaksud dengan function pada JavaScript?

Apa itu inner HTML?

JavaScript bisa digunakan untuk apa saja?