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 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 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 ini digunakan untuk menambahkan satu atau lebih elemen ke awal array. Contohnya:
let angka = [2, 3];
angka.unshift(1); // angka menjadi [1, 2, 3]
Menggunakan kurung kurawal:
let mobil = {
merek: 'Toyota',
model: 'Avanza',
tahun: 2020
};
Menggunakan notasi titik:
console.log(mobil.merek); // Menghasilkan 'Toyota'
Menggunakan notasi kurung:
console.log(mobil['model']); // Menghasilkan 'Avanza'
Menambah properti baru:
mobil.warna = 'Hitam';
Mengubah nilai properti:
mobil.tahun = 2021;
Menggunakan operator delete:
delete mobil.model;
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.
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
}
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
}
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]);
}
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++;
}
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);
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
}
}
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 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
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 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 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 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 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.
this
di JavaScriptthis
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
:
Dalam Objek:
let orang = {
nama: 'Budi',
perkenalan: function() {
console.log(`Nama saya ${this.nama}`);
}
};
orang.perkenalan(); // Menghasilkan 'Nama saya Budi'
Dalam Function Global:
function globalFunction() {
console.log(this);
}
globalFunction(); // Akan mengacu pada objek global (window di browser)
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);
Dalam Arrow Function:
let orang = {
nama: 'Budi',
perkenalan: function() {
let arrowFunction = () => {
console.log(`Nama saya ${this.nama}`);
};
arrowFunction();
}
};
orang.perkenalan(); // Menghasilkan 'Nama saya Budi'
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.
try
dan catch
di JavaScripttry
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);
}
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
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"]
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
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
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);
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
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
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