\\

JavaScript Study III

Menguasai Function

Dalam pelajaran ini, kita akan membahas tentang function.

Apa yang dimaksud dengan Function? (1)

Apa yang dimaksud
dengan Function?

Function adalah kumpulan instruksi. Seperti contoh dibawah ini, function dengan nama introduce memiliki dua operasi yang dapat memprint Halo dan Menyebut nama. Mari kita pelajari cara membuat function di slide berikutnya.

Apa yang dimaksud dengan Function? (1)

Mendefinisikan Function

Untuk membuat function, Anda harus mendefinisikannya. Untuk mendefinisikan function, ketik function(), lalu tulis hal yang Anda ingin function tersebut lakukan didalam {} (tanda kurung kurawal). Kita akan mempelajari lebih dalam tentang definisi function kedepannya.

Apa yang dimaksud dengan Function? (1)

Memanggil Function

Definisi function itu penting, namun Anda harus memanggil function untuk benar-benar menggunakannya. Untuk memanggil function dalam contoh di bawah ini, tulis introduce();. Anda dapat melihat cara kerjanya dengan menulis code Anda sendiri dalam latihan ini.

Ayo terapkan ilmu yang baru dipelajari!

CONTOH KODINGAN:

const greet = function() {
console.log(“Halo!”);
console.log(“Ayo belajar function!”);
};

// Panggil function greet dibawah
greet();

Apa yang dimaksud dengan Function? (2)

Menetapkan Function

Mari kita pelajari lebih lanjut tentang function. Didalam gambar dibawah, code didalam kotak oranye adalah code function itu sendiri, dimana kita mendefinisikan function tersebut dengan mengunakan constant. Dalam latihan berikutnya, mari kita coba mendefinisikan sebuah function dan memanggilnya.

Arrow Function

Arrow Function (1)

Seperti yang ditampilkan pada contoh dikanan, Anda juga dapat mendefinisikan function dengan () =>, ketimbang dengan function(). Ini adalah fitur baru ES6 dan cara yang lebih mudah untuk mendefinisikan sebuah function. Function yang didefinisikan dengan cara ini disebut Arrow Function (function panah).

Arrow Function

Arrow Function (2)

Cara pengetikan arrow function tidak memerlukan perubahan apapun selain menggantikan function() dengan () =>. Tidak ada perbedaan juga saat Anda memanggil function yang didefinisikan dengan cara ini. Jadi, mulai dari latihan ini, mari kita gunakan arrow function.

Argument

Apa yang dimaksud
dengan Argument?

Nilai data yang diteruskan ke function disebut argument.
Anda dapat menggunakan nilai function tersebut dengan meneruskan nilainya saat Anda memanggil function tersebut.

Argument

Mendefinisikan Function dengan Argument

Mari kita definisikan function yang dapat menerima argument.
Nilai yang diteruskan saat Anda memanggil function disebut argument, namun variable yang tertulis dalam definisi disebut parameter.
Seperti yang ditampilkan di bawah ini, argument dapat diteruskan ke function dengan menuliskan nama parameter dalam tanda kurung, seperti ini (parameter) =>.

Argument

Memanggil Function
dengan Argument

Untuk memanggil function yang menerima argument, tulis functionName (nilai). Function akan menerima nilai yang ditunjuk dan nilai tersebut akan diberikan untuk parameter. Pada gambar di sebelah kanan, nilai “Ninja Ken” diberikan untuk parameter name saat memanggil function introduce.

Argument

Menggunakan Nilai Argument Didalam Function

Anda dapat menggunakan argument didalam function seperti constant dan variable. 

Menggunakan Beberapa Argument

Function dengan
Beberapa Argument

Function dapat menerima beberapa argument. Anda dapat meneruskan beberapa argument dengan menuliskannya bersama dalam tanda kurung dan memisahkannya dengan koma .

Menggunakan Beberapa Argument

Menggunakan Beberapa Argument

Seperti saat Anda mendefinisikan beberapa parameter, gunakan koma , untuk memisahkan beberapa argument saat Anda memanggil function. Penerusan argument harus dalam urutan yang sama seperti parameter, karena cara pendefinisian function akan digunakan untuk pemanggilan fungsi.

Nilai Return

Apa yang dimaksud dengan Nilai Return?

Selanjutnya, kita akan mempelajari cara menggunakan hasil function di tempat function tersebut dipanggil. Nilai yang dihasilkan setelah function dipanggil, disebut nilai return. Sebagian besar function digunakan untuk mengirim nilai return kembali ke tempat function tersebut dipanggil. Di bawah ini, function add akan menerima 3 dan 7, lalu nilai return 10 akan dihasilkan.

Nilai Return

Function dengan Nilai Return

Anda dapat mengembalikan nilai dengan menempatkan statement return di dalam function dengan menulis nilai return. Hal ini akan memungkinkan function menghasilkan output sebagai nilai return.

Nilai Return

Menggunakan Nilai Return

Jika function memiliki nilai return, pemanggilan function akan digantikan oleh nilai return setelah function selesai dijalankan.
Seperti yang ditampilkan dibawah ini, Anda juga dapat memberikan pemanggilan function untuk constant.

Ayo terapkan ilmu yang baru dipelajari!

CONTOH KODINGAN:

const half = (number) => {
// Return nilai dari variable number dibagi 2
return number / 2;
};

// Defenisikan constant result
const result = half(130);

// Print pesan “Separuh dari 130 adalah __
console.log(Separuh dari 130 adalah ${result});

Nilai Return

Apa yang dimaksud dengan Nilai Return?

Selanjutnya, kita akan mempelajari cara menggunakan hasil function di tempat function tersebut dipanggil. Nilai yang dihasilkan setelah function dipanggil, disebut nilai return. Sebagian besar function digunakan untuk mengirim nilai return kembali ke tempat function tersebut dipanggil. Di bawah ini, function add akan menerima 3 dan 7, lalu nilai return 10 akan dihasilkan.

Nilai Return

Function dengan Nilai Return

Anda dapat mengembalikan nilai dengan menempatkan statement return di dalam function dengan menulis nilai return. Hal ini akan memungkinkan function menghasilkan output sebagai nilai return.

Nilai Return

Menggunakan Nilai Return

Jika function memiliki nilai return, pemanggilan function akan digantikan oleh nilai return setelah function selesai dijalankan.

Menggunakan Nilai Return

Jenis Nilai Return

Seperti halnya argument, Anda dapat menggunakan jenis nilai yang berbeda untuk nilai return. Misalnya, nilai boolean (true atau false)
akan dikembalikan (return) jika anda menggunakan statement kondisional. Ini sama seperti kondisi di statement if.

Menggunakan Nilai Return

Mengakhiri Function
dengan Return

Mari kita pelajari secara lebih terperinci tentang statement return.
Anda juga dapat menggunakan return untuk keluar dari sebuah function. Namun, penting diketahui bahwa code dalam tanda kurung kurawal yang sama {}, yang terletak setelah return tidak akan dijalankan.

Ayo terapkan ilmu yang baru dipelajari!

CONTOH KODINGAN:

const check = (number) => {
// periksa apakah number adalah kelipatan dari 3 dan return-kan hasilnya
return number % 3 === 0;
};

// Panggil function check dalam kondisi statement if
if (check(123)) {
console.log(“Multiple of 3”);
} else {
console.log(“Not a multiple of 3”);
}

Scope (Cakupan)

Constant di Dalam Function

Argument dari function dan constant yang didefinisikan di dalam sebuah function hanya dapat digunakan didalam function tersebut. Dalam contoh dibawah ini, constant name hanya dapat digunakan didalam function introduce, karena name didefinisikan di dalam function tersebut. Jika Anda mencoba menggunakan constant name diluar functionnya, error akan terjadi.

Scope (Cakupan)

Constant di Luar Function

Jika constant didefinisikan di luar function, constant dapat digunakan didalam dan diluar function. Dalam contoh dibawah ini, constant name didefinisikan di luar function introduce, sehingga dapat digunakan didalam dan diluar function.

Scope (Cakupan)

Scope Sebuah Constant

Setiap constant memiliki bagian yang dapat diakses, dan bagian constant ini kita sebut sebagai constant scope.

Ayo terapkan ilmu yang baru dipelajari!

CONTOH KODINGAN:

// Definisikan constant name
const name = “Ninja Ken”;

const introduce = (name) => {
// Print “Saya __” diconsole
console.log(Saya ${name});
};

// Panggil function introduce
introduce(“Guru Domba”);

// Print nilai dari constant name
console.log(name);

Latihan Akhir

Latihan Akhir

Dilatihan ini kita akan membuat function yang benama getMax, yang berfungsi untuk menemukan nilai tertinggi/maksimum.
Seperti contoh dibawah, function getMax menerima tiga angka sebagai argument-nya dan me-return nilai maksimum dari ketiga angka tersebut.

Ayo terapkan ilmu yang baru dipelajari!

CONTOH KODINGAN:

onst number1 = 103;
const number2 = 72;
const number3 = 189;

// Ketik sebuah function getMax untuk mendapatkan nilai maksimum
const getMax = (a, b, c) => {
let max = a;

if (b > max) {
max = b;
}
if (c > max) {
max = c;
}

return max;
};

// Print “Nilai maksimum adalah __”
const max = getMax(number1, number2, number3);
console.log(Nilai maksimum adalah ${max});

Tinggalkan komentar