Panduan Lengkap JavaScript - ES5: Untuk Pemula

Hai sana, para pengembang JavaScript yang bersemangat! Saya sangat gembira menjadi panduanmu dalam perjalanan menarik ini ke dunia JavaScript ES5. Sebagai guru ilmu komputer dengan tahun-tahun pengalaman, saya telah melihat banyak siswa bertransformasi dari pemula sepenuhnya menjadi programmer yang Percaya diri. Jadi, jangan khawatir jika Anda mulai dari nol – kita akan mengambil langkah demi langkah, dan sebelum Anda sadari, Anda akan menulis JavaScript seperti seorang pro!

Fitur Baru di JavaScript ES5

JavaScript ES5, dirilis pada tahun 2009, membawa banyak fitur baru menarik ke dalam bahasa ini. Itu seperti saat permainan video favoritmu mendapat pembaruan yang menyenangkan – tiba-tiba, Anda memiliki alat dan kemampuan baru yang membuat semuanya lebih menyenangkan dan efisien! Marilah kita masuk ke dalam fitur ini dan lihat bagaimana mereka bisa membuat kehidupan pemrograman kita lebih mudah.

Metode Array JavaScript

Array adalah seperti pisau瑞士军刀 di JavaScript – mereka sangat multifungsi dan dapat menangani semua jenis data. ES5 memperkenalkan beberapa metode baru yang membuat bekerja dengan array menjadi mudah. Marilah kita lihat mereka satu per satu:

JavaScript Array every()

Metode every() mirip dengan guru yang ketat memeriksa apakah semua siswa dalam kelas melakukan tugas rumah mereka. Itu memeriksa apakah semua elemen dalam array lolos tes tertentu.

let numbers = [2, 4, 6, 8, 10];
let allEven = numbers.every(function(num) {
return num % 2 === 0;
});
console.log(allEven); // Output: true

Dalam contoh ini, every() memeriksa apakah semua angka dalam array genap. Karena mereka adalah, itu mengembalikan true.

JavaScript Array filter()

filter() mirip dengan petugas klub yang hanya membolehkan elemen yang memenuhi kriteria tertentu masuk. Itu membuat array baru dengan semua elemen yang lolos tes yang diterapkan oleh fungsi yang disediakan.

let fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
let longFruits = fruits.filter(function(fruit) {
return fruit.length > 5;
});
console.log(longFruits); // Output: ['banana', 'cherry', 'elderberry']

Di sini, filter() membuat array baru yang hanya mengandung buah-buahan dengan nama yang lebih panjang dari 5 karakter.

JavaScript Array forEach()

forEach() mirip dengan panduan wisata, membawa Anda melalui setiap elemen array satu per satu. Itu menjalankan fungsi yang disediakan sekali untuk setiap elemen array.

let colors = ['red', 'green', 'blue'];
colors.forEach(function(color, index) {
console.log(`Color at position ${index} is ${color}`);
});
// Output:
// Color at position 0 is red
// Color at position 1 is green
// Color at position 2 is blue

Metode ini bagus untuk melakukan aksi pada setiap elemen array tanpa membuat array baru.

JavaScript Array isArray()

isArray() mirip dengan detektif, menentukan apakah objek adalah array atau tidak. Itu mengembalikan true jika objek adalah array, dan false jika itu bukan.

console.log(Array.isArray([1, 2, 3])); // Output: true
console.log(Array.isArray('Hello')); // Output: false

Metode ini sangat berguna saat Anda perlu memeriksa apakah variabel adalah array sebelum melakukan operasi khusus array.

JavaScript Array indexOf()

indexOf() mirip dengan tim pencarian, mencari elemen tertentu dalam array dan memberitahu Anda di mana itu berada. Itu mengembalikan indeks pertama di mana elemen ditemukan dalam array, atau -1 jika itu tidak ada.

let fruits = ['apple', 'banana', 'cherry', 'date'];
console.log(fruits.indexOf('cherry')); // Output: 2
console.log(fruits.indexOf('grape')); // Output: -1

Metode ini sangat berguna saat Anda perlu menemukan posisi elemen dalam array.

JavaScript Array lastIndexOf()

lastIndexOf() mirip dengan indexOf(), tapi itu mulai mencari dari ujung array. Itu mengembalikan indeks terakhir di mana elemen ditemukan dalam array, atau -1 jika itu tidak ada.

let numbers = [1, 2, 3, 2, 1];
console.log(numbers.lastIndexOf(2)); // Output: 3
console.log(numbers.lastIndexOf(4)); // Output: -1

Metode ini berguna saat Anda ingin menemukan kemunculan terakhir elemen dalam array.

JavaScript Array map()

map() mirip dengan tongkat sihir yang merubah setiap elemen array. Itu membuat array baru dengan hasil pemanggilan fungsi yang disediakan pada setiap elemen dalam array.

let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(function(num) {
return num * num;
});
console.log(squared); // Output: [1, 4, 9, 16, 25]

Dalam contoh ini, map() membuat array baru di mana setiap nomor digunakan kuadrat.

JavaScript Array reduce()

reduce() mirip dengan salju yang bergerak turun bukit, mengakumulasi nilai saat itu berjalan. Itu menjalankan fungsi pengurang pada setiap elemen array, menghasilkan nilai keluaran tunggal.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 15

Di sini, reduce() digunakan untuk menjumlahkan semua angka dalam array.

JavaScript Array reduceRight()

reduceRight() mirip dengan reduce(), tapi itu memproses array dari kanan ke kiri.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.reduceRight(function(accumulator, currentValue) {
return accumulator - currentValue;
});
console.log(result); // Output: -5 (5 - 4 - 3 - 2 - 1)

Metode ini berguna saat urutan pengolahan penting dan Anda ingin mulai dari ujung array.

JavaScript Array some()

some() mirip dengan guru yang lembut yang senang jika setidaknya satu siswa melakukan tugas rumah mereka. Itu memeriksa apakah setidaknya satu elemen dalam array lolos tes yang diterapkan oleh fungsi yang disediakan.

let numbers = [1, 3, 5, 7, 8, 9];
let hasEven = numbers.some(function(num) {
return num % 2 === 0;
});
console.log(hasEven); // Output: true

Dalam contoh ini, some() memeriksa apakah ada setidaknya satu angka genap dalam array.

Metode Tanggal JavaScript

ES5 juga memperkenalkan beberapa metode praktis untuk bekerja dengan tanggal:

JavaScript Date now()

Date.now() mengembalikan jumlah milidetik yang berlalu sejak 1 Januari 1970 00:00:00 UTC.

console.log(Date.now()); // Output: timestamp saat ini dalam milidetik

Metode ini berguna untuk mengukur interval waktu atau membuat identifier unik.

JavaScript Date toJSON()

toJSON() mengembalikan representasi string dari objek Date dalam format JSON.

let date = new Date();
console.log(date.toJSON()); // Output: "2023-06-08T12:34:56.789Z"

Metode ini sangat berguna saat Anda perlu serialisasi objek Date ke JSON.

JavaScript Date toISOString()

toISOString() mengkonversi objek Date ke string, menggunakan format ISO 8601.

let date = new Date();
console.log(date.toISOString()); // Output: "2023-06-08T12:34:56.789Z"

Metode ini berguna untuk format tanggal standar, khususnya dalam konteks internasional.

JavaScript Function bind()

bind() membuat fungsi baru yang, saat dipanggil, memiliki kata kunci this yang ditetapkan ke nilai yang disediakan. Itu seperti memberikan konteks khusus bagi fungsi.

let person = {
name: 'John',
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};

let greetFunction = person.greet.bind(person);
greetFunction(); // Output: "Hello, my name is John"

Metode ini sangat berguna dalam pengaturan event dan saat bekerja dengan JavaScript berorientasi objek.

JavaScript JSON Methods

ES5 memperkenalkan dukungan bawaan untuk JSON:

JavaScript JSON parse()

JSON.parse() mengurai string JSON, membuat nilai JavaScript atau objek yang dijelaskan oleh string.

let jsonString = '{"name":"John", "age":30, "city":"New York"}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // Output: "John"

Metode ini sangat penting saat bekerja dengan data dari API atau menyimpan struktur data kompleks sebagai string.

JavaScript JSON stringify()

JSON.stringify() mengkonversi objek JavaScript atau nilai ke string JSON.

let obj = {name: "John", age: 30, city: "New York"};
let jsonString = JSON.stringify(obj);
console.log(jsonString); // Output: '{"name":"John","age":30,"city":"New York"}'

Metode ini berguna saat Anda perlu mengirim data ke server atau menyimpan objek kompleks sebagai string.

JavaScript Multiline Strings

ES5 memperkenalkan cara untuk membuat string multiline menggunakan karakter backslash:

let multiline = "This is a \
multiline string \
in JavaScript.";
console.log(multiline);
// Output:
// This is a multiline string in JavaScript.

Fitur ini membuatnya mudah untuk menulis string panjang dalam kode Anda.

Metode Objek JavaScript

ES5 memperkenalkan beberapa metode baru untuk bekerja dengan objek:

JavaScript Object defineProperty()

Object.defineProperty() memungkinkan Anda untuk mendefinisikan properti baru langsung pada objek, dengan kontrol halus atas properti itu.

let obj = {};
Object.defineProperty(obj, 'name', {
value: 'John',
writable: false,
enumerable: true,
configurable: true
});
console.log(obj.name); // Output: "John"
obj.name = 'Jane'; // Ini tidak akan mengubah nilai karena writable adalah false
console.log(obj.name); // Output: "John"

Metode ini sangat kuat untuk membuat objek dengan perilaku dan karakteristik tertentu.

JavaScript Property getters and setters

ES5 memperkenalkan metode getter dan setter, memungkinkan Anda untuk mendefinisikan bagaimana properti diakses atau diubah:

let person = {
firstName: 'John',
lastName: 'Doe',
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(name) {
let parts = name.split(' ');
this.firstName = parts[0];
this.lastName = parts[1];
}
};

console.log(person.fullName); // Output: "John Doe"
person.fullName = 'Jane Smith';
console.log(person.firstName); // Output: "Jane"
console.log(person.lastName); // Output: "Smith"

Getters dan setters memungkinkan Anda untuk mendefinisikan properti yang dihitung dan menambah logika saat mengambil atau mengubah nilai.

JavaScript Reserved words as property names

ES5 mengizinkan penggunaan kata kunci yang direservasi sebagai nama properti dalam literal objek:

let obj = {
class: 'JavaScript',
for: 'beginners',
if: true
};
console.log(obj.class); // Output: "JavaScript"

Fitur ini memberikan fleksibilitas tambahan saat menamai properti objek.

JavaScript "use strict"

ES5 memperkenalkan direktif "use strict", yang mengaktifkan mode ketat di JavaScript. Mode ketat menangkap kesalahan umum, melempar pengecualian, dan mencegah, atau melempar kesalahan saat tindakan yang "tidak aman" diambil.

"use strict";
x = 3.14; // Ini akan menyebabkan kesalahan karena x belum dideklarasikan

Menggunakan mode ketat membantu menangkap kesalahan awal dan mendorong praktek pemrograman yang lebih baik.

JavaScript String[number] access

ES5 mengizinkan mengakses karakter individual dalam string menggunakan notasi kurung siku:

let str = "Hello";
console.log(str[0]); // Output: "H"
console.log(str[1]); // Output: "e"

Fitur ini membuatnya mudah untuk bekerja dengan karakter individual dalam string.

JavaScript String trim()

Metode trim() menghapus whitespace dari kedua ujung string:

let str = "   Hello, World!   ";
console.log(str.trim()); // Output: "Hello, World!"

Metode ini berguna untuk membersihkan input pengguna atau menformat string.

JavaScript Trailing commas

ES5 mengizinkan trailing commas dalam literal objek dan array:

let obj = {
name: "John",
age: 30,
}; // Tidak ada kesalahan

let arr = [1, 2, 3,]; // Tidak ada kesalahan

Fitur ini membuatnya mudah untuk menambahkan atau menghapus item dari objek dan array tanpa khawatir tentang penempatan koma.

Kesimpulan

Wah! Kita telah menelusuri banyak hal dalam panduan ini. ES5 membawa banyak fitur kuat ke JavaScript yang masih digunakan secara luas hari ini. Ingat, belajar pemrograman adalah seperti belajar bahasa baru – itu memerlukan praktek dan kesabaran. Jangan frustasi jika Anda belum mengerti segalanya segera. Terus coding, terus mencoba, dan terutama, bersenang-senang!

Berikut adalah tabel yang menggabungkan semua metode yang kita diskusikan:

Metode	Deskripsi
Array.every()	Tes apakah semua elemen dalam array lolos tes yang diterapkan oleh fungsi yang disediakan
Array.filter()	Membuat array baru dengan semua elemen yang lolos tes yang diterapkan oleh fungsi yang disediakan
Array.forEach()	Menjalankan fungsi yang disediakan sekali untuk setiap elemen array
Array.isArray()	Menentukan apakah objek adalah array atau tidak
Array.indexOf()	Mengembalikan indeks pertama di mana elemen ditemukan dalam array
Array.lastIndexOf()	Mengembalikan indeks terakhir di mana elemen ditemukan dalam array
Array.map()	Membuat array baru dengan hasil pemanggilan fungsi yang disediakan pada setiap elemen dalam array
Array.reduce()	Menjalankan fungsi pengurang pada setiap elemen array, menghasilkan nilai keluaran tunggal
Array.reduceRight()	Menjalankan fungsi pengurang pada setiap elemen array dari kanan ke kiri
Array.some()	Tes apakah setidaknya satu elemen dalam array lolos tes yang diterapkan oleh fungsi yang disediakan
Date.now()	Mengembalikan jumlah milidetik yang berlalu sejak 1 Januari 1970 00:00:00 UTC
Date.toJSON()	Mengembalikan representasi string dari objek Date dalam format JSON
Date.toISOString()	Mengkonversi objek Date ke string, menggunakan format ISO 8601
Function.bind()	Membuat fungsi baru yang, saat dipanggil, memiliki kata kunci this yang ditetapkan ke nilai yang disediakan
JSON.parse()	Mengurai string JSON, membuat nilai JavaScript atau objek yang dijelaskan oleh string
JSON.stringify()	Mengkonversi objek JavaScript atau nilai ke string JSON
Object.defineProperty()	Mendefinisikan properti baru langsung pada objek, atau memodifikasi properti yang sudah ada
String.trim()	Menghapus whitespace dari kedua ujung string

Simpan tabel ini sebagai referensi cepat saat Anda sedang mengoding. Selamat belajar JavaScript!

Credits: Image by storyset