17 Fungsi JavaScript Paling Sering Digunakan

Video Tutorial 17 Fungsi JavaScript wajib diketahui

Manipulasi DOM

DOM atau Document Object Model adalah data yang merepresentasikan objek-objek yang membentuk struktur dan konten dari sebuah dokumen html. DOM juga merupakan interface pemrograman yang dapat digunakan untuk mengubah struktur, styles dan konten dokumen website. Manipulasi DOM paling sering adalah mengubah nilai dari sebuah input, mengubah isi dari sebuah panel di website.

1. document.getElementById

Fungsi ini akan memberikan sebuah elemen dengan properti/attribute id tertentu. Yang kemudian bisa digunakan untuk memanipulasi element tersebut misalnya:

// ...
<input type="text" id="nama"/>
<div id="error"></div>
<script>
    let input = document.getElementById('nama');
    let divError = document.getElementById('error');

    // Jika nilai dari input kosong tampilkan pesan kesalahan
    if (input.value == '') {
        divError.textContent = 'Nama tidak boleh kosong';
        // atau bisa juga dengan innerHTML, tapi pastikan htmlnya tidak boleh dari inputan user
        divError.innerHTML = '<span class="text-error">Nama tidak boleh kosong</span>';
    }

    // set nilai dari input
    input.value = 'Joni';
</script>

Lebih lengkap tentang fungsi ini ada di https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

2. document.querySelector dan querySelectorAll

Mirip fungsi di atas yang memberikan elemen tertentu berdasarkan css selector yang diberikan. querySelector memberikan elemen pertama yang ditemukan dan querySelectorAll memberikan list semua elemen yang ditemukan, misalnya

<ul class="menu">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>

<script>
    // menceri menu pertama
    let menu = document.querySelector('li'); 
    // atau lebih akurat dengan:
    menu = document.querySelector('.menu li');
    console.log(menu.textContent); // Hasilnya akan 'Menu1'

    // Ubah text menu pertama
    menu.textContent = 'Menu pertama';

    //mencari semua menu
    let menus = document.querySelectorAll('.menu li');
    menus.forEach(function (menu) {
        // tambahkan css class untuk semua menu
        menu.classList.add('top-menu');
    });
</script>

3. Membuat Elemen Baru

Untuk membuat element baru dapat menggunakan fungsi create element seperti

<input type="text" id="email"/>
<div id="error"></div>
<script>
    let input = document.getElementById('email');
    let divError = document.getElementById('error');
    if (!input.value) {
        // buat elemen `p` (paragrap) baru
        let error = document.createElement('p');
        error.classList.add('text-error');
        error.textContent = 'Email tidak boleh kosong';
        divError.appendChild(error);
    }
</script>

Manipulasi Koleksi Seperti Array dan Object

Kebanyakan aplikasi web saat ini membutukan manipulasi koleksi seperti array. Memproses item dari array akan sering dihadapi terutama saat membuat single page application. Berikut fungsi fungsi yang sering digunakan.

4. Iterasi Array

Umumnya kita menggunakan for untuk iterasi, tapi fungsi forEach akan mempermudah kita tanpa perlu mendefinisikan array variable penunjang untuk for atau while seperti

let hari = ['Minggu', 'Senin', 'Selesa', 'Rabu', Kamis', 'Jumat', 'Sabtu'];
hari.forEach(function (item)) {
    console.log(item);
}

5. Spread Operator

Spread operator ... memberikan kemampuan untuk meng-expand sebuah array dan menjadi masukan dari fungsi yang membutuhkan 1 atau lebih inputan. Seperti contoh di bawah:

let hari = ['Minggu', 'Senin', 'Selesa', 'Rabu', Kamis', 'Jumat', 'Sabtu'];
console.log(...hari); // hasilnya akan sama seperti forEach di atas

// copy array
let semuaHari = [...hari];

// Gabungkan 2 array
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2]; // nilai arr3 akan 1, 2, 3, 4, 5, 6
// bisa juga menggunakan concat, arr3 = arr1.contact(arr2);

6. Array map

fungsi map digunakan untuk membentuk array baru yang elemen atau itemnya berdasarkan hasil kalkulasi dari fungsi yang diberikan misalnya:

const array1 = [1, 2, 3];
const array2 = array1.map(function(item) {
    return item * 2;
});

console.log(array2);
// hasil: Array [2, 4, 6]

Bisa juga digunakan untuk mengubah array kompleks menjadi lebih sederhana misalnya:

const array1 = [
    {
    "nis": "0001",
    "nama": "Ayu",
    "kelas": "X"
    },
  {
  "nis": "0002",
  "nama": "Budi",
  "kelas": "X"
  }
];

const map1 = array1.map(function (item) {
    return item.nama;
});

console.log(map1);
// hasil: Array ['Ayu', 'Budi'];

7. Menyaring Array Menggunakan Filter

Bagaimana biasanya kalian menyaring item dalam array yang memenuhi kriteria tertentu? gunakan fungsi filter agar lebih cepat seperti

const array1 = [1, 2, 3, 4];
const bilanganGenap = array1.filter(function(item) {
    if (item % 2 == 0) {
        return true;
    }

    return false;
});

console.log(bilanganGenap);
// hasilnya: Array [2, 4]

Inputan fungsi yang dipakai dalam filter harus mengembalikan nilai true saat kriteria terpenuhi, dan sebaliknya false.

8. Mengetahui Sebuah Array Memiliki Item dengan Kriteria tertentu

Fungsi some data digunakan untuk mengetahui jika sebuah array memiliki nilai dengan kondisi tertentu, misalnya untuk mengetahui apakah sebuah array ada bilangan genap di dalamnya

const array1 = [1, 2, 3, 4];
const hasil1 = array1.some(function(item) {
    return item % 2 == 0
});

console.log(hasil1); // outputnya adalah `true`

const array2 = [1, 3, 5, 7];
const hasil2 = array2.some(function(item) {
    return item % 2 == 0
});

console.log(hasil2); // outputnya adalah `false`

9. Mengetahui Setiap Item Dalam Array Memenuhi Kriteria Tertentu

Fungsi every bisa digunakan untuk memastikan semua item dalam array memenuhi kriteria tertentu misalnya semuanya adalah bilangan genap.

const array1 = [1, 2, 3, 4];
const hasil1 = array1.every(function(item) {
    return item % 2 == 0
});
console.log(hasil1);
// Hasilnya: false
// Jika array1 diubah menjadi array1 = [2, 4, 8, 10], hasilnya akan true

10. Fungsi includes

Fungsi includes mirip seperti indexOf tapi hasilnya adalah true atau false bukan -1 jika sebuah nilai tidak ada dalam array. Fungsi ini cocok untuk digunakan mengetahui apakah sebuah array memiliki nilai tertentu, dan juga dapat digunakan untuk mengetahui sebuah string memilih sub string tertentu.

const siswaKelas10 = ['Ayu', 'Budi', 'Joni'];
console.log(siswaKelas10.includes('Eka')); // Hasilnya false;
console.log(siswaKelas10.includes('Ayu')); // Hasilnya true

// Juga bisa digunakan untuk string
const text = 'Nama saya Ayu';
console.log(text.includes('Ayu')); // true
console.log(text.includes('aku')); // false

11. Fungsi Reduce

Fungsi yang digunakan untuk mengubah array menjadi nilai tunggal, bisa menjadi string, integer atau yang lain. Contoh paling gampang untuk menjelaskan fungsi reduce adalah untuk menjumlahkan semua nilai dari sebuah array

const array1 = [1, 2, 3, 4];
const total = array1.reduce(function (nilaiSebelum, nilaiSekarang){
    return nilaiSebelum + nilaiSekarang;
});

console.log(total); // hasilnya: 10

12. Memotong Array

Fungsi slice dapat digunakan untuk mengambil potong dari array dari nilai awalan dan akhiran, seperti:

const siswaKelas10 = ['Ayu', 'Budi', 'Joni', 'Eka'];
console.log(siswaKelas10.slice(2)); // Hasilnya: Array ['Joni', 'Eka'];

console.log(siswaKelas10.slice(1, 3)); // Hasilnya: Array ['Budi', 'Joni'];

13. Menghapus dan Menambahkan Nilai Array

Fungsi splice dapat digunakan untuk menghapus dan menambahkan nilai array. Inputan fungsi ini adalah, index awal, jumlah yang dihapus, dan juga item yang ditambahkan, Misalnya.

const siswaKelas10 = ['Ayu', 'Budi', 'Joni', 'Eka'];
// Hapus index 2, `Joni`
siswaKelas10.splice(2, 1); 
console.log(siswaKelas10); // Hasilnya: Array ['Joni', 'Budi', 'Eka'];

// Hapus mulai dari index 2, sebanyak 2 item
siswaKelas10.splice(2, 2); 
console.log(siswaKelas10); // Hasilnya: Array ['Joni', 'Budi'];

// Hapus mulai dari index 1, sebanyak 2 item, dan ganti dengan nilai baru
siswaKelas10.splice(1, 2, 'Bagus', 'Andi'); 
console.log(siswaKelas10); // Hasilnya: Array ['Joni', 'Bagus', 'Andi', 'Eka'];

Manipulasi Object

Selain array kita juga sering menggunakan object terutama plain object. Berikut adalah fungsi fungsi yang sering digunakan untuk object.

14. Object.keys

Fungsi Object.keys digunakan untuk mengambil semua key dari sebuah object, misalnya

const siswa = {
    nama: 'Budi',
    kelas: 'XII',
    nis: '0001'
}

console.log(Object.key(siswa)); // Hasilnya: Array ['nama', 'kelas', 'nis']

// Bisa juga untuk iterasi
Object.keys(siswa).forEach(function (key) {
    console.log(key + ': ' + siswa[key]); 
});

15. Object.values

.keys digunakan untuk mendapatkan key, sedangkah values digunakan untuk mendapatkan semua nilai dari properties sebuah object, misalnya:

const siswa = {
    nama: 'Budi',
    kelas: 'XII',
    nis: '0001'
}

console.log(Object.values(siswa)); // Hasilnya: Array ['Budi', 'XII', '0001']

16. Object.entries

Fungsi yang akan mengembalikan nilai berupa array, yang masing masing itemnya akan berupa [key, value], seperti contoh di bawah:

const siswa = {
    nama: 'Budi',
    kelas: 'XII',
    nis: '0001'
}

console.log(Object.entries(siswa)); // Hasilnya: Array [["nama", "Budi"], ["kelas", "XII"], ["nis", "0001"]]

// Bisa untuk iterasi
Object.entries(siswa).forEach(function (item){
    console.log(item[0] + ': ' + item[1]); 
})

17. Duplikasi Object

Fungsi Object.assign dapat digunakan untuk menduplikasi semua properties dari sebuah object, atau dapat digunakan untuk mengabungkan 2 buah object.

const siswa = {
    nama: 'Budi',
    kelas: 'XII',
    nis: '0001'
}

const copySiswa = Object.assign({}, siswa);

const materi = {
    judul: 'JavaScript',
    durasi: 2
};

const mergeObject = Object.assign(siswa, materi);

console.log(siswa); // hasilnya: {nama: 'Budi', kelas: 'XII', nis: '0001', judul: 'JavaScript', durasi: 2}
console.log(siswa); // hasilnya sama dengan siswa: {nama: 'Budi', kelas: 'XII', nis: '0001', judul: 'JavaScript', durasi: 2}

 // Agar object siswa tidak berubah gunakan
 const mergeObject = Object.assign({}, siswa, materi);

Kesimpulan

JavaScript memiliki masih banyak fungsi yang bisa dipelajari, termasuk 17 fungsi yang wajib diketahui di atas untuk meningkatkan produktivitas kerja. Namun perlu diperhatikan juga browser mana yang kompatibel dengan fungsi tersebut. Walaupun semua browser modern sudah mendukungnya pastikan juga untuk menggunakan fungsi yang didukung untuk semua browser. Informasi itu dapat diperoleh dari dokumentasi javascript. Jika kalian memiliki fungsi lain yang sering digunakan bisa ditambahkan lewat kolom komentar. Bagi yang ingin bertanya silahkan ke kolom komentar juga.