Java Script Dasar

Penjelasan tentang Metode Array di JavaScript

Metode push()

Metode ini digunakan untuk menambahkan satu atau lebih elemen ke akhir array. Contoh:

let angka = [1, 2, 3];  
angka.push(4); // angka menjadi [1, 2, 3, 4]

Metode pop()

Metode ini digunakan untuk menghapus elemen terakhir dari array dan mengembalikan elemen tersebut. Contohnya:

let angka = [1, 2, 3];  
let last = angka.pop(); // last adalah 3, angka menjadi [1, 2]

Metode shift()

Metode ini digunakan untuk menghapus elemen pertama dari array dan mengembalikan elemen tersebut. Misalnya:

let angka = [1, 2, 3];  
let first = angka.shift(); // first adalah 1, angka menjadi [2, 3]

Metode unshift()

Metode ini digunakan untuk menambahkan satu atau lebih elemen ke awal array. Contohnya:

let angka = [2, 3];  
angka.unshift(1); // angka menjadi [1, 2, 3]

Penjelasan tentang Object di JavaScript

Membuat Object

Menggunakan kurung kurawal:

let mobil = {  
merek: 'Toyota',
model: 'Avanza',
tahun: 2020
};

Mengakses Nilai dalam Object

  • Menggunakan notasi titik:

    console.log(mobil.merek); // Menghasilkan 'Toyota'  
  • Menggunakan notasi kurung:

    console.log(mobil['model']); // Menghasilkan 'Avanza'  

Menambah dan Mengubah Properti

  • Menambah properti baru:

    mobil.warna = 'Hitam';  
  • Mengubah nilai properti:

    mobil.tahun = 2021;  

Menghapus Properti

Menggunakan operator delete:

delete mobil.model;  

Metode dalam Object

Anda dapat mendefinisikan metode dalam objek yang berfungsi sebagai fungsi:

let orang = {  
nama: 'Budi',
usia: 29,
perkenalan: function() {
console.log(`Nama saya ${this.nama}, dan saya berusia ${this.usia}`);
}
};
orang.perkenalan(); // 'Nama saya Budi, dan saya berusia 29'

Object adalah dasar dari banyak struktur data lainnya di JavaScript dan berfungsi sebagai pola untuk objek yang lebih kompleks.

Penjelasan tentang Looping dengan For, While, dan Nested Loop di JavaScript

For Loop

Metode ini digunakan untuk melakukan iterasi pada suatu array atau struktur data lainnya. Sintaks dasar adalah:

for (let i = 0; i < n; i++) {  
// kode yang akan dijalankan
}
let angka = [1, 2, 3, 4, 5];  
for (let i = 0; i < angka.length; i++) {
console.log(angka[i]); // Menghasilkan 1, 2, 3, 4, 5
}

For...of Loop

Metode ini digunakan untuk iterasi melalui nilai dari objek iterable (seperti array, string, dll). Sintaks dasar adalah:

for (let element of iterable) {  
// kode yang akan dijalankan
}
let warna = ['merah', 'hijau', 'biru'];  
for (let w of warna) {
console.log(w); // Menghasilkan merah, hijau, biru
}

For...in Loop

Metode ini digunakan untuk iterasi melalui kunci (property) dari objek. Sintaks dasar adalah:

for (let key in object) {  
// kode yang akan dijalankan
}
let mobil = { merek: 'Toyota', model: 'Avanza', tahun: 2020 };  
for (let k in mobil) {
console.log(k + ': ' + mobil[k]);
}

While Loop

Metode ini digunakan untuk menjalankan blok kode selama kondisi tertentu benar. Sintaks dasar adalah:

while (kondisi) {  
// kode yang akan dijalankan
}
let i = 0;  
while (i < 5) {
console.log(i); // Menghasilkan 0, 1, 2, 3, 4
i++;
}

Do...While Loop

Mirip dengan while loop, tetapi blok kode dijalankan setidaknya sekali sebelum kondisi diperiksa. Sintaks dasar adalah:

do {  
// kode yang akan dijalankan
} while (kondisi);
let i = 0;  
do {
console.log(i); // Menghasilkan 0, 1, 2, 3, 4
i++;
} while (i < 5);

Nested Loop

Merupakan loop di dalam loop. Berguna ketika Anda perlu melakukan iterasi pada beberapa dimensi (misalnya, array 2D). Sintaks dasar adalah:

for (let i = 0; i < n; i++) {  
for (let j = 0; j < m; j++) {
// kode yang akan dijalankan
}
}
let matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];  
for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[i].length; j++) {
console.log(matrix[i][j]); // Menghasilkan 1 hingga 9
}
}

Penjelasan tentang Function di JavaScript

Function Dasar

Function adalah blok kode yang dirancang untuk melakukan tugas tertentu. Anda dapat mendefinisikan function menggunakan kata kunci function. Sintaksnya adalah:

function namaFunction(parameter1, parameter2) {  
// kode yang akan dijalankan
}
function tambah(a, b) {  
return a + b;
}
console.log(tambah(2, 3)); // Menghasilkan 5

Function Anonim

Function yang tidak memiliki nama dapat didefinisikan langsung dan dapat digunakan sebagai nilai. Sintaksnya adalah:

let functionAnonim = function() {  
// kode yang akan dijalankan
};
let hitungLuas = function(panjang, lebar) {  
return panjang * lebar;
};
console.log(hitungLuas(5, 3)); // Menghasilkan 15

Arrow Function

Function panah adalah cara ringkas untuk menulis function. Sintaksnya adalah:

const namaFunction = (parameter1, parameter2) => {  
// kode yang akan dijalankan
};
const kuadrat = (x) => x * x;  
console.log(kuadrat(4)); // Menghasilkan 16

Function dengan Parameter Default

Function dapat memiliki nilai default untuk parameter. Jika parameter tidak diberikan saat function dipanggil, nilai default akan digunakan. Sintaksnya adalah:

function functionDenganDefault(param1 = nilaiDefault) {  
// kode yang akan dijalankan
}
function sapa(nama = 'Dunia') {  
return `Halo, ${nama}!`;
}
console.log(sapa()); // Menghasilkan 'Halo, Dunia!'
console.log(sapa('Alice')); // Menghasilkan 'Halo, Alice!'

Function Rekursif

Function yang memanggil dirinya sendiri disebut function rekursif. Digunakan sering untuk masalah yang dapat dipecahkan dengan cara yang lebih kecil. Contoh:

function faktorial(n) {  
if (n === 0) {
return 1;
}
return n * faktorial(n - 1);
}
console.log(faktorial(5)); // Menghasilkan 120

Function Sebagai Parameter (Callback Function)

Function dapat diteruskan sebagai argumen ke function lain. Contoh:

function prosesAngka(angka, function) {  
return function(angka);
}
console.log(prosesAngka(5, kuadrat)); // Menghasilkan 25 (menggunakan function kuadrat)

Function Mengembalikan Function

Function juga dapat mengembalikan function lain. Contoh:

function buatPenghitung() {
let count = 0;
return function() {
count++;
return count;
};
}

let penghitung = buatPenghitung();
console.log(penghitung()); // Menghasilkan 1
console.log(penghitung()); // Menghasilkan 2
console.log(penghitung()); // Menghasilkan 3

// Dalam contoh di atas, fungsi `buatPenghitung` mengembalikan fungsi yang akan meningkatkan dan mengembalikan nilai `count` setiap kali dipanggil.

Penjelasan tentang this di JavaScript

this dalam JavaScript merujuk pada objek yang saat ini sedang beroperasi. Nilai dari this tergantung pada konteks di mana fungsi dipanggil. Berikut adalah beberapa contoh untuk memperjelas penggunaan this:

  1. Dalam Objek:

    let orang = {
    nama: 'Budi',
    perkenalan: function() {
    console.log(`Nama saya ${this.nama}`);
    }
    };
    orang.perkenalan(); // Menghasilkan 'Nama saya Budi'
  2. Dalam Function Global:

    function globalFunction() {
    console.log(this);
    }
    globalFunction(); // Akan mengacu pada objek global (window di browser)
  3. Dalam Event Handler:

    let button = document.createElement('button');
    button.textContent = 'Click me';
    button.onclick = function() {
    console.log(this); // Mengacu pada button itu sendiri
    };
    document.body.appendChild(button);
  4. Dalam Arrow Function:

    let orang = {
    nama: 'Budi',
    perkenalan: function() {
    let arrowFunction = () => {
    console.log(`Nama saya ${this.nama}`);
    };
    arrowFunction();
    }
    };
    orang.perkenalan(); // Menghasilkan 'Nama saya Budi'
  5. Menggunakan bind, call, atau apply:

    function perkenalan() {
    console.log(`Nama saya ${this.nama}`);
    }
    let orang = { nama: 'Budi' };
    perkenalan.call(orang); // Menghasilkan 'Nama saya Budi'

this sangat penting untuk memahami konteks eksekusi dalam JavaScript dan berperan besar dalam pengelolaan objek dan fungsi.

Penjelasan tentang try dan catch di JavaScript

  • try digunakan untuk mengeksekusi bagian kode yang berpotensi menghasilkan kesalahan (error). Jika terjadi kesalahan, alur kontrol akan dialihkan ke blok catch yang sesuai.

  • catch menangkap dan menangani kesalahan yang muncul dalam blok try, sehingga program tidak berhenti secara mendadak. Sintaksnya adalah:

try {
// Kode yang mungkin mengandung kesalahan
} catch (error) {
// Penanganan kesalahan
}
try {
let hasil = 10 / 0; // Walaupun tidak menghasilkan kesalahan, akan menghasilkan Infinity
} catch (error) {
console.log("Terjadi kesalahan: " + error);
}

Callback Function dengan Metode Array

Metode map()

Dalam JavaScript, kita dapat menggunakan callback function dengan metode array seperti map, filter, atau forEach. Berikut adalah contoh penggunaan callback function dengan map:

array.map(callback(element, index, array), thisArg);
  • callback: Fungsi yang akan dipanggil untuk setiap elemen.

    • element: Elemen array saat ini.

    • index (opsional): Indeks elemen saat ini.

    • array (opsional): Array yang sedang diproses.

  • thisArg (opsional): Nilai untuk digunakan sebagai this di dalam callback.

map mengembalikan array baru yang berisi hasil dari fungsi callback untuk setiap elemen array.

let angka = [1, 2, 3, 4, 5];  
let kuadrat = angka.map(function(num) {
return num * num;
});
console.log(kuadrat); // Menghasilkan [1, 4, 9, 16, 25]
const products = [
{ id: 1, name: "Laptop", price: 1500 },
{ id: 2, name: "Mouse", price: 50 },
{ id: 3, name: "Keyboard", price: 100 },
];

const productNames = products.map(product => product.name);

console.log(productNames); // Output: ["Laptop", "Mouse", "Keyboard"]
const numbers = [1, 2, 3, 4, 5];

// Menggunakan map
const squared = numbers.map(num => num * num);
console.log(squared); // Output: [1, 4, 9, 16, 25]

// Menggunakan forEach
numbers.forEach(num => console.log(num * num));
// Output di konsol: 1, 4, 9, 16, 25

Metode filter()

Callback function sering digunakan bersama metode array seperti filter di JavaScript. filter digunakan untuk membuat array baru yang berisi elemen-elemen dari array asli yang memenuhi kondisi tertentu (true berdasarkan fungsi callback).

array.filter(callback(element, index, array), thisArg);
  • callback: Fungsi yang akan dipanggil untuk setiap elemen array.

    • element: Elemen array saat ini.

    • index (opsional): Indeks elemen saat ini.

    • array (opsional): Array yang sedang diproses.

  • thisArg (opsional): Nilai untuk digunakan sebagai this di dalam callback.

filter akan mengembalikan array baru yang hanya berisi elemen-elemen yang lolos kondisi callback.

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

const isEven = (num) => num % 2 === 0;

const evenNumbers = numbers.filter(isEven);

console.log(evenNumbers); // Output: [2, 4, 6]
const users = [
{ name: "Alice", active: true },
{ name: "Bob", active: false },
{ name: "Charlie", active: true },
];

const activeUsers = users.filter(user => user.active);

console.log(activeUsers);
// Output: [ { name: 'Alice', active: true }, { name: 'Charlie', active: true } ]
const numbers = [5, 10, 15, 20, 25];

const greaterThan10 = numbers.filter(num => num > 10);

console.log(greaterThan10); // Output: [15, 20, 25]
const products = [
{ name: "Laptop", price: 1500 },
{ name: "Mouse", price: 50 },
{ name: "Keyboard", price: 75 },
{ name: "Monitor", price: 200 },
];

const affordableProducts = products.filter(product => product.price < 100);

console.log(affordableProducts);
// Output: [ { name: 'Mouse', price: 50 }, { name: 'Keyboard', price: 75 } ]
const users = [
{ name: "Alice", active: true },
{ name: "Bob", active: false },
{ name: "Charlie", active: true },
];

const activeUserNames = users
.filter(user => user.active) // Filter pengguna aktif
.map(user => user.name); // Ambil nama pengguna

console.log(activeUserNames); // Output: ["Alice", "Charlie"]

Metode forEach()

Dalam JavaScript, kita dapat menggunakan callback function dengan metode array seperti forEach untuk melakukan aksi pada setiap elemen. Berikut adalah contoh penggunaan callback function dengan forEach:

let angka = [1, 2, 3, 4, 5];  
angka.forEach(function(num) {
console.log(num * num);
});
// Menghasilkan: 1, 4, 9, 16, 25

Pada contoh ini, kita menggunakan metode forEach untuk mencetak kuadrat dari setiap elemen dalam array angka. Fungsi yang diteruskan ke forEach adalah callback function yang mengalikan setiap num dengan dirinya sendiri, dan hasilnya akan dicetak satu per satu.

setTimeout()

setTimeout digunakan untuk menunda eksekusi fungsi satu kali setelah periode waktu tertentu (dalam milidetik).

setTimeout(function, delay, param1, param2, ...);
setTimeout(() => {
console.log("Hello after 2 seconds!");
}, 2000);
function sayHello(name) {
console.log(`Hello, ${name}!`);
}

setTimeout(sayHello, 3000, "Alice");
// Output: "Hello, Alice!" (setelah 3 detik)
const timerId = setTimeout(() => {
console.log("This will not run");
}, 5000);

clearTimeout(timerId); // Membatalkan timer

setInterval()

setInterval digunakan untuk menjalankan fungsi berulang-ulang dalam interval waktu tertentu.

setInterval(() => {
console.log(new Date().toLocaleTimeString());
}, 1000);
function greet() {
console.log("Hi there!");
}

const intervalId = setInterval(greet, 2000);
// Output: "Hi there!" (setiap 2 detik)
let count = 0;
const intervalId = setInterval(() => {
console.log("Counting:", ++count);
if (count === 5) {
clearInterval(intervalId); // Hentikan setelah 5 kali
console.log("Interval stopped");
}
}, 1000);

Every dan Some

Metode every dan some di JavaScript digunakan untuk memeriksa elemen-elemen dalam array berdasarkan suatu kondisi. Keduanya bekerja dengan cara memanggil fungsi callback untuk setiap elemen, tetapi hasilnya berbeda.

Every

  • every akan mengembalikan true jika semua elemen dalam array memenuhi kondisi yang ditentukan di dalam callback.

  • Jika ada satu elemen saja yang tidak memenuhi kondisi, maka hasilnya false.

array.every(callback(element, index, array), thisArg);

array.every(callback(element, index, array), thisArg);

  • callback: Fungsi yang akan dipanggil untuk setiap elemen.

    • element: Elemen array saat ini.

    • index (opsional): Indeks elemen saat ini.

    • array (opsional): Array yang sedang diproses.

  • thisArg (opsional): Nilai untuk digunakan sebagai this di dalam callback.

const numbers = [2, 4, 6, 8];

const allPositive = numbers.every(num => num > 0);

console.log(allPositive); // Output: true
const words = ["hello", "world", "javascript"];

const allLongEnough = words.every(word => word.length > 4);

console.log(allLongEnough); // Output: true
const users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 35 },
];

const allAdults = users.every(user => user.age >= 18);

console.log(allAdults); // Output: true

Some

  • some akan mengembalikan true jika setidaknya satu elemen dalam array memenuhi kondisi yang ditentukan di dalam callback.

  • Jika tidak ada elemen yang memenuhi kondisi, maka hasilnya false.

array.some(callback(element, index, array), thisArg);

array.some(callback(element, index, array), thisArg);

  • callback: Fungsi yang akan dipanggil untuk setiap elemen.

    • element: Elemen array saat ini.

    • index (opsional): Indeks elemen saat ini.

    • array (opsional): Array yang sedang diproses.

  • thisArg (opsional): Nilai untuk digunakan sebagai this di dalam callback.

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

const hasNegative = numbers.some(num => num < 0);

console.log(hasNegative); // Output: true
const words = ["apple", "banana", "cherry"];

const containsBanana = words.some(word => word === "banana");

console.log(containsBanana); // Output: true
const users = [
{ name: "Alice", active: true },
{ name: "Bob", active: false },
{ name: "Charlie", active: false },
];

const hasActiveUser = users.some(user => user.active);

console.log(hasActiveUser); // Output: true

robot