Please enable JavaScript.
Coggle requires JavaScript to display documents.
2. JAVASCRIPT - Coggle Diagram
2. JAVASCRIPT
1. INTRODUCTION
Karena hampir semua browser menggunakan javascript, maka dibuatlah standarisasi bernama ECMAScript
pada body html, kita sisipkan kode file javascript dengan cara
<body>
<script src = "lokasi file javascript"> </script>
</body>
komentar pada javascript digunakan sebagai informasi tambahan pada kode program. Di javascript kita bisa menambahkan
// untuk satu barsi
/
untuk lebih dari satu baris
misalnya dua, atau tiga
/
Dibuat pada tahun 1995 oleh Brandan Eich
In HTML, JavaScript code is inserted between <script> and </script> tags.
Variabel
const
tidak dapat diinisiasi ulang (diubah ulang)
let
dapat diinisiasi ulang (diubah ulang)
Runtime Environment
Browser
browser memiliki akses terhadap global object window
ada 3 cara
embedded javascript
external source
Read-Eval-Print-Loop (REPL)
Node Js
tidak memiliki akses lagi terhadap global object milik browser, seperti alert.
Sebagai gantinya, Node.js memberikan akses kepada developer untuk mengakses file system, mengatur database, dan lainnya
Bun
Type Data
Number
di JS tipe data number hanya ada satu jenis, baik bilangan bulat ataupun pecahan
Selain angka normal, tipe data number juga memiliki nilai spesial, yaitu Infinity dan NaN. Nilai Infinity dihasilkan ketika kita melakukan operasi aritmetika yang tidak terdefinisi, seperti membagi sebuah nilai dengan nol.Adapun nilai NaN (Not-a-Number) dihasilkan ketika nilai non-numerik diubah ke tipe data number. Contohnya ketika kita mencoba mengonversi string yang bukan angka menjadi number.
String
ada tiga cara untuk membuat type data string, yaitu petik dua, petik satu dan backticks (tanda backtick)
Backticks sering disebut juga sebagai template literals karena memungkinkan kita menyisipkan JavaScript expressions untuk membentuk nilai string menggunakan notasi ${}.
const currentYear = new Date().getFullYear();
const text =
Sekarang adalah tahun ${currentYear}.
;
console.log(text);
Boolean
true/false
Konversi tipe data - Eksplisit
String
Untuk mengubah suatu tipe data ke bentuk string umumnya dapat dilakukan dengan dua cara, yaitu menggunakan fungsi String() dan method .toString()
Number
Secara umum, untuk mengubah bentuk numerik, seperti “10”, “3.14” dapat dilakukan dengan menggunakan fungsi Number()
bisa juga menggunakan fungsi khusus
parseFloat()
parseInt()
Boolean
Untuk mengubah suatu nilai ke tipe data boolean, kita bisa gunakan fungsi Boolean()
Konversi tipe data - Implisit
Dalam contoh ini, tipe data number (age) secara otomatis dikonversi menjadi string karena operator + digunakan untuk penggabungan string.
const age = 20;
const message = 'Umurku: ' + age;
console.log(message); // output: Umurku: 20
Dalam contoh ini, strNumber (yang merupakan string) dikonversi menjadi number karena operator * digunakan untuk operasi aritmetika.
const strNumber = '123';
const result = strNumber * 2;
console.log(result); // output: 246
Contoh lain dalam penggunaan operasi aritmetika yang mengubah nilai boolean menjadi number
const bool = true;
const result = 1 + bool;
console.log(result); // output: 2
Output
JavaScript can "display" data in different ways:
Writing into an HTML element, using innerHTML.
Writing into the HTML output using document.write().
Writing into an alert box, using window.alert().
Writing into the browser console, using console.log().
Example
document.getElementById("demo").innerHTML = 5 + 6;
document.write(5 + 6);
<button type="button" onclick="document.write(5 + 6)">Try it</button>
window.alert(5 + 6);
alert(5 + 6);
console.log(5 + 6);
<button onclick="window.print()">Print this page</button>
Operator
Secara umum, operator dalam JavaScript terbagi menjadi tiga kelompok: unary, binary, dan ternary. Pengelompokan ini berdasarkan jumlah operan yang diperlukan untuk menggunakan suatu operator
unary
operator tipe data, seperti typeof adalah operator unary karena hanya memerlukan satu operan
contoh : typeof age;
binary
Operator aritmetika, seperti + termasuk dalam kelompok operator binary karena membutuhkan dua operan.
5 + 4;
ternary
operator ternary membutuhkan tiga operan.
(age < 18) ? 'You are too young!' : 'Welcome onboard!';
4. FUNCTION
Deklarasi
Sebuah function juga diikat dalam sebuah nama function. Dengan kata lain, nama function tersebut adalah identifier.
Anatomi
function greetWorld()
{
console.log('Hello, World!');
}
Keyword “function” harus selalu disertakan ketika mendeklarasikan function.
Berikutnya, keyword tersebut diikuti dengan identifier. Ini mirip seperti variabel, kita dapat memberi nama sesuai dengan kebutuhan.
Setelah itu, kita tuliskan parentheses untuk mendefinisikan parameter-parameter yang diperlukan dan function body
Function body berisi sekumpulan statement atau perintah yang akan dieksekusi oleh interpreter. Ia dibungkus dengan tanda kurung kurawal buka-tutup (curly braces).
Memanggil function
1
const temperatureInCelsius = 90;
convertCelsiusToFahrenheit(temperatureInCelsius);
Nilai yang diberikan dalam parentheses saat pemanggilan function, ia disebut sebagai argument.
Argument ini bisa berasal dari nilai yang langsung dimasukkan atau nilai yang tersimpan dari variabel.
2
convertCelsiusToFahrenheit(90);
Hoisting
Fitur ini memungkinkan kita menulis kode pemanggilan sebelum kode pendeklarasian function
greetWorld();
function greetWorld() {
console.log('Hello, world!');
}
Return Value
Saat kita menjalankan function JavaScript, mesin akan menjalankan seluruh kode dalam function body. Ada hasil yang akan dievaluasi. Secara bawaan (default), function akan mengembalikan undefined.
Hal ini karena memang method console.log tidak mengembalikan nilai apa pun dan JavaScript tidak menganggap ini sebagai error.
Untuk memberikan kemampuan function mengembalikan nilai (return statement), kita gunakan kata kunci return dan diikuti nilai kembaliannya.
function sumNumbers(a, b) {
const result = a + b;
return result;
}
const result = sumNumbers(2, 4);
console.log('2 + 4:', result);
Function Expression
function expression dapat kita artikan sebagai kode yang mengembalikan nilai function.
kita menyimpan function pada sebuah variabel. Kini variabel menjadi identifier bagi function.
const greetWorld = function (message) {
console.log('Hello, World!');
}
cara menjalankannya
Cukup sebut identifier dan diikuti dengan parentheses.
function sebagai first-class citizen
Dapat disimpan sebagai nilai dalam variabel.
Dapat dikembalikan dari suatu function.
Dapat dikirimkan sebagai parameter bagi function lain.
Dapat disimpan dalam elemen array dan object literal.
Dapat memiliki method dan properties sendiri.
Arrow Function
Arrow function ternyata menghilangkan kewajiban kita menaruh kata kunci function di sana. Sebagai gantinya, kita wajib menambahkan tanda panah (=>) setelah parameter. Ini disebut sebagai notasi fat arrow. Selain itu, arrow function juga memiliki function body sebagaimana regular function.
pembuatan arrow function hanya tersedia dalam bentuk expression. Oleh karena itu, kita selalu menyimpan nilainya dalam variabel.
Selain itu, arrow function dengan gaya seperti ini hanya mampu menampung satu return value. Silakan bungkus dengan tanda kurung kurawal buka-tutup jika memerlukan banyak kode.
Object
Membuat Object
membuat object dengan object literlas
Membuat object dengan object literals sangat mudah yaitu cukup dengan menulis kurung kurawal {}
Example :
const products = { name: 'Sepatu', price: 230000 };
Mengakses Properti di Object
menggunakan dot notation (.)
const user = {
name: 'Dicoding',
'last name': 'Indonesia',
age: 9,
};
console.log(user.name); // Output: Dicoding
menggunakan square bracket
const user = {
name: 'Dicoding',
'last name': 'Indonesia',
age: 9,
};
console.log(user['last name']); // Output: Indonesia
menggunakan object destructing
Destructuring dalam JavaScript merupakan sintaksis yang dapat mengeluarkan nilai dari properti object ke dalam satuan yang lebih kecil (variabel).
const user = {
name: 'Dicoding',
'last name': 'Indonesia',
age: 9,
};
const { name, lastName } = user;
console.log(name, lastName); // Output: Dicoding Indonesia
Mengubah nilai di properti object
Untuk mengubah nilai properti di object sangat mudah asalkan kita mengetahui nama object dan nama properti yang ingin diubah. Memodifikasi object dapat dilakukan dengan assignment operator (=).
const account = {
balance: 1000,
debt: 10,
};
account.balance = 2000;
console.log(account.balance); // Output: 2000
Menghapus properti di object
Untuk menghapus properti pada object dapat menggunakan operator delete dengan menuliskan nama object lalu tanda titik dan diikuti nama propertinya.
const user = {
'name': 'Dicoding',
'last name': 'Indonesia',
age: 9,
};
delete user.age;
console.log(user); // Output: { name: 'Dicoding', 'last name': 'Indonesia' }
Selain menggunakan dot notation (.), kita juga bisa menggunakan operator delete dengan tanda kurung siku seperti berikut ini.
const user = {
'name': 'Dicoding',
'last name': 'Indonesia',
age: 9,
};
delete user['age'];
console.log(user); // Output: { name: 'Dicoding', lastName: 'Indonesia' }
Array
membuat array ada 3 cara
Menggunakan object constructor
const users = new Array();
const numbers = new Array(5);
Menggunakan syntax Array.from
const foo = Array.from('foo');
console.log(foo); // Output: ['f', 'o', 'o']
Array.from juga dapt digunakan untuk menyalin array lainnya seperti berikut ini.
const users = new Array('John', 'Jane', 'Jack', 'Jill');
const customer = Array.from(users);
console.log(customer); // Output: ["John", "Jane", "Jack", "Jill"]
Menggunakan array literal
Membuat array dengan literals lebih disarankan karena lebih sederhana dan mudah untuk dibaca.
const array = [];
const fruits = ['apple', 'banana', 'cherry'];
Mengakses Array
Data di dalam array terurut sehingga untuk mengaksesnya dapat dengan mudah dengan menggunakan nilai indeks-nya. Indeks merupakan angka yang digunakan untuk merujuk ke nilai di dalam array, sehingga kita bisa menambahkan, mengubah, atau menghapus nilainya. Indeks array dimulai dari angka 0. Untuk mengakses nilai di dalam array, gunakan tanda kurung siku [] yang di dalamnya berisi angka yang merupakan posisi dari nilai yang ingin diakses seperti berikut.
const myArray = [42, 55, 30];
console.log(myArray[1]); // Output: 55
Memanipulasi nilai array
Menggunakan indexing
const myArray = [1, 2, 3, 4, 5];
myArray[1] = 10;
console.log(myArray); // Output: [1, 10, 3, 4, 5]
Menggunakan push
Push adalah cara yang kita gunakan untuk menambahkan nilai ke dalam array pada element terakhir.
Untuk menambahkan nilai ke dalam array menggunakan method push, dapat dilakukan dengan cara menuliskan nama array-nya diikuti tanda titik dan method push beserta nilai yang ingin ditambahkan yaitu 6 seperti berikut.
const myArray = [1, 2, 3, 4, 5];
myArray.push(6);
console.log(myArray); // Output: [1, 2, 3, 4, 5, 6]
Menghapus Element dan Data Array
data pada arry dapat dihapus menggunakan keyword delete. Untuk mneghapus data yang diinginkan kita perlu mengetahui nilai indeksnya terlebih dahulu.
const myArray = ['Android', 'Data Science', 'Web'];
delete myArray[1];
console.log(myArray); // Output: ['Android', <1 empty item>, 'Web']
Data pada array sudah berhasil dihapus, tetapi element-nya masih ada. Lalu, bagaimana cara untuk menghapus element dan datanya? Untuk melakukan hal itu dapat dilakukan dengan menggunakan method splice() seperti berikut ini.
const myArray = ['Android', 'Data Science', 'Web'];
myArray.splice(1, 1);
console.log(myArray); // Output: ['Android', 'Web']
Method splice membutuhkan dua parameter yaitu indeks dari element yang ingin dihapus dan jumlah element yang ingin dihapus. Pada contoh di atas, kita menghapus element indeks ke-1 dan jumlah element yang dihapus adalah 1. Lalu, bagaimana caranya kita ingin menghapus dua element dari array?
const myArray = ['Android', 'Data Science', 'Web'];
myArray.splice(1, 2);
console.log(myArray); // Output: ['Android'']
metode shift dan pop
Terakhir, ada cara lainnya yaitu menggunakan method shift dan pop. Kekurangan dari kedua method ini adalah tidak sefleksibel delete dan splice karena shift hanya menghapus element pertama dan pop menghapus element terakhir.
Shift untuk menghapus elment pertama
const myArray = ['Android', 'Data Science', 'Web'];
myArray.shift();
console.log(myArray); // Output: ['Data Science', 'Web']
Pop menghapus element terakhir
const myArray = ['Android', 'Data Science', 'Web'];
myArray.pop();
console.log(myArray); // Output: ["Android", "Data Science"]
Array Destructuring
Destructuring digunakan untuk melihat isi dari array. Destructuring cukup mudah dilakukan yaitu dengan menggunakan kurung siku yang di dalamnya adalah nama variabel yang kita assign. Kemudian diikuti dengan assignment operator sama dengan (=) dan array yang ingin diambil nilainya.
const introduction = ['Hello', 'Arsy'];
const [greeting, name] = introduction;
console.log(greeting); // Output: Hello
Dapat dilihat bahwa variabel greeting didapatkan dari array introduction tanpa harus mengaksesnya menggunakan index. Destructuring array mempermudah kita untuk memecah struktur data menjadi bagian-bagian yang lebih kecil seperti contoh kode di atas. Destructuring array hanya dapat dilakukan jika array tersebut tidak bernilai null atau undefined. Ketika melakukan destructuring pada array yang bernilai null atau undefined akan menyebabkan error.
Array Method
Reverse
Reverse adalah method yang digunakan untuk membalikkan nilai array. Metode reverse() mengembalikan array dengan element yang dibalik.
const myArray = ['Android', 'Data Science', 'Web'];
myArray.reverse();
console.log(myArray); // Output: [ 'Web', 'Data Science', 'Android' ]
Sort
Sort adalah method yang digunakan untuk mengurutkan nilai array. Loh, katanya array sudah menyimpan data secara terurut kok masih perlu mengurutkan array menggunakan sort? Memang array sudah mengurutkan data sesuai dengan indeks-nya tetapi mengurutkan berdasarkan indeks saja belum cukup.
Terkadang, kita butuh untuk mengurutkan array berdasarkan kriteria tertentu sesuai kebutuhan aplikasi. Secara default, array akan diurutkan secara ascending
const myArray = ['Web', 'Android', 'Data Science'];
myArray.sort();
console.log(myArray); // Output: [ 'Android', 'Data Science', 'Web' ]
5. OBJECT, ARRAY, MAP, SET
Map adalah tipe data yang mirip dengan object yaitu menyimpan data dengan key-value. Kalau sama seperti object, lalu apa fungsinya map? Map berfungsi untuk menutupi kekurangan dari object. Map dapat menggunakan key dengan tipe data apa pun, tidak seperti object yang hanya menerima string. Jadi perbedaan mendasarnya terletak pada key yang digunakan.
membuat map
Map dapat dibuat dengan mudah yaitu menggunakan object map constructor seperti berikut ini.
const map = new Map();
Kita telah berhasil membuat map yang bernilai kosong. Selain itu, kita juga dapat menambahkan data di dalam constructor ketika menginisialisasi map seperti berikut.
const productMap = new Map([
['shoes', 500],
['cap', 350],
['jeans', 250]
]);
console.log(productMap);
menyimpan nilai di map
Untuk menyimpan nilai ke dalam map, gunakanlah method set. Set menerima dua nilai yang pertama adalah keynya dan yang kedua adalah valuenya. Set memiliki struktur seperti berikut: set(key, value).
const map = new Map();
map.set('name', 'aras');
console.log(map); // Map(1) { 'name' => 'aras' }
mengakses nilai di map
kita dapat mengakses nilainya berdasarkan key tertentu dengan method get.
const map = new Map();
map.set('name', 'aras');
console.log(map.get('name')); // Output: aras
menghapus nilai di map
Menghapus nilai di map dapat menggunakan method delete
const map = new Map();
map.set('name', 'aras');
map.set('last name', 'opraza');
map.delete('last name');
console.log(map); // Map(1) { 'name' => 'aras' }
Object
adalah kumpulan pasangan key-value dan merupakan tipe data yang bukan primitif. Key pada object hanya bisa berupa string
Membuat object
Object Constructur
Object Literals
sederhana, hanya menggunakan kurung kurawal {}
Mengakses Object
Menggunakann dot
Menggunakan square bracket
Menggunakan object destructuring
Mengubah nilai di properti object
menggunakan assignment operator (=)
Menghapus properti di object
menggunakan operator delete
Array
Special data structure that can store a collection of ordered data
How to create Array
Set
set tidak memiliki key dan indeks ketika menyimpan data. Selain itu, data yang disimpan di dalam set akan bernilai unik artinya tidak akan ada data yang duplikat.
const mySet = new Set([1, 2, 3]);
console.log(mySet);
menyimpan nilai di set
Untuk menambahkan nilai set setelah diinisialisasi dapat menggunakan method add.
const set = new Set();
set.add(1);
set.add(2);
mengakses nlai di set
Set memiliki perbedaan untuk cara mengakses nilainya yaitu menggunakan perulangan (looping). Cara pertama adalah menggunakan keyword for seperti berikut ini.
const set = new Set();
set.add(1);
set.add(2);
for (const number of set) {
console.log(number); // Output: 1, 2
}
Cara lainnya adalah menggunakan keyword foreach
const set = new Set();
set.add(1);
set.add(2);
set.forEach((value) => console.log(value)); // Output: 1, 2
Menghapus nilai di set
Terakhir, untuk menghapus nilai di set, gunakanlah method delete.
const set = new Set();
set.add(1);
set.add(2);
set.delete(1);
console.log(set); // Set(1) { 2 }
Flow Control
Conditional
Kode akan dieksekusi tergantung dari kondisi yang ditetapkan dan ini disebut dengan conditional flow. Conditional flow adalah cara untuk menentukan apakah kode dieksekusi atau dilewatkan.
if statement
Tetapi di javascript ada yang lebih ringkas yaitu ternary operator atau conditional operator. direpresentasikan menggunakan tanda tanya (?).
tahapnya
Kondisi yang ingin diperiksa ditulis sebelum tanda tanya (?)
Ekspresi yang dieksekusi jika kondisinya benar.
Ekspresi yang dieksekusi jika kondisi salah.
bentuk dasar dari conditional operator adalah sebagai berikut
let result = condition ? value1 : value2;
switch case
Looping
for
for loop
for (variabel awal; test kondisi; increment) {
// do something
}
Variabel awal adalah nilai variabel sebelum looping dilakukan
est kondisi adalah evaluasi dari looping, jika bernilai false, looping akan berhenti.
Increment adalah nilai variabel yang bertambah setiap looping dilakukan
Error Handling
2. EXPRESSION & STATEMENT
statement adalah instruksi yang akan dieksekusi oleh komputer.
expression adalah nilai yang dihasilkan
3. MERUBAH NILAI ANTAR TIPE DATA
Konversi Eksplisit
String
String()
.toString()
Number
Number()
parseInt()
Dengan kemampuan ini, parseInt() dapat digunakan untuk mengubah nilai string, seperti "20CM", "64px", atau angka dengan satuan lainnya
parseFloat()
Boolean()
Konversi Implisit
Konversi implisit terjadi ketika JavaScript secara otomatis mengubah tipe data tanpa instruksi eksplisit dari programmer. Ini biasanya terjadi dalam konteks tertentu, seperti operasi aritmetika, perbandingan, dan konteks logika.
const age = 20;
const message = 'Umurku: ' + age;
console.log(message); // output: Umurku: 20
Error Handling
Throwing Error
memunculkan error
Kenapa kita perlu membangkitkan exception error secara sengaja? Jawabannya adalah karena kita ingin program yang dibangun tidak mengalami crash ketika terjadi sesuatu di luar dugaan.
Misalnya, kita memiliki program yang menerima inputan pembayaran dari pembeli. Normalnya adalah jumlah yang dibayarkan harus lebih besar dari harga barang. Lalu, ada sebuah kasus dimana pembeli membayar lebih kecil dari harga barang. Hal ini akan menyebabkan error di program milik kita. Oleh karena itu, kita perlu throw error ketika pembayaran kurang dari harga barang seperti contoh berikut.
const price = 100;
const paid = 80;
if (paid < price) {
throw new Error('Pembayaran kurang');
}
Catching Error
menangkap error
Try-Catch
Try-catch merupakan cara yang dimiliki JavaScript untuk menangani error. Try-catch memiliki dua blok utama yaitu try dan catch. Try merupakan blok kode yang akan menangani error, sedangkan catch merupakan blok kode yang dibangkitkan ketika terjadi error di dalam blok try
finally
Finally adalah blok kode yang berada di akhir try-catch. Bilamana catch dieksekusi hanya ketika ada error di dalam blok try, blok yang ada di finally akan selalu dieksekusi.