Pertanyaan dan Jawaban Wawancara JavaScript yang Sering Diajukan

Diterbitkan: 2023-01-13

Memiliki JavaScript dalam portofolio Anda meningkatkan peluang mendapatkan peran pengembang perangkat lunak. Yang mengatakan, mari kita lihat pertanyaan wawancara JavaScript yang sering diajukan.

JavaScript adalah salah satu bahasa yang paling banyak digunakan dalam pengembangan web. Ini digunakan untuk mengembangkan hampir semua jenis aplikasi sekarang.

Sebelum masuk ke pertanyaan wawancara, mari kita lihat keuntungan belajar JavaScript.

JavaScript

JavaScript adalah bahasa pemrograman yang dikompilasi ringan, ditafsirkan, atau tepat waktu. Ini adalah salah satu bahasa inti dari world wide web. Anda tahu dua bahasa inti lain dari www. Anda lebih baik mencari mereka jika tidak.

JavaScript terutama dibuat untuk web. Tapi itu tidak hanya untuk web sekarang. Dengan bantuan lingkungan seperti Node, Deno , dll., kita dapat menjalankannya di hampir semua platform.

Mari kita lihat beberapa keuntungannya.

Keuntungan JavaScript

  1. Mudah untuk memulai. Anda dapat mempelajarinya bahkan tanpa pengetahuan coding.
  2. Komunitas besar di sekitarnya. Anda akan mendapatkan semua bantuan yang Anda inginkan jika Anda terjebak di mana saja.
  3. Ada banyak pustaka/kerangka kerja yang dibangun menggunakan JavaScript, yang membantu mengembangkan aplikasi lebih cepat.
  4. Kami dapat mengembangkan aplikasi frontend, backend, android, iOS, dll., dengan JavaScript. Kami dapat membuat hampir semua jenis aplikasi dengannya. Tapi, itu lebih kuat dalam pengembangan web.

Apa saja tipe data dalam JavaScript?

Tipe data digunakan untuk menyimpan berbagai jenis data. Tipe data akan berbeda dari satu bahasa pemrograman ke yang lain. Dalam JavaScript, kami memiliki 8 tipe data. Mari kita lihat satu per satu.

  • Nomor
  • Rangkaian
  • Boolean
  • Belum diartikan
  • Batal
  • BigInt
  • Simbol
  • Obyek

Semua tipe data kecuali Object disebut nilai primitif. Dan mereka tidak berubah.

Apa metode bawaan dalam JavaScript?

Metode bawaan dalam JavaScript berbeda untuk setiap tipe data. Kita dapat mengakses metode bawaan ini menggunakan tipe data masing-masing. Mari kita lihat beberapa metode bawaan untuk berbagai tipe data dan struktur data.

  1. Nomor
    • toFixed
    • keString
    • …
  2. Rangkaian
    • ke Huruf Kecil
    • dimulai dengan
    • chartAt
    • …
  3. Himpunan
    • Saring
    • peta
    • untuk setiap
    • …

Ada banyak metode bawaan untuk setiap tipe data. Anda dapat memeriksa referensi untuk semua metode bawaan dari berbagai tipe data dan struktur data.

Bagaimana cara membuat array dalam JavaScript?

Array adalah salah satu struktur data inti dalam JavaScript. Array dapat memiliki semua jenis data di dalamnya karena JavaScript bersifat dinamis. Mari kita lihat cara membuat array di JavaScript.

Kita dapat membuat array menggunakan tanda kurung siku [] . Sangat mudah dan cepat untuk membuat objek

 // Empty array const arr = []; // Array with some random values const randomArr = [1, "One", true]; console.log(arr, randomArr);

Kita dapat membuat array menggunakan konstruktor Array . Orang jarang menggunakan konstruktor untuk membuat array dalam proyek umum.

 // Empty array const arr = new Array(); // Array with some random values const randomArr = new Array(1, "One", true); console.log(arr, randomArr);

Array JavaScript dapat diubah, yaitu kita dapat memodifikasinya sesuai keinginan setelah membuatnya.

Bagaimana cara membuat objek dalam JavaScript?

Selain array, objek adalah struktur data inti lainnya dalam JavaScript. Objek menggunakan simpan pasangan nilai kunci. Kuncinya harus berupa nilai yang tidak dapat diubah, sedangkan nilainya bisa berupa apa saja. Mari kita lihat cara membuat objek di JavaScript.

Kita bisa membuat objek menggunakan kurung kurawal {} . Sangat mudah dan cepat untuk membuat objek.

 // Empty object const object = {}; // Object with some random values const randomObject = { 1: 2, one: "Two", true: false }; console.log(object, randomObject);

Kita dapat membuat objek menggunakan Object constructor. Orang jarang menggunakan ini dalam proyek umum.

 // Empty object const object = new Object(); // Object with some random values const randomObject = new Object(); randomObject[1] = 2; randomObject["one"] = "Two"; randomObject[true] = false; console.log(object, randomObject);

Objek JavaScript dapat berubah yaitu, kita dapat memodifikasinya setelah dibuat, seperti yang Anda lihat pada contoh ke-2.

Bagaimana Anda men-debug kode JavaScript?

Kode debug tidak mudah. Dan itu berbeda dari satu bahasa pemrograman ke bahasa lain, satu proyek ke proyek lainnya, dll.; mari kita lihat hal-hal umum yang digunakan untuk men-debug JavaScript.

#1. Penebangan

Kita dapat menggunakan pernyataan console.log di beberapa tempat dalam kode kita untuk mengidentifikasi bug. Kode akan berhenti menjalankan baris kode berikutnya ketika ada bug di baris sebelumnya.

Logging adalah salah satu metode debug lama, yang cukup efektif untuk proyek kecil. Ini adalah teknik debug umum untuk bahasa pemrograman apa pun.

#2. Alat pengembang

JavaScript sebagian besar digunakan untuk mengembangkan aplikasi web. Jadi, hampir semua browser sekarang memiliki alat pengembang yang membantu men-debug kode JavaScript.

Salah satu metode debug yang paling sering digunakan adalah menyetel breakpoint di alat pengembang. Breakpoint menghentikan eksekusi JavaScript dan memberikan semua info tentang eksekusi saat ini.

Kami dapat mengatur beberapa breakpoint di sekitar tempat kami mendapatkan kesalahan dan melihat apa penyebabnya. Ini adalah cara paling efektif untuk men-debug aplikasi web JavaScript.

#3. IDE

Kita dapat menggunakan IDE untuk men-debug JavaScript. VS Code mendukung debugging dengan breakpoints. Fitur debug mungkin berbeda berdasarkan IDE yang Anda gunakan. Namun, sebagian besar IDE akan memiliki fitur tersebut.

Bagaimana cara menambahkan kode JavaScript dalam file HTML?

Kita dapat menambahkan file HTML JavaScript menggunakan tag script . Anda dapat memeriksa contoh di bawah ini.

 <!DOCTYPE html> <html lang="en"> <head> <title>Geekflare</title> </head> <body> <h1>Geekflare</h1> <script> // JavaScript code goes here console.log("This is JavaScript code"); </script> </body> </html>

Apa itu cookie?

Cookie adalah pasangan nilai kunci yang digunakan untuk menyimpan informasi kecil. Informasinya bisa apa saja. Kami dapat mengatur waktu kedaluwarsa cookie, yang akan dihapus setelah waktu kedaluwarsanya. Ini banyak digunakan untuk menyimpan informasi pengguna.

Cookie tidak akan dihapus meskipun kami menyegarkan halaman sampai kami menghapusnya atau kedaluwarsa. Anda dapat memeriksa cookie dari aplikasi web/halaman web apa pun di browser apa pun dengan membuka alat pengembang.

Bagaimana cara membaca cookie?

Kita bisa membaca cookie di JavaScript menggunakan document.cookie . Ini akan mengembalikan semua cookie yang kami buat.

 console.log("All cookies", document.cookie);

Ini akan mengembalikan string kosong jika tidak ada cookie.

Bagaimana cara membuat dan menghapus cookie?

Kita dapat membuat cookie dengan menyetel key-value pair ke document.cookie . Mari kita lihat contohnya.

 document.cookie = "one=One;";

Dalam sintaks di atas, one kunci cookie dan One adalah nilainya. Kami dapat menambahkan lebih banyak atribut ke cookie seperti domain, jalur, kedaluwarsa, dll.; masing-masing harus dipisahkan dengan titik koma (;) . Semua atribut bersifat opsional.

Mari kita lihat contoh dengan atribut.

 document.cookie = "one=One;expires=Jan 31 2023;path=/;";

Pada kode di atas, kami telah menambahkan tanggal kedaluwarsa dan jalur ke cookie. Jika tanggal kedaluwarsa tidak diberikan, cookie akan dihapus setelah sesi. Jalur default akan menjadi jalur file. Format tanggal kedaluwarsa harus dalam GMT.

Mari kita lihat cara membuat banyak cookie.

 document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "two=Two;expires=Jan 31 2023;path=/;"; document.cookie = "three=Three;expires=Jan 31 2023;path=/;";

Cookie tidak akan ditimpa jika kunci atau jalurnya berbeda saat menyetel beberapa cookie. Jika kunci dan jalurnya sama, maka itu akan menimpa cookie sebelumnya. Lihat contoh di bawah ini, yang akan menimpa cookie yang ditetapkan sebelumnya.

 document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "one=Two;path=/;";

Kami telah menghapus tanggal kedaluwarsa dari cookie dan mengubah nilainya.

Gunakan tanggal kedaluwarsa sebagai tanggal yang akan datang saat Anda menguji kode agar berfungsi dengan benar. Jika Anda mempertahankan tanggal yang sama 31 Jan 2023 bahkan setelah 31 Jan 2023 , cookie tidak akan dibuat.

Kami telah melihat cara membuat dan memperbarui cookie. Mari kita lihat cara menghapus cookie.

Menghapus cookie itu mudah. Ubah saja tanggal kedaluwarsa cookie ke tanggal yang sudah lewat. Periksa contoh di bawah ini.

 // Creating cookies document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "two=Two;expires=Jan 31 2023;path=/;"; document.cookie = "three=Three;expires=Jan 31 2023;path=/;"; // Deleting the last cookie document.cookie = "three=Three;expires=Jan 1 2023;path=/;";

Anda tidak akan menemukan cookie terakhir di cookie karena cookie tersebut dihapus di baris terakhir kode. Itu saja untuk tutorial min cookies.

Apa perbedaan framework JavaScript?

Ada banyak framework JavaScript di luar sana. React, Vue, Angular, dll., untuk pengembangan UI. Express, Koa, Nest, dll., untuk pengembangan sisi server. NextJS, Gatsby, dll., untuk pembuatan situs statis. React Native, Ionic, dll., untuk pengembangan aplikasi seluler. Kami telah menyebutkan beberapa framework JavaScript di sini. Anda dapat menemukan lebih banyak kerangka kerja yang akan membutuhkan banyak waktu untuk dijelajahi. Jelajahi saat Anda membutuhkannya.

Penutupan dalam JavaScript

Penutupan adalah fungsi yang dibundel dengan lingkup leksikalnya dan lingkungan leksikal induknya. Dengan penutupan, kita dapat mengakses data lingkup luar. Penutupan terbentuk ketika fungsi dibuat.

 function outer() { const a = 1; function inner() { // We can access all the data from the outer function scope here // The data will be available even if we execute this function outside the outer function // as inners' closure formed while creating it console.log("Accessing a inside inner", a); } return inner; } const innerFn = outer(); innerFn();

Penutupan banyak digunakan dalam aplikasi JavaScript. Anda mungkin pernah menggunakannya sebelumnya tanpa menyadari bahwa itu adalah penutup. Ada lebih banyak dari ini untuk dipelajari tentang penutupan. Pastikan Anda telah mempelajari konsep ini sepenuhnya.

Mengangkat di JavaScript

Hoisting adalah proses dalam JavaScript di mana deklarasi variabel, fungsi, dan kelas berpindah ke bagian atas cakupan sebelum mengeksekusi kode.

 // Accessing `name` before declaring console.log(name); // Declaring and initializing the `name` var name = "Geekflare";

Jika Anda menjalankan kode di atas, Anda tidak akan melihat kesalahan apa pun. Tetapi di sebagian besar bahasa, Anda akan mendapatkan kesalahan. Keluaran tidak akan undefined karena mengangkat hanya memindahkan deklarasi ke atas, dan tidak akan menginisialisasi hingga nomor baris 3.

Ubah var menjadi let atau const sebagai berikut, dan jalankan kode lagi.

 // Accessing `name` before declaring console.log(name); // Declaring and initializing the `name` const name = "Geekflare";

Sekarang, Anda akan mendapatkan kesalahan referensi yang menyatakan bahwa kami tidak dapat mengakses variabel sebelum menginisialisasinya.

 ReferenceError: Cannot access 'name' before initialization

Jadi, di sini let dan const diperkenalkan di ES6, yang tidak dapat diakses sebelum diinisialisasi, seperti yang disarankan oleh kesalahan. Ini karena variabel yang dideklarasikan dengan let atau const akan berada di Temporal Dead Zone (TDZ) hingga barisnya diinisialisasi. Kami tidak dapat mengakses variabel dari TDZ.

Curry dalam JavaScript

Currying adalah teknik untuk mengonversi fungsi dengan banyak parameter menjadi lebih sedikit parameter dengan beberapa callable. Dengannya, kita dapat mengubah fungsi callable add(a, b, c, d) menjadi add(a)(b)(c)(d) callable. Mari kita lihat contoh cara melakukannya.

 function getCurryCallback(callback) { return function (a) { return function (b) { return function (c) { return function (d) { return callback(a, b, c, d); }; }; }; }; } function add(a, b, c, d) { return a + b + c + d; } const curriedAdd = getCurryCallback(add); // Calling the curriedAdd console.log(curriedAdd(1)(2)(3)(4));

Kita dapat menggeneralisasi getCurryCallback fungsi yang akan digunakan untuk fungsi yang berbeda untuk diubah menjadi callable kari. Anda dapat merujuk ke Info JavaScript untuk detail lebih lanjut.

Perbedaan antara dokumen dan jendela

window adalah objek paling atas di browser. Ini berisi semua info tentang jendela browser, seperti riwayat, lokasi, navigator, dll.; itu tersedia secara global dalam JavaScript. Kita dapat menggunakannya secara langsung dalam kode kita tanpa impor apapun. Kita dapat mengakses properti dan metode objek window tanpa window.

document adalah bagian dari objek window . Semua HTML yang dimuat di halaman web diubah menjadi objek dokumen. Objek dokumen mengacu pada elemen HTMLDocument khusus, yang akan memiliki properti dan metode berbeda seperti semua elemen HTML.

window objek mewakili jendela browser dan document mewakili dokumen HTML yang dimuat di jendela browser itu.

Perbedaan antara sisi klien dan sisi server

Sisi klien mengacu pada pengguna akhir yang menggunakan aplikasi. Sisi server mengacu pada server web tempat aplikasi dikerahkan.

Dalam terminologi frontend, kita dapat mengatakan browser di komputer pengguna sebagai sisi klien dan layanan cloud sebagai sisi server.

Perbedaan antara innerHTML dan innerText

Baik innerHTML dan innerText adalah properti dari elemen HTML. Kami dapat mengubah konten elemen HTML menggunakan properti ini.

Kita dapat menetapkan string HTML ke innerHTML properti yang dirender seperti HTML biasa. Periksa contoh di bawah ini.

 const titleEl = document.getElementById("title"); titleEl.innerHTML = '<span style="color:orange;">Geekflare</span>';

Tambahkan satu elemen dengan title id ke HTML Anda dan tambahkan skrip di atas ke file JavaScript. Jalankan kode dan lihat hasilnya. Anda akan Geekflare dalam warna oranye. Dan jika Anda memeriksa elemennya, itu akan berada di dalam tag span . Jadi innerHTML akan mengambil string HTML dan merendernya sebagai HTML biasa.

innerText di sisi lain akan mengambil string normal dan merendernya sebagaimana adanya. Itu tidak akan merender HTML apa pun seperti innerHTML . Ubah innerHTML menjadi innerText pada kode di atas dan periksa hasilnya.

 const titleEl = document.getElementById("title"); titleEl.innerText = '<span style="color:orange;">Geekflare</span>';

Sekarang, Anda akan melihat string persis yang kami sediakan di halaman web.

Perbedaan antara let dan var

Kata kunci let dan var digunakan untuk membuat variabel dalam JavaScript. Kata kunci let diperkenalkan di ES6.

let adalah cakupan blok dan var fungsi.

 { let a = 2; console.log("Inside block", a); } console.log("Outside block", a);

Jalankan kode di atas. Anda akan mendapatkan kesalahan pada baris terakhir karena kami tidak dapat mengakses let a di luar blok karena cakupan blok. Sekarang, ubah ke var dan jalankan lagi.

 { var a = 2; console.log("Inside block", a); } console.log("Outside block", a);

Anda tidak akan mendapatkan kesalahan apa pun karena kami juga dapat mengakses variabel a di luar blok. Sekarang, mari kita ganti blok dengan sebuah fungsi.

 function sample() { var a = 2; console.log("Inside function", a); } sample(); console.log("Outside function", a);

Anda akan mendapatkan kesalahan referensi jika Anda menjalankan kode di atas karena kami tidak dapat mengakses var a di luar fungsi karena itu dicakup oleh fungsi.

Kita dapat mendeklarasikan ulang variabel menggunakan kata kunci var tetapi kita tidak dapat mendeklarasikan ulang variabel menggunakan kata kunci let . Mari kita lihat contohnya.

 var a = "Geekflare"; var a = "Chandan"; console.log(a);
 let a = "Geekflare"; let a = "Chandan"; console.log(a);

Bagian pertama kode tidak akan menimbulkan kesalahan apa pun dan nilainya a akan diubah ke nilai yang ditetapkan terakhir. Bagian kode ke-2 akan menimbulkan kesalahan karena kami tidak dapat mendeklarasikan ulang variabel menggunakan let .

Perbedaan antara penyimpanan sesi dan penyimpanan lokal

Penyimpanan sesi dan penyimpanan lokal digunakan untuk menyimpan info di komputer pengguna yang dapat diakses tanpa internet. Kami dapat menyimpan pasangan nilai kunci di penyimpanan sesi dan penyimpanan lokal. Baik kunci maupun nilai akan dikonversi menjadi string jika Anda memberikan tipe data atau struktur data lainnya.

Penyimpanan sesi akan dihapus setelah sesi selesai (ketika browser ditutup). Penyimpanan lokasi tidak akan dihapus sampai kami menghapusnya.

Kita dapat mengakses, memperbarui, dan menghapus penyimpanan sesi dan penyimpanan lokasi masing-masing dengan objek sessionStorage dan localStorage .

Apa itu NaN dalam JavaScript?

NaN disingkat Not-a-Number . Ini menunjukkan bahwa ada sesuatu yang bukan nomor legal/valid dalam JavaScript. Ada beberapa kasus di mana kita akan mendapatkan NaN sebagai output seperti 0/0 , undefined * 2 , 1 + undefined , null * undefined dll.,

Apa itu pelingkupan leksikal?

Ruang lingkup leksikal mengacu pada mengakses variabel dari ruang lingkup induknya. Katakanlah kita memiliki fungsi dengan dua fungsi dalam. Fungsi terdalam dapat mengakses variabel lingkup kedua fungsi induknya. Demikian pula, fungsi tingkat 2 dapat mengakses ruang lingkup fungsi terluar. Mari kita lihat dalam sebuah contoh.

 function outermost() { let a = 1; console.log(a); function middle() { let b = 2; // `a` are accessible here console.log(a, b); function innermost() { let c = 3; // both `a` and `b` are accessible here console.log(a, b, c); } innermost(); } middle(); } outermost();

JavaScript menggunakan rantai cakupan untuk menemukan variabel saat kita mengaksesnya di suatu tempat dalam kode. Pertama, itu akan memeriksa variabel dalam lingkup saat ini, dan kemudian lingkup induk sampai lingkup global.

Apa yang diteruskan oleh nilai dan diteruskan oleh referensi?

Pass by value dan pass by reference adalah dua cara untuk meneruskan argumen ke fungsi dalam JavaScript.

Lewati nilai: ini membuat salinan data asli dan meneruskannya ke fungsi. Jadi, saat kami melakukan perubahan apa pun pada fungsi, itu tidak akan memengaruhi data asli. Periksa contoh di bawah ini.

 function sample(a) { // changing the value of `a` a = 5; console.log("Inside function", a); } let a = 3; sample(a); console.log("Outside function", a);

Anda akan melihat bahwa nilai asli dari a tidak berubah meskipun kita mengubahnya di dalam fungsi.

Lewati referensi: ini meneruskan referensi data ke fungsi. Jadi, ketika kita melakukan perubahan pada fungsi, itu juga akan mengubah data aslinya.

 function sample(arr) { // adding a new value to the array arr.push(3); console.log("Inside function", arr); } let arr = [1, 2]; sample(arr); console.log("Outside function", arr);

Anda akan melihat bahwa nilai asli dari arr diubah ketika kita mengubahnya di dalam fungsi.

Catatan: semua tipe data primitif diteruskan dengan nilai, dan non-primitif diteruskan dengan referensi.

Apa itu memoisasi?

Memoisasi adalah teknik yang menyimpan nilai yang dihitung dalam cache dan menggunakannya saat kita membutuhkannya lagi tanpa menghitungnya lagi. Ini akan mempercepat eksekusi kode jika perhitungannya sangat berat. Ada tradeoff penyimpanan yang bukan masalah besar dibandingkan dengan waktu.

 const memo = {}; function add(a, b) { const key = `${a}-${b}`; // checking whether we computed the value already or not if (memo[key]) { console.log("Not computing again"); return memo[key]; } // adding the newly computed value to cache // here cache is a simple global object memo[key] = a + b; return memo[key]; } console.log(add(1, 2)); console.log(add(2, 3)); console.log(add(1, 2));

Ini adalah contoh sederhana yang menunjukkan memoisasi. Di sini, menambahkan dua angka bukanlah perhitungan yang berat. Itu hanya untuk demo.

Apa parameter sisanya?

Parameter rest digunakan untuk mengumpulkan semua parameter yang tersisa dalam suatu fungsi. Katakanlah kita memiliki fungsi yang akan menerima minimal 2 argumen dan dapat menerima sejumlah parameter secara maksimal. Karena kita tidak memiliki jumlah argumen maksimum, kita dapat mengumpulkan 2 parameter pertama dengan variabel normal dan yang lainnya dengan parameter rest menggunakan operator rest .

 function sample(a, b, ...rest) { console.log("Rest parameter", rest); } sample(1, 2, 3, 4, 5);

Parameter rest akan menjadi array dari tiga argumen terakhir pada contoh di atas. Dengan ini, kita dapat memiliki sejumlah parameter untuk suatu fungsi.

Satu fungsi hanya dapat memiliki satu parameter istirahat. Dan parameter lainnya harus menjadi yang terakhir dalam urutan parameter.

Apa itu penghancuran objek?

Penghancuran objek digunakan untuk mengakses variabel dari objek dan menugaskannya ke variabel dengan nama yang sama dengan kunci objek. Mari kita lihat contohnya.

 const object = { a: 1, b: 2, c: 3 }; // Object destructuring const { a, b, c } = object; // Now, a, b, c will be used as normal variables console.log(a, b, c);

Kita dapat mengubah variabel dari variabel yang didestrukturisasi pada baris yang sama seperti berikut.

 const object = { a: 1, b: 2, c: 3 }; // Changing the names of `a` and `b` const { a: changedA, b: changedB, c } = object; // Now, changedA, changedB, c will be used as normal variables console.log(changedA, changedB, c);

Apa itu penghancuran array?

Destrukturisasi array digunakan untuk mengakses variabel dari array dan menugaskannya ke variabel. Mari kita lihat contohnya.

 const array = [1, 2, 3]; // Array destructuring // It's based on the index of the array const [a, b, c] = array; // Now, we can use a, b, c as normal variables console.log(a, b, c);

Apa itu event capture dan event bubbling?

Penangkapan acara dan gelembung acara adalah dua cara propagasi acara di HTML DOM. Katakanlah ada dua elemen HTML, satu di dalam yang lain. Dan suatu peristiwa terjadi pada elemen dalam. Sekarang, mode propagasi event akan menentukan urutan eksekusi event ini.

Gelembung peristiwa: ia menjalankan penangan peristiwa pada elemen terlebih dahulu, lalu elemennya, dan kemudian berlanjut ke elemen paling atas. Ini adalah perilaku default dari semua peristiwa.

Penangkapan acara: kita perlu menentukan apakah kita perlu menggunakan jenis propagasi acara ini. Kami dapat menentukannya sambil menambahkan pendengar acara. Acara akan dijalankan dalam urutan berikut jika kami mengaktifkan penangkapan acara.

  1. Acara mulai dijalankan dari elemen paling atas hingga elemen target ke bawah.
  2. Acara pada elemen target akan dieksekusi lagi.
  3. Propagasi peristiwa gelembung akan kembali terjadi hingga elemen paling atas habis.

Kita dapat menghentikan propagasi event dengan memanggil event.stopPropogation sebuah metode di event handler.

Apa Janji dalam JavaScript?

Promise objek digunakan untuk operasi asinkron yang akan selesai di masa mendatang dengan status sukses atau gagal.

Promise dapat berada di salah satu status berikut.

  1. pending – saat operasi masih berlangsung.
  2. fulfilled - ketika operasi selesai dengan sukses. Kami akan mendapatkan hasil (jika ada) dalam status sukses.
  3. rejected – ketika operasi selesai dengan kegagalan. Kami akan memiliki alasan (kesalahan) mengapa gagal.

Mari kita lihat dua contoh kasus sukses dan gagal.

 // Promise which will complete successfully const successPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve({ message: "Completed successfully" }); }, 300); }); successPromise .then((data) => { console.log(data); }) .catch((error) => { console.log(error); }); // Promise which will complete with failure state const failurePromise = new Promise((resolve, reject) => { setTimeout(() => { reject(new Error("Failing the promise for testing")); }, 300); }); failurePromise .then((data) => { console.log(data); }) .catch((error) => { console.log(error); });

Anda dapat memiliki lebih dari satu then merantai jika diperlukan. Data yang dikembalikan sebelumnya akan diterima di callback then .

Jelaskan berbagai jenis ruang lingkup dalam JavaScript

Ada dua jenis cakupan dalam JavaScript. Ruang lingkup global dan ruang lingkup lokal .

Anda mungkin pernah mendengar tentang cakupan fungsi dan cakupan blok juga. Mereka adalah cakupan lokal untuk masing-masing var dan let , const .

Apa itu fungsi pemanggilan sendiri?

Fungsi pemanggilan sendiri adalah fungsi tanpa nama yang akan dijalankan segera setelah dibuat. Mari kita lihat beberapa contoh.

 // Without any parameters (function sayHello() { console.log("Hello, World!"); })(); // With parameters (function add(a, b) { console.log("Sum", a + b); })(1, 2);

Kami bahkan dapat meneruskan argumen ke fungsi pemanggilan sendiri seperti yang Anda lihat dalam contoh.

Apa itu fungsi panah?

Fungsi panah adalah gula sintaksis ke fungsi normal dengan beberapa perubahan. Mereka berperilaku seperti fungsi normal dalam kasus penggunaan umum. Fungsi panah sangat berguna saat kita harus melakukan panggilan balik. Mari kita lihat sintaksnya.

 // arrow functions will return by default if it doesn't have any brackets let add = (a, b) => a + b; console.log(add(1, 2));

Ada beberapa perbedaan antara fungsi panah dan fungsi normal.

  • Fungsi panah tidak memiliki pengikatan this sendiri. Kata kunci this di dalam fungsi panah mengacu pada ruang lingkup induknya this .
  • Fungsi panah tidak dapat digunakan sebagai fungsi konstruktor

Apa itu callback?

Callback adalah fungsi yang diteruskan ke fungsi lain yang dipanggil di dalam fungsi itu. Menggunakan panggilan balik adalah hal yang umum dalam JavaScript. Mari kita lihat contohnya.

 function sample(a, b, callback) { const result = a + b; callback(result); } function finished(result) { console.log("Finished with", result); } sample(1, 2, finished);

Fungsi finished diteruskan sebagai panggilan balik ke sample . Fungsi yang sudah finished dipanggil dengan hasilnya setelah melakukan beberapa tindakan. Anda akan melihat sebagian besar penggunaan panggilan balik dalam operasi asinkron seperti janji, setTimeout, dll.,

Apa saja jenis kesalahan yang berbeda?

Mari kita periksa beberapa kesalahan dalam JavaScript.

ReferenceError : error ini akan terjadi jika variabel yang kita akses tersedia.

TypeError: JavaScript akan membuang kesalahan ini jika kesalahan tidak cocok dengan jenis kesalahan lainnya. Itu juga akan terjadi ketika kami mencoba melakukan tindakan yang tidak kompatibel dengan data.

SyntaxError: kesalahan ini akan terjadi jika sintaks JavaScript tidak benar.

Ada beberapa jenis kesalahan lainnya juga. Tapi ini adalah jenis kesalahan umum dalam JavaScript.

Apa cakupan variabel yang berbeda dalam JavaScript?

Ada dua cakupan variabel dalam JavaScript. Variabel yang dideklarasikan menggunakan kata kunci var akan memiliki function scope, dan variabel yang dideklarasikan dengan let dan const akan memiliki block scope .

Lihat pertanyaan ke-17 untuk detail lebih lanjut tentang ruang lingkup variabel-variabel ini.

Apa karakter pelarian dalam JavaScript?

Garis miring terbalik adalah karakter pelarian dalam JavaScript. Ini digunakan untuk mencetak beberapa karakter khusus yang tidak dapat kami cetak secara umum. Katakanlah kita ingin mencetak apostrophe (') di dalam sebuah string yang tidak dapat kita lakukan secara normal karena string akan berakhir pada apostrof kedua. Dalam hal ini, kita akan menggunakan karakter escape untuk menghindari mengakhiri string pada saat itu.

 const message = 'Hi, I\'m Geekflare'; console.log(message);

Kita dapat mencapai keluaran di atas tanpa menggunakan karakter escape dengan mengganti apostrof tunggal di luar dengan apostrof ganda. Tapi itu hanya contoh bagaimana menggunakan karakter pelarian. Ada karakter lain yang pasti membutuhkan karakter pelarian seperti \n , \t , \\ dll.,

Apa itu BOM dan DOM?

Browser Object Model (BOM): semua browser memiliki BOM yang mewakili jendela browser saat ini. Ini berisi objek jendela paling atas kami yang digunakan untuk memanipulasi jendela browser.

Document Object Model (DOM): browser membuat DOM saat HTML dimuat dalam struktur pohon. Kita dapat memanipulasi elemen HTML menggunakan DOM API.

Apa itu objek layar?

Objek layar adalah salah satu properti dari objek jendela global. Ini berisi berbagai properti layar tempat jendela browser saat ini ditampilkan. Beberapa propertinya adalah width , height , orientation , pixelDepth , dll.

Kesimpulan

Mungkin ada pertanyaan lanjutan untuk semua pertanyaan di atas. Jadi, Anda perlu menyiapkan konsep seputar semua pertanyaan di atas.

Anda juga dapat menjelajahi beberapa pertanyaan dan jawaban wawancara Java yang sering diajukan.

Selamat Belajar