📔 Hari 7

Fungsi (Function)

Sejauh ini kita udah lihat banyak banget fungsi bawaan JavaScript. Di bagian ini, kita bakal fokus ke fungsi kustom. Terus, apa sih fungsi itu sebenarnya? Yuk sebelum mulai bikin fungsi, kita pahami dulu apa itu fungsi dan kenapa sih kita butuh fungsi?

Fungsi itu adalah blok kode atau pernyataan pemrograman yang bisa dipakai ulang (reusable), dirancang buat ngerjain tugas tertentu. Fungsi dideklarasikan dengan kata kunci function, diikuti namanya, terus tanda kurung (). Tanda kurung bisa menerima parameter. Kalau fungsi nerima parameter, fungsi bakal dipanggil dengan argumen. Fungsi juga bisa punya parameter default. Buat nyimpen data ke fungsi, fungsi harus ngembaliin tipe data tertentu. Nah, buat dapetin nilainya, kita tinggal panggil atau jalanin (invoke) fungsi tersebut. Fungsi bikin kode jadi:

• bersih dan gampang dibaca
• bisa dipakai ulang (reusable)
• gampang diuji (testable)

Fungsi bisa dideklarasikan atau dibuat dengan beberapa cara nih:

• Fungsi Deklarasi (Declaration function)
• Fungsi Ekspresi (Expression function)
• Fungsi Anonim (Anonymous function)
• Fungsi Panah (Arrow function)

Deklarasi Fungsi

Yuk langsung lihat cara mendeklarasikan fungsi dan cara memanggilnya.

// mendeklarasikan fungsi tanpa parameter
function functionName() {
  // kode di sini
}
functionName() // memanggil fungsi dengan namanya dan dengan tanda kurung

Fungsi tanpa parameter dan return

Fungsi bisa dideklarasikan tanpa parameter loh.

Contoh:

// fungsi tanpa parameter, fungsi yang membuat bilangan kuadrat
function square() {
  let num = 2
  let sq = num * num
  console.log(sq)
}

square() // 4

// fungsi tanpa parameter
function addTwoNumbers() {
  let numOne = 10
  let numTwo = 20
  let sum = numOne + numTwo

  console.log(sum)
}

addTwoNumbers() // fungsi harus dipanggil dengan namanya untuk dieksekusi 

  function printFullName (){
      let firstName = 'Asabeneh'
      let lastName = 'Yetayeh'
      let space = ' '
      let fullName = firstName + space + lastName
      console.log(fullName)
}

printFullName() // memanggil fungsi

Fungsi yang mengembalikan nilai

Fungsi juga bisa ngembaliin nilai, kalau fungsi nggak ngembaliin nilai, nilai fungsi itu undefined. Yuk kita tulis ulang fungsi-fungsi di atas pake return. Mulai sekarang, kita biasain ngembaliin nilai ke fungsi daripada cuma nyetak doang.

function printFullName (){
      let firstName = 'Asabeneh'
      let lastName = 'Yetayeh'
      let space = ' '
      let fullName = firstName + space + lastName
      return fullName
}
console.log(printFullName())

  function addTwoNumbers() {
      let numOne = 2
      let numTwo = 3
      let total = numOne + numTwo
      return total

  }

console.log(addTwoNumbers())

Fungsi dengan parameter

Dalam fungsi, kita bisa melewatkan berbagai tipe data (number, string, boolean, object, function) sebagai parameter. Fleksibel banget kan!

// fungsi dengan satu parameter
function functionName(parm1) {
  //kode di sini
}
functionName(parm1) // saat memanggil atau menjalankan, dibutuhkan satu argumen

function areaOfCircle(r) {
  let area = Math.PI * r * r
  return area
}

console.log(areaOfCircle(10)) // harus dipanggil dengan satu argumen

function square(number) {
  return number * number
}

console.log(square(10))

Fungsi dengan dua parameter

// fungsi dengan dua parameter
function functionName(parm1, parm2) {
  //kode di sini
}
functionName(parm1, parm2) // saat memanggil atau menjalankan, dibutuhkan dua argumen
// Fungsi tanpa parameter tidak menerima input, jadi mari buat fungsi dengan parameter
function sumTwoNumbers(numOne, numTwo) {
  let sum = numOne + numTwo
  console.log(sum)
}
sumTwoNumbers(10, 20) // memanggil fungsi
// Jika fungsi tidak mengembalikan nilai, fungsi tidak menyimpan data, jadi harus mengembalikan nilai

function sumTwoNumbers(numOne, numTwo) {
  let sum = numOne + numTwo
  return sum
}

console.log(sumTwoNumbers(10, 20))
function printFullName(firstName, lastName) {
  return `${firstName} ${lastName}`
}
console.log(printFullName('Asabeneh', 'Yetayeh'))

Fungsi dengan banyak parameter

// fungsi dengan banyak parameter
function functionName(parm1, parm2, parm3,...){
  //kode di sini
}
functionName(parm1,parm2,parm3,...) // saat memanggil atau menjalankan, dibutuhkan tiga argumen


// fungsi ini menerima array sebagai parameter dan menjumlahkan angka-angka dalam array
function sumArrayValues(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum = sum + arr[i];
  }
  return sum;
}
const numbers = [1, 2, 3, 4, 5];
    //memanggil fungsi
console.log(sumArrayValues(numbers));


    const areaOfCircle = (radius) => {
      let area = Math.PI * radius * radius;
      return area;
    }
console.log(areaOfCircle(10))

Fungsi dengan jumlah parameter tak terbatas

Kadang kita nggak tahu berapa banyak argumen yang bakal dikasih sama user. Makanya, kita wajib tahu cara nulis fungsi yang bisa nerima jumlah argumen tak terbatas. Caranya lumayan beda loh antara fungsi deklarasi (fungsi biasa) dan arrow function. Yuk kita lihat contohnya!

Jumlah parameter tak terbatas di fungsi biasa

Fungsi deklarasi nyediain objek mirip array bernama arguments yang ter-scope ke fungsi. Apa pun yang kita lewatkan sebagai argumen di fungsi bisa diakses dari objek arguments di dalam fungsi. Nih contohnya:

// Mari kita akses objek arguments
​
function sumAllNums() {
  console.log(arguments)
}

sumAllNums(1, 2, 3, 4)
// Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// deklarasi fungsi
​
function sumAllNums() {
  let sum = 0
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i]
  }
  return sum
}

console.log(sumAllNums(1, 2, 3, 4)) // 10
console.log(sumAllNums(10, 20, 13, 40, 10))  // 93
console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40))  // 173

Jumlah parameter tak terbatas di arrow function

Nah, arrow function nggak punya objek arguments yang ter-scope ke fungsi. Buat ngimplementasiin fungsi yang nerima jumlah argumen tak terbatas di arrow function, kita pakai spread operator diikuti nama parameter apa pun. Apa pun yang kita lewatkan sebagai argumen bakal bisa diakses sebagai array di arrow function. Cus lihat contohnya!

// Mari kita akses objek arguments
​
const sumAllNums = (...args) => {
  // console.log(arguments), objek arguments tidak ditemukan di arrow function
  // sebagai gantinya kita menggunakan parameter diikuti spread operator (...)
  console.log(args)
}

sumAllNums(1, 2, 3, 4)
// [1, 2, 3, 4]

// deklarasi fungsi
​
const sumAllNums = (...args) => {
  let sum = 0
  for (const element of args) {
    sum += element
  }
  return sum
}

console.log(sumAllNums(1, 2, 3, 4)) // 10
console.log(sumAllNums(10, 20, 13, 40, 10))  // 93
console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40))  // 173

Fungsi Anonim (Anonymous Function)

Fungsi anonim tuh fungsi tanpa nama. Simpel!

const anonymousFun = function() {
  console.log(
    'I am an anonymous function and my value is stored in anonymousFun'
  )
}

Fungsi Ekspresi (Expression Function)

Fungsi ekspresi tuh sebenernya fungsi anonim. Setelah kita bikin fungsi tanpa nama dan naro di variabel, buat ngembaliin nilai dari fungsi tersebut, kita tinggal panggil variabelnya. Lihat contoh di bawah ini deh.

// Function expression
const square = function(n) {
  return n * n
}

console.log(square(2)) // -> 4

Fungsi yang Memanggil Dirinya Sendiri (Self Invoking Functions)

Self invoking functions itu fungsi anonim yang nggak perlu dipanggil buat ngembaliin nilai. Langsung jalan sendiri gitu!

(function(n) {
  console.log(n * n)
})(2) // 4, tetapi alih-alih hanya mencetak, jika kita ingin mengembalikan dan menyimpan data, kita lakukan seperti di bawah ini

let squaredNum = (function(n) {
  return n * n
})(10)

console.log(squaredNum)

Arrow Function

Arrow function itu alternatif keren buat nulis fungsi. Tapi fungsi deklarasi dan arrow function punya beberapa perbedaan kecil sih.

Arrow function pakai tanda panah (arrow) alih-alih kata kunci function buat mendeklarasikan fungsi. Yuk kita bandingin fungsi deklarasi dan arrow function.

// Ini cara kita menulis fungsi normal atau deklarasi
// Mari kita ubah fungsi deklarasi ini menjadi arrow function
function square(n) {
  return n * n
}

console.log(square(2)) // 4

const square = n => {
  return n * n
}

console.log(square(2))  // -> 4

// jika kita hanya memiliki satu baris di blok kode, dapat ditulis sebagai berikut, explicit return
const square = n => n * n  // -> 4

const changeToUpperCase = arr => {
  const newArr = []
  for (const element of arr) {
    newArr.push(element.toUpperCase())
  }
  return newArr
}

const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']
console.log(changeToUpperCase(countries))

// ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]

const printFullName = (firstName, lastName) => {
  return `${firstName} ${lastName}`
}

console.log(printFullName('Asabeneh', 'Yetayeh'))

Fungsi di atas cuma punya pernyataan return doang, jadi kita bisa secara eksplisit ngembaliin nilainya kayak gini nih:

const printFullName = (firstName, lastName) => `${firstName} ${lastName}`

console.log(printFullName('Asabeneh', 'Yetayeh'))

Fungsi dengan parameter default

Kadang kita kasih nilai default ke parameter. Jadi kalau kita jalanin fungsi tapi nggak ngasih argumen, nilai default-nya bakal kepakai. Baik fungsi deklarasi maupun arrow function sama-sama bisa punya nilai default. Oke gas!

// sintaks
// Mendeklarasikan fungsi
function functionName(param = value) {
  //kode
}

// Memanggil fungsi
functionName()
functionName(arg)

Contoh:

function greetings(name = 'Peter') {
  let message = `${name}, welcome to 30 Days Of JavaScript!`
  return message
}

console.log(greetings())
console.log(greetings('Asabeneh'))

function generateFullName(firstName = 'Asabeneh', lastName = 'Yetayeh') {
  let space = ' '
  let fullName = firstName + space + lastName
  return fullName
}

console.log(generateFullName())
console.log(generateFullName('David', 'Smith'))

function calculateAge(birthYear, currentYear = 2019) {
  let age = currentYear - birthYear
  return age
}

console.log('Age: ', calculateAge(1819))

function weightOfObject(mass, gravity = 9.81) {
  let weight = mass * gravity + ' N' // nilainya harus diubah menjadi string terlebih dahulu
  return weight
}

console.log('Weight of an object in Newton: ', weightOfObject(100)) // 9.81 gravitasi di permukaan Bumi
console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // gravitasi di permukaan Bulan

Yuk kita lihat cara nulis fungsi-fungsi di atas pake arrow function. Lebih ringkas kan!

// sintaks
// Mendeklarasikan fungsi
const functionName = (param = value) => {
  //kode
}

// Memanggil fungsi
functionName()
functionName(arg)

Contoh:

const greetings = (name = 'Peter') => {
  let message = name + ', welcome to 30 Days Of JavaScript!'
  return message
}

console.log(greetings())
console.log(greetings('Asabeneh'))

const generateFullName = (firstName = 'Asabeneh', lastName = 'Yetayeh') => {
  let space = ' '
  let fullName = firstName + space + lastName
  return fullName
}

console.log(generateFullName())
console.log(generateFullName('David', 'Smith'))

const calculateAge = (birthYear, currentYear = 2019) => currentYear - birthYear
console.log('Age: ', calculateAge(1819))

const weightOfObject = (mass, gravity = 9.81) => mass * gravity + ' N'

console.log('Weight of an object in Newton: ', weightOfObject(100)) // 9.81 gravitasi di permukaan Bumi
console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // gravitasi di permukaan Bulan

Fungsi Deklarasi vs Arrow Function

Akan dibahas di bagian lain.

🌕 Kamu adalah rising star nih, sekarang udah kenal sama fungsi. Udah terisi penuh dengan kekuatan fungsi, mantap! Kamu baru aja nyelesein tantangan hari ke-7 dan selangkah lebih dekat menuju kehebatan. Gaskeun sekarang latihan buat otak dan otot kamu!

💻 Latihan

Latihan: Level 1

1. Deklarasikan fungsi fullName dan cetak nama lengkap kamu.
2. Deklarasikan fungsi fullName dan sekarang fungsi tersebut menerima firstName, lastName sebagai parameter dan mengembalikan nama lengkap kamu.
3. Deklarasikan fungsi addNumbers yang menerima dua parameter dan mengembalikan jumlahnya.
4. Luas persegi panjang dihitung sebagai berikut: area = panjang x lebar. Tulis fungsi yang menghitung areaOfRectangle.
5. Keliling persegi panjang dihitung sebagai berikut: perimeter = 2 x (panjang + lebar). Tulis fungsi yang menghitung perimeterOfRectangle.
6. Volume balok dihitung sebagai berikut: volume = panjang x lebar x tinggi. Tulis fungsi yang menghitung volumeOfRectPrism.
7. Luas lingkaran dihitung sebagai berikut: area = π x r x r. Tulis fungsi yang menghitung areaOfCircle
8. Keliling lingkaran dihitung sebagai berikut: circumference = 2πr. Tulis fungsi yang menghitung circumOfCircle
9. Massa jenis suatu zat dihitung sebagai berikut: density = massa / volume. Tulis fungsi yang menghitung density.
10. Kecepatan dihitung dengan membagi total jarak yang ditempuh oleh benda bergerak dibagi dengan total waktu yang dibutuhkan. Tulis fungsi yang menghitung kecepatan benda bergerak, speed.
11. Berat suatu zat dihitung sebagai berikut: weight = massa x gravitasi. Tulis fungsi yang menghitung weight.
12. Suhu dalam oC dapat dikonversi ke oF menggunakan rumus ini: oF = (oC x 9/5) + 32. Tulis fungsi yang mengonversi oC ke oF convertCelsiusToFahrenheit.

13. Indeks massa tubuh (BMI) dihitung sebagai berikut: bmi = berat dalam Kg / (tinggi x tinggi) dalam m2. Tulis fungsi yang menghitung bmi. BMI digunakan untuk secara luas mendefinisikan berbagai kelompok berat badan pada orang dewasa berusia 20 tahun atau lebih. Periksa apakah seseorang underweight, normal, overweight atau obese berdasarkan informasi yang diberikan di bawah ini.

    • Kelompok yang sama berlaku untuk pria dan wanita.
    • Underweight: BMI kurang dari 18.5
    • Normal weight: BMI 18.5 sampai 24.9
    • Overweight: BMI 25 sampai 29.9
    • Obese: BMI 30 atau lebih

14. Tulis fungsi bernama checkSeason, fungsi ini menerima parameter bulan dan mengembalikan musim: Autumn, Winter, Spring atau Summer.

15. Math.max mengembalikan argumen terbesarnya. Tulis fungsi findMax yang menerima tiga argumen dan mengembalikan nilai maksimumnya tanpa menggunakan metode Math.max.

    console.log(findMax(0, 10, 5))
    10
    console.log(findMax(0, -10, -2))
    0
    

Latihan: Level 2

1. Persamaan linear dihitung sebagai berikut: ax + by + c = 0. Tulis fungsi yang menghitung nilai persamaan linear, solveLinEquation.

2. Persamaan kuadrat dihitung sebagai berikut: ax2 + bx + c = 0. Tulis fungsi yang menghitung nilai atau nilai-nilai persamaan kuadrat, solveQuadEquation.

   console.log(solveQuadratic()) // {0}
   console.log(solveQuadratic(1, 4, 4)) // {-2}
   console.log(solveQuadratic(1, -1, -2)) // {2, -1}
   console.log(solveQuadratic(1, 7, 12)) // {-3, -4}
   console.log(solveQuadratic(1, 0, -4)) //{2, -2}
   console.log(solveQuadratic(1, -1, 0)) //{1, 0}
   

3. Deklarasikan fungsi bernama printArray. Fungsi ini menerima array sebagai parameter dan mencetak setiap nilai dari array.

4. Tulis fungsi bernama showDateTime yang menampilkan waktu dalam format ini: 08/01/2020 04:08 menggunakan objek Date.

   showDateTime()
   08/01/2020 04:08
   

5. Deklarasikan fungsi bernama swapValues. Fungsi ini menukar nilai x ke y.

   swapValues(3, 4) // x => 4, y=>3
   swapValues(4, 5) // x = 5, y = 4
   

6. Deklarasikan fungsi bernama reverseArray. Fungsi ini menerima array sebagai parameter dan mengembalikan kebalikan dari array (jangan gunakan metode).

   console.log(reverseArray([1, 2, 3, 4, 5]))
   //[5, 4, 3, 2, 1]
   console.log(reverseArray(['A', 'B', 'C']))
   //['C', 'B', 'A']
   

7. Deklarasikan fungsi bernama capitalizeArray. Fungsi ini menerima array sebagai parameter dan mengembalikan array yang dikapitalisasi.

8. Deklarasikan fungsi bernama addItem. Fungsi ini menerima parameter item dan mengembalikan array setelah menambahkan item
9. Deklarasikan fungsi bernama removeItem. Fungsi ini menerima parameter indeks dan mengembalikan array setelah menghapus item
10. Deklarasikan fungsi bernama sumOfNumbers. Fungsi ini menerima parameter angka dan menjumlahkan semua angka dalam rentang tersebut.
11. Deklarasikan fungsi bernama sumOfOdds. Fungsi ini menerima parameter angka dan menjumlahkan semua angka ganjil dalam rentang tersebut.
12. Deklarasikan fungsi bernama sumOfEven. Fungsi ini menerima parameter angka dan menjumlahkan semua angka genap dalam rentang tersebut.

13. Deklarasikan fungsi bernama evensAndOdds. Fungsi ini menerima bilangan bulat positif sebagai parameter dan menghitung jumlah bilangan genap dan ganjil dalam angka tersebut.

    evensAndOdds(100);
    The number of odds are 50.
    The number of evens are 51.
    

14. Tulis fungsi yang menerima sejumlah argumen dan mengembalikan jumlah dari argumen-argumen tersebut

    sum(1, 2, 3) // -> 6
    sum(1, 2, 3, 4) // -> 10
    

15. Tulis fungsi yang menghasilkan randomUserIp.

16. Tulis fungsi yang menghasilkan randomMacAddress

17. Deklarasikan fungsi bernama randomHexaNumberGenerator. Ketika fungsi ini dipanggil, fungsi ini menghasilkan bilangan heksadesimal acak. Fungsi ini mengembalikan bilangan heksadesimal.

    console.log(randomHexaNumberGenerator());
    '#ee33df'
    

18. Deklarasikan fungsi bernama userIdGenerator. Ketika fungsi ini dipanggil, fungsi ini menghasilkan id tujuh karakter. Fungsi ini mengembalikan id tersebut.

    console.log(userIdGenerator());
    41XTDbE
    

Latihan: Level 3

1. Modifikasi fungsi userIdGenerator. Deklarasikan fungsi bernama userIdGeneratedByUser. Fungsi ini tidak menerima parameter apa pun tetapi menerima dua input menggunakan prompt(). Salah satu input adalah jumlah karakter dan input kedua adalah jumlah id yang seharusnya dihasilkan.

   userIdGeneratedByUser()
   'kcsy2
   SMFYb
   bWmeq
   ZXOYh
   2Rgxf
   '
   userIdGeneratedByUser()
   '1GCSgPLMaBAVQZ26
   YD7eFwNQKNs7qXaT
   ycArC5yrRupyG00S
   UbGxOFI7UXSWAyKN
   dIV0SSUTgAdKwStr
   '
   

2. Tulis fungsi bernama rgbColorGenerator yang menghasilkan warna rgb.

   rgbColorGenerator()
   rgb(125,244,255)
   

3. Tulis fungsi arrayOfHexaColors yang mengembalikan sejumlah warna heksadesimal dalam sebuah array.

4. Tulis fungsi arrayOfRgbColors yang mengembalikan sejumlah warna RGB dalam sebuah array.
5. Tulis fungsi convertHexaToRgb yang mengonversi warna hexa ke rgb dan mengembalikan warna rgb.
6. Tulis fungsi convertRgbToHexa yang mengonversi rgb ke warna hexa dan mengembalikan warna hexa.

7. Tulis fungsi generateColors yang dapat menghasilkan sejumlah warna hexa atau rgb.

   console.log(generateColors('hexa', 3)) // ['#a3e12f', '#03ed55', '#eb3d2b']
   console.log(generateColors('hexa', 1)) // '#b334ef'
   console.log(generateColors('rgb', 3)) // ['rgb(5, 55, 175)', 'rgb(50, 105, 100)', 'rgb(15, 26, 80)']
   console.log(generateColors('rgb', 1)) // 'rgb(33,79, 176)'
   

8. Panggil fungsi kamu shuffleArray, fungsi ini menerima array sebagai parameter dan mengembalikan array yang diacak

9. Panggil fungsi kamu factorial, fungsi ini menerima bilangan bulat sebagai parameter dan mengembalikan faktorial dari bilangan tersebut
10. Panggil fungsi kamu isEmpty, fungsi ini menerima parameter dan memeriksa apakah parameter tersebut kosong atau tidak
11. Panggil fungsi kamu sum, fungsi ini menerima sejumlah argumen dan mengembalikan jumlahnya.
12. Tulis fungsi bernama sumOfArrayItems, fungsi ini menerima parameter array dan mengembalikan jumlah semua item. Periksa apakah semua item array bertipe number. Jika tidak, berikan umpan balik yang masuk akal.
13. Tulis fungsi bernama average, fungsi ini menerima parameter array dan mengembalikan rata-rata item. Periksa apakah semua item array bertipe number. Jika tidak, berikan umpan balik yang masuk akal.

14. Tulis fungsi bernama modifyArray yang menerima array sebagai parameter dan memodifikasi item kelima dari array tersebut dan mengembalikan array. Jika panjang array kurang dari lima, fungsi ini mengembalikan 'item not found'.

    console.log(modifyArray(['Avocado', 'Tomato', 'Potato','Mango', 'Lemon','Carrot']);
    

    ['Avocado', 'Tomato', 'Potato','Mango', 'LEMON', 'Carrot']
    

    console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon','Microsoft',  'IBM']);
    

    ['Google', 'Facebook','Apple', 'Amazon','MICROSOFT',  'IBM']
    

    console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon']);
    

      'Not Found'
    

15. Tulis fungsi bernama isPrime, yang memeriksa apakah suatu bilangan adalah bilangan prima.

16. Tulis fungsi yang memeriksa apakah semua item unik dalam array.
17. Tulis fungsi yang memeriksa apakah semua item array memiliki tipe data yang sama.
18. Nama variabel JavaScript tidak mendukung karakter khusus atau simbol kecuali \$ atau _. Tulis fungsi isValidVariable yang memeriksa apakah suatu variabel valid atau tidak valid.

19. Tulis fungsi yang mengembalikan array berisi tujuh angka acak dalam rentang 0-9. Semua angka harus unik.

    sevenRandomNumbers()
    [(1, 4, 5, 7, 9, 8, 0)]
    

20. Tulis fungsi bernama reverseCountries, fungsi ini menerima array countries dan pertama-tama menyalin array tersebut lalu mengembalikan kebalikan dari array asli

🎉 SELAMAT ! 🎉