Konsep Javascript penting yang harus kamu pahami

Ada banyak sekali hal yang perlu dipahami ketika ingin menguasai Javascript. Akan memerlukan bertahun-tahun untuk benar-benar menguasai Javascript secara penuh. Meskipun begitu, ada beberapa hal penting yang harus kita pahami yang bisa menjadi langkah awal mu untuk bisa menguasai Javascript, paling tidak untuk membangun Aplikasi Digital pertamamu.

Berikut adalah konsep-konsep yang saya yakini menjadi konsep yang penting untuk dikuasai pertama kali berdasarkan pengalaman saya menjadi Full Stack Engineer selama hampir 3 tahun.

Basic Javascript is always an entrypoint

hal-hal dasar seperti Variable, Data Type, operators, conditionals, arrays, functions, objects, events dan yang lainnya menjadi cukup penting. Tidak perlu detail, namun cukup mengetahui konsep dasar nya saja sudah cukup. Kita tidak perlu, dan saya juga tidak menyarankan, untuk menghafal satu per satu metode tersebut. Selain memang tidak diperlukan, hal itu juga tidak efisien karena dokumentasi akan menjadi salah satu teman terbaik kita. So, dont do it.

Untuk langkah ini, ada baiknya untuk cek beberapa Course gratis atau the freeCodeCamp JavaScript curriculum sebagai tempat belajar. Situs dokumentasi seperti MDN dan JavaScript.info juga bisa menjadi referensi tambahan yang berguna.

Equality Comparison

Konsep Equality Comparison adalah konsep perbandingan antara 2 operandi menggunakan operator (==) atau (===), yang akan mengembalikan hasil berupa Boolean. Di dalam Javascript, konsep ini cukup tricky untuk dilakukan.

Javascript mengenal 2 cara untuk melakukan perbandingan ini:

equality (==)

Metode ini akan selalu mengkonversi dan membandingkan operandi yang tipenya berbeda.

console.log(1 == 1);
// Expected output: true

console.log('hello' == 'hello');
// Expected output: true

console.log('1' == 1);
// Expected output: true

console.log(0 == false);
// Expected output: true

Pada statement 1 dan 2, kita paham bahwa mengapa operasi tersebut akan menghasilkan true. Namun yang terjadi pada statement 3 adalah value ‘1’ akan dikonversikan terlebih dahulu menjadi tipe data number karena ‘1’ merupakan data numeric string yang valid, sehingga komparasi akan menjadi (1 == 1) yang menghasilkan nilai true.

Begitu juga halnya dengan statement 4, dimana value false akan dikonversi dahulu menjadi tipe data number yaitu 0, sehingga komparasi akan menjadi (0 == 0) yang menghasilkan nilai true

strict equality (===)

Berbeda dengan equality, metode ini tidak akan melakukan konversi sebelum melakukan komparasi.

console.log(1 === 1);
// Expected output: true

console.log('hello' === 'hello');
// Expected output: true

console.log('1' === 1);
// Expected output: false

console.log(0 === false);
// Expected output: false

statement 3 adalah membandingkan value ‘1’ bertipe string dengan 1 bertipe number. Karena tipe data yang berbeda, maka akan menghasilkan nilai false. Begitu juga halnya dengan statement 4, dimana value 0 bertipe number dibandingkan dengan false bertipe boolean, maka akan menghasilkan nilai false pula

Komparasi seperti ini biasanya bayak digunakan dalam logical statement dan akan cukup sering kita temui dalam kode kita. Memahami perbedaan konsep ini akan lebih memudahkan kita dalam menerapkan logic dengan benar dan tepat.

Asynchronous Operations

By default, javascript adalah synchronous operations, yang berarti kode akan dieksekusi dari baris ke baris, sesuai dengan urutan, dan akan menunggu kode untuk di eksekusi sebelum melanjutkan ke baris kode berikutnya.

// synchronous operations
console.log('First')
console.log('Second')
console.log('Third')

# Output
First
Second
Third

Namun, JavaScript juga mendukung pemrograman asynchronous, yang memungkinkan beberapa operasi (I/O task, Network Request, atau Timeout) untuk berjalan di latar belakang tanpa menghalangi eksekusi kode utama. Ketika kode asynchronous digunakan, Javascript tidak perlu menunggu operasi tersebut selesai dan langsung melanjutkan untuk menjalankan baris kode berikutnya.

// asynchronous operations
console.log('First')
setTimeout(() => {
  console.log("Second");
}, 2000); // Delayed by 2 seconds
console.log('Third')

# Output
First
Third
Second # Printed because the operation delayed

Untuk menangani asynchronous operations, ada dua metode dalam Javascript yang bisa kita gunakan, yaitu Promises dan Async/Await.

Promise menggambarkan nilai yang mungkin belum tersedia, tetapi akan tersedia di masa depan (misalnya setelah operasi selesai). then() dan catch() digunakan untuk menangani hasil dari asynchronous operations.

const promise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve("Operasi berhasil !");
  } else {
    reject("Terjadi kesalahan!");
  }
});

promise
  .then((result) => console.log(result))
  .catch((error) => console.log(error));

Sedangkan Async/Await adalah metode yang lebih sederhana dan menurut saya lebih clean dalam implementasinya. Kita cukup mendeklarasikan sebuah function sebagai asynchronous dengan menambahkan prefix async pada function, kemudian menggunakan await untuk menunggu penyelesaian sebuah Promise di dalam fungsi async, dan membuat kode lebih mirip dengan kode synchronous.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

fetchData();

Error Handling

Salah satu titik lemah dari Javascript adalah tidak adanya garansi bahwa kode yang kita buat akan bebas dari kegagalan sebelum kita menjalankan kode. Hal ini mungkin tidak masalah ketika masih berada pada fase development. Tetapi ketika terjadi di fase production akan menjadi masalah yang krusial, apalagi jika menyangkut operasional bisnis.

Untuk saya, perlu menanamkan mindset, ketika kita bekerja menggunakan Javascript untuk development aplikasi, ada baiknya selalu memperhitungkan beberapa failing case yang mungkin terjadi pada kode kita. Sebisa mungkin untuk membuat kode yang defensif. Selalu cek apakah variabel yang kita assign selalu valid dalam sisi tipe data maupun value. Memastikan apakah value tidak bernilai null atau undefined kecuali ketika kita memang menghendakinya. Karena ketika kesalahan terjadi, Javascript akan melakukan shutdown terhadap seluruh kode jika kita tidak menanganinnya dengan benar.

// Function that will return first two letter from given string
function printFristTwoLetter(str) {
  const result = str.substring(0,2)
  console.log(result)
}

printFristTwoLetter(5)
// Expected throw error str.substring is not a function
// because str is not a string

statement diatas menjadi contoh bagaimana suatu function dapat mengalami kegagalan, karena di dalam Javascript, kita tidak memiliki garansi apakah parameter yang digunakan dalam function sesuai dengan apa yang kita inginkan. Sehingga perlu kita jaga kode diatas agar lebih aman

// do checking for parameter
function printFristTwoLetter(str) {
  if(typeof str !== 'string') return console.log('Parameter is not string')
  const result = str.substring(0,2)
  console.log(result)
}

printFristTwoLetter(10)
// Expected console a string 'Parameter is not string' instead throw an error


// or handle with try catch block
function printFristTwoLetter(str) {
  const result = str.substring(0,2)
  console.log(result)
}

try {
  printFristTwoLetter(10)
} catch(error) {
  console.log(error.message)
}

// expected to throw an error but will catch on catch block, resulting a console with string of error message

Ada alternatif lain yang menurut saya lebih menjaga kode kita yaitu menggunakan Typescript sebagai type-checking, dengan tujuan yang sama seperti yang dijelaskan sebelumnya.

Array Methods

Array Methods di Javascript mungkin menjadi method yang akan kita gunakan paling sering ketika bekerja dengan aplikasi skala menengah hingga besar. Saya sendiri sering menggunakan metode ini ketika melakukan manipulasi data dari API. Array method seperti map(), filter(), sort() dan reduce() bisa menjadi awalan yang perlu dikuasai pertama kali. Ada array method lainnya yang mungkin jarang dipakai sesuai dengan usecase, tapi yang terpenting adalah kita perlu mengetahui konsep dasar nya, sehingga ketika kita membutuhkannya, kita bisa langsung mengimplementasikan.

// using map() method
const numbers1 = [1, 2, 3, 4, 5];
const squaredNumbers = numbers1.map((num) => num * num);

console.log(squaredNumbers); 
// Output: [1, 4, 9, 16, 25]

// using filter() method
const numbers2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers2.filter((num) => num % 2 === 0);

console.log(evenNumbers);
// Output: [2, 4, 6, 8, 10]

ES Modules and Syntax

Modules diperkenalkan oleh JavaScript sejak versi ES6 (ECMAScript 2015), yang memungkinkan kita untuk membagi kode ke dalam modul-modul terpisah. Sebelumnya, JavaScript menggunakan sistem berbasis file tunggal yang membuat kode sulit untuk diorganisir, terutama pada aplikasi besar.

Pembaruan di ES6 ini juga membawa berbagai fitur baru yang membuat JavaScript lebih modern dan efisien, seperti destructuring (untuk mempermudah pengambilan nilai dari array atau objek), spread operator (untuk menggabungkan array atau objek), serta string literals (untuk menulis string dengan cara yang lebih fleksibel, termasuk interpolasi variabel menggunakan backtick). Fitur-fitur baru ini memungkinkan pengembangan aplikasi menjadi lebih mudah dan lebih terstruktur.

// De-structuring object
const object = {
  field1: 'Hello',
  field2: 'World'
}
const { field1, field2 } = object
console.log(field1); 
// Output: Hello
console.log(field2); 
// Output: World


// Spread Operator
const numbers1 = [1, 2, 3, 4, 5];
const numbers2 = [6, 7, 8, 9, 10]
const combined = [...numbers1, ...numbers2]
console.log(combined)
// Output: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]


// String Literals
const str1 = 'Hello'
const str2 = 'World'
const text = `${str1} ${str2}`

console.log(text)
// Output: Hello World

Memahami hal ini memungkinkan kita melakukan development aplikasi Javascript yang selalu update dan menggunakan teknologi yang paling baru.

Kesimpulan

Untuk menguasai Javascript, penting untuk memahami konsep-konsep dasar terlebih dahulu, seperti variabel, tipe data, operator, fungsi, objek, dan lainnya. Meskipun penguasaan mendalam memerlukan waktu yang panjang, pemahaman dasar ini sudah cukup untuk memulai perjalanan kita dalam membangun aplikasi digital. Selain itu, konsep seperti equality comparison, asynchronous operations dengan Promises dan Async/Await, error handling, serta array methods, semuanya penting untuk dikuasai demi meningkatkan kualitas dan efisiensi pengembangan aplikasi.