JavaScript - ES5: Panduan Lengkap untuk Pemula

Halo sana, para pengembang JavaScript yang bersemangat! Saya sangat senang menjadi panduanmu dalam perjalanan menarik 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 kamu baru mulai – kita akan bergerak langkah demi langkah, dan sebelum kamu menyadari, kamu akan menulis JavaScript seperti seorang pro!

Fitur Baru yang Ditambahkan di JavaScript ES5

JavaScript ES5, yang dirilis pada tahun 2009, membawa banyak fitur baru menarik ke dalam bahasa ini. Itu seperti saat game favoritmu mendapat pembaruan yang menakjubkan – tiba-tiba, kamu memiliki tools dan kemampuan baru yang membuat semuanya lebih menyenangkan dan efisien! Mari kita masuk ke dalam fitur ini dan lihat bagaimana mereka dapat membuat kehidupan pemrograman kita lebih mudah.

Method Array di JavaScript

Array adalah seperti pisau multitasking di JavaScript – mereka sangat multifungsi dan dapat menangani semua jenis data. ES5 memperkenalkan beberapa method baru yang membuat bekerja dengan array menjadi mudah. Mari kita lihat mereka satu per satu:

JavaScript Array every()

Method every() mirip seperti guru ketat yang memeriksa apakah semua siswa dalam kelas telah menyelesaikan tugas 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 seperti petugas pengaman di klub, 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 panjang lebih dari 5 karakter.

JavaScript Array forEach()

forEach() mirip seperti guide tur, membawa kamu 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 tindakan pada setiap elemen array tanpa membuat array baru.

JavaScript Array isArray()

isArray() mirip seperti 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 seperti tim pencarian, mencari elemen tertentu dalam array dan memberitahu Anda di mana itu terletak. Itu mengembalikan indeks pertama di mana elemen tertentu dapat ditemukan dalam array, atau -1 jika itu tidak hadir.

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 tertentu dapat ditemukan dalam array, atau -1 jika itu tidak hadir.

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 dari elemen dalam array.

JavaScript Array map()

map() mirip seperti tongkat sihir yang mengubah 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 angka disusun kuadrat.

JavaScript Array reduce()

reduce() mirip seperti bola salju yang bergerak turun bukit, mengumpulkan nilai saat itu. 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 seperti guru yang lemah lembut yang senang jika setidaknya satu siswa melakukan tugas 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.

Method Date di JavaScript

ES5 juga memperkenalkan beberapa method yang berguna 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 sangat 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.

Method JSON di JavaScript

ES5 memperkenalkan dukungan bawaan untuk JSON:

JavaScript JSON parse()

JSON.parse() menguraikan 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.

Method Object di JavaScript

ES5 memperkenalkan beberapa method baru untuk bekerja dengan objek:

JavaScript Object defineProperty()

Object.defineProperty() memungkinkan Anda untuk menentukan properti baru langsung pada objek, atau memodifikasi properti yang sudah ada, dengan kontrol halus terhadap 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 method getter dan setter, memungkinkan Anda untuk menentukan 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 menentukan properti terhitung dan menambah logika saat mengambil atau mengatur nilai.

JavaScript Reserved words as property names

ES5 mengijinkan 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 strict di JavaScript. Mode strict menangkap kesalahan pemrograman 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 strict membantu menangkap kesalahan awal dan mendorong praktek pemrograman yang baik.

JavaScript String[number] access

ES5 mengijinkan 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()

Method trim() menghapus spasi dari kedua ujung string:

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

Metode ini berguna untuk membersihkan input pengguna atau memformat string.

JavaScript Trailing commas

ES5 mengijinkan 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 melihat banyak hal dalam panduan ini. ES5 membawa banyak fitur kuat ke JavaScript yang masih digunakan secara luas hari ini. Ingat, belajar mengkode adalah seperti belajar bahasa baru – itu memerlukan latihan dan kesabaran. Jangan frustasi jika Anda belum memahami segalanya segera. Tetap coding, tetap eksperimen, dan terutama, bersenang-senang!

Berikut adalah tabel yang menggabungkan semua method yang kita diskusikan:

Method	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 nilai adalah array
Array.indexOf()	Mengembalikan indeks pertama di mana elemen tertentu dapat ditemukan dalam array
Array.lastIndexOf()	Mengembalikan indeks terakhir di mana elemen tertentu dapat 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()	Menguraikan string JSON, membuat nilai JavaScript atau objek yang dijelaskan oleh string
JSON.stringify()	Mengkonversi objek JavaScript atau nilai ke string JSON
Object.defineProperty()	Menentukan properti baru langsung pada objek, atau memodifikasi properti yang sudah ada
String.trim()	Menghapus spasi dari kedua ujung string

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

Credits: Image by storyset