27 Pertanyaan & Jawaban Wawancara Pengembang Front End Teratas
Diterbitkan: 2021-11-02Pengembangan front-end adalah salah satu bidang yang paling menguntungkan, terutama bagi pemula dalam pengembangan web. Karena sebagian besar membutuhkan keterampilan dasar seperti HTML, CSS, JavaScript, dan sedikit pengetahuan server, banyak mahasiswa baru menemukan pengembangan front-end sebagai titik awal yang baik untuk berkarir dalam pengembangan tumpukan penuh.
Namun, masalahnya adalah pengembangan front-end sangat luas dan mencakup banyak alat dan teknik yang berbeda. Akibatnya, pertanyaan wawancara untuk peran pengembang front-end cukup beragam dan menjangkau berbagai domain.
Daftar isi
Pertanyaan & Jawaban Wawancara Pengembang Front End
mari kita lihat 27 pertanyaan wawancara pengembang front-end yang paling banyak ditanyakan. Baca artikel ini sekarang, dan tandai untuk nanti – untuk direvisi sebelum tanggal wawancara Anda!
1. Apa itu DOCTYPE, dan apa fungsinya?
DOCTYPE dikaitkan dengan DTD (Document Type Definition) dan merupakan singkatan dari Document Type. Ini memungkinkan pengembang untuk memberi tahu browser tentang versi HTML yang digunakan dalam dokumen tertentu. Misalnya, deklarasi untuk HTML 4 akan menjadi – <!DOCTYPE HTML4>.
2. Apa relevansi tag Meta dalam HTML?
Tag meta berada di dalam tag <head> dan menyediakan metadata tentang seluruh dokumen HTML. Mereka melakukan tugas menentukan spesifikasi seperti kumpulan karakter halaman, deskripsi halaman, bahasa halaman, nama penulis halaman, dll. Berikut ini contoh penggunaan tag Meta:
<!DOCTYPE html>
<html>
<kepala>
<meta charset="utf-8″>
<meta name=”viewport” content="width=device-width, initial-scale=1″>
<meta name=”Kata Kunci” content=”Pertanyaan wawancara pengembang front-end, CSS, HTML, JavaScript”>
<title>Pertanyaan dan Jawaban Wawancara Awal</title>
</head>
<tubuh>
</tubuh>
</html>
3. Apa yang Anda pahami tentang Lazy Loading?
Lazy loading adalah salah satu teknik untuk memuat konten di browser sesuai kebutuhan pengguna. Ini mengoptimalkan pemanfaatan sumber daya dan penggunaan server. Contoh nyata dari hal ini dapat dilihat dengan aplikasi eCommerce seperti Flipkart atau Amazon. Saat Anda mencari produk tertentu di situs ini, Anda hanya bisa melihat detail (harga, gambar, fitur utama) untuk elemen yang tersedia hanya di lipatan pertama. Kemudian, saat Anda menggulir ke bawah, elemen di bawah ini terus dimuat saat dan saat dibutuhkan.
4. Apa yang Anda ketahui tentang Pemaksaan dalam JavaScript?
Pemaksaan adalah metode untuk mengubah tipe data variabel. Menggunakan paksaan, Anda dapat mengubah objek menjadi boolean, string menjadi angka, dan seterusnya. Berikut sepotong kode untuk menjelaskannya dengan lebih baik:
var x= 23;
var y = String(x);
jenis(x)
jenis(y)
Output untuk kode ini adalah Number dan String, yang menyiratkan bahwa tipe data variabel x adalah Number, dan setelah dipaksa, tipe data berubah menjadi String.
JavaScript mendukung dua jenis paksaan:
- Implisit: Dalam hal ini, JavaScript sendiri akan mengubah tipe data variabel.
Misalnya: var x = 10;
var y = x + '01';
Dalam hal ini, nilai y akan menjadi '1001', dan tipe datanya adalah String. JavaScript secara implisit mengubah tipe data Number dari x menjadi String untuk menggabungkannya menjadi string baru '01', menghasilkan '1001' sebagai hasil akhir dalam variabel y.
- Eksplisit: Pemaksaan eksplisit mengharuskan pengembang untuk secara sengaja mengubah tipe data menggunakan fungsi bawaan seperti Number(), Boolean(), String, dan semacamnya.
Misalnya: var x = 12;
var y = String(x);
Pada kode di atas, tipe data variabel x telah diubah secara eksplisit dari Number menjadi String.
5. Apa yang Anda pahami tentang Lingkup Variabel dalam JavaScript?
Lingkup variabel digunakan untuk mengatur wilayah, atau ruang lingkup, kontrol variabel apa pun dalam program JavaScript tertentu. Ada dua jenis Lingkup Variabel dalam JavaScript:
- Lingkup Lokal: Lingkup lokal menyiratkan bahwa aksesibilitas dan ketersediaan variabel itu terbatas pada fungsi di mana variabel itu didefinisikan.
Sebagai contoh:
fungsi jumlah() {
var x = 5;
var y = 2;
}
fungsi jugaJumlah()
{
var z = x+y;
}
Dalam kode di atas, fungsi kedua tidak akan dijalankan dengan benar karena variabel x dan y termasuk dalam lingkup fungsi sum() – mereka lokal untuk lingkup itu. Jadi, variabel lain tidak memiliki akses ke x dan y, sehingga fungsi ini salah.
- Lingkup Global: Lingkup global adalah untuk variabel yang didefinisikan di luar semua fungsi. Dalam kasus seperti itu, fungsi apa pun dapat mengakses variabel.
Sebagai contoh:
var x = 2; // itu adalah variabel global
fungsi jumlah() {
var z = 3;
var y = x + z;
}
Karena variabel x memiliki cakupan global dalam kode di atas, fungsi sum() memiliki akses ke sana. Itu sebabnya variabel y mendapat nilai 5 (x+z), dan fungsi ini berjalan seperti yang diharapkan.
6. Untuk apa Node.JS digunakan?
Node.JS adalah lingkungan runtime JavaScript yang bersifat open-source. Ini dengan lancar memungkinkan eksekusi kode JS di server itu sendiri. Sebelum Node.JS, kode JavaScript akan berjalan di browser, tetapi NOde mengubahnya sepenuhnya. Saat ini, Node.JS banyak digunakan dalam pengembangan full-stack untuk menangani bagian server. Ini memungkinkan pengembang untuk bekerja menggunakan satu bahasa (JavaScript) di semua ujung aplikasi web (menggunakan tumpukan MEAN, misalnya, Anda dapat melakukan pengembangan tumpukan penuh hanya menggunakan bahasa JS, kerangka kerja yang berbeda!)
7. Jelaskan NPM
Singkatan dari Node Package Manager, NPM adalah alat paket untuk Node.JS. Ini menawarkan repositori online untuk proyek Node dan utilitas baris perintah untuk mengelola dan bekerja dengan paket yang berbeda. Untuk mengakses atau menggunakan paket Node.JS tertentu, NPM dapat dipanggil dan digunakan.
8. Bagaimana cara kerja server dengan halaman web atau aplikasi yang memiliki konten multibahasa?
Saat pengguna mengakses situs-situs tersebut, browser pengguna mengirimkan informasi terkait dengan pilihan bahasa pengguna. Ini dilakukan dengan menggunakan header Accept-Language. Server membaca dan menggunakan informasi ini untuk mengirim kembali bahasa dalam bahasa yang benar.
9. Apa atribut data-* dalam HTML, dan apakah dianjurkan untuk menggunakannya sekarang?
Atribut Data-* digunakan untuk menyimpan kustom yang bersifat pribadi ke halaman web. Ini digunakan untuk membantu pengembang men-debug situs web atau membuat perubahan pribadi. Penggunaan atribut data-* tidak dianjurkan karena sekarang dimungkinkan untuk melakukan hal yang sama hanya dengan menggunakan konsol inspeksi di browser.
10. Apa itu IIFE dalam JavaScript?
IIFE, kependekan dari Ekspresi Fungsi Segera Dipanggil, adalah teknik untuk mengeksekusi fungsi segera setelah dibuat. Biasanya digunakan untuk mengisi objek atau variabel global.
11. Apakah Anda tahu tentang React.JS?
Ya – React adalah library JavaScript yang digunakan untuk membangun front-end (UI) aplikasi web satu halaman. Ini dikembangkan oleh Facebook dan terutama digunakan untuk menangani tampilan depan aplikasi seluler dan web mereka.
12. JS/CSS Eksternal atau JS/CSS inline – mana yang lebih disukai dan mengapa?
Pengkodean sebaris meningkatkan ukuran dokumen, yang menyebabkan eksekusi kode lebih lambat. Dengan pengkodean sebaris, browser pengguna kehilangan kemampuan untuk men-cache kode CSS dan JS dan menyimpannya untuk eksekusi yang lebih cepat. Di sisi lain, browser dapat meng-cache file dengan CSS dan JS eksternal, yang mengarah pada peningkatan waktu buka halaman.
13. Jelaskan penggunaan kata kunci 'does' dalam JavaScript
Konsep kata kunci 'does' mirip dengan Dynamic Binding dalam teknik pemrograman tingkat tinggi lainnya. Ini digunakan untuk merujuk ke objek yang terkait dengannya.
Sebagai contoh:
var siswa = {
fNama: “Sam”,
lNama : “Harris”,
nomor : 2123,
nama lengkap : fungsi() {
return this.fName + ” ” + this.lName;
}
};
Dalam contoh di atas, this.firstname akan mengembalikan nilai variabel 'firstName' yang disimpan dalam fungsi 'this', yaitu Sam. Fungsi fullName() akan mengembalikan output "Sam Harris," menggabungkan nama depan dan belakang. Ini adalah properti yang berguna ketika berhadapan dengan kode besar dengan banyak fungsi dan nama variabel yang serupa.
14. Apa yang anda ketahui tentang SQL Injection?
SQL Injection adalah teknik untuk memasukkan kode berbahaya ke dalam formulir input untuk mendapatkan akses ke database SQL situs web. Ini adalah salah satu teknik peretasan yang paling dipraktikkan dan terkenal, dan situs web apa pun yang dirancang dengan buruk dan tidak mengambil tindakan perlindungan server yang ketat dapat dengan mudah menjadi mangsa SQL Injection.
15. Jelaskan semua elemen Model Kotak CSS
Model Kotak di CSS memiliki empat elemen:
- Konten: Ini mencakup konten utama, termasuk semua teks, gambar, dan semua hal lain di halaman web.
- Padding: Padding dapat dipahami sebagai ruang antara area konten dan batas luar halaman. Anggap saja sebagai ruang bernafas dari konten halaman web.
- Border: Border adalah area yang menutupi padding. Ini adalah lapisan luar padding .
- Margin: Margin terletak di luar batas dan digunakan untuk mengukur jarak antara tepi halaman HTML dan batas layar pengguna untuk memastikan orientasi halaman yang benar.
Silakan lihat gambar di bawah ini untuk mendapatkan kejelasan lebih lanjut tentang empat istilah:
16. Apa itu 'mixin' di CSS dan bagaimana implementasinya?
Mixin digunakan untuk mengatur pola pasangan nilai properti yang dapat digunakan kembali. Penulis kode menggunakannya untuk menyederhanakan kode.
Sebagai contoh:
@campuran .rounded10px {
-moz-border-radius: 10px;
}
Dalam hal ini, '.rounded10px' dapat digunakan di mana saja dalam kode HTML untuk mengimplementasikan pernyataan '-Moz-border-radius: 10px;'. Ini memberikan banyak portabilitas dan keterbacaan ke kode CSS.
17. Apa yang kamu ketahui tentang SASS?
SASS adalah kependekan dari Syntactically Awesome Stylesheets. Ini adalah preprocessor untuk CSS, yang digunakan untuk mengoptimalkan kode CSS. Ini memperkenalkan fitur seperti aturan bersarang, mixin, variabel, impor sebaris, dan banyak lagi untuk mengatur kode CSS dengan cara yang jauh lebih baik dan menggunakan beberapa kode CSS secara bersamaan, dengan menggunakan konsep matematika. Browser tidak dapat mengeksekusi file SASS, jadi file tersebut harus diubah terlebih dahulu menjadi CSS sebelum dikirim ke browser.
18. Bedakan antara cookie, penyimpanan lokal, dan penyimpanan sesi.
Cookie, penyimpanan lokal, dan penyimpanan sesi adalah tiga cara browser menyimpan informasi untuk pemrosesan dan pengambilan yang lebih cepat. Silakan lihat tabel di bawah ini untuk mendapatkan pemahaman yang komprehensif tentang bagaimana ketiga teknik ini berbeda di berbagai metrik.
Metrik | Kue kering | Penyimpanan lokal | Penyimpanan Sesi |
waktu kedaluwarsa | Tidak ada. Tetapi dapat dihancurkan secara manual oleh pengguna atau diatur oleh pengembang untuk situs web khusus mereka. | Tidak ada. | Kedaluwarsa secara otomatis di akhir setiap sesi. |
Kegigihan di beberapa sesi | Tergantung apakah developer sudah menetapkan waktu kadaluarsa atau tidak. | Ya, ini berlanjut di beberapa sesi. | Tidak, ini dihancurkan secara otomatis sehingga tidak bertahan di seluruh sesi. |
Komunikasi dengan server | Secara otomatis dikirim ke header melalui 'Cookie Header'. | Tidak ada komunikasi dengan server. | Tidak ada komunikasi dengan server. |
Kemampuan penyimpanan | 4kb | 5MB | 5MB |
| Aksesibilitas | Semua jendela | Semua jendela | Hanya tab yang sama |
Metrik
Kue kering
Penyimpanan lokal
Penyimpanan Sesi
waktu kedaluwarsa
Tidak ada. Tetapi dapat dihancurkan secara manual oleh pengguna atau diatur oleh pengembang untuk situs web khusus mereka.
Tidak ada.
Kedaluwarsa secara otomatis di akhir setiap sesi.
Kegigihan di beberapa sesi
Tergantung apakah developer sudah menetapkan waktu kadaluarsa atau tidak.
Ya, ini berlanjut di beberapa sesi.
Tidak, ini akan dimusnahkan secara otomatis, sehingga tidak bertahan di seluruh sesi.
Komunikasi dengan server
Secara otomatis dikirim ke header melalui 'Cookie Header'.
Tidak ada komunikasi dengan server.
Tidak ada komunikasi dengan server.
Kemampuan penyimpanan
4kb
5MB
5MB
Aksesibilitas
Semua jendela
Semua jendela
Hanya tab yang sama
19. Apa yang kamu ketahui tentang Progressive Rendering?
Progressive Rendering mengacu pada metode yang digunakan untuk meningkatkan proses rendering konten halaman web mana pun. Hal ini berguna untuk mengoptimalkan penggunaan data seluler bagi pengguna. Rendering Progresif mencakup konsep seperti pemuatan lambat, HTML asinkron, memprioritaskan konten yang terlihat, dan banyak lagi.
20. Jelaskan penggunaan atribut 'srcset' pada tag <img>
'srcset' digunakan untuk merender resolusi berbeda dari gambar yang sama – berdasarkan browser atau perangkat yang berbeda. Ini digunakan untuk meningkatkan pengalaman pengguna dan memastikan bahwa mereka melihat resolusi terbaik dari gambar terkait dengan perangkat yang mereka lihat. Dengan menggunakan srcset, kami dapat memastikan bahwa browser menampilkan gambar berkualitas tinggi pada perangkat beresolusi baik dan browser serta gambar beresolusi rendah pada perangkat lain. Ini adalah bagaimana hal itu dapat digunakan:
<img srcset="picture_low_quality.jpg 480w,
picture_high_quality.jpg 800w”
ukuran="(lebar maks: 600px) 480px,
800 piksel”
src="picture_high_quality.jpg">
21. Apa bahasa templating yang mengacu pada HTML?
Bahasa templating adalah bahasa placeholder yang membantu pengguna memasukkan data ke dalam dokumen HTML apa pun. Berbagai bahasa templating bekerja bersama kerangka kerja back-end. Misalnya, Jinja adalah salah satu bahasa templating populer yang bekerja dengan kerangka kerja Django Flask dengan Python. Slim adalah bahasa templating lain yang digunakan untuk Ruby dan Rails.
22. Jelaskan variabel 'float' dalam CSS.
Float digunakan untuk memposisikan elemen dalam arti relatif. Ini mendefinisikan bagaimana elemen tertentu harus 'mengambang' di viewport sesuai dengan ukuran perangkat yang berbeda. Ini digunakan untuk menjaga daya tanggap halaman web, dan menggunakan float adalah praktik yang disarankan.
23. Mengapa tag <span> dan <div> digunakan?
Tag <span> sebagian besar digunakan untuk elemen sebaris sedangkan tag <div> digunakan untuk blok. Tag ini tidak memiliki arti yang melekat tetapi dapat digunakan untuk menentukan blok atau potongan kode sebaris dalam dokumen HTML untuk menata atau memformatnya secara berbeda dan memiliki kontrol yang lebih besar terhadapnya. Sebagai contoh:
<div id="info">
<p>Hubungi <span class="name">upGrad</span> untuk <span class="courses"> kursus pengembangan front-end dan pengembangan full-stack</span></p>
</div>
Pada potongan kode di atas, kita telah mendefinisikan dua buah <span>s. Satu untuk nama (upGrad), dan yang lainnya untuk kursus. Dengan begitu, kami memiliki kontrol lebih besar atas dua bagian kode ini dan dapat memformatnya dengan cara lain untuk membuatnya menonjol.
24. Bagaimana MongoDB berbeda dari MySQL?
MySQL adalah DBMS relasional yang menggunakan SQL sebagai bahasa untuk mengelola semua operasi yang berhubungan dengan database. Menjadi RDBMS, ia menggunakan struktur seperti tabel untuk menyimpan dan memanipulasi data. Di sisi lain, MongoDB adalah database NoSQL yang menggunakan format seperti JSOL file datar untuk menyimpan semua data. Untuk memodifikasi elemen di MongoDB, pengembang perlu menggunakan MQL (MongoDB Query Language).
25. Apa yang Anda ketahui tentang Fungsi Anonim dalam JavaScript?
Dalam skenario normal, pertama, nama fungsi ditentukan, lalu badan fungsi. Dalam fungsi anonim, di sisi lain, nama fungsi tidak didefinisikan. Hanya variabel dan operator penugasan yang digunakan, dan fungsi disimpan sebagai objek. Kemudian, dengan menggunakan variabel, kita dapat memanggil fungsi tersebut. Sebagai contoh:
var add = function(a,b){ console.log(a+b)}
tambahkan(4,5);
Dalam contoh di atas, fungsinya anonim dan mencetak output yang benar 9.
26. Kapan AJAX digunakan?
AJAX adalah kependekan dari Asynchronous JavaScript dan SML, dan memfasilitasi komunikasi server web dan browser pengguna. AJAX bukan bahasa pemrograman. Ini digunakan untuk memuat dan mengirim data ke dan dari browser pengguna bahkan setelah halaman dimuat. Ini adalah alat yang ampuh untuk memperbarui data pada halaman pengguna tanpa pengguna harus me-refresh halaman. Intinya, AJAX memungkinkan penyegaran dan pembaruan halaman secara real-time.
27. Bagaimana Anda memastikan bahwa situs web atau aplikasi Anda ramah pengguna?
Untuk memastikan bahwa situs web atau aplikasi web benar-benar ramah pengguna, pengembang front-end perlu bekerja sama dengan desainer UX (Pengalaman Pengguna) untuk membuat konsep halaman web yang memecahkan masalah audiens yang dituju. Tujuannya adalah untuk menciptakan pengalaman yang berpusat pada pengguna dengan alur desain, konten, dan struktur halaman yang optimal di berbagai browser dan layar.
Kesimpulannya
Pertanyaan-pertanyaan di atas adalah untuk memberi Anda gambaran tentang luasnya pertanyaan yang dapat dicakup oleh wawancara Anda. Karena front-end adalah tugas yang menggabungkan berbagai keterampilan seperti mendesain, HTML, CSS, JavaScript, AJAX, dan banyak lagi, Anda akan ditanyai pertanyaan tentang semua keterampilan yang relevan.
Jika Anda tidak yakin dengan keterampilan Anda atau ingin berkembang sebagai pengembang front-end, Anda berada di tempat yang tepat. Di upGrad, kami menawarkan Program dalam Rekayasa Perangkat Lunak yang memandu Anda melalui seluruh proses pengembangan front-end dan back-end dan memberi Anda semua alat dan keterampilan yang diperlukan untuk unggul dalam dunia pengembangan full-stack. Daftarkan diri Anda dan mulailah perjalanan Anda hari ini!
Apa yang tercakup dalam pengembangan front-end?
Seperti namanya, pengembangan front-end berkaitan dengan front-end atau layar rendering dari aplikasi web apa pun. Untuk itu, diperlukan keterampilan dan pengetahuan tentang HTML, CSS, JavaScript dan framework-nya, AJAX, manajemen server.
Siapa yang bisa mendapatkan pekerjaan di front-end development?
Praktis siapa pun yang tertarik dalam pengembangan web dan dengan rasa desain dapat memperoleh keterampilan yang dibutuhkan untuk memulai dan unggul dalam karir dalam pengembangan web.
Bisakah pengembang front-end nantinya menjadi pengembang full-stack?
Pastinya. Saat Anda mendapatkan lebih banyak pengalaman sebagai pengembang front-end, Anda perlahan-lahan akan mulai mengambil konsep tumpukan penuh juga, karena Anda juga akan bekerja sama dengan pengembang back-end. Pengetahuan itu akan membantu Anda bertransisi dari front-end developer ke full-stack developer.