Javascript

Memulai Mengenal Javascript

File javascript bisa dibuat dengan ekstensi .js jika itu file yang terpisah dari HTML. Akan tetapi, juga bisa langsung diselipkan di dalam dokumen HTML dengan tag script. Jika filenya terpisah, bisa juga diimport dengan menggunakan tag yang sama yaitu script.

<!-- Import file .js -->
<script src="path/ke/file.js"></script>

<!-- Menulis langsung di HTML -->
<script>
   // Langsung tulis file javascriptnya
</script>

Variable Javascript

Untuk inisialisasi variable Javascript, perlu aksesor diawalnya. Variable javascript tidak memerlukan simbol apapun dalam penulisannya. Hanya saja perlu diketahui bahwa penulisannya tetap mengikuti aturan penulisan variabel secara umum.

// Variabel konstan
const data = 'your value'

// Variabel bisa diubah secara global
var user = 'your value'

// Variabel bisa diubah di block tertentu
let number = 13

Aksesor Variable Javascript

Secara umum ada 3 aksesor yang harus dipahami. Yaitu const, var, dan let. Term const digunakan untuk membuat variabel konstan yang tidak bisa diubah lagi nilainya. Term var dan let merupakan aksesor yang mana nilai variable bisa diubah, bedanya var bersifat global dan let bersifat lokal.

// Const variable
const number = 1
number = 2 // error karena variable number itu constant
const number = 2 // bisa karena diinisialisasi ulang

// Var dan let
var name = 'Jhon'
function process() {
  let age = 24
  return "My name is " + name + " and I am " + age + " years old"
  // My name is Jhon and I am 24 years old
}

age = 21
console.log("My name is " + name + " and I am " + age + " years old")
// My name is Jhon and I am undefined years old

Conditional statement di Javascript

Penggunaannya secara umum sama. Ada dengan menggunakan if - else if - else statement ada juga yang menggunakan switch-case Statement

if (condition) {
   return true
} else if (another_condition) {
  return true
} else {
  return false
}

Conditional statement Switch Case di Javascript

Untuk penggunaan switch case juga secara umum sama konsepnya dengan kebanyakan bahasa pemrograman

switch(value) {
  case condition:
     return true
     break
 case another_condition:
    return true
    break
 default:
    return false
}

Looping in Javascript

Di dalam javascript, ada beberapa jenis perulangan, yang mana mungkin salah satunya sudah familiar. Yakni for loop, for in loop, for of loop, dan while loop.

Looping di Javascript: For loop

Untuk for loop sama seperti di dalam bahasa pemrograman pada umumnya, Looping ini memiliki nilai awal, batasan akhir, dan kondisi looping yang sudah ditentukan.

for (initial_condition, final_condition, condition_behavior) {
  // Your code
}

// Example
for (let index = 0 index < 10 index++) {
  // your code will run 10x
}

Looping di Javascript: For In loop

Di dalam javascript, terdapat metode for in loop. Metode ini digunakan untuk mengambil key dari sebuah objek.

const data = { name: "Jhon", age: 24, address: "New York" }
let text = ""

for (key in data) {
  text += data[key]
}

console.log(text)
// Jhon24New York

Looping di Javascript: For Of loop

Untuk mengulang sebanyak panjang dari array atau objek yang diulang, kita bisa menggunakan For Of Loop.

const data = ['a', 'b', 'c']

for (const element of data) {
  console.log(element)
}

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

Looping di Javascript: While loop

Untuk looping while loop cara penggunaannya sama seperti di bahasa pemrograman pada umumnya. Loop ini akan terus berjalan jika kondisi tidak bernilai false

while(condition) {
  // your code here
}

Looping Langsung Dari Variable

Ada keunikan sendiri di dalam Javascript, yaitu kita bisa looping langsung dari variable. Misalnya kita memiliki variable dalam bentuk array, kita bisa langsung menggunakan .forEach() untuk mulai mengulang seluruh datanya

const data = [1, 2, 3, 4, 5]
data.forEach((item) => {
  console.log(item)
})

// Output: 1, 2, 3, 4, 5

Looping Dengan Mapping Data

Misalnya kita ingin melakukan operasi tertentu pada data dari sebuah array, kita bisa menggunakan .map untuk mengulang sekaligus mengembalikan datanya (tergantung kebutuhan)

const data = [1, 2, 3]
const genap = data.map((item) => {
  return item * 2
})

console.log(genap)   // Output: 2, 4, 6

Function di Javascript

Penulisan function di Javascript masih sama dengan bahasa pemrograman pada umumnya yaitu dengan function diikuti dengan nama fungsinya

function add(number1, number2) {
  return number1 + number2
}

const total = add(1, 2)
console.log(total)        // Output: 3