Javascript untuk Belajar React

Reactjs menggunakan Ecmascript 6 (versi revisi dari Javascript), oleh karenanya kita perlu familiar dulu dengan beberapa konsep dan sintaks yang ada pada Ecmascript.

Glot.io IDE memudahkan kita untuk mencoba jalankan kode Javascript murni

Cakupan atau Scope

Scope adalah area dari cakupan kode. Dalam sebuah file javascript, terdapat tiga jenis scope, yakni global scope, local scope, dan block scope.

Global Scope

Global scope adalah kode yang cakupannya di seluruh file javascript sehingga bisa diakses oleh semua fungsi yang ada di dalam file javascript. Agar bisa menjadi Global scope, maka kode perlu di tulis di dasar atau root dari file javascript.

Perhatikan contoh kode berikut :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var greeting = "Halo rekan-rekan"

function printAlert() {
  alert(greeting)
}
printAlert()
// Output : Halo rekan-rekan

function printConsole(param) {
  console.log(param)
}
printConsole(greeting)
// Output : Halo rekan-rekan

Output kode di atas adalah adanya alert dan output pada console berisi nilai dari variabel greeting.

Dari kode diatas variabel greeting bisa dipanggil di dalam fungsi printAlert dan juga bisa menjadikan variabel greeting sebagai argument untuk memanggil fungsi printConsole. Ini adalah salah satu contoh kemampuan variabel pada global scope untuk diakses oleh kode lain di dalam satu file Javascript.

Local Scope

Local Scope atau function scope adalah cakupan kode yang hanya dapat diakses dari dalam fungsi itu saja dan tidak bisa diakses oleh kode di luar fungsi tersebut.

Perhatikan contoh kode berikut :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function printAlert() {
  var greeting = "Halo rekan-rekan"
  alert(greeting)
}
printAlert()
// Output : Halo rekan-rekan

function printConsole(param) {
  console.log(param)
}
printConsole(greeting)
// Output: error: Uncaught ReferenceError: greeting is not defined

Output dari kode di atas adalah adanya alert berisi nilai variabel greeting namun output pada console hanya berisi undefined, hal ini terjadi karena variabel greeting hanya dapat diakses oleh kode yang ada di dalam fungsi printAlert.

Berikut ini contoh local scope yang diakses oleh fungsi di dalamnya fungsi javascript :

1
2
3
4
5
6
7
8
var printConsole = function () {
  if (true) {
    var greeting = "Hello Guys"
  }
  console.log(greeting)
}
printConsole()
// Output: Hello Guys

Variabel yang dibuat menggunakan keyword var akan menjadi local variabel di dalam fungsi.

Block Scope

Block scope adalah cakupan kode yang hanya terbatas pada block code saja. Block code adalah area yang ada di antara kurung kurawal { dan }.

Perhatikan contoh block scope berikut ini :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var printConsole = function () {
  // ini adalah contoh local scope
  if (true) {
    let greeting = "Hello Guys"
    console.log(greeting)
  }
  console.log(greeting)
}
printConsole()

// output:
// Hello Guys
// error: Uncaught ReferenceError: greeting is not defined

Error terjadi dikarenakan console log kedua tidak bisa mengakses variabel greeting.

Variabel yang dibuat menggunakan let dan const akan menjadi block variabel yang tidak bisa diakses di luar block kode.

Test Pemahaman Tentang Scope

Coba tebak terlebih dahulu output kode berikut sebelum menjalankannya di Javascript playground online:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
let a = 1
const function1 = function () {
  console.log(a)
  a = 2
}
a = 3
const function2 = function () {
  console.log(a)
}
function1()
function2()
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
let a = 10
const fungsi = function () {
  let a = 11
  if (true) {
    let a = 12
    console.log(a)
  }
  console.log(a)
}

fungsi()
console.log(a)

Template Literal

Template literal memungkinkan pemanggilan variabel di dalam sebuah string. Template literal ditandai dengan penggunaan kode backticks (`)

1
2
3
4
5
6
7
8
const greeting = "Hello"
const subject = "World"

// cara biasa
console.log(greeting + " " + subject + "!")

// Cara template literal
console.log(`${greeting} ${subject}!`)

Shorthand Property Names

Shorthand property names adalah cara cepat untuk deklarasi variabel.

Beberapa cara membuat variabel di Javascript :

1
2
3
4
let a = 1
let b = 2
let c = 3
console.log(`${a} + ${b} = ${c}`)
1
2
3
4
let a = 1,
  b = 2,
  c = 3
console.log(`${a} + ${b} = ${c}`)
1
2
let [a, b, c] = [1, 2, 3]
console.log(`${a} + ${b} = ${c}`)

Conditional (Ternary) Operator

Operator kondisional (ternary) adalah operator kondisional (if..else) versi singkat yang hanya memiliki tiga bagian:

  1. Bagian pertama adalah kondisi yang dilanjutkan dengan tanda tanya (?),
  2. Bagian kedua adalah kode yang akan dieksekusi ketika kondisi terpenuhi (benar) yang dilanjutkan dengan tanda titik dua (:),
  3. bagian ketiga adalah kode yang dieksekusi ketika kondisi tidak terpenuhi (salah).

Kurang lebih seperti ini bentuk dasar dari operator ternary:

1
(kondisi) ? (code if true) : (code if false)

Perhatikan beberapa contoh berikut ini :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
let a = 10

// if else biasa
if (a < 10) {
  console.log("a kurang dari 10")
} else {
  console.log("a sama dengan atau lebih besar dari 10")
}

// operator ternary
a < 10
  ? console.log("a kurang dari 10")
  : console.log("a sama dengan atau lebih besar dari 10")

// Output: a sama dengan atau lebih besar dari 10
1
2
3
4
5
6
7
let a = 10

// operator ternary assign value
a = a <= 10 ? a + 10 : a - 10

console.log(a)
// Output: 20

Arrow Function

Fungsi bisa dibuat tanpa menggunakan keyword function, fungsi seperti itu disebut dengan arrow function. Silahkan perhatikan beberapa contoh pembuatan fungsi berikut:

1
2
3
4
5
6
// Menggunakan keyword function disertai dengan nama fungsi
function myFunction(parameter) {
  console.log(parameter)
}
myFunction("Fungsi dengan parameter")
// Output: Fungsi dengan parameter
1
2
3
4
5
6
// variabel myFunction diberi isi berupa anonymous function
const myFunction = function (parameter) {
  console.log(parameter)
}
myFunction("Fungsi dengan parameter")
// Output: Fungsi dengan parameter
1
2
3
4
5
6
// ubah menjadi format arrow function
const myFunction = (parameter) => {
  console.log(parameter)
}
myFunction("Fungsi dengan parameter")
// Output: Fungsi dengan parameter
1
2
3
4
5
// arrow function
let myFuncion = (num1, num2) => `${num1} kali ${num2} = ${num1 * num2}`

console.log(myFuncion(3, 3))
// Output: 3 kali 3 = 9

High Order Function dan Callback

Pada Javascript, object bisa dibuat menggunakan fungsi bahkan fungsi itu sendiri dianggap sebagai object. Sehingga sebuah fungsi bisa dijadikan sebagai argumen untuk pemanggilan fungsi lain.

High Order Function

High-order function adalah Fungsi yang menerima argumen berupa fungsi lain serta return value-nya bisa berupa fungsi juga.

Callback function

Callback function merupakan fungsi yang akan menjadi argumen dalam pemanggilan High-order function.

Perhatikan contoh dari function, high order function dan callback function berikut:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// buat fungsi bernama isGenap
// berisi kode untuk cek number genap
function isGenap(num) {
  // bilangan genap adalah nilai yang habis dibagi 2
  return num % 2 == 0
}

function printGenap(num) {
  // cek apakah num genap menggunakan fungsi isGenap
  const isTrue = isGenap(num)
  if (isTrue) {
    console.log(`${num} adalah bilangan genap`)
  } else {
    console.log(`${num} adalah bilangan ganjil`)
  }
}

printGenap(5)
// output console: "5 adalah bilangan ganjil"
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
// buat fungsi callback bernama isGenap
// berisi kode untuk cek number genap
function isGenap(num) {
  // bilangan genap adalah nilai yang habis dibagi 2
  return num % 2 == 0
}

// buat high-order function bernama printGenap dengan 2 parameter
function printGenap(num, callback) {
  // cek apakah num genap menggunakan callback
  const isTrue = callback(num)
  if (isTrue) {
    console.log(`${num} adalah bilangan genap`)
  } else {
    console.log(`${num} adalah bilangan ganjil`)
  }
}

// argumen pertama berisi number, argumen kedua berisi callback isGenap
printGenap(5, isGenap)
// output console: "5 adalah bilangan ganjil"
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// buat high-order function bernama printGenap dengan 2 parameter
function printGenap(num, callback) {
  // cek apakah num genap menggunakan callback
  const isTrue = callback(num)
  if (isTrue) {
    console.log(`${num} adalah bilangan genap`)
  } else {
    console.log(`${num} adalah bilangan ganjil`)
  }
}

// Pada versi ini, tidak ada fungsi isGenap.
// namun argumen callback diisi oleh fungsi anonymous (tanpa nama)
printGenap(5, function (n) {
  // bilangan genap adalah nilai yang habis dibagi 2
  return n % 2 == 0
})
// output console: "5 adalah bilangan ganjil"
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
function printGenap(num, callback) {
  // cek apakah num genap menggunakan callback
  const isTrue = callback(num)
  if (isTrue) {
    console.log(`${num} adalah bilangan genap`)
  } else {
    console.log(`${num} adalah bilangan ganjil`)
  }
}

// Pada versi ini, argumen callback diisi oleh arrow function
printGenap(5, (n) => n % 2 == 0)
// output console: "5 adalah bilangan ganjil"

Operator Penggabungan Null dan Undefined

Kita mengetahui bahwasannya javascript memiliki 2 tipe data yang tidak terdefinisi nilainya, yakni null dan undefined. Terdapat operator yang berguna untuk mengecek suatu variabel bernilai null atau undefined yaitu menggunakan operator dua tanda tanya ??.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function add(a, b) {
  // jika variabel bernilai `null` atau `undefined`,
  // maka isi variabel dengan nilai 0
  a = a ?? 0
  b = b ?? 0
  return a + b
}

// panggil fungsi tanpa argumen
console.log(add()) // output: 0
// panggil fungsi dengan salah satu argumentnya null
console.log(add(null, 12)) // output: 12

Export Import ES6 Modules

ES6 mendukung penggunaan modul javascript, modul javascript adalah kumpulan kode di sebuah file javascript yang dapat digunakan di file lain jika dilakukan ekspor dan impor. Pada React, modul biasanya digunakan untuk membuat komponen. Kode javascript yang bisa diekspor dan impor yakni variabel, fungsi, class, dan object.

Sebuah module harus memenuhi syarat berikut :

  1. Independen: Sebuah module sebisa mungkin tidak bergantung pada modul lain.
  2. Single-responsibility: Sebuah module hanya boleh menangani satu kemampuan, tugas atau hal tertentu.
  3. Reusable: Sebuah module harus bisa digunakan kembali dan diintegrasikan pada berbagai macam program berdasarkan kemampuannya.

Cara Export dan Import ES6 Module

Terdapat beberapa cara untuk export dan juga import modul ES6, yakni dengan default export import, single named export import, dan multiple named export import.

Export default adalah cara export yang tidak menggunakan nama, sehingga modul bisa diberi nama saat di-import. Sebuah file javascript hanya boleh memiliki satu export default.

Contoh Export Default & Import

Export default module bisa berupa fungsi anonimous dan juga bisa berupa fungsi biasa.

1
2
3
4
// Beri nama saat mengimpor dari module default
import ConsoleLog from "./Console"

ConsoleLog()
1
2
3
4
// Export default anonymous function
export default function () {
  console.log("Contoh export default function")
}

Contoh Single Export Named Module

Jika modul yang diexport memiliki nama, maka nama tersebut harus digunakan kembali ketika mengimpor modul.

1
2
3
4
// Export named function
export function myFunction() {
  console.log("Contoh export named function")
}
1
2
3
4
// import berisi nama yang diekspor di dalam kurawal
import { myFunction } from "./Console"

myFunction()

Contoh Multiple Export Module

Kita bisa mengekspor beberapa modul sekaligus dengan memasukkan nama modul ke dalam kurung kurawal. Selanjutnya gunakan kurung kurawal berisi nama tersebut ketika mengimpor modulnya.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
function myFunction() {
  console.log("Contoh export named function")
}

const myArrowFunction = () => {
  console.log("Contoh export arrow functionn")
}

export { myFunction, myArrowFunction }

// kita bisa export default function juga
const myDefaultFunction = () => {
  console.log("Contoh export Default function")
}
export default myDefaultFunction
1
2
3
4
5
6
7
// import berisi nama yang diekspor di dalam kurawal,
// Selainnya adalah default function
import defaultFunction, { myFunction, myArrowFunction } from "./Console"

myFunction()
myArrowFunction()
defaultFunction()

©2021, All Rights Reserved

Privacy Policy | DMCA | Telegram