Pengenalan Dasar JavaScript : Konsep Penting dan Komponen dasar pada JavaScript

Halloo,, Kakaa Adee semuanya 🙌😁.. Welcome Back di pelatihan ke-6. Gimana ni, Kaka ade semua pasti su tida sabar too untuk materi kali ini🔥Okei kali ini kita akan belajar tentang dasar JavaScript modern (ES6).

Pada pertemuan ini kita berbeda dengan sebelumnya yaa, kita membahas tentang HTML, CSS dan Framework. Kenapa sih kak, kita tidak langsung menggunakan Framework saja kayak pertemuan sebelumnya? biar sat set gituu. Nah sebenernya bisa langsung sat set gaiss.. Cuman semua itu harus belajar dari dasar. Seperti Ilmu padi abangkuh 🌾, kita perlu memahami dasar dengan benar untuk memperoleh hasil yang kokoh dan berbobot🔥.

Pada Materi ini kita akan fokus membahas beberapa konsep modern JavaScript. Tapi sebelum terlalu jauh mari kita pahami terlebih dahulu apa itu JavaScript.

· Pengenalan JavaScript
∘ 1. masa lalu javascript
∘ 2. mengenal javascript
∘ 3. the power of javascript
∘ 4. ECMAScript
∘ 5. ECMAScript 6 (ES6)
∘ 6. Internal Javascript
∘ 7. Eksternal Javascript

· Komponen dasar JavaScript
∘ 1. Variable
∘ 2. Looping
∘ 3. Function
∘ 4. Array
∘ 5. Template Literals

Masa Lalu JavaScript

Javscript dibuat oleh seorang programmer dari Netscape yang bernama “Brendan Eich” pada tahun 1995.
Bahasa pemrograman ini sempat melalui beberapa perubahan nama sebelum pada akhirnya menjadi seperti yang kita kenal saat ini yaitu Javascript.
Pada awalnya bahasa ini memiliki nama “Mocha” kemudian berubah menjadi “Livescript”. Pada masanya bahasa pemrograman “Java” sangatlah populer. Untuk memanfaatkan kepopulerannya nama “Livescript” akhirnya diubah menjadi “Javascript”.
Tapi jangan salah, meskipun namanya diambil dari nama bahasa Java, Javascript tidak ada hubungan sama sekali dengan bahasa tersebut.

Mengenal Javascript

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat website menjadi lebih hidup. Bersama dengan HTML dan CSS, JavaScript memberikan fungsi dan logika pada website sehingga memungkinan website menjadi lebih interaktif dan kaya akan fungsionalitas.

The Power of Javascript

Pada awalnya Javascript diciptakan supaya dapat berjalan di browser saja. Namun, saat ini sebagai seorang pengembang, Kamu memiliki kemampuan untuk menggunakan bahasa pemrograman JavaScript tidak hanya untuk membuat fitur-fitur pada website di browser, tetapi juga untuk mengembangkan berbagai jenis platform lainnya. Salah satu contohnya adalah menggunakan Node.js, yang memungkinkan JavaScript berjalan di luar browser. Dengan demikian, Kamu dapat membuat aplikasi server, aplikasi mobile dan bahkan aplikasi desktop menggunakan JavaScript. Hal ini menunjukkan fleksibilitas JavaScript sebagai bahasa pemrograman yang tidak terbatas hanya pada pengembangan website.

ECMAScript

Sejak tahun 1997, Netscape tidak lagi mengadopsis pengembangan JavaScript. Pada waktu itu, European Computer Manufacturers Association (ECMA) mulai mengambil alih standarisasi bahasa tersebut, yang kemudian bahasa ini dikenal sebagai ECMAScript. Meskipun begitu, masih banyak yang menyebutnya dengan JavaScript hingga saat ini.

Selama tahun 2000-an, JavaScript menggunakan standar yang disebut ECMAScript 3. Di tengah itu, mereka mencoba membuat versi baru, yaitu ECMAScript 4, yang diharapkan akan membawa banyak perbaikan. Sayangnya, proyek ECMAScript 4 berhenti pada tahun 2008 karena terlalu banyak perdebatan.

Namun, pengembangan JavaScript tidak berhenti di sana. Mereka memutuskan untuk fokus pada perbaikan yang lebih kecil dan lebih diterima secara luas. Akhirnya, pada tahun 2009, muncul ECMAScript 5, yang membuat JavaScript lebih baik tanpa membuat terlalu banyak perubahan.

ECMAScript 6 (ES6)

Seiring waktu, pengembang JavaScript merasa bahwa perlu adanya perubahan besar untuk meningkatkan bahasa tersebut, sehingga pada tahun 2015 lahirlah versi ECMAScript 6 atau sering disebut juga ES6. Proses pengembangannya melibatkan banyak pemangku kepentingan dalam komunitas JavaScript. Tujuannya adalah untuk memperkenalkan fitur-fitur baru yang membuat JavaScript lebih kuat, ekspresif, dan mudah untuk digunakan, serta mengatasi beberapa kelemahan yang ada dalam versi sebelumnya.

ES6 menambahkan berbagai fitur baru yang signifikan, termasuk:

1. Variabel let dan const: Memperkenalkan cara baru untuk mendeklarasikan variabel, yang memberikan kontrol yang lebih baik terhadap cakupan dan sifat pengikatan.
2. Arrow Functions: Memberikan sintaksis yang lebih ringkas untuk mendefinisikan fungsi, membantu mengurangi kerumitan dalam penulisan kode.
3. Template Literals: Memungkinkan untuk membuat string yang lebih mudah dibaca dan disusun, dengan memasukkan variabel langsung ke dalam string.
4. Destructuring Assignment: Memungkinkan untuk mengekstrak nilai dari array atau objek dengan cara yang lebih sederhana.
5. Classes: Menyediakan cara untuk membuat objek dan melakukan pewarisan dengan sintaks yang lebih deklaratif.
6. Modules: Memberikan cara yang lebih baik untuk mengatur kode JavaScript ke dalam modul yang terpisah dan dapat digunakan kembali.
7. Promises: Menghadirkan mekanisme untuk menangani operasi yang asinkron dengan cara yang lebih terstruktur dan dapat diandalkan.
8. Default Parameters: Memungkinkan untuk memberikan nilai default kepada parameter fungsi.

Ini hanya beberapa contoh dari banyak fitur yang diperkenalkan oleh ECMAScript 6. Perubahan ini membuat JavaScript lebih kuat sebagai bahasa pemrograman, dan pengembang secara luas merespons positif terhadap perubahan ini karena meningkatkan produktivitas dan kualitas kode. Sejak rilisnya ES6, JavaScript terus berkembang dengan pembaruan reguler setiap tahun untuk menambahkan fitur baru dan memperbaiki kekurangan yang ada.

Menulis Kode Javascript

Menulis kode dalam bahasa pemrograman sederhana seperti memberikan instruksi kepada komputer tentang apa yang harus dilakukan. Setiap baris kode adalah seperti bagian dari daftar instruksi yang Anda tulis. Komputer kemudian mengikuti instruksi tersebut dengan sangat cepat dan tepat, menjalankan program sesuai dengan apa yang Anda minta. Jadi, dalam dasarnya, menulis kode adalah cara untuk berkomunikasi dengan komputer agar melakukan pekerjaan yang Anda inginkan.

Internal JavaScript

Kita perlu memahami terlebih dahulu mengenai internal javascript. Kode JavaScript ditulis langsung di dalam file HTML menggunakan tag <script>

<html>
<head>
    <title>Contoh Internal JavaScript</title>
    <script>
        function greet() {
            alert("Hello from internal JavaScript!");
        }
    </script>
</head>
<body>
    <button onclick="greet()">Greet</button>
</body>
</html>

Penulisan JavaScript secara internal memiliki kelebihan dan kekurangan. Salah satu kelebihannya adalah kesederhanaan, terutama untuk halaman web sederhana, karena tidak memerlukan file tambahan. Namun, kelemahannya adalah bahwa kode JavaScript tercampur dengan kode HTML, yang dapat mengurangi keterbacaan dan mempersulit pemeliharaan kode.

External JavaScript

Kode JavaScript ditulis dalam file terpisah dengan ekstensi .js. File ini kemudian dipanggil di dalam file HTML menggunakan tag <script> dengan atribut src.

File HTML:

<html>
<head>
    <title>Contoh External JavaScript</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="greet()">Greet</button>
</body>
</html>

File Javascript:

function greet() {
  alert("Hello from external JavaScript!");
}

ES6 Module

Modul ES6 adalah cara untuk membagi kode JavaScript Anda menjadi potongan-potongan yang dapat digunakan kembali, yang disimpan dalam file JavaScript terpisah. Modul ini membantu Anda membuat kode yang lebih terstruktur, modular, dan mudah dikelola

File module1.js

export function add(a, b) {
  return a + b;
}
export const name = "John Doe";
// Default export
export default function sayHello() {
  console.log("Hello!");
}

File module2.js

import { add, name } from "./module1";
// Import default export
import sayHello from "./module1";
console.log(add(1, 2)); // 3
console.log(name); // John Doe
sayHello(); // Hello!

Komponen dasar JavaScript

1. Variable

Variabel dalam JavaScript adalah simbol yang digunakan untuk menyimpan nilai yang dapat berubah selama eksekusi program, memungkinkan penggunaan nilai yang disimpan di berbagai bagian program dengan menggunakan nama variabel yang sama.

Contoh variabel dalam JavaScript :

Mendeklarasikan suatu variabel dalam javascript terdapat 3 cara, yaitu dapat menggunakan keyword var, let dan const.

• var Digunakan untuk mendeklarasikan variabel dengan lingkup (scope) fungsi atau global. Variabel yang dideklarasikan dengan var dapat diakses dari manapun dalam fungsi tersebut. Deklarasi variabel menggunakan var sudah tidak direkomendasikan setelah munculnya ES6.

var nama = "Brodi";
console.log(nama);

• Let Mirip dengan var, tetapi memiliki lingkup blok (block scope) yang berarti variabel yang dideklarasikan dengan let hanya dapat diakses di dalam blok di mana itu dideklarasikan. Ini adalah deklarasi variabel yang lebih modern sesuai standar ES6.

let umur = 24;
console.log(umur);

• Const Digunakan untuk mendeklarasikan konstanta, yaitu variabel yang nilainya tidak dapat diubah setelah dideklarasikan (tetap). Variabel yang dideklarasikan dengan const harus diinisialisasi dengan nilai saat deklarasi.

const pekerjaan = "Web Developer";
console.log(pekerjaan);

const Pekerjaan "Web Developer";

// mengubah variabel
Pekerjaan = "Manager"

console.log(Pekerjaan);
// output -> TypeError: Assignment to constant variable.

2. Looping

Perulangan (looping) adalah proses di mana suatu blok kode dieksekusi berulang kali selama kondisi tertentu terpenuhi. Perulangan memungkinkan kita untuk menjalankan kode yang sama berulang kali tanpa harus menulis ulang kode tersebut.

• For loop: Perulangan for digunakan untuk mengeksekusi blok kode sejumlah iterasi tertentu. Pada setiap iterasi, nilai variabel kontrol bisa disebut dengan (i atau lainnya) ditingkatkan atau diturunkan hingga mencapai batas tertentu.ss

for (let i = 0; i < 5; i++) {
 console.log(i);
}

• While loop : Perulangan while mengeksekusi blok kode selama kondisi tertentu bernilai true. Pada setiap iterasi, kondisi akan dievaluasi terlebih dahulu, dan jika kondisi masih true, blok kode akan dieksekusi.

let i = 0;
while (i < 5) {
console.log(i);
}

• Do while loop : Perulangan do while mirip dengan while, namun blok kode akan dieksekusi sekali sebelum kondisi dievaluasi. Setelah itu, blok kode akan terus dieksekusi selama kondisi masih true.

let i = 0;
 do { 
  console.log(i);
  i++;
} while (i < 5);

3. Function

Fungsi (function) dalam JavaScript adalah blok kode yang dirancang untuk melakukan tugas tertentu. Fungsi digunakan untuk mengorganisir kode menjadi bagian-bagian yang dapat digunakan kembali, sehingga mengurangi duplikasi kode dan membuat kode lebih mudah dibaca dan dipelihara.

Struktur “Function”

Semua fungsi memiliki pola yang serupa. Dimulai dengan kata kunci `function` diikuti dengan nama fungsi, diikuti oleh sepasang tanda kurung kosong, dan diakhiri dengan sepasang kurung kurawal yang berisi logika atau pernyataan dari fungsi tersebut.

Source: Dicoding.com

Kadang-kadang, di dalam tanda kurung, kita membutuhkan informasi tambahan yang disebut sebagai parameter. Parameter ini adalah data yang diterima oleh fungsi untuk diproses di dalamnya. Misalnya, fungsi console.log() dapat menerima argumen berupa string atau data lainnya yang akan ditampilkan ke konsol.

Source: Dicoding.com

Setelah kita memahami struktur kode dari function, mari kita lanjutkan pembahasannya.

Macam Macam Fungsi

Reguler Function
Reguler function adalah cara tradisional untuk mendefinisikan sebuah fungsi di JavaScript. Dalam reguler function, Kamu menggunakan kata kunci function diikuti oleh nama fungsi (opsional), daftar parameter dalam tanda kurung, dan tubuh fungsi dalam blok {}. Reguler function dapat menerima argumen, menjalankan serangkaian pernyataan, dan mengembalikan nilai.

Dalam JavaScript, fungsi dapat didefinisikan baik menggunakan deklarasi fungsi (function declaration) maupun dengan ekspresi fungsi (function expression). Perbedaan utama antara keduanya adalah bagaimana JavaScript menangani hoisting (pengangkatan) dan kapan fungsi tersebut tersedia untuk digunakan.
Berikut adalah contoh dari function declaration dan function expression

// function declaration
function sayHello(greet) { console.log(`${greet}!`);
}

// function expression
const sayName = function (name) {
   console.log(`Nama saya ${name}`);
};

Arrow Function
ES6 memperkenalkan fungsi baru yang dinamakan arrow function expression atau lebih dikenal sebagai arrow function. Arrow function mirip seperti regular function secara perilaku, tetapi berbeda dalam penulisannya. Sesuai namanya, fungsi didefinisikan menggunakan tanda panah atau fat arrow ( => ). Tentunya penulisan arrow function ini akan lebih singkat.
Contoh dari Arrow Function:

// function expression
const sayHello = (greet) => { 
  console.log(${greet}!^`)
}
const sayName = (name) => {
console.log(Nama saya ${name}`)
}

So, Pada arrow function kita tidak perlu menuliskan keyword function setiap membuat fungsi. Kita tetap menuliskan parameter di dalam tanda kurung lalu diikuti dengan tanda panah (=>) sebelum kurung kurawal.

but, jika di dalam function kita hanya mempunyai 1 parameter saja,maka kita bisa menghapuskan tanda kurung seperti berikut:

const sayName = name => {
  console.log(`Nama saya ${name}`)
  }

Namun berbeda lagi, jika kita sama sekali tidak membutuhkan parameter, maka kita tetap menuliskan tanda kurung namun kosong seperti ini:

 const sayHello = () => {
    console.log("Selamat pagi semuanya!")
    };

4. Array

Berikut sintaks dasar untuk membuat array:

// Creating an empty array
const emptyArray = [];
// Creating an array with values 
const fruits = ['apple', 'banana', 'orange'];

sintaks dasar array

Ada beberapa contoh pembuatan array dengan berbagai tipe data:

• Array Angka: Array dengan tipe data Angka dalam JavaScript adalah struktur data untuk menyimpan nilai numerik dengan indeks numerik, memungkinkan operasi matematika dan manipulasi data numerik secara efisien.

const numbers = [1,2,3,4,5];

• Array String: Array dengan tipe data string dalam JavaScript adalah struktur data untuk menyimpan dan memanipulasi kumpulan teks atau karakter.

const color = ['red', 'green', 'yellow'];

• Array tipe data campuran: Array dengan tipe data campuran dalam JavaScript memungkinkan penyimpanan berbagai jenis nilai, seperti string, angka, boolean, dan referensi objek, dalam satu variabel, memberikan fleksibilitas dalam pengelolaan dan manipulasi data yang kompleks.

const mixedData = ['Apple', 45, true, null];

• Array dengan array bersarang (array multidimensi): Array dengan tipe data bersarang, atau array multidimensi dalam JavaScript, memungkinkan penyimpanan array di dalam array, memungkinkan representasi data kompleks secara hierarkis.

const matrix = [ [1,2,3], [4,5,6], [7,8,9] ];

Untuk mengakses suatu elemen, Kamu bisa menggunakan indeksnya di dalam Kamu kurung siku setelah nama variabel array:

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]); // Outputs: 'apple'
console.log(fruits[1]); // Outputs: 'banana'
console.log(fruits [2]); // Outputs: 'orange'

5. Percabangan

Percabangan merupakan salah satu konsep dasar dalam pemrograman yang memungkinkan kita untuk menjalankan blok kode tertentu berdasarkan kondisi atau kriteria yang diberikan. Di dalam percabangan terdapat beberapa kunci penting yang sering digunakan untuk mengatur alur eksekusi program.

Pertama, terdapat percabangan `if`, yang digunakan untuk mengevaluasi suatu kondisi dan menjalankan blok kode jika kondisi tersebut benar. Jika kondisi tersebut tidak terpenuhi, maka blok kode tersebut tidak akan dieksekusi.

Kedua, terdapat percabangan `else`, yang bekerja bersamaan dengan percabangan `if`. Percabangan `else` dijalankan jika kondisi pada percabangan `if` tidak terpenuhi.

Ketiga, terdapat percabangan `else if`, yang digunakan untuk mengevaluasi kondisi alternatif setelah percabangan `if`. Jika kondisi pada percabangan `if` tidak terpenuhi, maka program akan mengevaluasi kondisi pada percabangan `else if`. Jika kondisi pada percabangan `else if` benar, maka blok kode yang sesuai akan dieksekusi.

Sebelum kita masuk ke dalam penjabaran lebih lanjut, mari kita kenali terlebih dahulu konsep dasar dari percabangan if, else, dan else if dalam pemrograman.

1. Percabangan if

Percabangan if biasanya digunakan ketika kita hanya memiliki satu kondisi dan satu aksi (pilihan) atau statement.

contoh flowchart:

sintax dasar:

if (kondisi) {
  statement
}

contoh kondisi sintax true:

if (true) {
  console.log('hello winners');
}
console.log('ini statement di luar if');

kesimpulannya, perhatikan pada code diatas, karena kondisi diatas sudah bernilai true, maka statement dalam if akan langsung dieksekusi

2. Percabangan else

Percabangan else biasanya digunakan ketika kita memiliki dua pilihan atau statement (aksi).

contoh flowchart:

sintax dasar :

if (kondisi) {
  statement1
} else {
  statement2
}

Contoh kondisi sintax false :

if (false) {
  console.log('hello winners');
} else {
  console.log('halo dunia');
}

kesimpulannya, misal kita mempunyai 2 statement. jika statement 1 bernilai true maka statement 1 akan di esksekusi. jadi, “statement1” dieksekusi ketika kondisi bernilai true, sedangkan “statement2” ketika false.

3. Percabangan else if

Percabangan else if digunakan ketika kita memiliki lebih dari satu kondisi dan lebih dari dua pilihan atau statement.

contoh flowchart:

sintax dasar :

if (kondisi1) {
  statement1
} else if (kondisi2) {
  statement2
} else {
  statement3
}

Contoh konsisi sintax else if true:

if (true) {
  console.log('statement1');
} else if (true) {
  console.log('statement2');
} else if (true) {
  console.log('statement3');
} else {
  console.log('statement4');
}

Contoh konsisi sintax else if else:

if (false) {
  console.log('statement1');
} else if (false) {
  console.log('statement2');
} else if (false) {
  console.log('statement3');
} else {
  console.log('statement4');
}

jadi kesimpulannya, ketika ditemukan kondisi bernilai true, maka JavaScript akan mengeksekusi statement dalam kondisi tersebut dan keluar dari percabangan. Terus, bagaimana dengan else? Statement dalam blok else hanya dieksekusi ketika semua kondisi bernilai false.

6. Template Literals

Template literals adalah fitur dalam JavaScript yang memungkinkan penggunaan string literals yang lebih fleksibel dengan kemampuan untuk menyisipkan ekspresi JavaScript di dalamnya. Ini memungkinkan untuk membuat string yang lebih dinamis dan mudah dibaca.

Mengapa menggunakan Template Literals?

• Template literals sangat powerfull dibandingkan string biasa yang menggunakan kutip satu atau kutip dua. Penulisan template literals menggunakan karakter backtick ``.
• Interpolasi atau memasukkan nilai ke dalam string menjadi lebih mudah menggunakan sintaks ${}.
• Tidak perlu menggunakan operator + untuk menggabungkan string
• Lebih mudah menulis multiline.
• Tidak perlu menulis baris baru dengan karakter newline (\n) atau carriage return (\r).
• Bisa menggunakan tanda kutip bersarang (dengan kutip satu atau kutip dua) di dalam template literals.

Example

Menulis string menggunakan string biasa (kutip dua).

/*
menulis string menggunakan kutip dua.
menggabungkan string menggunakan operator +
*/
const name = "Aufa Billah";
const greeting = "Hai" + name + ", Selamat Datang."; 
console.log(greeting);

Menulis string menggunakan template literals

/* menulis string menggunakan template literals
memasukkan variabel dengan sintaks ${}
*/
const name = "Aufa Billah";
const greeting = `Hai ${name}, Selamat Datang`;
console.log(greeting);

Referensi Tambahan

Kalau temen’ mau explore lebih lanjut bisa di cek’ di link dibawah yaaa…

● JavaScript basic :
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics

● Petani Code:
https://www.petanikode.com/tutorial/javascript/

● W3School:
https://www.w3schools.com/js/

Penutup

okee ade kaka semuanyaa….. eemmm untuk pembahasan Dasar JAvaScript kali ini, kita su selesai sudah ee🫲🏻🫱🏻

Jadi, Terima kasih telah mengikuti materi pengenalan JavaScript modern (ES6) bersama-sama, ade kaka semuanyaa! 🎉✨

Saat ini, kita telah mengeksplorasi berbagai konsep penting dan komponen dasar dalam JavaScript, mulai dari sejarah dan evolusinya hingga fitur-fitur baru dalam ES6.

Selain itu, kita juga telah memahami cara menulis kode JavaScript baik secara internal maupun eksternal, serta penggunaan modul ES6 untuk membuat kode lebih terstruktur dan mudah dikelola.

Tidak ketinggalan, kita juga telah membahas komponen dasar JavaScript seperti variabel, perulangan, fungsi, array, dan template literals. Semua ini adalah pondasi penting yang akan membantu kita membangun aplikasi JavaScript yang lebih kompleks dan efisien di masa depan.

Dengan demikian, mari terus eksplorasi dunia JavaScript dengan semangat dan rasa ingin tahu yang tinggi! Jangan ragu untuk terus berlatih dan mengembangkan keterampilan kita dalam memprogram dengan JavaScript.

Semoga pembahasan kali ini bermanfaat bagi tong semua ee, dan sampai jumpa di kesempatan berikutnya! Terima kasih dan salam pejuang code! 💻🚀